API tools faq
paste
Advertisement
neothm

#08 PULSE

neothm
Aug 24th, 2015
12,672
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.97 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <!--
  4. #08 PULSE 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|Roboto:300,500,700' rel='stylesheet' type='text/css'>
  16. <link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  17. <link rel="stylesheet" href="http://static.tumblr.com/wgg6svp/jSmnqcghc/normalizer.css">
  18. <meta name="image:sidebar" content="">
  19. <meta name="if:FullSizeBackground" content="0">
  20. <meta name="if:InfiniteScroll" content="1">
  21. <meta name="color:Background" content="#f2f2f2">
  22. <meta name="color:Text" content="#000">
  23. <meta name="color:Link" content="#000">
  24. <meta name="color:Hover" content="#888">
  25. <meta name="image:Background" content="">
  26. <meta name="if:HiddenSidebar" content="1">
  27. <meta name="text:PostWidth" content="500px">
  28. <meta name="select:Font" content="'Roboto'" title="Roboto">
  29. <meta name="select:Font" content="'Lato'" title="Lato">
  30. <meta name="select:Font" content="'Montserrat'" title="Montserrat">
  31. <meta name="select:Font" content="'Quattrocento Sans'" title="Quattrocento Sans">
  32. <meta name="select:SidebarImageSize" content="small" title="small">
  33. <meta name="select:SidebarImageSize" content="medium" title="medium">
  34. <meta name="select:SidebarImageSize" content="big" title="big">
  35. <meta name="select:NumberOfColumns" content="one" title="1">
  36. <meta name="select:NumberOfColumns" content="two" title="2">
  37. <meta name="select:NumberOfColumns" content="three" title="3">
  38. <meta name="select:NumberOfColumns" content="four" title="4">
  39. <meta name="if:Link1" content="1">
  40. <meta name="text:Link1Name" content="Link">
  41. <meta name="text:Link1URL" content="/">
  42. <meta name="if:Link2" content="0">
  43. <meta name="text:Link2Name" content="Link">
  44. <meta name="text:Link2URL" content="/">
  45. <meta name="if:Link3" content="0">
  46. <meta name="text:Link3Name" content="Link">
  47. <meta name="text:Link3URL" content="/">
  48. <meta name="if:Link4" content="0">
  49. <meta name="text:Link4Name" content="Link">
  50. <meta name="text:Link4URL" content="/">
  51. <meta name="if:Link5" content="0">
  52. <meta name="text:Link5Name" content="Link">
  53. <meta name="text:Link5URL" content="/">
  54. <meta name="if:GrayscaleImages" content="0">
  55. <meta name="if:FadedImages" content="0">
  56. <style type="text/css">
  57. *{
  58. margin:0;
  59. padding:0;
  60. }
  61. ::selection{
  62. background-color:#000;
  63. color:#fff;
  64. }
  65. ::-moz-selection{
  66. background-color:#000;
  67. color:#fff;
  68. }
  69. ::-webkit-scrollbar{
  70. width:11px;
  71. height:11px;
  72. background-color:#fff;
  73. }
  74. ::-webkit-scrollbar-track{
  75. border:5px solid #fff;
  76. background-color: #fff;
  77. }
  78. ::-webkit-scrollbar-thumb{
  79. border:5px solid #fff;
  80. background-color: #aaa;
  81. }
  82. #infscr-loading, .vignette{
  83. display:none!important;
  84. }
  85. .tmblr-lightbox img {
  86. border-radius:10px!important;
  87. box-shadow:0px 0px 5px rgba(100,100,100,.8)!important;
  88. }
  89. .tmblr-lightbox {
  90. background-color: rgba(255,255,255,.8)!important;
  91. }
  92. img{
  93. max-width:100%;
  94. height:auto;
  95. }
  96. .tmblr-iframe.iframe-controls--desktop{
  97. filter:invert(100%);
  98. -webkit-filter:invert(100%);
  99. -moz-filter:invert(100%);
  100. -ms-filter:invert(100%);
  101. -o-filter:invert(100%);
  102. transform:scale(.8, .8);
  103. -webkit-transform:scale(.8, .8);
  104. -moz-transform:scale(.8, .8);
  105. top:0px;
  106. right:0px;
  107. position:fixed;
  108. opacity:.3;
  109. transition-duration:.3s;
  110. -webkit-transition-duration:.3s;
  111. -moz-transition-duration:.3s;
  112. -ms-transition-duration:.3s;
  113. -o-transition-duration:.3s;
  114. z-index:999999999999999999!important;
  115. }
  116.  
  117. .tmblr-iframe.iframe-controls--desktop:hover{
  118. opacity:.7;
  119. transition-duration:.3s;
  120. -webkit-transition-duration:.3s;
  121. -moz-transition-duration:.3s;
  122. -ms-transition-duration:.3s;
  123. -o-transition-duration:.3s;
  124. }
  125. #s-m-t-tooltip{
  126. line-height:100%;
  127. font-size:8px;
  128. text-transform:uppercase;
  129. text-align:center;
  130. letter-spacing:1px;
  131. max-width:100px;
  132. z-index:9999!important;
  133. padding:5px;
  134. margin:15px;
  135. background:#fff;
  136. border:1px solid #eee;
  137. color:#000;
  138. }
  139.  
  140. html, body{
  141. text-align:justify;
  142. height:100%;
  143. font:lighter 12px/170% {select:Font}, sans-serif;
  144. color:{color:Text};
  145. background-color:#fff;
  146. overflow:hidden;
  147. -webkit-font-smoothing: antialiased;
  148. -moz-osx-font-smoothing: grayscale;
  149. }
  150.  
  151. a{
  152. color:{color:Link};
  153. text-decoration:none;
  154. }
  155. a:hover{
  156. color:{color:Hover};
  157. }
  158. a, a:hover{
  159. cursor:pointer!important;
  160. transition-duration:.3s;
  161. -webkit-transition-duration:.3s;
  162. -moz-transition-duration:.3s;
  163. -ms-transition-duration:.3s;
  164. -o-transition-duration:.3s;
  165. }
  166. aside{
  167. margin:20px;
  168. margin-right:0;
  169. position:relative;
  170. width:300px;
  171. height:calc(100% - 40px);
  172. float:left;
  173. }
  174. .rotate{
  175. opacity:1!important;
  176. transform:rotate(45deg);
  177. -webkit-transform:rotate(45deg);
  178. -moz-transform:rotate(45deg);
  179. -ms-transform:rotate(45deg);
  180. }
  181. #opening{
  182. z-index:9;
  183. overflow:hidden;
  184. border-radius:50%;
  185. {block:IfNotHiddenSidebar}
  186. position:relative;
  187. margin:80px auto 20px;
  188. {/block:IfNotHiddenSidebar}
  189.  
  190. {block:IfHiddenSidebar}
  191. {block:IndexPage}
  192. margin:auto;
  193. top:0;
  194. bottom:0;
  195. left:0;
  196. right:0;
  197. position:absolute;
  198. {/block:IndexPage}
  199. {block:PermalinkPage}
  200. position:relative;
  201. margin:80px auto 20px;
  202. {/block:PermalinkPage}
  203. {/block:IfHiddenSidebar}
  204.  
  205. }
  206. #opening a{
  207. opacity:0;
  208. position:absolute;
  209. width:100%;
  210. height:100%;
  211. text-align:center;
  212. top:0;
  213. left:0;
  214. font-size:18px;
  215. background-color:rgba(0,0,0,.7);
  216. color:#fff;
  217. }
  218. #opening:hover a{
  219. opacity:1;
  220. }
  221. #opening.small{
  222. width:45px;
  223. height:45px;
  224. line-height:45px;
  225. }
  226. #opening.medium{
  227. width:70px;
  228. height:70px;
  229. line-height:70px;
  230. }
  231. #opening.big{
  232. width:95px;
  233. height:95px;
  234. line-height:95px;
  235. }
  236. h1{
  237. position:relative;
  238. font-size:32px;
  239. line-height:100%;
  240. text-align:left;
  241. margin-bottom:20px;
  242. padding-bottom:20px;
  243. }
  244. nav:before,
  245. h1:after,
  246. h2:after,
  247. {block:PermalinkPage}
  248. .perma:before,
  249. {/block:PermalinkPage}
  250. .infos:before,
  251. .show_notes:before,
  252. #notes:before{
  253. content:"";
  254. position:absolute;
  255. left:0;
  256. right:0;
  257. background-color:#eee;
  258. width:70%;
  259. height:1px;
  260. margin:auto;
  261. }
  262.  
  263. {block:PermalinkPage}
  264. .perma:before,
  265. {/block:PermalinkPage}
  266. .infos:before,
  267. .show_notes:before,
  268. #notes:before{
  269. width:calc(100% - 30px);
  270. }
  271. h1:after{
  272. bottom:0;
  273. }
  274. nav:before,
  275. {block:PermalinkPage}
  276. .perma:before,
  277. {/block:PermalinkPage}
  278. .infos:before,
  279. .show_notes:before,
  280. #notes:before{
  281. top:0;
  282. }
  283. #description{
  284. {block:IfNotHiddenSidebar}
  285. margin:0 40px;
  286. {/block:IfNotHiddenSidebar}
  287. {block:IfHiddenSidebar}
  288. {block:IndexPage}
  289. position:absolute;
  290. left:40px;
  291. right:40px;
  292. top:70%;
  293. opacity:0;
  294. {/block:IndexPage}
  295. {block:PermalinkPage}
  296. margin:0 40px;
  297. {/block:PermalinkPage}
  298. {/block:IfHiddenSidebar}
  299. }
  300. #pagination{
  301. position:absolute;
  302. bottom:30px;
  303. left:0;
  304. right:0;
  305. text-align:center;
  306. {block:IfInfiniteScroll}
  307. display:none;
  308. {/block:IfInfiniteScroll}
  309. }
  310. #pagination a:hover i,
  311. #pagination a:hover{
  312. margin:0 10px;
  313. transition-duration:.3s;
  314. }
  315. #pagination i{
  316. font-size:7px;
  317. vertical-align:1px;
  318. transition-duration:.3s;
  319. }
  320. nav{
  321. text-align:center;
  322. position:relative;
  323. margin-top:20px;
  324. padding-top:20px;
  325. }
  326. nav a{
  327. text-align:left;
  328. display:inline-block;
  329. width:calc(50% - 15px);
  330. padding:5px;
  331. border-bottom:1px solid #eee;
  332. text-transform:uppercase;
  333. letter-spacing:1px;
  334. font-size:9px;
  335. }
  336. nav a:after{
  337. content:".";
  338. }
  339. nav a:hover{
  340. background-color:#eee;
  341. border-color:#eee;
  342. }
  343. #pagination{
  344. text-align:center;
  345. text-transform:uppercase;
  346. letter-spacing:1px;
  347. font-size:9px;
  348. }
  349. main{
  350. float:left;
  351. position:relative;
  352. margin:20px;
  353. width:calc(100% - 360px);
  354. height:calc(100% - 40px);
  355. background:{color:Background} url('{image:Background}');
  356. {block:IfFullSizeBackground}
  357. background-size:cover;
  358. background-attachment:fixed;
  359. {/block:IfFullSizeBackground}
  360. overflow-x:hidden;
  361. overflow-y:auto;
  362. }
  363. .pictures{
  364. display:block;
  365. min-width:100%;
  366. height:auto;
  367. }
  368. article iframe{
  369. display:block;
  370. }
  371. section{
  372. position:relative;
  373. width:100%;
  374. }
  375. h2{
  376. padding:15px;
  377. position:relative;
  378. display:block;
  379. }
  380. .quote, .question, .links{
  381. display:inline-block;
  382. padding:20px 0;
  383. padding-left:80px;
  384. width:calc(100% - 95px);
  385. position:relative;
  386. }
  387. .quote{
  388. font-style:italic;
  389. }
  390. .links:before{
  391. content: "\f367";
  392. }
  393. .quote:before{
  394. content: "\f347";
  395. }
  396. .question:before{
  397. content:"\f143";
  398. }
  399. .quote:before, .question:before, .links:before{
  400. speak: none;
  401. font-style: normal;
  402. font-weight: normal;
  403. font-family: "Ionicons";
  404. font-size:30px;
  405. line-height:40px;
  406. display:block;
  407. width:35px;
  408. left:20px;
  409. position:absolute;
  410. top:0;
  411. margin:auto;
  412. height:40px;
  413. bottom:0;
  414. border-right:1px solid #000;
  415. }
  416. .quote + .caption{
  417. margin:10px;
  418. {block:PermalinkPage}margin-bottom:0;{/block:PermalinkPage}
  419. text-align:center;
  420. letter-spacing:1px;
  421. font-size:9px;
  422. text-transform:uppercase;
  423. }
  424. .question span{
  425. text-transform:uppercase;
  426. letter-spacing:1Px;
  427. font-size:9px;
  428. display:block;
  429. font-weight:normal;
  430. }
  431.  
  432. h2:after{
  433. width:calc(100% - 30px);
  434. bottom:0;
  435. }
  436. .audio{
  437. margin:15px;
  438. }
  439. .player{
  440. display:inline-block;
  441. width:40px;
  442. height:40px;
  443. padding:10px 14px 10px 0;
  444. margin-right:15px;
  445. vertical-align:middle;
  446. border-right:1px solid #eee;
  447. position:relative;
  448. }
  449. .audio p{
  450. vertical-align:middle;
  451. display:inline-block;
  452. width:calc(100% - 75px);
  453. }
  454. .audio p{
  455. text-align:center;
  456. }
  457. .audio img{
  458. display:block;
  459. }
  460. .audio_player{
  461. opacity:.3;
  462. top:10px;
  463. left:0px;
  464. position:absolute;
  465. display:block;
  466. width:40px!important;
  467. height:40px!important;
  468. overflow:hidden;
  469. background-color:#fff;
  470. transition-duration:.8s;
  471. -webkit-transition-duration:.8s;
  472. -moz-transition-duration:.8s;
  473. -ms-transition-duration:.8s;
  474. -o-transition-duration:.8s;
  475. }
  476. iframe.tumblr_audio_player{
  477. position:absolute;
  478. width:40px;
  479. height:40px;
  480. top:0;
  481. left:0;
  482. right:0;
  483. bottom:0;
  484. margin:auto;
  485. background-color:transparent!important;
  486.  
  487. }
  488.  
  489. #one article{
  490. width:{text:PostWidth};
  491. margin:80px auto;
  492. }
  493. #two article{
  494. width:44%;
  495. margin:30px 3%;
  496. }
  497. #three article{
  498. width:30%;
  499. margin:20px 1.5%;
  500. }
  501. #four article{
  502. width:22%;
  503. margin:20px 1.5%;
  504. }
  505.  
  506. article{
  507.  
  508. min-width:180px;
  509. overflow:hidden;
  510. display:block;
  511. position:relative;
  512. background:#fff;
  513. {block:PermalinkPage}
  514. width:500px!important;
  515. margin:40px auto!important;
  516. {/block:PermalinkPage}
  517. }
  518.  
  519. .hover_perma{
  520. opacity:0;
  521. z-index:999;
  522. position:absolute;
  523. top:10px;
  524. left:10px;
  525. right:10px;
  526. margin:auto;
  527. transition-duration:.8s;
  528. -webkit-transition-duration:.8s;
  529. -moz-transition-duration:.8s;
  530. -ms-transition-duration:.8s;
  531. -o-transition-duration:.8s;
  532. }
  533. article:hover .hover_perma,
  534. .audio:hover .audio_player{
  535. opacity:1;
  536. transition-duration:.8s;
  537. -webkit-transition-duration:.8s;
  538. -moz-transition-duration:.8s;
  539. -ms-transition-duration:.8s;
  540. -o-transition-duration:.8s;
  541. }
  542.  
  543. .hover_perma > p{
  544. display:block;
  545. margin-right:5px;
  546. float:left;
  547. text-align:center;
  548. }
  549. .hover_perma > p > a{
  550. line-height:20px;
  551. font-size:10px;
  552. display:block;
  553. width:20px;
  554. height:20px;
  555. background-color:#fff;
  556. margin-bottom:5px;
  557. }
  558. .hover_cap{
  559. font-size:11px;
  560. line-height:130%;
  561. width:calc(100% - 25px);
  562. height:70px;
  563. float:left;
  564. background-color:#fff;
  565. }
  566. .hover_cap > div{
  567. height:50px;
  568. margin:10px;
  569. overflow:hidden;
  570. }
  571. .caption *:not(iframe),
  572. .hover_cap *{
  573. max-width:100%;
  574. height:auto;
  575. }
  576. .caption{
  577. margin:20px;
  578. }
  579. .caption a,
  580. .hover_cap a{
  581. border-bottom:1px solid {color:Link};
  582. }
  583. .caption a:hover,
  584. .hover_cap a:hover{
  585. border-bottom-color:transparent;
  586. }
  587. .caption p, .caption ul, .caption ol, .caption pre, .caption blockquote{
  588. margin:10px 0;
  589. }
  590. .hover_cap blockquote{
  591. margin:10px 2px;
  592. }
  593.  
  594. {block:IndexPage}
  595. article img, iframe.photoset{
  596. {block:IfFadedImages}opacity:.7;{/block:IfFadedImages}
  597. {block:IfGrayscaleImages}
  598. -webkit-filter: grayscale(100%);
  599. -moz-filter: grayscale(100%);
  600. -o-filter: grayscale(100%);
  601. -ms-filter: grayscale(100%);
  602. filter: grayscale(100%);
  603. {/block:IfGrayscaleImages}
  604. transition-duration:.3s;
  605. -webkit-transition-duration:.3s;
  606. -moz-transition-duration:.3s;
  607. -ms-transition-duration:.3s;
  608. -o-transition-duration:.3s;
  609. }
  610. article:hover img, article:hover iframe.photoset{
  611. {block:IfFadedImages}opacity:1;{/block:IfFadedImages}
  612. {block:IfGrayscaleImages}
  613. -webkit-filter: grayscale(0%);
  614. -moz-filter: grayscale(0%);
  615. -o-filter: grayscale(0%);
  616. -ms-filter: grayscale(0%);
  617. filter: grayscale(0%);
  618. {/block:IfGrayscaleImages}
  619. transition-duration:.3s;
  620. -webkit-transition-duration:.3s;
  621. -moz-transition-duration:.3s;
  622. -ms-transition-duration:.3s;
  623. -o-transition-duration:.3s;
  624. }
  625. {/block:IndexPage}
  626. .fu-tumblr *{
  627. display:block;
  628. min-width:100%;
  629. max-width:100%;
  630. }
  631. article pre{
  632. white-space:normal;
  633. }
  634. article ul, article ol, article li{
  635. padding-left:20px;
  636. }
  637. article blockquote{
  638. padding-left:20px;
  639. border-left:1px solid #eee;
  640. }
  641. .chat{
  642. margin:15px 0 10px;
  643. padding:0;
  644. }
  645. .chat li{
  646. list-style-type:none;
  647. padding:0;
  648. margin:10px 0;
  649. }
  650. .chat li.odd{
  651. text-align:right;
  652. }
  653. .chat li.even{
  654. text-align:left;
  655. }
  656. .chat li b{
  657. font-size:10px;
  658. display:table;
  659. margin:5px;
  660. position:relative;
  661. }
  662. .chat li.odd b{
  663. margin-right:15px;
  664. margin-left:auto;
  665. }
  666. .chat li.even b{
  667. margin-left:15px;
  668. }
  669. .chat li span{
  670. min-width:90px;
  671. display:inline-block;
  672. padding:10px 15px;
  673. border-radius:10px/15px;
  674. margin:0 10px;
  675. }
  676. .chat li b:after{
  677. content:"";
  678. position:absolute;
  679. top:-5px;
  680. }
  681. .chat li.odd b:after{
  682. left:-40px;
  683. border-top:10px solid #5de439;
  684. border-right:5px solid transparent;
  685. border-left:20px solid transparent;
  686. }
  687. .chat li.even b:after{
  688. right:-40px;
  689. border-top:10px solid #e6e5eb;
  690. border-left:5px solid transparent;
  691. border-right:20px solid transparent;
  692. }
  693. .chat li.odd span{
  694. background-color:#5de439;
  695. text-align:left;
  696. }
  697. .chat li.even span{
  698. background-color:#e6e5eb;
  699. }
  700. .perma > a{
  701. {block:PermalinkPage}
  702. display:table-cell;
  703. vertical-align:middle;
  704. padding:10px;
  705. {/block:PermalinkPage}
  706. width:20px;
  707. line-height:10px;
  708. font-size:9px;
  709. {block:IndexPage}
  710. padding:5px;
  711. display:table;
  712. margin:10px auto;
  713. {/block:IndexPage}
  714. }
  715. {block:IndexPage}
  716. .perma > a:hover{
  717. background-color:#eee;
  718. }
  719. {/block:IndexPage}
  720. .perma{
  721. text-align:center;
  722. width:100%;
  723. position:relative;
  724. display:table;
  725. {block:PermalinkPage}
  726. padding-top:5px;
  727. margin-top:20px;
  728. {/block:PermalinkPage}
  729. }
  730. .perma > a b{
  731. display:block;
  732. }
  733. .tags{
  734. text-align:right;
  735. vertical-align:middle;
  736. display:table-cell;
  737. text-transform:uppercase;
  738. letter-spacing:1px;
  739. font-size:8px;
  740. padding-right:10px;
  741. }
  742. .tags a{
  743. margin-right:5px;
  744. }
  745. .infos,
  746. .show_notes{
  747. position:relative;
  748. display:block;
  749. text-transform:uppercase;
  750. letter-spacing:1px;
  751. font-size:8px;
  752. line-height:120%;
  753. padding:10px 15px;
  754. text-align:center;
  755. }
  756.  
  757. #notes *{
  758. margin:0;
  759. padding:0;
  760. }
  761. #notes{
  762. position:relative;
  763. clear:both;
  764. display:none;
  765. text-align:center;
  766. padding:10px 0 50px;
  767. }
  768. #notes li{
  769. padding:0;
  770. margin:0;
  771. list-style-type:none;
  772. display:inline-block;
  773. width:25px;
  774. height:25px;
  775. margin:7px;
  776. overflow:hidden;
  777. }
  778. #notes img{
  779. width:25px;
  780. height:25px;
  781. }
  782. li.more_notes_link_container{
  783. background:url('http://cdn.flaticon.com/png/256/59565.png') no-repeat;
  784. background-size:25px;
  785. background-position:center;
  786. opacity:.5;
  787.  
  788. }
  789. a.more_notes_link{
  790. opacity:0;
  791. }
  792.  
  793. </style>
  794. </head>
  795. <body>
  796. <aside>
  797. <div id="opening" class="{select:SidebarImageSize}">
  798. <img src="{image:Sidebar}">
  799. {block:IfHiddenSidebar}{block:IndexPage}<a href="#" title="navigation"><i class="ion-plus"></i></a>{/block:IndexPage}{/block:IfHiddenSidebar}
  800. </div>
  801. <div id="description">
  802. <h1>{Title}</h1>
  803. {Description}
  804. <nav>
  805. <a href="/">Home</a>
  806. <a href="/ask">Message</a>
  807. <a href="/archive">Archive</a>
  808. {block:IfLink1}<a href="{text:Link1URL}">{text:Link1Name}</a>{/block:IfLink1}
  809. {block:IfLink2}<a href="{text:Link2URL}">{text:Link2Name}</a>{/block:IfLink2}
  810. {block:IfLink3}<a href="{text:Link3URL}">{text:Link3Name}</a>{/block:IfLink3}
  811. {block:IfLink4}<a href="{text:Link4URL}">{text:Link4Name}</a>{/block:IfLink4}
  812. {block:IfLink5}<a href="{text:Link5URL}">{text:Link5Name}</a>{/block:IfLink5}
  813. </nav>
  814. </div>
  815. {block:Pagination}
  816. <div id="pagination">
  817. {block:PreviousPage}<a href="{PreviousPage}"><i class="ion-chevron-left"></i>  back</a>  /  {/block:PreviousPage}{block:NextPage}<a id="nxt" href="{NextPage}">forth  <i class="ion-chevron-right"></i></a>{/block:NextPage}
  818. </div>
  819. {/block:Pagination}
  820. </aside>
  821. <main id="{select:NumberOfColumns}">
  822. <section>
  823. {block:Posts}
  824. {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} -->
  825. <article>
  826. {block:Text}
  827. {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
  828. <div class="caption">
  829. {Body}
  830. </div>
  831. {block:Date}
  832. <div class="perma">
  833. <a href="{Permalink}" title="{TimeAgo}"><b>{DayOfMonthWithZero}</b> {MonthNumberWithZero}</a>
  834. {block:PermalinkPage}{block:HasTags}<p class="tags"> {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</p>{/block:HasTags}{/block:PermalinkPage}
  835. </div>
  836. {/block:Date}
  837. {/block:Text}
  838. {block:Link}
  839. <h2 class="links"><a href="{URL}">{Name} »</a></h2>
  840. {block:Description}
  841. <div class="caption">
  842. {Description}
  843. </div>
  844. {/block:Description}
  845. {block:Date}
  846. <div class="perma">
  847. <a href="{Permalink}" title="{TimeAgo}"><b>{DayOfMonthWithZero}</b> {MonthNumberWithZero}</a>
  848. {block:PermalinkPage}{block:HasTags}<p class="tags"> {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</p>{/block:HasTags}{/block:PermalinkPage}
  849. </div>
  850. {/block:Date}
  851. {/block:Link}
  852. {block:Quote}
  853. <h2 class="quote">{Quote}</h2>
  854. {block:Source}
  855. <div class="caption">
  856. {Source}
  857. </div>
  858. {/block:Source}
  859. {block:Date}
  860. <div class="perma">
  861. <a href="{Permalink}" title="{TimeAgo}"><b>{DayOfMonthWithZero}</b> {MonthNumberWithZero}</a>
  862. {block:PermalinkPage}{block:HasTags}<p class="tags"> {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</p>{/block:HasTags}{/block:PermalinkPage}
  863. </div>
  864. {/block:Date}
  865. {/block:Quote}
  866. {block:Photo}
  867. {block:IndexPage}
  868. <div class="hover_perma">
  869. <p>
  870. <a href="{Permalink}" title="permalink"><i class="ion-navicon"></i></a>
  871. {block:RebloggedFrom}<a href="{ReblogRootURL}" target="_blank" title="posted by {ReblogRootName}">©</a>{/block:RebloggedFrom}
  872. <a href="{ReblogURL}" target="_blank" title="Reblog"><i class="ion-refresh"></i></a>
  873. </p>
  874. {block:Caption}
  875. <div class="hover_cap">
  876. <div>{Caption}</div>
  877. </div>
  878. {/block:Caption}
  879. </div>
  880. {/block:IndexPage}
  881. {LinkOpenTag}
  882. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" class="pictures">
  883. {LinkCloseTag}
  884. {block:PermalinkPage}
  885. {block:Caption}
  886. <div class="caption">
  887. {Caption}
  888. </div>
  889. {/block:Caption}
  890. {block:Date}
  891. <div class="perma">
  892. <a href="{Permalink}" title="{TimeAgo}"><b>{DayOfMonthWithZero}</b> {MonthNumberWithZero}</a>
  893. {block:PermalinkPage}{block:HasTags}<p class="tags"> {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</p>{/block:HasTags}{/block:PermalinkPage}
  894. </div>
  895. {/block:Date}
  896. {/block:PermalinkPage}
  897. {/block:Photo}
  898. {block:Photoset}
  899. {block:IndexPage}
  900. <div class="hover_perma">
  901. <p>
  902. <a href="{Permalink}" title="permalink"><i class="ion-navicon"></i></a>
  903. {block:RebloggedFrom}<a href="{ReblogRootURL}" target="_blank" title="posted by {ReblogRootName}">©</a>{/block:RebloggedFrom}
  904. <a href="{ReblogURL}" target="_blank" title="Reblog"><i class="ion-refresh"></i></a>
  905. </p>
  906. {block:Caption}
  907. <div class="hover_cap">
  908. <div>{Caption}</div>
  909. </div>
  910. {/block:Caption}
  911. </div>
  912. {/block:IndexPage}
  913. {Photoset}
  914. {block:PermalinkPage}
  915. {block:Caption}
  916. <div class="caption">
  917. {Caption}
  918. </div>
  919. {/block:Caption}
  920. {block:Date}
  921. <div class="perma">
  922. <a href="{Permalink}" title="{TimeAgo}"><b>{DayOfMonthWithZero}</b> {MonthNumberWithZero}</a>
  923. {block:PermalinkPage}{block:HasTags}<p class="tags"> {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}</p>{/block:HasTags}{/block:PermalinkPage}
  924. </div>
  925. {/block:Date}
  926. {/block:PermalinkPage}
  927. {/block:Photoset}
  928. {block:Video}
  929. {block:IndexPage}
  930. <div class="hover_perma">
  931. <p>
  932. <a href="{Permalink}" title="permalink"><i class="ion-navicon"></i></a>
  933. {block:RebloggedFrom}<a href="{ReblogRootURL}" target="_blank" title="posted by {ReblogRootName}">©</a>{/block:RebloggedFrom}
  934. <a href="{ReblogURL}" target="_blank" title="Reblog"><i class="ion-refresh"></i></a>
  935. </p>
  936. {block:Caption}
  937. <div class="hover_cap">
  938. <div>{Caption}</div>
  939. </div>
  940. {/block:Caption}
  941. </div>
  942. {/block:IndexPage}
  943. <div class="fu-tumblr">{Video-500}</div>
  944. {block:PermalinkPage}
  945. {block:Caption}
  946. <div class="caption">
  947. {Caption}
  948. </div>
  949. {/block:Caption}
  950. {block:Date}
  951. <div class="perma">
  952. <a href="{Permalink}" title="{TimeAgo}"><b>{DayOfMonthWithZero}</b> {MonthNumberWithZero}</a>
  953. {block:PermalinkPage}{block:HasTags}<p class="tags"> {block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}{/block:HasTags}</p>{/block:PermalinkPage}
  954. </div>
  955. {/block:Date}
  956. {/block:PermalinkPage}
  957. {/block:Video}
  958. {block:Answer}
  959. <h2 class="question"> {Question} <span>{Asker}</span></h2>
  960. <div class="caption">{Answer}</div>
  961. {block:Date}
  962. <div class="perma">
  963. <a href="{Permalink}" title="{TimeAgo}"><b>{DayOfMonthWithZero}</b> {MonthNumberWithZero}</a>
  964. {block:PermalinkPage}{block:HasTags}<p class="tags"> {block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}{/block:HasTags}</p>{/block:PermalinkPage}
  965. </div>
  966. {/block:Date}
  967. {/block:Answer}
  968. {block:Chat}
  969. {block:Title}
  970. <h2><a href="{Permalink}">{Title}</a></h2>
  971. {/block:Title}
  972. <ul class="chat">
  973. {block:Lines}
  974. <li class="{Alt}">
  975. <span>{Line}</span>
  976. {block:Label}
  977. <b>{Label}</b>
  978. {/block:Label}
  979. </li>
  980. {/block:Lines}
  981. </ul>
  982. {block:Date}
  983. <div class="perma">
  984. <a href="{Permalink}" title="{TimeAgo}"><b>{DayOfMonthWithZero}</b> {MonthNumberWithZero}</a>
  985. {block:PermalinkPage}{block:HasTags}<p class="tags"> {block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}{/block:HasTags}</p>{/block:PermalinkPage}
  986. </div>
  987. {/block:Date}
  988. {/block:Chat}
  989. {block:Audio}
  990. <div class="audio">
  991. <div class="player">
  992. {block:AlbumArt}
  993. <img src="{AlbumArtURL}">
  994. {/block:AlbumArt}
  995. <span>{block:AudioPlayer} {AudioPlayer} {/block:AudioPlayer}</span>
  996. </div>
  997. <p>
  998. {block:Artist}
  999. <b>{Artist}</b> <br>
  1000. {/block:Artist}
  1001. {block:TrackName}
  1002. {TrackName}
  1003. {/block:TrackName}
  1004. </p>
  1005. </div>
  1006. {block:PermalinkPage}
  1007. {block:Caption}
  1008. <div class="caption">{Caption}</div>
  1009. {/block:Caption}
  1010. {/block:PermalinkPage}
  1011. {block:Date}
  1012. <div class="perma">
  1013. <a href="{Permalink}" title="{TimeAgo}"><b>{DayOfMonthWithZero}</b> {MonthNumberWithZero}</a>
  1014. {block:PermalinkPage}{block:HasTags}<p class="tags"> {block:HasTags}{block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}{/block:HasTags}</p>{/block:PermalinkPage}
  1015. </div>
  1016. {/block:Date}
  1017. {/block:Audio}
  1018. {block:PermalinkPage}
  1019. {block:Date}
  1020. <div class="infos">{block:RebloggedFrom}reblogged via <a href="{ReblogParentURL}" title="{ReblogParentTitle}">{ReblogParentName}</a> and from <a href="{ReblogRootURL}" title="{ReblogRootTitle}">{ReblogRootName}</a> {/block:RebloggedFrom}{block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}</div>
  1021. <a class="show_notes">show notes</a>
  1022. {/block:Date}
  1023. {/block:PermalinkPage}
  1024. {block:PostNotes}
  1025. <div id="notes">
  1026. {PostNotes-64}
  1027. </div>
  1028. {/block:PostNotes}
  1029. </article>
  1030. {/block:Posts}
  1031. </section>
  1032. </main>
  1033. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  1034. <script src="http://static.tumblr.com/wgg6svp/sDinmsq3x/jquery.style-my-tooltips.js"></script>
  1035. <script src="http://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
  1036. <script src="http://static.tumblr.com/q8c0vxg/xYrnjmd74/jquery.infinitescroll.min.js"></script>
  1037. <script src="http://static.tumblr.com/wgg6svp/MBEnnvwcu/masonry330.js"></script>
  1038. <script>
  1039. $(function(){
  1040. $("[title]").style_my_tooltips({
  1041. tip_follows_cursor:true,
  1042. tip_delay_time:200,
  1043. tip_fade_speed:500
  1044. });
  1045.  
  1046. {block:IfHiddenSidebar}
  1047. var height = $('#description').height();
  1048. $('#opening a').click(function(e){
  1049. e.preventDefault();
  1050. if($(this).hasClass('rotate')){
  1051. $('#description').animate({
  1052. 'top':'70%',
  1053. 'margin-top':'0px',
  1054. 'opacity': 0
  1055. }, 800);
  1056. $(this).removeClass('rotate').parent().animate({
  1057. 'top':'50%',
  1058. 'margin-top':'-'+($(this).height()-35)+'px'
  1059. }, 800);
  1060. }else{
  1061. $('#description').animate({
  1062. 'top':'50%',
  1063. 'margin-top':'-'+(height/2)+'px',
  1064. 'opacity': 1
  1065. }, 800);
  1066. $(this).addClass('rotate').parent().animate({
  1067. 'top':'50%',
  1068. 'margin-top':'-'+((height/2)+$(this).height()+30)+'px'
  1069. }, 800);
  1070.  
  1071. }
  1072. return false
  1073. });
  1074. {/block:IfHiddenSidebar}
  1075. $('.show_notes').click(function(e){
  1076. e.preventDefault();
  1077. $(this).fadeOut(300);
  1078. $('#notes').fadeIn(800);
  1079. });
  1080. $('.chat b').each(function(){
  1081. var string = $(this).text();
  1082. $(this).text(string.replace(/\:/g, ''));
  1083. });
  1084. {block:IndexPage}
  1085. var parent = $('section');
  1086. {block:IfInfiniteScroll}
  1087. parent.infinitescroll({
  1088. navSelector : "#pagination",
  1089. nextSelector : "#nxt",
  1090. itemSelector : "article",
  1091. binder : $('main'),
  1092. bufferPx : 50,
  1093. done : "",
  1094. loading: {
  1095. img : "",
  1096. msgText: "",
  1097. finishedMsg:""
  1098. },
  1099. },
  1100. function( newElements ) {
  1101. var $newElems = $( newElements ).css({ opacity: 0 });
  1102. $newElems.imagesLoaded(function(){
  1103. $newElems.animate({ opacity: 1 });
  1104. if('{select:NumberOfColumns}' != 'one') parent.masonry( 'appended', $newElems);
  1105. });
  1106. });
  1107. {/block:IfInfiniteScroll}
  1108. if('{select:NumberOfColumns}' != 'one'){
  1109. $('article').css({'float':'left'});
  1110. parent.imagesLoaded(function(){
  1111. parent.masonry({
  1112. itemSelector: 'article',
  1113. isAnimated: false,
  1114. percentPosition: true,
  1115. columnWidth : 'article'
  1116. });
  1117. });
  1118. setInterval(function(){parent.masonry();}, 10000);
  1119. }
  1120. {/block:IndexPage}
  1121.  
  1122. });
  1123. </script>
  1124. <script src="http://static.tumblr.com/emvnqzg/NOVo0fisl/scripts.js"></script>
  1125. </body>
  1126. </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!