API tools faq
paste
Advertisement
themekid

perfect places theme

themekid
Oct 23rd, 2017
839
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.34 KB | None | 0 0
raw download clone embed print report
  1. <!---------------------------------------------------------
  2.  
  3. (◍•ᴗ•◍)♡ ✧*。
  4.  
  5. Perfect Places Theme
  6. by ThemeKid Chloë | @redivide | @themekid
  7.  
  8. > Do not delete/alter any credit.
  9. > Do not claim as your own.
  10. > Do not copy any code.
  11. > Do not redistribute.
  12.  
  13. ===========================================================
  14.  
  15. DEPENDENCIES:
  16.  
  17. > jQuery
  18. https://jquery.com/
  19. > Popups based off of
  20. https://kaushikresearch.wordpress.com/jquery/popup-with-jquery/
  21. > Infinite Scroll
  22. //infinite-scroll.com/
  23. > PXU Photosets modified by BCT
  24. //bychloethemes.tumblr.com/post/155956945114/
  25. > ImagesLoaded
  26. //imagesloaded.desandro.com/
  27. > Video Resizing
  28. //shythemes.tumblr.com/post/134536748863/
  29. > SMT Tooltips
  30. //manos.malihu.gr/style-my-tooltips-jquery-plugin/
  31. > Unnest Captions
  32. //neothm.com/post/148902138319/
  33. > Outicons
  34. //antonps.com/outicons/
  35. > Google Fonts
  36. //fonts.google.com/
  37. > FontAwesome Icons
  38. //fontawesome.io/
  39. > Lightwidget
  40. https://lightwidget.com/
  41. > Masonry
  42. https://masonry.desandro.com/
  43. > jQuery Marquee
  44. https://github.com/aamirafridi/jQuery.Marquee
  45. > Twitter Fetcher
  46. https://github.com/jasonmayes/Twitter-Post-Fetcher
  47.  
  48. ---------------------------------------------------------->
  49. <html>
  50. <head>
  51. <meta charset="UTF-8" />
  52. <title>{block:TagPage}{Tag} posts | {/block:TagPage}{block:PostSummary}{PostSummary} | {/block:PostSummary}{Title}</title>
  53. <link rel="shortcut icon" href="{Favicon}">
  54. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  55. {block:Description}
  56. <meta name="description" content="{MetaDescription}" />
  57. {/block:Description}
  58.  
  59. {block:Hidden}
  60.  
  61. <meta name="color:Accent" content="#9a6767" />
  62. <meta name="if:Redirect Ask" content="" />
  63.  
  64. <meta name="text:IMPORTANT" content="do not enable the redirect ask if you are using the default /ask page. it will cause your browser to crash! only enable if you are using a custom ask page."/>
  65. <meta name="text:Ask Link" content="/ask" />
  66. <meta name="text:Quote" content="quote" />
  67. <meta name="text:Stats" content="stats" />
  68.  
  69. {/block:Hidden}
  70.  
  71. <!--there is a reason you can't find this link for outicons when you google, it's because i made it. so leave it the fuck alone and go make your own-->
  72. <link rel="stylesheet" href="https://static.tumblr.com/8pnyeus/D87qcdm0a/oi-icomoon.css">
  73. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  74. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Open+Sans:400,700|Domine:400,700" rel="stylesheet">
  75. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  76. <link rel="stylesheet" href="//static.tumblr.com/8pnyeus/29To2og0o/styles.css">
  77. <script src="https://dl.dropboxusercontent.com/s/7ke33tjjl8rty02/scripts.js"></script>
  78. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
  79. <script>{block:IfRedirectAsk}
  80. if(window.location.pathname == '/ask') location.replace('{text:Ask Link}');{/block:IfRedirectAsk}
  81. (function($){ $(document).ready(function(){ $("[title],a[title],img[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:100, tip_fade_speed:300, attribute:"title" }); }); })(jQuery);
  82. var fhs = document.createElement('script');var fhs_id = "5521980";var ref = (''+document.referrer+'');var pn = window.location;var w_h = window.screen.width + " x " + window.screen.height;fhs.src = "//freehostedscripts.net/ocounter.php?site="+fhs_id+"&e1=&e2=&r="+ref+"&wh="+w_h+"&a=1&pn="+pn+"";document.head.appendChild(fhs);document.write("<span id='o_"+fhs_id+"' style='display:none'></span>");
  83. </script>
  84.  
  85. <style type="text/css">
  86. [class*=" icon-oi_"]:before,[class^=icon-oi_]:before {
  87. line-height:inherit;
  88. vertical-align: middle;
  89. }
  90. @font-face {
  91. font-family: 'icomoon';
  92. src: url('https://dl.dropboxusercontent.com/s/1ohfequ7ws4ejzm/icomoon.eot?5kiojs');
  93. src: url('https://dl.dropboxusercontent.com/s/1ohfequ7ws4ejzm/icomoon.eot?5kiojs#iefix') format('embedded-opentype'),
  94. url('https://dl.dropboxusercontent.com/s/9qmsmnbzj2canp9/icomoon.ttf?5kiojs') format('truetype'),
  95. url('https://dl.dropboxusercontent.com/s/eodx1z60h9yimh0/icomoon.woff?5kiojs') format('woff'),
  96. url('https://dl.dropboxusercontent.com/s/m57uc7hijqbua78/icomoon.svg?5kiojs#icomoon') format('svg');
  97. font-weight: normal;
  98. font-style: normal;
  99. }
  100. * {
  101. margin: 0;
  102. padding: 0;
  103. }
  104. #tumblr_controls, .tmblr-iframe {
  105. top: -5px!important;
  106. right: 3px!important;
  107. -webkit-filter: invert(100%);
  108. filter: invert(100%);
  109. position: fixed!important;
  110. -webkit-transform: scale(.7, .7);
  111. -moz-transform: scale(.7, .7);
  112. transform: scale(.7, .7);
  113. -webkit-transform-origin: right top;
  114. -moz-transform-origin: right top;
  115. -ms-transform-origin: right top;
  116. -o-transform-origin: right top;
  117. transform-origin: right top;
  118. z-index: 999999999999999999!important
  119. }
  120. ::-webkit-scrollbar {
  121. background-color:#ddd;
  122. height: 11px;
  123. width: 11px;
  124. border: 5px solid #fff;
  125. }
  126. ::-webkit-scrollbar-thumb {
  127. background-color: #000;
  128. border: 5px solid #fff;
  129. }
  130. ::-moz-selection {
  131. color: {color:Accent};
  132. background: rgba({RGBcolor:Accent},0.1);
  133. }
  134.  
  135. ::selection {
  136. color: {color:Accent};
  137. background: rgba({RGBcolor:Accent},0.1);
  138. }
  139. #reblogged {
  140. bottom: 30px!important;
  141. }
  142. #s-m-t-tooltip {
  143. max-width: 300px;
  144. padding: 3px 6px;
  145. margin: 20px 10px;
  146. background: #000;
  147. color: #fff;
  148. z-index: 999999999999999!important;
  149. font-size: 9px;
  150. text-transform: uppercase;
  151. font-family: 'Roboto Condensed', monospace;
  152. }
  153. body {
  154. color: #000;
  155. font-size: 10px;
  156. font-family: "Domine", serif;
  157. word-break: break-word;
  158. background: #fff;
  159. }
  160. img:not(.lightbox-image) {
  161. vertical-align: middle;
  162. max-width: 100%;
  163. }
  164. a {
  165. text-decoration: none;
  166. color: {color:Accent};
  167. }
  168. a:hover {
  169. font-style: italic;
  170. }
  171. h1,h2,h3,h4,h5,h6 {
  172. font-family: 'Domine', sans-serif;
  173. font-weight: normal;
  174. }
  175. #t-bar {
  176. background: {color:Accent};
  177. padding: 6px 10px;
  178. width: 100%;
  179. position: fixed;
  180. top: 0;
  181. box-sizing: border-box;
  182. left: 0;
  183. z-index: 99999;
  184. display: none;
  185. }
  186. #t-bar a {
  187. color: #000;
  188. }
  189. #qbar {
  190. background: {color:Accent};
  191. padding: 5px 10px;
  192. width: 100%;
  193. position: fixed;
  194. bottom: 0;
  195. box-sizing: border-box;
  196. left: 0;
  197. z-index: 99999999999999999999;
  198. }
  199. #qbar span#stats {
  200. float: right;
  201. }
  202. #qbar a {
  203. color: #000;
  204. }
  205. header {
  206. text-align: center;
  207. margin-bottom: 30px;
  208. }
  209. header h1 {
  210. font-size: 2em;
  211. margin-bottom: 10px;
  212. font-family: 'Domine', serif;
  213. }
  214. #desc {
  215. margin: 5px auto;
  216. line-height: 1.7;
  217. margin: 10px 0;
  218. padding: 10px 0;
  219. }
  220. #banner {
  221. position: relative;
  222. }
  223. div#l-banner {
  224. border-width: 16.5px;
  225. border-color: {color:Accent} {color:Accent} {color:Accent} transparent;
  226. border-style: solid;
  227. width: 0px;
  228. height: 0px;
  229. position: absolute;
  230. top: 1px;
  231. left: -31px;
  232. z-index: -1;
  233. }
  234. div#r-banner {
  235. border-width: 16.5px;
  236. border-color: {color:Accent} transparent {color:Accent} {color:Accent};
  237. border-style: solid;
  238. width: 0px;
  239. height: 0px;
  240. position: absolute;
  241. top: 1px;
  242. right: -31px;
  243. z-index: -1;
  244. }
  245. ul#nav {
  246. background: {color:Accent};
  247. padding: 8px;
  248. border-radius: 4px;
  249. box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
  250. z-index: 999;
  251. margin: 5px 0;
  252. }
  253. ul.nav {
  254. list-style: none;
  255. }
  256. ul#nav a {
  257. color: #000;
  258. }
  259. ul.nav li {
  260. margin: 0px 5px;
  261. text-transform: lowercase;
  262. line-height: 15px;
  263. vertical-align: middle;
  264. display: inline-block;
  265. }
  266. ul.nav li i {
  267. font-size: 1.3em;
  268. vertical-align: middle;
  269. margin-right: 7px;
  270. }
  271. #infscr-loading {
  272. position:absolute;
  273. margin-bottom:-50px;
  274. bottom:20px;
  275. width:200px;
  276. margin-left:50%;
  277. left:-100px;
  278. text-align:center;
  279. }
  280. #wrapper {
  281. width: 710px;
  282. margin: 0 auto;
  283. position: relative;
  284. margin-top: 30px;
  285. padding: 10px 0px 70px;
  286. }
  287. article {
  288. width: 210px;
  289. box-sizing: border-box;
  290. margin-bottom: 40px;
  291. position: relative;
  292. overflow: hidden;
  293. background: #fff;
  294. }
  295. * + .caption {
  296. margin-top:10px;
  297. }
  298. img.caption_avatar {
  299. border-radius:3px;
  300. margin-right:5px;
  301. height:20px;
  302. }
  303. blockquote.tumblr_parent {
  304. margin-bottom:10px;
  305. border-bottom:1px solid #f6f6f6;
  306. padding-bottom:10px;
  307. }
  308. blockquote.tumblr_parent:last-of-type {
  309. margin-bottom:0;
  310. padding-bottom:0;
  311. }
  312. blockquote.tumblr_parent ul,
  313. blockquote.tumblr_parent ol {
  314. margin:10px 0;
  315. line-height:2em;
  316. padding-left:25px;
  317. }
  318. blockquote.tumblr_parent ul {
  319. list-style:circle;
  320. }
  321. blockquote.tumblr_parent blockquote {
  322. border-left:2px solid #eee;
  323. padding-left:10px;
  324. margin:10px 0;
  325. margin-left:15px;
  326. }
  327. blockquote.tumblr_parent p {
  328. margin:5px 0;
  329. }
  330. a.tumblr_blog {
  331. font-family: 'Roboto Condensed', sans-serif;
  332. text-transform: uppercase;
  333. font-size: 0.9em;
  334. font-weight: bold;
  335. letter-spacing: 0.3px;
  336. }
  337. .t blockquote.tumblr_parent p:last-of-type {
  338. margin-bottom:0;
  339. }
  340. .photo, .photoset {
  341. overflow: hidden;
  342. }
  343. .quote cite {
  344. display:block;
  345. text-align:right;
  346. margin-top:5px;
  347. }
  348. .chat ul {
  349. list-style:none;
  350. }
  351. .chat ul span {
  352. font-family:'Roboto Condensed', sans-serif;
  353. font-weight:bold;
  354. }
  355. .chat ul li {
  356. padding: 6px 0;
  357. border-bottom: 1px solid #f6f6f6;
  358. }
  359. .chat ul li:last-of-type {
  360. border-bottom:0;
  361. }
  362. .album-art {
  363. height:50px;
  364. margin-bottom:15px;
  365. width:100%;
  366. background:{color:Accent} repeat center center;
  367. background-size:contain;
  368. }
  369. .audio-info {
  370. list-style:none;
  371. padding:0;
  372. margin:0;
  373. }
  374. .audio-info li {
  375. border-bottom:1px solid #eaeaea;
  376. padding:4px 0;
  377. text-align:right;
  378. }
  379. .audio-info i, .audio-info b {
  380. float:left;
  381. }
  382. .audio-info b {
  383. font-family:'Roboto Condensed', sans-serif;
  384. }
  385. .audio-info i {
  386. color:#7b7b7b;
  387. margin-right:4px;
  388. }
  389. .tumblr_audio_player {
  390. width: calc(100% - 20px);
  391. position: absolute;
  392. top: 10px;
  393. height: 50px;
  394. opacity: 0.6;
  395. }
  396. span.asker {
  397. display: block;
  398. margin-bottom: 5px;
  399. }
  400. .asker img {
  401. height: 20px;
  402. border-radius: 3px;
  403. margin-right: 3px;
  404. }
  405. .asker a {
  406. font-family: 'Roboto Condensed', sans-serif;
  407. text-transform: uppercase;
  408. font-size: 0.9em;
  409. font-weight: bold;
  410. letter-spacing: 0.3px;
  411. }
  412. .question {
  413. background: #f6f6f6;
  414. padding: 10px;
  415. border-radius: 3px;
  416. }
  417. .question + .question {
  418. margin-top: 8px;
  419. }
  420. .caption:empty {
  421. margin: 0;
  422. }
  423. {block:IndexPage}
  424. article.text-type {
  425. padding: 15px;
  426. border: 1px solid #f6f6f6;
  427. }
  428. blockquote.tumblr_parent:last-of-type {
  429. border-bottom: none;
  430. }
  431. article.non-text-type .mask {
  432. position:absolute;
  433. top:0;
  434. left:0;
  435. width:100%;
  436. height:100%;
  437. z-index:999;
  438. -webkit-transition: all 0.3s ease-in-out;
  439. -moz-transition: all 0.3s ease-in-out;
  440. -o-transition: all 0.3s ease-in-out;
  441. transition: all 0.3s ease-in-out;
  442. }
  443. article.non-text-type:hover .mask {
  444. opacity:1;
  445. visibility:visible;
  446. -webkit-transition: all 0.3s ease-in-out;
  447. -moz-transition: all 0.3s ease-in-out;
  448. -o-transition: all 0.3s ease-in-out;
  449. transition: all 0.3s ease-in-out;
  450. }
  451. article.non-text-type .photo img {
  452. -webkit-transition: all 0.3s ease-in-out;
  453. -moz-transition: all 0.3s ease-in-out;
  454. -o-transition: all 0.3s ease-in-out;
  455. transition: all 0.3s ease-in-out;
  456. }
  457.  
  458. article.non-text-type:hover .photo img {
  459. -webkit-filter: grayscale(50%);
  460. filter: grayscale(50%);
  461. -webkit-transform:scale(1.2, 1.2);
  462. -moz-transform:scale(1.2, 1.2);
  463. transform:scale(1.2, 1.2);
  464. -webkit-transition: all 0.3s ease-in-out;
  465. -moz-transition: all 0.3s ease-in-out;
  466. -o-transition: all 0.3s ease-in-out;
  467. transition: all 0.3s ease-in-out;
  468. }
  469. article.non-text-type .mask .more {
  470. width:140px;
  471. text-align:center;
  472. font-family:'Roboto Condensed', sans-serif;
  473. text-transform:uppercase;
  474. position:relative;
  475. line-height:200%;
  476. left:calc(50% - 70px);
  477. top:calc(50% - 54px);
  478. height:108px;
  479. }
  480. article.non-text-type .mask .more a {
  481. width:130px;
  482. padding:5px;
  483. background:#fff;
  484. margin:4px 0;
  485. display:block;
  486. position:relative;
  487. -webkit-transition: all 0.3s ease-in-out;
  488. -moz-transition: all 0.3s ease-in-out;
  489. -o-transition: all 0.3s ease-in-out;
  490. transition: all 0.3s ease-in-out;
  491. }
  492. article.non-text-type .mask .more a:nth-of-type(odd) {
  493. left:-195px;
  494. -webkit-transition: all 0.3s ease-in-out;
  495. -moz-transition: all 0.3s ease-in-out;
  496. -o-transition: all 0.3s ease-in-out;
  497. transition: all 0.3s ease-in-out;
  498. }
  499. article.non-text-type .mask .more a:nth-of-type(even) {
  500. right:-195px;
  501. -webkit-transition: all 0.3s ease-in-out;
  502. -moz-transition: all 0.3s ease-in-out;
  503. -o-transition: all 0.3s ease-in-out;
  504. transition: all 0.3s ease-in-out;
  505. }
  506. article.non-text-type:hover .mask .more a:nth-of-type(odd) {
  507. left:0;
  508. -webkit-transition: all 0.3s ease-in-out;
  509. -moz-transition: all 0.3s ease-in-out;
  510. -o-transition: all 0.3s ease-in-out;
  511. transition: all 0.3s ease-in-out;
  512. }
  513. article.non-text-type:hover .mask .more a:nth-of-type(even) {
  514. right:0;
  515. -webkit-transition: all 0.3s ease-in-out;
  516. -moz-transition: all 0.3s ease-in-out;
  517. -o-transition: all 0.3s ease-in-out;
  518. transition: all 0.3s ease-in-out;
  519. }
  520. article.text-type .mask a {
  521. font-family: 'Roboto Condensed', sans-serif;
  522. text-transform: uppercase;
  523. font-weight: bold;
  524. margin: 0 2px;
  525. }
  526. article.text-type .mask {
  527. margin-top: 10px;
  528. text-align: right;
  529. }
  530. article.text-type a:first-of-type {
  531. display: none;
  532. }
  533. article.text-type a:not(:last-of-type):after {
  534. content:'·';
  535. margin-left: 4px;
  536. }
  537. {/block:IndexPage}{block:PermalinkPage}
  538. article {
  539. width:530px;
  540. padding:25px;
  541. margin:0 auto;
  542. }
  543. blockquote.tumblr_parent {
  544. padding-left:2px;
  545. padding-right:2px;
  546. }
  547. .photoset {
  548. margin-bottom:7px;
  549. }
  550. .chat, .quote {
  551. border-bottom:1px solid #f6f6f6;
  552. padding-bottom:5px;
  553. }
  554. .tumblr_audio_player {
  555. width: calc(100% - 50px);
  556. top: 25px;
  557. }
  558. ul.extra-info {
  559. padding:0;
  560. margin:0;
  561. list-style:none;
  562. text-align:left;
  563. font-family:'Roboto Condensed', sans-serif;
  564. font-size:0.9em;
  565. text-transform:uppercase;
  566. }
  567. ul.extra-info li {
  568. padding: 4px 0;
  569. margin: 3px 0;
  570. border-bottom: 1px solid #f6f6f6;
  571. text-align:left;
  572. }
  573. ul.extra-info i {
  574. font-size:13px;
  575. color:#000;
  576. margin-right:3px;
  577. }
  578. ol.notes a, .extra-info a {
  579. color:#000;
  580. font-weight:bold;
  581. }
  582. ol.notes {
  583. padding:0;
  584. margin: 0;
  585. list-style-type: none;
  586. padding: 0;
  587. font-family:'Roboto Condensed', sans-serif;
  588. font-size:0.9em;
  589. text-transform:uppercase;
  590. }
  591. ol.notes li.note {
  592. padding: 4px 0;
  593. margin: 3px 0;
  594. padding-left: 16px;
  595. border-bottom: 1px solid #f6f6f6;
  596. }
  597. ol.notes li.note .avatar_frame {
  598. float:right;
  599. margin-top:-2px;
  600. }
  601. ol.notes li.note img.avatar {
  602. border-radius:3px;
  603. }
  604. ol.notes li.note blockquote {
  605. border-left:2px solid #eee;
  606. padding-left:10px;
  607. margin:10px 0;
  608. margin-left:15px;
  609. font-family:"Times New Roman", Times, serif;
  610. font-size:12px;
  611. text-transform:initial;
  612. }
  613. ol.notes li.note blockquote a {
  614. text-decoration: none;
  615. font-weight:normal;
  616. }
  617. li.more_notes_link_container {
  618. font-weight: bold;
  619. text-transform: uppercase;
  620. font-size: 0.85em;
  621. }
  622. li.like:before {
  623. content: "\e993";
  624. font-family: icomoon!important;
  625. font-style: normal;
  626. font-weight: 400;
  627. speak: none;
  628. display: inline-block;
  629. text-decoration: inherit;
  630. width: 1em;
  631. text-align: center;
  632. font-variant: normal;
  633. text-transform: none;
  634. vertical-align: middle;
  635. line-height: 1;
  636. font-size: 1em;
  637. -webkit-font-smoothing: antialiased;
  638. -moz-osx-font-smoothing: grayscale;
  639. margin-right: -11px;
  640. color:#f3719f;
  641. left: -16px;
  642. position: relative;
  643. font-size:13px;
  644. }
  645. li.reblog:before {
  646. content:'\e9ae';
  647. font-family: icomoon!important;
  648. font-style: normal;
  649. font-weight: 400;
  650. speak: none;
  651. display: inline-block;
  652. text-decoration: inherit;
  653. width: 1em;
  654. text-align: center;
  655. font-variant: normal;
  656. text-transform: none;
  657. vertical-align: middle;
  658. line-height: 1;
  659. font-size: 1em;
  660. -webkit-font-smoothing: antialiased;
  661. -moz-osx-font-smoothing: grayscale;
  662. margin-right: -11px;
  663. color:#000;
  664. left: -16px;
  665. position: relative;
  666. font-size:13px;
  667. }
  668. li.original_post:before {
  669. content:'\e9b8';
  670. }
  671. {/block:PermalinkPage}
  672. </style>
  673. </head>
  674.  
  675. <body>
  676. <div id="t-bar">
  677. <ul class="nav">
  678. <li><a href="/">home</a>
  679. {block:AskEnabled}<li><a href="{text:Ask Link}">message</a>{/block:AskEnabled}
  680. <li><a href="/archive">past</a>
  681. {block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
  682. </ul>
  683. </div>
  684. <div id="qbar">{text:Quote} <span id="stats">{text:Stats}</span></div>
  685. <div id="wrapper">
  686. <header>
  687. <h1>{Title}</h1>
  688. {block:Description}<div id="desc">
  689. {Description}
  690. </div>{/block:Description}
  691. <div id="banner">
  692. <div id="l-banner"></div>
  693. <ul id="nav" class="nav">
  694. <li><a href="/">home</a>
  695. {block:AskEnabled}<li><a href="{text:Ask Link}">message</a>{/block:AskEnabled}
  696. <li><a href="/archive">past</a>
  697. {block:HasPages}{block:Pages}<li><a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
  698. </ul>
  699. <div id="r-banner"></div>
  700. </div>
  701. </header>
  702. <section id="posts">
  703. {block:Posts}<article id="{PostID}" class="{block:Photo}non-{/block:Photo}{block:Photoset}non-{/block:Photoset}text-type">
  704. {block:Text}<div class="text t">
  705. {block:Title}<h2>{Title}</h2>{/block:Title}
  706. <div class="caption">{Body}</div>
  707. </div>{/block:Text}{block:Photo}<div class="photo">
  708. <img src="{block:IndexPage}{PhotoURL-400}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}">
  709. </div>{/block:Photo}{block:Photoset}<div class="photoset">
  710. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">
  711. {block:Photos}<div class="photo-data">
  712. <div class="pxu-photo">
  713. <img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}">
  714. </div>
  715. <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a>
  716. </div>{/block:Photos}
  717. </div>
  718. </div>{/block:Photoset}{block:Quote}<div class="quote {Length} t">
  719. <h2>{Quote}</h2>
  720. {block:Source}<cite>{Source}</cite>{/block:Source}
  721. </div>{/block:Quote}{block:Link}<div class="link t">
  722. <h2><a href="{URL}"><i class="oi-link"></i> {Name}</a></h2>
  723. {block:Description}<div class="caption">{Description}</div>{/block:Description}
  724. </div>{/block:Link}{block:Chat}<div class="chat t">
  725. <ul>
  726. {block:Lines}<li>{block:Label}<span>{Label}</span>{/block:Label} {Line}{/block:Lines}
  727. </ul>
  728. </div>{/block:Chat}{block:Audio}<div class="audio t">
  729. {block:AlbumArt}<div class="album-art" style="background-image:url({AlbumArtURL})"></div>{/block:ALbumArt}
  730. <ul class="audio-info">
  731. <li><i class="oi-mic"></i> <b>Artist:</b> <span {block:Artist}style="display:none;"{/block:Artist}>Unknown</span>{block:Artist}{Artist}{/block:Artist}<br>
  732. <li><i class="oi-playlist"></i> <b>Title:</b> <span {block:TrackName}style="display:none;"{/block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}<br>
  733. <li><i class="oi-disc"></i> <b>Album:</b> <span {block:Album}style="display:none;"{/block:Album}>Unknown</span>{block:Album}{Album}{/block:Album}
  734. <li><i class="oi-repeat"></i> <b>Plays:</b> {FormattedPlayCount}
  735. </ul>
  736. {block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}
  737. </div>{/block:Audio}{block:Video}<div class="vid t">
  738. <div class="video">
  739. {block:IndexPage}{Video-400}{/block:IndexPage}{block:PermalinkPage}{Video-700}{/block:PermalinkPage}
  740. </div>
  741. </div>{/block:Video}{block:Answer}<div class="answer t">
  742. <div class="question">
  743. <span class="asker"><img src="{AskerPortraitURL-24}"> {Asker}</span>
  744. {Question}
  745. </div>
  746. {block:Answerer}<div class="question">
  747. <span class="asker"><img src="{AnswererPortraitURL-24} "> {Answerer}</span>
  748. {Answer}
  749. </div>{/block:Answerer}
  750. <div class="caption">
  751. {Replies}
  752. </div>
  753. </div>{/block:Answer}{block:IndexPage}
  754. <div class="mask">
  755. <div class="more">
  756. <a href="{Permalink}" target="_blank">{TimeAgo}</a>
  757. <a href="{Permalink}" target="_blank">{NoteCount}</a>
  758. <a href="{ReblogURL}" target="_blank">reblog</a>
  759. </div>
  760. </div>
  761. {/block:IndexPage}{block:PermalinkPage}{block:Caption}
  762. <div class="caption">
  763. {Caption}
  764. </div>{/block:Caption}
  765. {block:Date}<ul class="extra-info">
  766. <li><i class="oi-time"></i> {DayOfMonthWithZero}.{MonthNumberWithZero}.{ShortYear} ({TimeAgo})
  767. {block:NoteCount}<li><i class="oi-chart"></i> {NoteCountWithLabel}{/block:NoteCount}
  768. {block:RebloggedFrom}<li><i class="oi-refresh"></i> <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
  769. {block:ContentSource}<li><i class="oi-globe"></i> <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource}
  770. {block:HasTags}<li><i class="oi-tags"></i> {block:Tags}<a href="/tagged/{Tag}">#{Tag}</a> {/block:Tags}{/block:HasTags}
  771. </ul>{/block:Date}
  772. {block:PostNotes}<div id="notes">
  773. {PostNotes-16}
  774. </div>{/block:PostNotes}
  775. {/block:PermalinkPage}
  776. </article>
  777. {/block:Posts}
  778. </section>
  779. </div>
  780. {block:Pagination}
  781. <div class="pagination" style="visibility:hidden;">
  782. {block:NextPage}<a href="{NextPage}" id="next-link">next</a>{/block:NextPage}
  783. </div>
  784. {/block:Pagination}
  785. <script src="//static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  786. <script src="//static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  787. <script src="//static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  788. <link href="//static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  789. <script src="//static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  790. <script src="//static.tumblr.com/wgg6svp/I8Yobwo15/unnest.min.js"></script>
  791. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  792. <script>
  793. var pxuOptions = {
  794. lightbox: true,
  795. rounded: false,
  796. gutter: '3px',
  797. photoset: '.photo-slideshow',
  798. photoWrap: '.photo-data',
  799. photo: '.pxu-photo'
  800. }, infScrollOptions = {
  801. navSelector : "div.pagination",
  802. nextSelector : ".pagination a#next-link",
  803. itemSelector : "article",
  804. loading: {
  805. finishedMsg: "<p>You've reached the end of the Earth.</p>",
  806. img : "https://res1.nabtrade.com.au/Content/Images/ajax_loader.gif",
  807. msg: null,
  808. msgText: ""
  809. },
  810. }, masonryOptions = {
  811. itemSelector: 'article',
  812. isAnimated: false,
  813. columnWidth: 210,
  814. gutterWidth: 40,
  815. }, unnestOptions = {
  816. yourCaption: ".caption",
  817. wrapName: ".tumblr_parent",
  818. newCaptionUsername: true,
  819. originalPostCaptionUsername: false,
  820. tumblrAvatars: true,
  821. tumblrAvatarClass: ".caption_avatar",
  822. usernameColon: false
  823. }
  824.  
  825. var divs = $('#t-bar');
  826. var height = $('header').outerHeight() + 40;
  827. $(window).scroll(function(){
  828. if($(window).scrollTop() < height ){
  829. divs.fadeOut(150);
  830. } else {
  831. divs.fadeIn(150);
  832. }
  833. });
  834. $(function(){
  835. $('.photo-slideshow').pxuPhotoset(pxuOptions);
  836. $('article').unnest(unnestOptions);
  837. {block:IndexPage}
  838. var $tumblelog = $('#posts');
  839. $tumblelog.imagesLoaded(function () {
  840. $tumblelog.masonry(masonryOptions);
  841. });
  842. $tumblelog.infinitescroll(
  843. infScrollOptions, function( newElements ) {
  844. var $newElems = $( newElements );
  845. var $newElemsIDs = $newElems.map(function () {
  846. return this.id;
  847. }).get();
  848. $newElems.find('.photo-slideshow').pxuPhotoset(pxuOptions);
  849. $newElems = $(newElements).css({ opacity: 0, zIndex: -1});
  850. $newElems.imagesLoaded(function(){
  851. $newElems.animate({ opacity: 1, zIndex: 1 });
  852. $tumblelog.masonry( 'appended', $newElems );
  853. });
  854. $newElems.unnest(unnestOptions);
  855. Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
  856. resizeVideos();
  857. });
  858. {/block:IndexPage}
  859. });
  860. </script>
  861. </body>
  862. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!