API tools faq
paste
Advertisement
neothm

#07 RUNAWAY

neothm
Jul 25th, 2015
3,336
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.08 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html lang="en">
  3. <!--
  4. #07 RUNAWAY by Neo
  5. Find me on tumblr: @NEOTHM | @NEOVAK
  6. If you need help/spotted a glitch, feel free to message me!
  7. Thank you for taking an interest in this code. Enjoy. ♡
  8. -->
  9. <head>
  10. <meta charset="utf-8">
  11. <title>{block:PostTitle}{PostTitle} | {/block:PostTitle}{Title}</title>
  12. {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description}
  13. <link rel="shortcut icon" href="{Favicon}">
  14. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  15. <link href='//fonts.googleapis.com/css?family=Lato:300,400,700|Montserrat:400,700|Inconsolata:400,700|Quattrocento+Sans:400,700' rel='stylesheet' type='text/css'>
  16. <link rel="stylesheet" href="http://static.tumblr.com/wgg6svp/jSmnqcghc/normalizer.css">
  17. <meta name="image:Header" content="">
  18. <meta name="image:BlogLoaderGif" content="http://static.tumblr.com/wgg6svp/wRGns2bpr/loading.gif">
  19. <meta name="text:HeaderHeight" content="100%">
  20. <meta name="text:TagToEnhance" content="fullsize">
  21. <meta name="if:EnhancedTag" content="0">
  22. <meta name="color:HeaderFontColor" content="#000">
  23. <meta name="color:Links" content="#aaa">
  24. <meta name="color:LinksHover" content="#000">
  25. <meta name="color:Text" content="#000">
  26. <meta name="text:DescriptionWidth" content="50%">
  27. <meta name="if:BlogLoader" content="1">
  28. <meta name="if:HeaderOverlay" content="1">
  29. <meta name="if:HeaderArrowDown" content="1">
  30. <meta name="if:UnderlineLinks" content="1">
  31. <meta name="if:HideCaptions" content="1">
  32. <meta name="if:RoundedPosts" content="1">
  33. <meta name="if:SectionHoverEffect" content="1">
  34. <meta name="if:FadedImages" content="0">
  35. <meta name="if:GrayscaleImages" content="0">
  36. <meta name="select:HeaderOverlayOpacity" content=".3">
  37. <meta name="select:HeaderOverlayOpacity" content=".7">
  38. <meta name="color:HeaderOverlay" content="#fff">
  39. <meta name="select:Font" content="'Inconsolata'" title="Inconsolata">
  40. <meta name="select:Font" content="'Lato'" title="Lato">
  41. <meta name="select:Font" content="'Montserrat'" title="Montserrat">
  42. <meta name="select:Font" content="'Quattrocento Sans'" title="Quattrocento Sans">
  43. <meta name="select:FontSize" content="9px">
  44. <meta name="select:FontSize" content="10px">
  45. <meta name="select:FontSize" content="11px">
  46. <meta name="select:FontSize" content="12px">
  47. <meta name="select:FontSize" content="13px">
  48. <meta name="select:FontSize" content="14px">
  49. <meta name="select:FontSize" content="15px">
  50. <meta name="select:NextPage" content="lmorbtn" title="Load more button">
  51. <meta name="select:NextPage" content="pagination" title="Pagination">
  52. <meta name="select:NextPage" content="ifntscroll" title="Infinite Scroll">
  53. <meta name="if:Link1" content="1">
  54. <meta name="if:Link2" content="0">
  55. <meta name="if:Link3" content="0">
  56. <meta name="if:Link4" content="0">
  57. <meta name="if:Link5" content="0">
  58. <meta name="if:Link6" content="0">
  59. <meta name="text:Link1Name" content="">
  60. <meta name="text:Link1URL" content="http://">
  61. <meta name="text:Link2Name" content="">
  62. <meta name="text:Link2URL" content="http://">
  63. <meta name="text:Link3Name" content="">
  64. <meta name="text:Link3URL" content="http://">
  65. <meta name="text:Link4Name" content="">
  66. <meta name="text:Link4URL" content="http://">
  67. <meta name="text:Link5Name" content="">
  68. <meta name="text:Link5URL" content="http://">
  69. <meta name="text:Link6Name" content="">
  70. <meta name="text:Link6URL" content="http://">
  71.  
  72.  
  73. <style type="text/css">
  74. *{
  75. margin:0;
  76. padding:0;
  77. }
  78. ::selection{
  79. background-color:#000;
  80. color:#fff;
  81. }
  82. ::-moz-selection{
  83. background-color:#000;
  84. color:#fff;
  85. }
  86. ::-webkit-scrollbar{
  87. width:11px;
  88. height:11px;
  89. background-color:#f2f2f2;
  90. }
  91. ::-webkit-scrollbar-track{
  92. border:5px solid #f2f2f2;
  93. background-color: #f2f2f2;
  94. }
  95. ::-webkit-scrollbar-thumb{
  96. border:5px solid #f2f2f2;
  97. background-color: #aaa;
  98. }
  99. .tmblr-iframe.iframe-controls--desktop{
  100. filter:invert(100%);
  101. -webkit-filter:invert(100%);
  102. -moz-filter:invert(100%);
  103. -ms-filter:invert(100%);
  104. -o-filter:invert(100%);
  105. transform:scale(.8 .8);
  106. -webkit-transform:scale(.8 .8);
  107. -moz-transform:scale(.8 .8);
  108. top:10px;
  109. position:fixed;
  110. opacity:.3;
  111. transition-duration:.3s;
  112. -webkit-transition-duration:.3s;
  113. -moz-transition-duration:.3s;
  114. -ms-transition-duration:.3s;
  115. -o-transition-duration:.3s;
  116. z-index:999999999999999999!important;
  117. }
  118. .tmblr-iframe.iframe-controls--desktop:hover{
  119. opacity:.7;
  120. transition-duration:.3s;
  121. -webkit-transition-duration:.3s;
  122. -moz-transition-duration:.3s;
  123. -ms-transition-duration:.3s;
  124. -o-transition-duration:.3s;
  125. }
  126.  
  127. #infscr-loading, a#nxt, footer.ifntscroll,
  128. footer.pagination #loadmore,
  129. footer.lmorbtn #pagination,
  130. .lightbox-caption{block:IfHideCaptions}{block:IndexPage},
  131. .hde{/block:IndexPage}{/block:IfHideCaptions}{
  132. display:none!important;
  133. }
  134. .tmblr-lightbox img {
  135. box-shadow: none!important;
  136. border-radius:{block:IfRoundedPosts}2{/block:IfRoundedPosts}0px!important;
  137. }
  138. .vignette{
  139. background:transparent!important;
  140. }
  141. .tmblr-lightbox {
  142. background-color: rgba(255,255,255,.5)!important;
  143. }
  144. #s-m-t-tooltip{
  145. line-height:100%;
  146. font-size:8px;
  147. text-transform:uppercase;
  148. text-align:center;
  149. letter-spacing:1px;
  150. max-width:100px;
  151. z-index:9999!important;
  152. padding:5px;
  153. margin:15px;
  154. background:#fff;
  155. border:1px solid #f2f2f2;
  156. color:#000;
  157. }
  158.  
  159. a{
  160. color:{color:Links};
  161. text-decoration:none;
  162. transition-duration:.3s;
  163. -webkit-transition-duration:.3s;
  164. -moz-transition-duration:.3s;
  165. -ms-transition-duration:.3s;
  166. -o-transition-duration:.3s;
  167. }
  168.  
  169. {block:ifUnderlineLinks}
  170. .caption a, h2 a{
  171. padding-bottom:1.5px;
  172. border-bottom:1px solid {color:Links};
  173. }
  174. .caption a:hover, h2 a:hover{
  175. border-bottom-color:transparent;
  176. }
  177. {/block:ifUnderlineLinks}
  178.  
  179. a:hover{
  180. color:{color:LinksHover};
  181. cursor:crosshair!important;
  182. transition-duration:.3s;
  183. -webkit-transition-duration:.3s;
  184. -moz-transition-duration:.3s;
  185. -ms-transition-duration:.3s;
  186. -o-transition-duration:.3s;
  187. }
  188.  
  189. html, body{
  190. text-align:justify;
  191. height:100%;
  192. font:lighter {select:FontSize}/180% {select:Font}, sans-serif;
  193. color:{color:Text};
  194. background-color:#f2f2f2;
  195. -webkit-font-smoothing: antialiased;
  196. -moz-osx-font-smoothing: grayscale;
  197. }
  198.  
  199. header{
  200. width:100%;
  201. height:{text:HeaderHeight};
  202. background:#fff url('{image:Header}') center;
  203. background-size:cover;
  204. overflow:hidden;
  205. position:relative;
  206. text-align:center;
  207. }
  208. header:before{block:ifBlogLoader}, #loader:before{/block:ifBlogLoader}{
  209. content: "";
  210. display: inline-block;
  211. height: 100%;
  212. width: 1%;
  213. vertical-align: middle;
  214. }
  215. {block:IfHeaderOverlay}
  216. header:after{
  217. position:absolute;
  218. top:0;
  219. left:0;
  220. width:100%;
  221. height:100%;
  222. display:block;
  223. content:"";
  224. background-color:{color:HeaderOverlay};
  225. opacity:{select:HeaderOverlayOpacity};
  226. z-index:0;
  227. }
  228. {/block:IfHeaderOverlay}
  229. #description{
  230. z-index:1;
  231. position:relative;
  232. display: inline-block;
  233. vertical-align: middle;
  234. text-transform:uppercase;
  235. font-size:12px;
  236. text-align:center;
  237. line-height:130%;
  238. width:{text:DescriptionWidth};
  239. color:{color:HeaderFontColor};
  240. }
  241. header h1{
  242. display:inline-block;
  243. text-transform:lowercase;
  244. font:italic bold 70px/80% 'Georgia', serif;
  245. display:block;
  246. margin-bottom:20px;
  247. }
  248. {block:ifHeaderArrowDown}
  249. a.toposts{
  250. z-index:2;
  251. position:absolute;
  252. font-size:30px;
  253. line-height:80px;
  254. bottom:0;
  255. left:0;
  256. right:0;
  257. text-align:center;
  258. color:{color:HeaderFontColor};
  259. }
  260. {/block:ifHeaderArrowDown}
  261. nav{
  262. background-color:#fff;
  263. line-height:50px;
  264. text-transform:uppercase;
  265. letter-spacing:2px;
  266. text-align:center;
  267. font-size:9px;
  268. border-bottom:1px solid #eee;
  269. }
  270. .fixed{
  271. position:fixed;
  272. top:0;
  273. left:0;
  274. width:100%;
  275. z-index:999;
  276. }
  277. nav a{
  278. display:inline-block;
  279. margin:0 10px;
  280. }
  281.  
  282. section{
  283. width:720px;
  284. overflow:hidden;
  285. margin:10px auto;
  286. position:relative;
  287. padding:50px 0px 50px 190px;
  288. {block:DayPage}padding-left:0px;width:1080px;{/block:DayPage}
  289. {block:TagPage}padding-left:0px;width:1080px;{/block:TagPage}
  290. }
  291. section:after{
  292. width:300px;
  293. content:"";
  294. display:block;
  295. position:absolute;
  296. right:0;
  297. left:0;
  298. bottom:0;
  299. margin:auto;
  300. height:1px;
  301. background-color:#fff;
  302. }
  303.  
  304. main{
  305. overflow-x:hidden;
  306. }
  307.  
  308. article{
  309. /*outer-width: 300px;*/
  310. /* +margins: 360px*/
  311. width:238px;
  312. padding:20px;
  313. border:1px solid #eee;
  314. background-color:#fff;
  315. float:left;
  316. overflow:hidden;
  317. margin:30px;
  318. position:relative;
  319. {block:IfRoundedPosts}
  320. border-radius:20px;
  321. {/block:IfRoundedPosts}
  322. box-shadow:0px 0px 10px rgba(100,100,100,0);
  323. transition:box-shadow .2s;
  324. }
  325.  
  326. article:hover{
  327. box-shadow:0px 0px 10px rgba(100,100,100,.1);
  328. transition:box-shadow .2s;
  329. }
  330.  
  331. {block:PermalinkPage}
  332. main{
  333. width:542px;
  334. margin:auto;
  335. }
  336.  
  337. article{
  338. width:500px;
  339. margin:100px 0;
  340. float:none;
  341. box-shadow:none;
  342. }
  343.  
  344. article, article img, article iframe, article embed, article video{
  345. border-radius:0px;
  346. }
  347. {/block:PermalinkPage}
  348.  
  349. article img{
  350. height:auto;
  351. }
  352. {block:IfEnhancedTag}
  353. article.{text:TagToEnhance}{
  354. {block:IndexPage}
  355. width:598px;
  356. float:none!important;
  357. {/block:IndexPage}
  358. {block:DayPage}
  359. margin:30px auto;
  360. {/block:DayPage}
  361. {block:TagPage}
  362. margin:30px auto;
  363. {/block:TagPage}
  364. }
  365. {/block:IfEnhancedTag}
  366.  
  367. .permadate{
  368. position:absolute;
  369. left:0;
  370. top:0;
  371. bottom:0;
  372. margin:auto 0;
  373. width:70px;
  374. height:70px;
  375. text-align:center;
  376. font-size:20px;
  377. padding:10px 20px 30px;
  378. transition-duration:.3s;
  379. transition-delay:.2s;
  380. border:3px solid transparent;
  381. border-radius:50%;
  382. }
  383. .permadate a{
  384. color:#ccc;
  385. }
  386. .permadate b{
  387. margin:0 auto 10px;
  388. display:table;
  389. padding-bottom:10px;
  390. border-bottom:2px solid #fff;
  391. font:italic bold 40px/100% Georgia, serif;
  392. }
  393. .permadate span{
  394. letter-spacing:-2px;
  395. }
  396. {block:ifSectionHoverEffect}
  397. .permadate:hover{
  398. transition-delay:0s;
  399. cursor:help;
  400. border-color:#fff;
  401. transition-duration:.3s;
  402. }
  403. .permadate:before,
  404. .permadate:after{
  405. width:3px;
  406. height:0px;
  407. content:"";
  408. display:block;
  409. position:absolute;
  410. left:0;
  411. right:0;
  412. background-color:#fff;
  413. margin:auto;
  414. transition-duration:.3s;
  415. transition-delay:0s;
  416. bottom:110px;
  417. opacity:0;
  418. }
  419. .permadate:after{
  420. bottom:auto;
  421. top:110px;
  422. }
  423. .permadate:hover:before,
  424. .permadate:hover:after{
  425. opacity:1;
  426. transition-delay:.2s;
  427. transition-duration:.3s;
  428. height:150%;
  429. }
  430. {/block:ifSectionHoverEffect}
  431.  
  432. article:hover .upper_perma{
  433. opacity:1;
  434. transition-duration:.4s;
  435. }
  436. .upper_perma a{
  437. color:#000;
  438. display:block;
  439. }
  440. /*516X287*/
  441. .upper_perma img{
  442. margin-top:25px;
  443. display:inline;
  444. width:60px;
  445. transform:scale(.8,.8);
  446. transition-duration:.4s;
  447.  
  448. }
  449. article:hover .upper_perma img{
  450. transform:scale(1,1);
  451. transition-duration:.4s;
  452. }
  453. .upper_perma{
  454. z-index:9;
  455. background-color:rgba(255,255,255,.3);
  456. width:80px;
  457. height:80px;
  458. text-align:center;
  459. border-radius:50px;
  460. position:absolute;
  461. top:0;
  462. left:0;
  463. right:0;
  464. bottom:0;
  465. margin:auto;
  466. border:10px solid rgba(255,255,255,.3);
  467. opacity:0;
  468. transition-duration:.4s;
  469. }
  470.  
  471.  
  472. .under_perma{
  473. font-size:11px;
  474. margin:10px 0;
  475. line-height:130%;
  476. }
  477.  
  478. .fu-tumblr *{
  479. display:block;
  480. min-width:100%;
  481. {block:IfEnhancedTag}
  482. }
  483. article:not(.{text:TagToEnhance}) .fu-tumblr *{
  484. {/block:IfEnhancedTag}
  485. height:calc(100% - 75px);
  486. }
  487. article iframe{
  488. display:block;
  489. }
  490. {block:IfRoundedPosts}
  491. article img, article iframe, article embed, article video{
  492. border-radius:10px;
  493. }
  494. {/block:IfRoundedPosts}
  495.  
  496. {block:IndexPage}
  497. article img, iframe.photoset{
  498. {block:IfFadedImages}opacity:.7;{/block:IfFadedImages}
  499. {block:IfGrayscaleImages}
  500. -webkit-filter: grayscale(100%);
  501. -moz-filter: grayscale(100%);
  502. -o-filter: grayscale(100%);
  503. -ms-filter: grayscale(100%);
  504. filter: grayscale(100%);
  505. {/block:IfGrayscaleImages}
  506. transition-duration:.3s;
  507. -webkit-transition-duration:.3s;
  508. -moz-transition-duration:.3s;
  509. -ms-transition-duration:.3s;
  510. -o-transition-duration:.3s;
  511. }
  512. article:hover img, article:hover iframe.photoset{
  513. {block:IfFadedImages}opacity:1;{/block:IfFadedImages}
  514. {block:IfGrayscaleImages}
  515. -webkit-filter: grayscale(0%);
  516. -moz-filter: grayscale(0%);
  517. -o-filter: grayscale(0%);
  518. -ms-filter: grayscale(0%);
  519. filter: grayscale(0%);
  520. {/block:IfGrayscaleImages}
  521. transition-duration:.3s;
  522. -webkit-transition-duration:.3s;
  523. -moz-transition-duration:.3s;
  524. -ms-transition-duration:.3s;
  525. -o-transition-duration:.3s;
  526. }
  527. {/block:IndexPage}
  528. h2{
  529. text-align:center;
  530. font-size:9px;
  531. text-transform:uppercase;
  532. letter-spacing:1.5px;
  533. }
  534. article *{
  535. max-width:100%;
  536. }
  537. .caption p, article ul, article ol, article pre, article blockquote{
  538. margin:10px 0;
  539. }
  540. article pre{
  541. white-space:normal;
  542. }
  543. article ul, article ol, article li{
  544. padding-left:30px;
  545. }
  546. article blockquote{
  547. padding-left:20px;
  548. border-left:1px solid #eee;
  549. }
  550. .caption{
  551. word-break:break-word;
  552. padding:15px;
  553. }
  554.  
  555. ul.chat{
  556. padding:0;
  557. }
  558. .chat li{
  559. list-style-type:none;
  560. padding:10px 0;
  561. }
  562. .chat b{
  563. font-size:10px;
  564. text-transform:uppercase;
  565. letter-spacing:1px;
  566. }
  567. .instg{
  568. text-align:right;
  569. }
  570. .instg span{
  571. text-align:left;
  572. display:block;
  573. padding:10px;
  574. background-color:#eee;
  575. border-radius:10px;
  576. }
  577. .instg b:before{
  578. content:"";
  579. display:block;
  580. position:absolute;
  581. top:-7px;
  582. left:0;
  583. width:0;
  584. height:0;
  585. border-left:17px solid transparent;
  586. border-right:2px solid transparent;
  587. border-top:13px solid #eee;
  588. }
  589. .instg b{
  590. display:inline;
  591. position:relative;
  592. text-transform:uppercase;
  593. letter-spacing:1px;
  594. font-size:9px;
  595. padding:0 10px 0 25px;
  596.  
  597. }
  598. .player{
  599. display:inline-block;
  600. width:40px;
  601. height:40px;
  602. padding:10px 14px 10px 0;
  603. margin-right:15px;
  604. vertical-align:middle;
  605. border-right:1px solid #f2f2f2;
  606. position:relative;
  607. }
  608.  
  609. .musq p{
  610. vertical-align:middle;
  611. display:inline-block;
  612. width:calc(100% - 80px);
  613.  
  614. }
  615. .musq p{
  616. text-align:center;
  617. }
  618. .audio_player{
  619. opacity:1;
  620. top:10px;
  621. left:0px;
  622. position:absolute;
  623. display:block;
  624. width:40px!important;
  625. height:40px!important;
  626. overflow:hidden;
  627. background-color:#fff;
  628. }
  629. iframe.tumblr_audio_player{
  630. position:absolute;
  631. width:40px;
  632. height:40px;
  633. top:0;
  634. left:0;
  635. right:0;
  636. bottom:0;
  637. margin:auto;
  638. background-color:transparent!important;
  639.  
  640. }
  641. #notes *{
  642. margin:0;
  643. padding:0;
  644. }
  645. #notes{
  646. clear:both;
  647. margin-top:30px;
  648. padding-bottom:50px;
  649. text-align:center;
  650. }
  651. #notes li{
  652. padding:0;
  653. margin:0;
  654. list-style-type:none;
  655. display:inline-block;
  656. width:25px;
  657. height:25px;
  658. margin:7px;
  659. overflow:hidden;
  660. border-radius:25px;
  661. }
  662. #notes img{
  663. width:25px;
  664. height:25px;
  665. }
  666. li.more_notes_link_container{
  667. background:url('http://cdn.flaticon.com/png/256/59565.png') no-repeat;
  668. background-size:25px;
  669. background-position:center;
  670. opacity:.5;
  671.  
  672. }
  673. a.more_notes_link{
  674. opacity:0;
  675. }
  676. footer{
  677. width:100%;
  678. margin-top:50px;
  679. padding-bottom:100px;
  680. background-color:#fff;
  681. text-align:center;
  682. }
  683. footer a, #pagination span{
  684. margin:-4px 15px 0;
  685. display:inline-block;
  686. color:#ccc;
  687. font:italic bold 17px/210% Georgia, serif;
  688. }
  689. #loadmore{
  690. margin-top:0;
  691. }
  692. footer a{
  693. border-top:1px solid #ccc;
  694. }
  695. footer a:hover{
  696. border-top-color:transparent;
  697. }
  698. #pagination span{
  699. font-size:20px;
  700. color:#aaa;
  701. }
  702.  
  703. {block:IfBlogLoader}
  704. #loader{
  705. position:fixed;
  706. top:0;
  707. left:0;
  708. width:100%;
  709. height:100%;
  710. background-color:#fff;
  711. z-index:9;
  712. text-align:center;
  713. }
  714.  
  715. #loader img{
  716. max-width:70px;
  717. position:relative;
  718. display: inline-block;
  719. vertical-align: middle;
  720.  
  721. }
  722. {/block:IfBlogLoader}
  723. </style>
  724. </head>
  725. <body>
  726. {block:IndexPage}
  727. {block:IfBlogLoader}
  728. <div id="loader">
  729. <img src="{image:BlogLoaderGif}">
  730. </div>
  731. {/block:IfBlogLoader}
  732. <header>
  733. <div id="description">
  734. <h1>{Title}</h1>
  735. {block:Description}{Description}{/block:Description}
  736. </div>
  737. {block:ifHeaderArrowDown}
  738. <a class="toposts">▿</a>
  739. {/block:ifHeaderArrowDown}
  740. </header>
  741. {/block:IndexPage}
  742. <nav{block:PermalinkPage} class="fixed"{/block:PermalinkPage}>
  743. <a href="/">index</a>
  744. / <a href="/ask">message</a>
  745. {block:IfLink1} / <a href="{text:Link1URL}">{text:Link1Name}</a>{/block:IfLink1}
  746. {block:IfLink2} / <a href="{text:Link2URL}">{text:Link2Name}</a>{/block:IfLink2}
  747. {block:IfLink3} / <a href="{text:Link3URL}">{text:Link3Name}</a>{/block:IfLink3}
  748. {block:IfLink4} / <a href="{text:Link4URL}">{text:Link4Name}</a>{/block:IfLink4}
  749. {block:IfLink5} / <a href="{text:Link5URL}">{text:Link5Name}</a>{/block:IfLink5}
  750. {block:IfLink6} / <a href="{text:Link6URL}">{text:Link6Name}</a>{/block:IfLink6}
  751. </nav>
  752. <main>
  753. {block:Posts}
  754. {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}<!-- {block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  755. <article class="{block:Date}{ShortYear}{MonthNumberWithZero}{DayOfMonthWithZero}{/block:Date} {block:IfEnhancedTag}{TagsAsClasses}{/block:IfEnhancedTag}">
  756.  
  757. {block:IndexPage}
  758. <div class="upper_perma">
  759. <a href="{Permalink}"><img src="http://static.tumblr.com/wgg6svp/qWKns3dkx/eye.png"></a>
  760. </div>
  761. {/block:IndexPage}
  762.  
  763. {block:Text}
  764. {block:Title}<h2>{Title}</h2>{/block:Title}
  765. <div class="caption">
  766. {Body}
  767. </div>
  768. {/block:Text}
  769.  
  770. {block:Link}
  771. <h2><a href="{URL}">{Name} »</a></h2>
  772. {block:Description}
  773. <div class="caption hde">
  774. {Description}
  775. </div>
  776. {/block:Description}
  777. {/block:Link}
  778.  
  779. {block:Quote}
  780. <h2>{Quote}</h2>
  781. {block:Source}
  782. <div class="caption">
  783. <i>— {Source}</i>
  784. </div>
  785. {/block:Source}
  786. {/block:Quote}
  787.  
  788. {block:Chat}
  789. {block:Title}
  790. <h2><a href="{Permalink}">{Title}</a></h2>
  791. {/block:Title}
  792. <ul class="chat">
  793. {block:Lines}
  794. <li>
  795. {block:Label}
  796. <b>{Label}</b>
  797. {/block:Label}
  798. {Line}
  799. </li>
  800. {/block:Lines}
  801. </ul>
  802. {/block:Chat}
  803.  
  804. {block:Photo}
  805. {LinkOpenTag}
  806. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" style="min-width:100%;">
  807. {LinkCloseTag}
  808. {block:Caption}
  809. <div class="caption hde">
  810. {Caption}
  811. </div>
  812. {/block:Caption}
  813. {/block:Photo}
  814.  
  815. {block:Photoset}
  816. {Photoset}
  817. {block:Caption}
  818. <div class="caption hde">
  819. {Caption}
  820. </div>
  821. {/block:Caption}
  822. {/block:Photoset}
  823.  
  824. {block:Video}
  825. <div class="fu-tumblr">{Video-500}</div>
  826. {block:Caption}
  827. <div class="caption hde">
  828. {Caption}
  829. </div>
  830. {/block:Caption}
  831. {/block:Video}
  832.  
  833. {block:Audio}
  834. <div class="musq">
  835. <div class="player">
  836. {block:AudioPlayer} {AudioPlayer} {/block:AudioPlayer}
  837. </div>
  838. <p>
  839. {block:Artist}
  840. <b>{Artist}</b> <br>
  841. {/block:Artist}
  842. {block:TrackName}
  843. {TrackName}
  844. {/block:TrackName}
  845. </p>
  846. </div>
  847. {block:Caption}
  848. <div class="caption hde">{Caption}</div>
  849. {/block:Caption}
  850. {/block:Audio}
  851.  
  852. {block:Answer}
  853. <div class="instg">
  854. <span>
  855. {Question}
  856. </span>
  857.  
  858. <b>{Asker}</b>
  859. </div>
  860.  
  861. <div class="caption">{Answer}</div>
  862. {/block:Answer}
  863.  
  864. {block:PermalinkPage}
  865. {block:Date}
  866. <div class="under_perma">
  867. <b>Reblogged:</b> {TimeAgo}
  868. {block:RebloggedFrom}
  869. <br><b>Via:</b> <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a>
  870. <br><b>Source:</b> <a href="{ReblogRootURL}" title="{ReblogRootTitle}">©{ReblogRootName}</a>
  871. {/block:RebloggedFrom}
  872. {block:NoteCount}
  873. <br><b>With:</b> {NoteCountWithLabel}
  874. {/block:NoteCount}
  875. {block:HasTags}
  876. <br><b>Filed Under:</b> {block:Tags}#<a href="{TagURL}">{Tag}</a>   {/block:Tags}
  877. {/block:HasTags}
  878. </div>
  879. {/block:Date}
  880. {/block:PermalinkPage}
  881.  
  882. {block:PostNotes}
  883. <div id="notes">
  884. {PostNotes-64}
  885. </div>
  886. {/block:PostNotes}
  887. </article>
  888. {/block:Posts}
  889. </main>
  890.  
  891. {block:Pagination}
  892. <footer class="{select:NextPage}">
  893. <a id="loadmore">Load more posts</a>
  894. <span id="pagination">
  895. {block:JumpPagination length="5"}
  896. {block:CurrentPage}<span>{PageNumber}</span>{/block:CurrentPage}
  897. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}
  898. </span>
  899. {block:NextPage}<a id="nxt" href="{NextPage}"></a>{/block:NextPage}
  900. </footer>
  901. {/block:Pagination}
  902.  
  903.  
  904. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  905. <script src="http://static.tumblr.com/wgg6svp/sDinmsq3x/jquery.style-my-tooltips.js"></script>
  906. <script src="http://static.tumblr.com/q8c0vxg/xYrnjmd74/jquery.infinitescroll.min.js"></script>
  907. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  908. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  909. <script src="http://static.tumblr.com/emvnqzg/NOVo0fisl/scripts.js"></script>
  910. <script>
  911. $("[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:200, tip_fade_speed:500 });
  912. {block:IndexPage}
  913. $(function(){
  914. var datas = [],
  915. datam = [],
  916. oula = [],
  917. currentPostClasses = [],
  918. oldPostClasses = [],
  919. $i,
  920. $b = 0,
  921. perma;
  922.  
  923. $('article').each(function(){
  924. currentPostClasses = $(this).attr('class').split(" ");
  925. if($(this).is(':not(:first-child)')) oldPostClasses = $(this).prev().attr('class').split(" ");
  926. if(currentPostClasses[0] != oldPostClasses[0]){
  927. datas.push(currentPostClasses[0]);
  928. $(this).css({'clear': 'left'});
  929. }
  930. });
  931.  
  932. for($i = 0; $i < datas.length; $i++){
  933. datam = datas[$i].match(/.{1,2}/g);
  934. perma = '<div class="permadate"><a href="http://{Name}.tumblr.com/day/20'+datam[0]+'/'+datam[1]+'/'+datam[2]+'/"><b>'+datam[2]+'</b><span>'+datam[1]+'/'+datam[0]+'</a></span></div>';
  935.  
  936. $('article.'+datas[$i]).wrapAll('<section />');
  937. $('article.'+datas[$i]).parent().append(perma);
  938. }
  939.  
  940. if($('footer').hasClass('ifntscroll') || $('footer').hasClass('lmorbtn')){
  941. var $tumblelog = $('section');
  942. $('main').infinitescroll({
  943. navSelector : "#pagination",
  944. nextSelector : "#nxt",
  945. itemSelector : "article",
  946. bufferPx : 50,
  947. done : "",
  948. loading: {
  949. img : "",
  950. msgText: "",
  951. finishedMsg:""
  952. },
  953. },
  954. function( newElements ) {
  955. var $newElems = $( newElements ).css({ opacity: 0 });
  956. $newElems.imagesLoaded(function(){
  957. $newElems.each(function(){
  958. oldPostClasses = $('section:last article:last').attr('class').split(" ");
  959. currentPostClasses = $(this).attr('class').split(" ");
  960. console.log(oldPostClasses);
  961. if(currentPostClasses[0] != oldPostClasses[0]){
  962. $(this).css({'clear': 'left'});
  963. datas.push(currentPostClasses[0]);
  964. $(this).wrap('<section />');
  965. oula = $(this).attr('class').match(/.{1,2}/g);
  966. $('section:last').masonry( 'appended', $(this) );
  967. $b++
  968. $('section:last').masonry( 'appended', '.permadate' );
  969. perma = '<div class="permadate"><a href="http://{Name}.tumblr.com/day/20'+oula[0]+'/'+oula[1]+'/'+oula[2]+'/"><b>'+oula[2]+'</b><span>'+oula[1]+'/'+oula[0]+'</span></a></div>';
  970. $(this).parent().append(perma);
  971. }else{
  972. $('section:last').append( $(this) ).masonry( 'appended', $(this) );
  973. }
  974. });
  975. $newElems.animate({ opacity: 1 });
  976. {block:DayPage}$('.permadate').remove();{/block:DayPage}
  977. {block:TagPage}$('.permadate').remove();{/block:TagPage}
  978. });
  979. });
  980. }
  981. if($('footer').hasClass('lmorbtn')){
  982. $tumblelog.infinitescroll({
  983. behavior: 'twitter'
  984. });
  985. $(window).unbind('.infscr');
  986. $('a#loadmore').click(function(){
  987. $('main').infinitescroll('retrieve');
  988. $('footer').show();
  989. return false;
  990. });
  991. }
  992.  
  993. var nav = $('nav').offset().top;
  994. $(window).scroll(function(){
  995. var scrollTop = $(window).scrollTop();
  996. if(scrollTop > nav){
  997. $('nav').addClass('fixed');
  998. $('main').css('padding-top', '50px');
  999. }else{
  1000. $('nav').removeClass('fixed');
  1001. $('main').css('padding-top', '0px');
  1002. }
  1003. });
  1004.  
  1005. {block:ifHeaderArrowDown}
  1006. $('a.toposts').click(function(e){
  1007. e.preventDefault();
  1008. $('html, body').animate({scrollTop : $('header').height()}, 700);
  1009. });
  1010. {/block:ifHeaderArrowDown}
  1011.  
  1012.  
  1013. var path = window.location.pathname;
  1014. function masonry(){
  1015. var article = 'article:not(.{text:TagToEngance})';
  1016. $('section').imagesLoaded(function(){
  1017. $('section').masonry({
  1018. {block:IfNotEnhancedTag}itemSelector: 'article',{/block:IfNotEnhancedTag}
  1019. {block:IfEnhancedTag}{block:TagPage} itemSelector: article,{/block:TagPage}{/block:IfEnhancedTag}
  1020. itemSelector: 'article',
  1021. isAnimated: true,
  1022. columnWidth: 360
  1023. });
  1024. {block:IfEnhancedTag} {block:TagPage}
  1025. if(path == '/tagged/{text:TagToEnhance}') $("section").masonry('destroy');
  1026. {/block:TagPage} {/block:IfEnhancedTag}
  1027. });
  1028. }
  1029.  
  1030. $(window).load(function(){
  1031. {block:IfBlogLoader}$('#loader').fadeOut(800);{/block:IfBlogLoader}
  1032. {block:IfEnhancedTag}if(path != '/tagged/{text:TagToEnhance}') {/block:IfEnhancedTag} masonry();
  1033. if(!$('footer').hasClass('pagination') {block:IfEnhancedTag} && path != '/tagged/{text:TagToEnhance}' {/block:IfEnhancedTag}) setInterval(function(){masonry();}, 10000 );
  1034. });
  1035. {block:DayPage}
  1036. $('.permadate, #loader').remove();
  1037. {/block:DayPage}
  1038. {block:TagPage}
  1039. $('.permadate, #loader').remove();
  1040. {/block:TagPage}
  1041. });
  1042. {/block:IndexPage}
  1043. </script>
  1044. </body>
  1045. </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!