bychloethemes

You've Got Something (Multi-sized Posts) Theme - by Chloe

Nov 26th, 2015
445
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.47 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <!------------------------------------------
  5. _ _ _
  6. | |__ _ _ ___| |__ | | ___ ___
  7. | '_ \| | | | / __| '_ \| |/ _ \ / _ \
  8. | |_) | |_| | | (__| | | | | (_) | __/
  9. |_.__/ \__, | \___|_| |_|_|\___/ \___|
  10. |___/
  11.  
  12. You've Got Something (Multi-Size Posts) Theme by Chloe | @dontbrag | @themekid
  13.  
  14. > Do not delete any of the credit.
  15. > Do not claim as your own.
  16. > Do not copy any ideas or code.
  17. > Do not redistribute.
  18.  
  19. ------------------------------------------->
  20. <meta name="image:Background" content="http://static.tumblr.com/b879f6f077133de33d3aa4b0f01ab261/yxfeliq/9K0nsiqdp/tumblr_static_bt8btiyybpk40wkk8kso0gock.png" />
  21.  
  22. <meta name="color:Background" content="#fff" />
  23. <meta name="color:Scrollbar" content="#000" />
  24. <meta name="color:Scrollbar Background" content="#9cdfed" />
  25. <meta name="color:Blog Border" content="#9cdfed" />
  26. <meta name="color:header Text" content="#000" />
  27. <meta name="color:header Links" content="#000" />
  28. <meta name="color:Text" content="#000" />
  29. <meta name="color:Links" content="#666" />
  30. <meta name="color:Post Backgrounds" content="#fff" />
  31. <meta name="color:Post Borders" content="#666" />
  32. <meta name="color:Post Accent" content="#eee" />
  33.  
  34. <meta name="if:Tiled Background" content="1"/>
  35. <meta name="if:Sign Off Asks" content="" />
  36.  
  37. <meta name="text:Link 1" content="" />
  38. <meta name="text:URL 1" content="" />
  39. <meta name="text:Link 2" content="" />
  40. <meta name="text:URL 2" content="" />
  41. <meta name="text:Link 3" content="" />
  42. <meta name="text:URL 3" content="" />
  43. <meta name="text:Ask Sign Off" content="your name xx" />
  44.  
  45. {block:Description}
  46. <meta name="description" content="{MetaDescription}" />
  47. {/block:Description}
  48. <meta charset="utf-8">
  49. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  50. <title>{block:TagPage}{Tag} posts | {/block:TagPage} {block:PostSummary}{PostSummary} | {/block:PostSummary}{Title}</title>
  51. <title>{text:Tab Title}</title>
  52. <link rel="shortcut icon" href="{Favicon}">
  53. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  54. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  55. <link href="http://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  56. <link href='https://fonts.googleapis.com/css?family=Raleway:400,600' rel='stylesheet' type='text/css'>
  57. <link href='https://fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='stylesheet' type='text/css'>
  58. <style type="text/css">
  59. #tumblr_controls {
  60. -webkit-filter: invert(100%);
  61. }
  62. ::-webkit-scrollbar {
  63. background-color: {color:Scrollbar Background};
  64. height: 5px;
  65. width: 5px;
  66. }
  67. ::-webkit-scrollbar-thumb {
  68. background-color: {color:Scrollbar};
  69. width: 5px;
  70. height: 5px;
  71. }
  72. #tumblr_controls {
  73. right:12px!important;
  74. top:12px!important;
  75. position:fixed!important;
  76. margin: 0 0 0 0!important;
  77. }
  78. body {
  79. background: {color:Background} url('{image:Background}'){block:IfNotTiledBackground}
  80. no-repeat center center fixed;
  81. -webkit-background-size: cover;
  82. -moz-background-size: cover;
  83. -o-background-size: cover;
  84. background-size: cover;
  85. {/block:IfNotTiledBackground}
  86. {block:IfTiledBackground}
  87. repeat fixed;
  88. {/block:IfTiledBackground}
  89. color: {color:Text};
  90. font-family: 'Raleway', sans-serif;
  91. font-size: 12px;
  92. margin: 0;
  93. padding: 0;
  94. }
  95. iframe, img, embed, object, video {
  96. max-width: 100%;
  97. }
  98. img {
  99. height: auto;
  100. width: auto;
  101. vertical-align:middle;
  102. }
  103. blockquote {
  104. border-left:1px solid {color:Post Borders};
  105. margin:0 0 0 15px;
  106. padding:0 0 0 5px;
  107. }
  108. a:link, a:visited {
  109. color:{color:Links};
  110. text-decoration:none;
  111. }
  112. a:hover, a:active {
  113. text-decoration:line-through;
  114. }
  115. a:focus {
  116. outline:none;
  117. }
  118. b, strong {
  119. font-weight:600;
  120. }
  121. hr {
  122. height:1px;
  123. background:{color:Post Borders};
  124. border:0;
  125. }
  126. h1 {
  127. font-weight:400;
  128. }
  129. cite {
  130. margin-top:3px;
  131. display:block;
  132. text-align:right;
  133. }
  134. #topping {
  135. position:fixed;
  136. z-index:999999999;
  137. width:100%;
  138. height:10px;
  139. left:0px;
  140. top:0px;
  141. }
  142. #lefting {
  143. position:fixed;
  144. z-index:999999999;
  145. width:10px;
  146. height:100%;
  147. left:0px;
  148. top:0px;
  149. }
  150. #righting {
  151. position:fixed;
  152. z-index:999999999;
  153. width:10px;
  154. height:100%;
  155. right:0px;
  156. top:0px;
  157. }
  158. #botting {
  159. position:fixed;
  160. z-index:999999999;
  161. width:100%;
  162. height:10px;
  163. left:0px;
  164. bottom:0px;
  165. }
  166. #botting, #righting, #lefting, #topping {
  167. background:{color:Blog Border};
  168. }
  169. .credit {
  170. width:14px;
  171. height:13px;
  172. color: {color:Post Borders};
  173. position:fixed;
  174. bottom: 15px;
  175. right: 15px;
  176. line-height: 14px;
  177. font-size:12px;
  178. text-transform: uppercase;
  179. padding:3px 4px;
  180. overflow: hidden;
  181. z-index:999999999999999999;
  182. text-align:left;
  183. -webkit-transition: all 0.5s ease-in-out;
  184. -moz-transition: all 0.5s ease-in-out;
  185. -o-transition: all 0.5s ease-in-out;
  186. transition: all 0.5s ease-in-out;
  187. }
  188. .fa {
  189. right:4px;
  190. position:absolute;
  191. }
  192. .credit:hover {
  193. width:90px;
  194. background:#000;
  195. color:#fff;
  196. -webkit-transition: all 0.5s ease-in-out;
  197. -moz-transition: all 0.5s ease-in-out;
  198. -o-transition: all 0.5s ease-in-out;
  199. transition: all 0.5s ease-in-out;
  200. }
  201. .credit a {
  202. color:#fff;
  203. text-decoration: none;
  204. }
  205. .credit .mine {
  206. opacity:0;
  207. visibility:hidden;
  208. }
  209. .credit:hover .mine {
  210. opacity: 1;
  211. visibility: visible;
  212. -webkit-transition: all 0.5s ease-in-out 0.5s;
  213. -moz-transition: all 0.5s ease-in-out 0.5s;
  214. -o-transition: all 0.5s ease-in-out 0.5s;
  215. transition: all 0.5s ease-in-out 0.5s;
  216. }
  217. .header {
  218. width:600px;
  219. padding:10px;
  220. margin:30px auto;
  221. color:{color:header Text};
  222. text-align:center;
  223. }
  224. .header h1 {
  225. margin:0;
  226. text-align:center;
  227. font-size:30px;
  228. }
  229. .header a {
  230. color:{color:header Links};
  231. }
  232. ul.navlinks {
  233. padding:0;
  234. list-style-type:none;
  235. text-align:center;
  236. margin:0;
  237. }
  238. ul.navlinks li {
  239. display:inline-block;
  240. margin:0;
  241. }
  242. ul.navlinks li:after {
  243. content:' · ';
  244. margin:0 3px;
  245. }
  246. ul.navlinks li:first-child:before {
  247. content:' · ';
  248. margin:0 3px;
  249. }
  250. .content {
  251. {block:IndexPage}
  252. width:1158px;
  253. {/block:IndexPage}
  254. {block:PermalinkPage}
  255. width:542px;
  256. {/block:PermalinkPage}
  257. margin:20px auto 0 auto;
  258. }
  259. article {
  260. {block:IndexPage}
  261. width:300px;
  262. margin:30px;
  263. padding:10px;
  264. {/block:IndexPage}
  265. {block:PermalinkPage}
  266. width:500px;
  267. margin:20px 0;
  268. padding:20px;
  269. {/block:PermalinkPage}
  270. background:{color:Post Backgrounds};
  271. border:1px solid {color:Post Borders};
  272. box-shadow:3px 3px rgba(200,200,200,0.5);
  273. }
  274. {block:IndexPage}
  275. .one {
  276. width:300px;
  277. margin:30px;
  278. }
  279. .two {
  280. width:240px;
  281. margin:30px 60px;
  282. }
  283. .three {
  284. width:200px;
  285. margin:30px 80px;
  286. }
  287. .four {
  288. width:270px;
  289. margin:30px 45px;
  290. }
  291. .five {
  292. width:170px;
  293. margin:30px 95px;
  294. }
  295. .six {
  296. width:220px;
  297. margin:30px 70px;
  298. }
  299. .seven {
  300. width:290px;
  301. margin:30px 35px;
  302. }
  303. .eight {
  304. width:230px;
  305. margin:30px 65px;
  306. }
  307. .nine {
  308. width:190px;
  309. margin:30px 85px;
  310. }
  311. .ten {
  312. width:260px;
  313. margin:30px 50px;
  314. }
  315. .eleven {
  316. width:160px;
  317. margin:30px 100px;
  318. }
  319. .twelve {
  320. width:280px;
  321. margin:30px 40px;
  322. }
  323. .thirteen {
  324. width:210px;
  325. margin:30px 75px;
  326. }
  327. .fourteen {
  328. width:180px;
  329. margin:30px 90px;
  330. }
  331. .fifteen {
  332. width:250px;
  333. margin:30px 55px;
  334. }
  335. {/block:IndexPage}
  336. article h1 {
  337. margin:0;
  338. }
  339. article p {
  340. margin:3px 0;
  341. }
  342. article ul {
  343. padding:0;
  344. margin-left:30px;
  345. }
  346. .photoset {
  347. margin-bottom:-1px;
  348. }
  349. .short h1 {
  350. font-size:2em;
  351. }
  352. .medium h1 {
  353. font-size:1.5em;
  354. }
  355. .long h1 {
  356. font-size:1em;
  357. }
  358. ul.chat-list {
  359. list-style-type:none;
  360. padding:0;
  361. margin:0;
  362. }
  363. ul.chat-list li {
  364. margin:3px 0;
  365. padding:3px 0;
  366. }
  367. ul.chat-list li.even {
  368. background:{color:Post Accent};
  369. }
  370. span.label {
  371. font-weight:bold;
  372. }
  373. .album-art img {
  374. {block:IndexPage}
  375. width:70px;
  376. height:70px;
  377. {/block:IndexPage}
  378. {block:PermalinkPage}
  379. height:500px;
  380. width:500px;
  381. text-align:center;
  382. {/block:PermalinkPage}
  383. }
  384. .audio-info {
  385. position:absolute;
  386. left:88px;
  387. top:10px;
  388. line-height:16px;
  389. min-height:70px;
  390. border-left:1px solid {color:Post Borders};
  391. padding-left:5px;
  392. margin-bottom:10px;
  393. }
  394. .audio {
  395. padding-bottom:10px;
  396. }
  397. .tumblr_audio_player {
  398. {block:IndexPage}
  399. height: 30px;
  400. width: 30px;
  401. position: absolute;
  402. top: 30px;
  403. left: 30px;
  404. border-radius: 50%;
  405. opacity: 0.8;
  406. {/block:IndexPage}
  407. {block:PermalinkPage}
  408. width:500px;
  409. height:40px;
  410. {/block:PermalinkPage}
  411. }
  412. .asks, .asks2 {
  413. margin-bottom:10px;
  414. }
  415. .asks {
  416. float:left;
  417. margin-right:15px;
  418. }
  419. .asks2 {
  420. float:right;
  421. margin-left:15px;
  422. }
  423. .question, .question2 {
  424. margin-bottom:10px;
  425. background:{color:Post Accent};
  426. padding:4px;
  427. {block:PermalinkPage}
  428. line-height:18px;
  429. {/block:PermalinkPage}
  430. }
  431. .question {
  432. {block:IndexPage}
  433. margin-left:55px;
  434. {/block:IndexPage}
  435. {block:PermalinkPage}
  436. margin-left:83px;
  437. {/block:PermalinkPage}
  438. }
  439. .question:before {
  440. content:"";
  441. width: 0;
  442. height: 0;
  443. border-style: solid;
  444. z-index:7;
  445. border-color: transparent {color:Post Accent} transparent transparent;
  446. position:absolute;
  447. {block:IndexPage}
  448. border-width: 4px 10px 4px 0px;
  449. left:55px;
  450. {/block:IndexPage}
  451. {block:PermalinkPage}
  452. border-width: 7px 11px 7px 0px;
  453. left:92px;
  454. {/block:PermalinkPage}
  455. }
  456. .question2 {
  457. {block:IndexPage}
  458. margin-right:55px;
  459. {/block:IndexPage}
  460. {block:PermalinkPage}
  461. margin-right:83px;
  462. {/block:PermalinkPage}
  463. }
  464. .question2:before {
  465. content:"";
  466. width: 0;
  467. height: 0;
  468. border-style: solid;
  469. z-index:7;
  470. border-color: transparent transparent transparent {color:Post Accent};
  471. position:absolute;
  472. {block:IndexPage}
  473. border-width: 4px 0px 4px 10px;
  474. right:55px;
  475. {/block:IndexPage}
  476. {block:PermalinkPage}
  477. border-width: 7px 0px 7px 11px;
  478. right:92px;
  479. {/block:PermalinkPage}
  480. }
  481. .question2 p {
  482. display:inline;
  483. margin:0;
  484. }
  485. #signature {
  486. font-size: 1.4em;
  487. font-family: 'Nothing You Could Do', cursive;
  488. text-align: right;
  489. }
  490. ul.permas {
  491. padding:0;
  492. list-style-type:none;
  493. margin:0;
  494. text-align:center;
  495. height:0;
  496. overflow:hidden;
  497. font-size:10px;
  498. -webkit-transition: all 0.4s ease-in-out;
  499. -moz-transition: all 0.4s ease-in-out;
  500. -o-transition: all 0.4s ease-in-out;
  501. transition: all 0.4s ease-in-out;
  502. }
  503. ul.permas li {
  504. display:inline-block;
  505. }
  506. article:hover ul.permas {
  507. height:14px;
  508. margin-top:10px;
  509. -webkit-transition: all 0.4s ease-in-out;
  510. -moz-transition: all 0.4s ease-in-out;
  511. -o-transition: all 0.4s ease-in-out;
  512. transition: all 0.4s ease-in-out;
  513. }
  514. ol.notes {
  515. list-style-type: none;
  516. margin:0 5px 0 0;
  517. padding:0;
  518. }
  519.  
  520. ol.notes li.note {
  521. padding:0;
  522. text-align:left;
  523. line-height:16px;
  524. width:100%;
  525. border:0;
  526. border-radius:0;
  527. background:transparent;
  528. border-bottom:1px solid {color:Post Borders};
  529. padding-bottom:8px;
  530. padding-top:8px;
  531. }
  532. ol.notes li.note:last-child {
  533. border-bottom:0;
  534. }
  535. ol.notes li.note img.avatar {
  536. display:none;
  537. }
  538.  
  539. ol.notes li.note span.action {
  540. font-weight: normal;
  541. }
  542.  
  543. ol.notes li.note .answer_content {
  544. font-weight: normal;
  545. }
  546. #infscr-loading {
  547. position:absolute;
  548. bottom:-10px;
  549. width:200px;
  550. margin-left:50%;
  551. left:-100px;
  552. text-align:center;
  553. color:{color:Post Borders};
  554. }
  555. #infscr-loading img{
  556. display:none;
  557. }
  558. </style>
  559. </head>
  560. <body>
  561. <div id="topping"></div>
  562. <div id="lefting"></div>
  563. <div id="righting"></div>
  564. <div id="botting"></div>
  565. <div class="header">
  566. <h1><a href="/">{Title}</a></h1>
  567. {block:Description}<p>{Description}</p>{/block:Description}
  568. <ul class="navlinks">
  569. <li><a href="/">home</a></li>
  570. {block:AskEnabled}
  571. <li><a href="/ask">ask</a></li>
  572. {/block:AskEnabled}
  573. {block:SubmissionsEnabled}
  574. <li><a href="/submit">submit</a></li>
  575. {/block:SubmissionsEnabled}
  576. {block:HasPages}
  577. {block:Pages}
  578. <li><a href="{URL}">{Label}</a></li>
  579. {/block:Pages}
  580. <br>
  581. {/block:HasPages}
  582. {block:IfLink1}
  583. <li><a href="{text:URL 1}">{text:Link 1}</a></li>
  584. {/block:IfLink1}
  585. {block:IfLink2}
  586. <li><a href="{text:URL 2}">{text:Link 2}</a></li>
  587. {/block:IfLink2}
  588. {block:IfLink3}
  589. <li><a href="{text:URL 3}" >{text:Link 3}</a></li>
  590. {/block:IfLink3}
  591. <li><a href="/archive">archive</a></li>
  592. <li><a href="http://themekid.tumblr.com" target="_blank">theme</a></li>
  593. </ul>
  594. {block:Pagination}
  595. <div class="pagination" style="visibility:hidden;">
  596. {block:PreviousPage}<a href="{PreviousPage}">previous</a>{/block:PreviousPage}
  597. {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
  598. </div>
  599. {/block:Pagination}
  600. </div>
  601. <div class="content">
  602. {block:Posts}
  603. {block:PermalinkPagination}
  604. <article>
  605. <center>Posted on {DayOfWeek} the {DayOfMonth}{DayOfMonthSuffix} of {Month}, {Year} at {12Hour}:{Minutes}{AmPm} with {NoteCountWithLabel}.</center>
  606. </article>
  607. {/block:PermalinkPagination}
  608. <article {block:Photo}class="{block:Post1}one{/block:Post1}{block:Post2}two{/block:Post2}{block:Post3}three{/block:Post3}{block:Post4}four{/block:Post4}{block:Post5}five{/block:Post5}{block:Post6}six{/block:Post6}{block:Post7}seven{/block:Post7}{block:Post8}eight{/block:Post8}{block:Post9}nine{/block:Post9}{block:Post10}ten{/block:Post10}{block:Post11}eleven{/block:Post11}{block:Post12}twelve{/block:Post12}{block:Post13}thirteen{/block:Post13}{block:Post14}fourteen{/block:Post14}{block:Post15}fifteen{/block:Post15}"{/block:Photo}{block:Photoset}class="fifteen"{/block:Photoset}>
  609. {block:Text}
  610. <div class="text">
  611. {block:Title}<h1>{Title}</h1>{block:Title}
  612. <p>{Body}</p>
  613. </div>
  614. {/block:Text}
  615.  
  616. {block:Photo}
  617. <div class="photo">
  618. <div class="make_lightbox" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />
  619. </div>
  620. {/block:Photo}
  621.  
  622. {block:Photoset}
  623. <div class="photoset">
  624. {block:IndexPage}{Photoset-250}{/block:IndexPage}
  625. {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  626. </div>
  627. {/block:Photoset}
  628.  
  629. {block:Quote}
  630. <div class="quote {Length}">
  631. <h1>&ldquo;{Quote}&rdquo;</h1>
  632. {block:IndexPage}
  633. {block:Source}<cite>-&nbsp;{Source}</cite>{/block:Source}
  634. {/block:IndexPage}
  635. </div>
  636. {/block:Quote}
  637.  
  638. {block:Link}
  639. <div class="link">
  640. <h1>&#8627;<a href="{URL}" {Target}>{Name}</a></h1>
  641. {block:IndexPage}
  642. {block:Description}<p>{Description}</p>{/block:Description}
  643. {/block:IndexPage}
  644. </div>
  645. {/block:Link}
  646.  
  647. {block:Chat}
  648. <div class="chat">
  649. {block:Title}<h1>{Title}</h1>{/block:Title}
  650. <ul class="chat-list">
  651. {block:Lines}
  652. <li class="{Alt}">
  653. {block:Label}<span class="label">{Label}</span>{/block:Label}
  654. {Line}</li>
  655. {/block:Lines}
  656. </ul>
  657. </div>
  658. {/block:Chat}
  659.  
  660. {block:Audio}
  661. <div class="audio">
  662. {block:AlbumArt}
  663. <div class="album-art">
  664. <img src="{AlbumArtURL}">
  665. </div>
  666. {/block:AlbumArt}
  667. {block:IndexPage}
  668. <div class="audio-info" {block:AudioEmbed}style="display:none;"{/block:AudioEmbed}>
  669. Artist: <span {block:Artist}style="display:none;"{/block:Artist}>Unknown</span>{block:Artist}{Artist}{/block:Artist}<br>
  670. Title: <span {block:TrackName}style="display:none;"{/block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}<br>
  671. Album: <span {block:Album}style="display:none;"{/block:Album}>Unknown</span>{block:Album}{Album}{/block:Album}<br>
  672. Plays: {FormattedPlayCount}</div>
  673. {block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}
  674. {/block:IndexPage}
  675. {block:PermalinkPage}
  676. {block:AudioPlayer}{AudioPlayerBlack}{/block:AudioPlayer}
  677. {/block:PermalinkPage}
  678. {block:IndexPage}
  679. {block:AudioEmbed}{AudioEmbed-250}{/block:AudioEmbed}
  680. {/block:IndexPage}
  681. {block:PermalinkPage}
  682. {block:AudioEmbed}{AudioEmbed-500}{/block:AudioEmbed}
  683. {/block:PermalinkPage}
  684. </div>
  685. {/block:Audio}
  686.  
  687. {block:Video}
  688. <div class="video">
  689. {block:IndexPage}{Video-250}{/block:IndexPage}
  690. {block:PermalinkPage}{Video-500}{/block:PermalinkPage}
  691. </div>
  692. {block:Video}
  693.  
  694. {block:Answer}
  695. <div class="answer">
  696. <img class="asks" src="{block:IndexPage}{AskerPortraitURL-40}{/block:IndexPage}{block:PermalinkPage}{AskerPortraitURL-64}{/block:PermalinkPage}">
  697. <div class="question">{lang:Asker asked 2}: {Question}</div>
  698. <hr style="visibility:hidden;width:100%;margin:0;">
  699. {block:Answerer}
  700. <img class="asks2" src="{block:IndexPage}{AnswererPortraitURL-40}{/block:IndexPage}{block:PermalinkPage}{AnswererPortraitURL-64}{/block:PermalinkPage}">
  701. <div class="question2">{Answerer} replied: {Answer}</div>
  702. <hr style="visibility:hidden;width:100%;">
  703. {/block:Answerer}
  704. {Replies}
  705. {block:IfSignOffAsks}
  706. <div id="signature" {block:Answerer}style="display:none;"{/block:Answerer}>-{text:Ask Sign Off}</div>
  707. {/block:IfSignOffAsks}
  708. </div>
  709. {/block:Answer}
  710.  
  711. {block:IndexPage}
  712. <ul class="permas">
  713. <li><a href="{Permalink}">{NoteCount}</a></li>
  714. <li>&middot;</li>
  715. <li><a href="{ReblogURL}">Reblog</a></li>
  716. {block:RebloggedFrom}<li>&middot;</li>
  717. <li><a href="{ReblogParentURL}">Via</a></li>
  718. {/block:RebloggedFrom}
  719. {block:ContentSource}<li>&middot;</li>
  720. <li><a href="{SourceURL}">Source</a></li>
  721. {/block:ContentSource}
  722. </ul>
  723. {/block:IndexPage}
  724. </article>
  725. {block:PermalinkPage}
  726. {block:Photo}{block:Caption}<article>{Caption}</article>{/block:Caption}{/block:Photo}
  727.  
  728. {block:Photoset}{block:Caption}<article>{Caption}</article>{/block:Caption}{/block:Photoset}
  729.  
  730. {block:Quote}{block:Source}<article><cite style="font-style:normal;"> &mdash;&nbsp;{Source}</cite></article>{/block:Source}{/block:Quote}
  731.  
  732. {block:Link}{block:Description}<article>{Description}</article>{/block:Description}{/block:Link}
  733.  
  734. {block:Audio}
  735. <article>
  736. Artist: <span{block:Artist} style="display:none;"{/block:Artist}>Unknown</span>{block:Artist}{Artist}{/block:Artist}<br>
  737. Title: <span{block:TrackName} style="display:none;"{/block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}<br>
  738. Album: <span{block:Album} style="display:none;"{/block:Album}>Unknown</span>{block:Album}{Album}{/block:Album}{block:PlayCount}<br>
  739. Plays: {FormattedPlayCount}{/block:PlayCount}</article>
  740. {block:Caption}<article>{Caption}</article>{/block:Caption}
  741. {/block:Audio}
  742.  
  743. {block:Video}{block:Caption}<article>{Caption}</article>{/block:Caption}{/block:Video}
  744.  
  745. {block:HasTags}
  746. <article id="tags">
  747. filed under: {block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;{/block:Tags}
  748. </article>{/block:HasTags}
  749. {block:PostNotes}
  750. <article id="notes" class="postnotes">
  751. {PostNotes}
  752. </article>
  753. {/block:PostNotes}
  754. {/block:PermalinkPage}
  755. {/block:Posts}
  756. </div>
  757. <!--Links to jQuery library, Masonry, infinite scroll and imagesLoaded-->
  758. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  759. <script type="text/javascript">
  760.  
  761. $(function(){ // shorthand document.ready()
  762. $('.make_lightbox').each(function(){ // this is just an element I let them click, it carries a series of data- attributes.
  763. $(this).on('click',function(){ // when clicked. this is the newer jQuery click() handler that's only in v1.8+ so that may be something to note.
  764. var lbArray = []; // create blank array.
  765. var arrayContents = {"width":$(this).data('width'), "height":$(this).data('height'), "low_res":$(this).data("lowres"), "high_res":$(this).data('highres')}; // make set of the data- attributes.
  766. lbArray.push(arrayContents); // push the set into the array.
  767. Tumblr.Lightbox.init(lbArray,1); // trigger Tumblr lightbox. the '1' is the number of photos it expects. specific to how tumblr has things set up.
  768. $('body').toggleClass('tumblr_lightbox_active'); // use this to prevent the user from scrolling.
  769. });
  770. });
  771. });
  772. </script>
  773. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  774. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  775. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  776. <!--Code for infinite scroll and grid layout-->
  777. <script>
  778. (function() {
  779. var $tumblelog = $('.content');
  780.  
  781. $tumblelog.imagesLoaded( function(){
  782. $tumblelog.masonry({
  783. columnWidth: function( containerWidth ) {
  784. return containerWidth / 100;
  785. }
  786. });
  787. });
  788. $tumblelog.infinitescroll({
  789. navSelector : ".pagination",
  790. nextSelector : ".pagination a:last",
  791. itemSelector : "article",
  792. bufferPx : 50,
  793. done : "",
  794. loading: {
  795. finishedMsg: "<p>You've reached the end of the Earth.</p>",
  796. img : "",
  797. msg: null,
  798. msgText: "<p><i class='fa fa-spinner fa-pulse fa-3x'></i></p>"
  799. },
  800. },
  801. function( newElements ) {
  802. var $newElems = $( newElements ).css({ opacity: 0 });
  803. $newElems.imagesLoaded(function(){
  804. $newElems.animate({ opacity: 1 });
  805. $tumblelog.masonry( 'appended', $newElems);
  806. });
  807. $(function(){ // shorthand document.ready()
  808. $('.make_lightbox').each(function(){ // this is just an element I let them click, it carries a series of data- attributes.
  809. $(this).on('click',function(){ // when clicked. this is the newer jQuery click() handler that's only in v1.8+ so that may be something to note.
  810. var lbArray = []; // create blank array.
  811. var arrayContents = {"width":$(this).data('width'), "height":$(this).data('height'), "low_res":$(this).data("lowres"), "high_res":$(this).data('highres')}; // make set of the data- attributes.
  812. lbArray.push(arrayContents); // push the set into the array.
  813. Tumblr.Lightbox.init(lbArray,1); // trigger Tumblr lightbox. the '1' is the number of photos it expects. specific to how tumblr has things set up.
  814. $('body').toggleClass('tumblr_lightbox_active'); // use this to prevent the user from scrolling.
  815. });
  816. });
  817. });
  818.  
  819. }
  820. );
  821. })();
  822. </script>
  823. <div class="credit">
  824. <i class="fa fa-paw"></i>&nbsp;<a class="mine" target="_blank" href="http://themekid.tumblr.com">Theme Kid</a>
  825. </div>
  826. </body>
  827. </html>
Advertisement
Add Comment
Please, Sign In to add comment