Advertisement
ILikeMochiCx

Serendipity

Jan 1st, 2016
2,489
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.39 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5.  
  6. <link href='https://fonts.googleapis.com/css?family=Playfair+Display:700italic,400italic' rel='stylesheet' type='text/css'>
  7. <link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,700' rel='stylesheet' type='text/css'>
  8.  
  9. <title>{Title}</title>
  10.  
  11. <!--
  12. ___________________________________________________________________________
  13.  
  14.  
  15. Serendipity - Theme #3
  16. new year, new theme
  17.  
  18. my usual terms apply; please do not redstribute, copy, or steal in any way
  19.  
  20. shoseii.tumblr.com
  21.  
  22. ___________________________________________________________________________
  23.  
  24. -->
  25.  
  26. <link rel="shortcut icon" href="{Favicon}">
  27. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  28.  
  29. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  30.  
  31.  
  32. {block:Description}<meta name="description" content="{MetaDescription}" />
  33. {/block:Description}
  34.  
  35. <meta name="image:Background" content=""/>
  36. <meta name="image:Icon" content=""/>
  37.  
  38. <meta name="color:Background" content="#fffffff"/>
  39. <meta name="color:Posts Background" content="#ffffff"/>
  40. <meta name="color:Posts Border" content="#eeeeee"/>
  41. <meta name="color:Text" content="#000000"/>
  42. <meta name="color:Bold" content="#ED6B73"/>
  43. <meta name="color:Caption" content="#f9f9f9"/>
  44. <meta name="color:Caption Text" content="#898989"/>
  45. <meta name="color:Title" content="#000000"/>
  46. <meta name="color:Title Hover" content="#eeeeee"/>
  47. <meta name="color:Nav Links Hover" content="#9ad7b9"/>
  48. <meta name="color:Link" content="#797979"/>
  49. <meta name="color:Link Hover" content="#f59797"/>
  50. <meta name="color:Selection" content="#a5d7f0"/>
  51. <meta name="color:Scrollbar" content="#cccccc"/>
  52.  
  53. <meta name="text:Link 1" content=""/>
  54. <meta name="text:Link 1 URL" content=""/>
  55. <meta name="text:Link 2" content=""/>
  56. <meta name="text:Link 2 URL" content=""/>
  57. <meta name="text:Link 3" content=""/>
  58. <meta name="text:Link 3 URL" content=""/>
  59.  
  60. <meta name="select:Post Width" content="200" title="200px"/>
  61. <meta name="select:Post Width" content="250" title="250px"/>
  62. <meta name="select:Post Width" content="300" title="300px"/>
  63. <meta name="select:Post Width" content="350" title="350px"/>
  64. <meta name="select:Post Width" content="400" title="400px"/>
  65.  
  66. <meta name="if:Infinite Scroll" content="1"/>
  67. <meta name="if:Two Column" content="1"/>
  68. <meta name="if:Sticky Header" content="1"/>
  69. <meta name="if:Full Width Header" content=""/>
  70. <meta name="if:Icon" content=""/>
  71. <meta name="if:Grayscale Effect" content=""/>
  72. <meta name="if:Post Fade" content="1"/>
  73. <meta name="if:Show Caption" content=""/>
  74. <meta name="if:Show Tags" content=""/>
  75. <meta name="if:Mini Cursor" content="1"/>
  76. <meta name="if:Post Borders" content="1"/>
  77.  
  78.  
  79. <style type="text/css">
  80.  
  81. {block:ifMiniCursor}
  82. *, body, a {cursor: url(http://static.tumblr.com/p7wg3p9/o3jmn8igq/tiny.png), auto;}
  83.  
  84. a:hover {cursor: url(http://static.tumblr.com/p7wg3p9/EWnmn8ip5/tinyhover.png), auto;}
  85. {/block:ifMiniCursor}
  86.  
  87. ::-webkit-scrollbar-thumb{
  88. background-color:{color:Scrollbar};
  89. border:3px solid {color:Background};
  90. height:auto;
  91. }
  92.  
  93. ::-webkit-scrollbar{
  94. background:{color:Background};
  95. height:9px;
  96. width:7px;
  97. }
  98.  
  99. ::-webkit-scrollbar:horizontal{
  100. display:none;
  101. }
  102.  
  103. ::-moz-selection{
  104. background:{color:Selection};
  105. color:#fff;
  106. }
  107.  
  108. ::selection{
  109. background:{color:Selection};
  110. color:#fff;
  111. }
  112.  
  113. body{
  114. font:11px 'Lato', sans-serif;
  115. line-height:16px;
  116. font-weight:400;
  117. color:{color:Text};
  118. text-align:left;
  119. -webkit-font-smoothing: antialiased;
  120. -moz-osx-font-smoothing: grayscale;
  121. background:{color:Background} url('{image:Background}') fixed repeat center;
  122. }
  123.  
  124. a{
  125. text-decoration:none;
  126. outline:none;
  127. -moz-outline-style:none;
  128. color:{color:Link};
  129. cursor:help;
  130. -webkit-transition: all 0.3s ease-in-out;
  131. -moz-transition: all 0.3s ease-in-out;
  132. -o-transition: all 0.3s ease-in-out;
  133. -ms-transition: all 0.3s ease-in-out
  134. transition: all 0.3s ease-in-out;
  135. }
  136.  
  137. a:visited{
  138. color:{color:Link};
  139. }
  140.  
  141. a:hover{
  142. color:{color:Link Hover};
  143. }
  144.  
  145. b,strong{
  146. font-weight:heavy;
  147. color:{color:Bold};
  148. }
  149.  
  150. blockquote{
  151. padding-left:5px;
  152. border-left:1px solid #ccc;
  153. }
  154.  
  155. /*--Header--*/
  156.  
  157. header{
  158. position:relative;
  159. border-bottom:1px solid {color:Posts Border};
  160. z-index:999999999;
  161. padding:80px 0px 15px 0px;
  162. {block:ifFullWidthHeader}
  163. background:{color:Posts Background};
  164. width:100vw;
  165. margin:50px 0px 0px -10px;
  166. {block:ifStickyHeader}
  167. margin-top:-8px;
  168. {/block:ifStickyHeader}
  169. padding-top:20px;
  170. text-align:center;
  171. {/block:ifFullWidthHeader}
  172. {block:ifnotFullWidthHeader}
  173. background:{color:Background} url('{image:Background}') fixed repeat center;
  174. width:calc({select:Post Width}px + 143px);
  175. margin:100px 0px 50px 30px;
  176. text-align:left;
  177. {block:ifIcon}
  178. padding-bottom:20px;
  179. {/block:ifIcon}
  180. {block:ifTwoColumn}
  181. width:calc({select:Post Width}px * 2 + 286px);
  182. {/block:ifTwoColumn}
  183. {block:PermalinkPage}
  184. margin-left:75px;
  185. width:550px;
  186. {/block:PermalinkPage}
  187. {/block:ifnotFullWidthHeader}
  188. }
  189.  
  190. header.sticky{
  191. position:-webkit-sticky;
  192. position:sticky;
  193. top:0;
  194. }
  195.  
  196. #icon img{
  197. background:{color:Posts Background};
  198. width:70px;
  199. height:70px;
  200. border-radius:100px;
  201. overflow:hidden;
  202. {block:ifnotFullWidthHeader}
  203. position:absolute;
  204. margin-left:-5px;
  205. width:50px;
  206. height:50px;
  207. {/block:ifnotFullWidthHeader}
  208. }
  209.  
  210. #title{
  211. font:bold italic 25px 'Playfair Display', serif;
  212. margin-top:7px;
  213. {block:ifnotFullWidthHeader}
  214. {block:ifIcon}
  215. margin-top:-3px;
  216. margin-left:60px;
  217. {/block:ifIcon}
  218. {/block:ifnotFullWidthHeader}
  219. z-index:9999999999;
  220. -webkit-transition: all 0.3s ease-in-out;
  221. -moz-transition: all 0.3s ease-in-out;
  222. -o-transition: all 0.3s ease-in-out;
  223. -ms-transition: all 0.3s ease-in-out;
  224. transition: all 0.3s ease-in-out;
  225. }
  226.  
  227. #title a{
  228. color:{color:Title};
  229. }
  230.  
  231. #title a:hover{
  232. color:{color:Title Hover};
  233. }
  234.  
  235. #desc{
  236. {block:ifFullWidthHeader}
  237. width:600px;
  238. margin:0px auto;
  239. padding-left:15px;
  240. padding-top:15px;
  241. text-align:center;
  242. {/block:ifFullWidthHeader}
  243. {block:ifnotFullWidthHeader}
  244. margin:-40px 0px 50px 30px;
  245. {block:IndexPage}
  246. width:calc({select:Post Width}px + 143px);
  247. {block:ifTwoColumn}
  248. width:calc({select:Post Width}px * 2 + 135px);
  249. {/block:ifTwoColumn}
  250. {/block:IndexPage}
  251. {block:PermalinkPage}
  252. margin-left:75px;
  253. width:550px;
  254. {/block:PermalinkPage}
  255. {/block:ifnotFullWidthHeader}
  256. }
  257.  
  258. .links{
  259. font-size:10px;
  260. margin-top:5px;
  261. {block:ifnotFullWidthHeader}
  262. {block:ifIcon}
  263. margin-left:60px;
  264. {/block:ifIcon}
  265. {/block:ifnotFullWidthHeader}
  266. text-transform:uppercase;
  267. overflow:hidden;
  268. }
  269.  
  270. .links a{
  271. margin-right:10px;
  272. }
  273.  
  274. .links a:hover{
  275. color:{color:Nav Links Hover};
  276. }
  277.  
  278. .links a:last-child{
  279. margin-right:0px;
  280. }
  281.  
  282. .links a span{
  283. position:relative;
  284. display:inline-block;
  285. transition: transform 0.3s;
  286. -moz-transition: -moz-transform 0.3s;
  287. -webkit-transition: -webkit-transform 0.3s;
  288. }
  289.  
  290. .links a span:before{
  291. position:absolute;
  292. top:100%;
  293. content:attr(data-hover);
  294. }
  295.  
  296. .links a:hover span, .links a:focus span{
  297. transform: translateY(-100%);
  298. -moz-transform: translateY(-100%);
  299. -webkit-transform: translateY(-100%);
  300. }
  301.  
  302. /*--Posts--*/
  303.  
  304. #center{
  305. width:calc({select:Post Width}px + 200px);
  306. {block:ifTwoColumn}
  307. width:calc({select:Post Width}px * 2 + 345px);
  308. {/block:ifTwoColumn}
  309. margin-left:auto;
  310. margin-right:auto;
  311. {block:PermalinkPage}
  312. width:694px;
  313. {/block:PermalinkPage}
  314. border:0;
  315. }
  316.  
  317. #content{
  318. position:relative;
  319. overflow-x:hidden;
  320. margin-left:50px;
  321. margin-top:30px;
  322. {block:PermalinkPage}
  323. margin-top:10px;
  324. {/block:PermalinkPage}
  325. }
  326.  
  327. .entry{
  328. border-radius:5px 5px 0px 0px;
  329. padding:50px;
  330. margin:30px 40px 100px 0px;
  331. float:left;
  332. background:{color:Posts Background};
  333. {block:ifPostBorders}
  334. border:1px solid {color:Posts Border};
  335. {/block:ifPostBorders}
  336. {block:indexpage}
  337. width:{select:Post width}px;
  338. {/block:indexpage}
  339. {block:permalinkpage}
  340. margin-left:25px;
  341. width:500px;
  342. padding:23px;
  343. {/block:permalinkpage}
  344. }
  345.  
  346. .entry img{
  347. {block:indexpage}
  348. width:{select:Post width}px;
  349. margin-bottom:-4px;
  350. {/block:indexpage}
  351. {block:permalinkpage}
  352. max-width:500px;
  353. {/block:permalinkpage}
  354. }
  355.  
  356. ol.notes{
  357. padding:0px;
  358. width:500px;
  359. height:218px;
  360. overflow:auto;
  361. margin:5px 0px;
  362. list-style-type:none;
  363. border:1px solid{color:Posts Border};
  364. }
  365.  
  366. ol.notes li.note{
  367. border-top:solid 1px {color:Posts Border};
  368. padding:10px;
  369. }
  370.  
  371. ol.notes li.note:first-child{
  372. border:none;
  373. }
  374.  
  375. ol.notes li.note img.avatar{
  376. vertical-align:-4px;
  377. margin-right:10px;
  378. width:16px;
  379. height:16px;
  380. }
  381.  
  382. ol.notes li.note blockquote{
  383. border-color:{color:Posts Border};
  384. padding:4px 10px;
  385. margin:10px 0px 0px 25px;
  386. }
  387.  
  388. ol.notes li.note blockquote a{
  389. text-decoration:none;
  390. }
  391.  
  392. /*--Grayscale Effect--*/
  393.  
  394. #img{
  395. {block:indexpage}
  396. {block:ifPostFade}
  397. opacity:0.6;
  398. {/block:ifPostFade}
  399. {block:ifGrayscaleEffect}
  400. filter: url(filters.svg#grayscale);
  401. filter: gray;
  402. -webkit-filter: grayscale(1);
  403. {/block:ifGrayscaleEffect}
  404. -webkit-transition:all 0.3s ease-in-out;
  405. -moz-transition:all 0.3s ease-in-out;
  406. -o-transition:all 0.3s ease-in-out;
  407. transition:all 0.3s ease-in-out;
  408. {/block:indexpage}
  409. }
  410.  
  411. #img:hover{
  412. {block:indexpage}
  413. opacity:1;
  414. {block:ifGrayscaleEffect}
  415. filter: url(filters.svg#grayscale);
  416. filter: gray;
  417. -webkit-filter: grayscale(0);
  418. {/block:ifGrayscaleEffect}
  419. {/block:indexpage}
  420. }
  421.  
  422. /*--Permalinks--*/
  423.  
  424. .permalink{
  425. font-size:9px;
  426. background:{color:Posts Background};
  427. position:absolute;
  428. width:calc({select:Post width}px + 90px);
  429. {block:ifShowTags}
  430. {block:ifnotTwoColumn}
  431. margin-top:-72px;
  432. {/block:ifnotTwoColumn}
  433. {block:ifTwoColumn}
  434. top:-28px;
  435. {/block:ifTwoColumn}
  436. {/block:ifShowTags}
  437. {block:ifnotShowTags}
  438. margin-top:41px;
  439. {/block:ifnotShowTags}
  440. margin-left:-51px;
  441. text-align:left;
  442. padding:5px;
  443. {block:ifPostBorders}
  444. border:1px solid {color:Posts Border};
  445. {/block:ifPostBorders}
  446. {block:ifnotPostBorders}
  447. border-top:1px solid {color:Posts Border};
  448. border-left:none;
  449. border-right:none;
  450. border-bottom:none;
  451. {/block:ifnotPostBorders}
  452. {block:ifShowTags}
  453. border-radius:5px 5px 0px 0px;
  454. {/block:ifShowTags}
  455. {block:ifnotShowTags}
  456. border-radius:0px 0px 5px 5px;
  457. {/block:ifnotShowTags}
  458. z-index:999999;
  459. -webkit-transition:all 0.5s ease-in-out;
  460. -moz-transition:all 0.5s ease-in-out;
  461. -o-transition:all 0.5s ease-in-out;
  462. transition:all 0.5s ease-in-out;
  463. }
  464.  
  465. .date{
  466. display:inline-block;
  467. border-bottom:1px solid {color:Title};
  468. text-align:center;
  469. text-transform:uppercase;
  470. z-index:999999;
  471. }
  472.  
  473. .reblogb{
  474. position:absolute;
  475. display:inline-block;
  476. right:10px;
  477. margin-top:-1px;
  478. }
  479.  
  480. .tags{
  481. font-size:9px;
  482. background:{color:Posts Background};
  483. width:calc({select:Post width}px + 90px);
  484. position:absolute;
  485. padding:5px;
  486. margin-left:-51px;
  487. margin-top:50px;
  488. border-radius:0px 0px 5px 5px;
  489. {block:ifPostBorders}
  490. border:1px solid {color:Posts Border};
  491. {/block:ifPostBorders}
  492. {block:ifnotPostBorders}
  493. border-top:1px solid {color:Posts Border};
  494. border-left:none;
  495. border-right:none;
  496. border-bottom:none;
  497. {/block:ifnotPostBorders}
  498. }
  499.  
  500. /*--Miscellaneous--*/
  501.  
  502. iframe.tmblr-iframe{
  503. z-index:99999999999999!important;
  504. top:0!important;
  505. right:0!important;
  506. opacity:0.4;
  507. /* delete from here */
  508. filter:invert(1);
  509. -webkit-filter:invert(1);
  510. -o-filter:invert(1);
  511. -moz-filter:invert(1);
  512. -ms-filter:invert(1);
  513. /* to here if your blog has a dark background */
  514. transform:scale(0.6);
  515. transform-origin:100% 0;
  516. -webkit-transform:scale(0.6);
  517. -webkit-transform-origin:100% 0;
  518. -o-transform:scale(0.6);
  519. -o-transform-origin:100% 0;
  520. -moz-transform:scale(0.6);
  521. -moz-transform-origin:100% 0;
  522. -ms-transform:scale(0.6);
  523. -ms-transform-origin:100% 0;
  524. -webkit-transition:all 0.5s ease-in-out;
  525. -moz-transition:all 0.5s ease-in-out;
  526. -o-transition:all 0.5s ease-in-out;
  527. transition:all 0.5s ease-in-out;
  528. }
  529.  
  530. iframe.tmblr-iframe:hover{
  531. opacity:0.6!important;
  532. }
  533.  
  534. .pagination {
  535. display:none;
  536. }
  537.  
  538. #pagination{
  539. width:calc({select:Post Width}px + 100px);
  540. {block:ifTwoColumn}
  541. width:calc({select:Post Width}px*2 + 250px);
  542. {/block:ifTwoColumn}
  543. position:absolute;
  544. line-height:22px;
  545. bottom:0px;
  546. text-align:center;
  547. }
  548.  
  549. #pagination a{
  550. border-bottom:1px solid {color:Nav Links Hover};
  551. }
  552.  
  553. .back{
  554. margin-top:0px;
  555. }
  556.  
  557. .next{
  558. margin-top:0px;
  559. }
  560.  
  561. .text img{
  562. {block:IndexPage}
  563. max-width:{select:Post width}px;
  564. {/block:IndexPage}
  565. {block:PermalinkPage}
  566. max-width:500px;
  567. {/block:PermalinkPage}
  568. width:auto;
  569. height:auto;
  570. }
  571.  
  572. .text{
  573. padding-bottom:5px;
  574. overflow:hidden;
  575. }
  576.  
  577. .audio{
  578. margin-top:8px;
  579. margin-left:50px;
  580. min-height:25px;
  581. line-height:14px;
  582. letter-spacing:1px;
  583. text-align:left;
  584. padding-bottom:10px;
  585. }
  586.  
  587. .song{
  588. font:italic 9px georgia;
  589. }
  590.  
  591. .quote{
  592. font:bold 12px signika;
  593. {block:IndexPage}text-align:center;{/block:IndexPage}
  594. margin-left:11px;
  595. text-transform:uppercase;
  596. }
  597.  
  598. .tumblr_audio_player{
  599. position:absolute;
  600. width:30px;
  601. height:30px;
  602. margin-top:3px;
  603. border:5px solid {color:Posts Border};
  604. border-radius:100px;
  605. }
  606.  
  607. #s-m-t-tooltip{
  608. background:#fff;
  609. color:#888;
  610. font-size:10px;
  611. font-style:italic;
  612. letter-spacing:2px;
  613. text-transform:lowercase;
  614. max-width:300px;
  615. padding:4px;
  616. z-index:9999999999;
  617. margin:20px 10px 10px 10px;
  618. box-shadow:1px 1px 3px rgba(0,0,0,.1);
  619. }
  620.  
  621. .ask{
  622. color:{color:Text};
  623. width:auto;
  624. padding:10px;
  625. text-align:left;
  626. border-bottom:1px solid #eee;
  627. text-transform:uppercase;
  628. }
  629.  
  630. .answer{
  631. margin-left:10px;
  632. margin-top:0px;
  633. }
  634.  
  635. .caption{
  636. {block:IndexPage}
  637. background:{color:Caption};
  638. border:1px solid {color:Posts Border};
  639. border-radius:5px;
  640. {/block:IndexPage}
  641. color:{color:Caption Text};
  642. margin-top:10px;
  643. padding:5px;
  644. }
  645.  
  646. .caption img{
  647. width:auto;
  648. height:auto;
  649. max-width:calc({select:Post width}px - 70px);
  650. {block:PermalinkPage}
  651. max-width:430px;
  652. {/block:PermalinkPage}
  653. }
  654.  
  655. .back-to-top{
  656. position: fixed;
  657. bottom:-75px;
  658. left:10px;
  659. background: url('http://static.tumblr.com/2e9nahe/xvCoaucis/arrow-up.svg') no-repeat;
  660. background-size:15px;
  661. width:100px;
  662. height:100px;
  663. z-index:9999999;
  664. }
  665.  
  666. .back-to-top a{
  667. text-indent: -9999px;
  668. display: block;
  669. }
  670.  
  671. .video{
  672. position:relative;
  673. height:0;
  674. padding-bottom:56%;
  675. }
  676.  
  677. .video iframe{
  678. position:absolute;
  679. top:0;
  680. left:0;
  681. height:100%;
  682. width:100%;
  683. }
  684.  
  685. #infscr-loading{
  686. display:none!important;
  687. }
  688.  
  689.  
  690. </style>
  691.  
  692. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  693.  
  694. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  695. <script>
  696. (function($){
  697. $(document).ready(function(){
  698. $("[title]").style_my_tooltips({
  699. tip_follows_cursor:true,
  700. tip_delay_time:20,
  701. tip_fade_speed:400,
  702. attribute:"title"
  703. });
  704. });
  705. })(jQuery);
  706. </script>
  707.  
  708.  
  709.  
  710. <!--Scroll back to top-->
  711.  
  712. <div class="back-to-top" id="back-top">
  713. <a href="javascript:void(0)" class="back-to-top">Top</a>
  714. </div>
  715.  
  716.  
  717. <script type="text/javascript">
  718. $(function () {
  719. $("#back-top").hide();
  720. $(window).scroll(function () {
  721. if ($(this).scrollTop() > 150) {
  722. $('#back-top').fadeIn();
  723. } else {
  724. $('#back-top').fadeOut();
  725. }
  726. });
  727. });
  728. jQuery('.back-to-top').click(function () {
  729. jQuery('html, body').animate({
  730. scrollTop: 0
  731. }, 'slow');
  732. });
  733. </script>
  734.  
  735.  
  736. <!--end of Scroll back to top-->
  737.  
  738. <!--minimal soundcloud player by shythemes-->
  739. <script>
  740. // minimal soundcloud player © shythemes.tumblr
  741. $(document).ready(function(){
  742. var color = '#acd7bb'; // color of play button (hex)
  743. $('.soundcloud_audio_player').each(function(){
  744. $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=true&amp;origin=tumblr&amp;color=' + color.split('#')[1], height: 20, width: '100%' });
  745. });
  746. });
  747. </script>
  748. <!--end minimal soundcloud player-->
  749.  
  750.  
  751. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  752. <script>
  753. $(document).ready(function(){
  754. $('.photo-slideshow').pxuPhotoset({
  755. lightbox: true,
  756. rounded: false,
  757. gutter: '5px',
  758. photoset: '.photo-slideshow',
  759. photoWrap: '.photo-data',
  760. photo: '.pxu-photo'
  761. });
  762. });
  763. </script>
  764.  
  765. {block:ifInfiniteScroll}
  766. <div class="pagination">
  767. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage"}>previous</a> &middot;{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" id="next">next</a>{/block:NextPage}{/block:Pagination}
  768. </div>
  769. {/block:ifInfiniteScroll}
  770.  
  771.  
  772. <script src="http://static.tumblr.com/2e9nahe/iHEnx7e4y/stickyfill.min.js"></script>
  773. <script>
  774. $(document).ready(function(){
  775. $('.sticky').Stickyfill();
  776. });
  777. </script>
  778.  
  779. </head>
  780.  
  781. <body>
  782.  
  783. {block:ifFullWidthHeader}
  784. <header {block:IfStickyHeader}class="sticky"{/block:ifStickyHeader}>
  785. {block:ifIcon}<div id="icon"><img src="{image:Icon}"/></div>{/block:ifIcon}
  786. <div id="title"><a href="/" title="home">{Title}</a></div>
  787. <div class="links">
  788. <a href="/ask" target="_blank"><span data-hover="ask">ask</span></a>
  789. <a href="/archive" target="_blank"><span data-hover="past">past</span></a>
  790. {block:ifLink1}<a href="{text:Link 1 URL}" target="_blank"><span data-hover="{text:Link 1}">{text:Link 1}</span></a>{/block:ifLink1}
  791. {block:ifLink2}<a href="{text:Link 2 URL}" target="_blank"><span data-hover="{text:Link 2}">{text:Link 2}</span></a>{block:ifLink2}
  792. {block:ifLink3}<a href="{text:Link 3 URL}" target="_blank"><span data-hover="{text:Link 3}">{text:Link 3}</span></a>{block:ifLink3}
  793. </div>
  794. </header>
  795. <div id="desc">{Description}</div>
  796. {/block:ifFullWidthHeader}
  797.  
  798.  
  799. <div id="center">
  800.  
  801. {block:ifnotFullWidthHeader}
  802. <header {block:IfStickyHeader}class="sticky"{/block:ifStickyHeader}>
  803. {block:ifIcon}<div id="icon"><img src="{image:Icon}"/></div>{/block:ifIcon}
  804. <div id="title" title="home"><a href="/">{Title}</a></div>
  805. <div class="links">
  806. <a href="/ask" target="_blank"><span data-hover="ask">ask</span></a>
  807. <a href="/archive" target="_blank"><span data-hover="past">past</span></a>
  808. {block:ifLink1}<a href="{text:Link 1 URL}" target="_blank"><span data-hover="{text:Link 1}">{text:Link 1}</span></a>{/block:ifLink1}
  809. {block:ifLink2}<a href="{text:Link 2 URL}" target="_blank"><span data-hover="{text:Link 2}">{text:Link 2}</span></a>{block:ifLink2}
  810. {block:ifLink3}<a href="{text:Link 3 URL}" target="_blank"><span data-hover="{text:Link 3}">{text:Link 3}</span></a>{block:ifLink3}
  811. </div>
  812. </header>
  813.  
  814. <div id="desc">{Description}</div>
  815. {/block:ifnotFullWidthHeader}
  816.  
  817. <div id="content">
  818.  
  819. {block:Posts}
  820.  
  821.  
  822. <div class="entry" id="{PostID}">
  823.  
  824. {block:IndexPage}
  825. {block:ifShowTags}
  826. <div class="permalink">
  827. <div class="date">
  828. <a href="{Permalink}" target="_blank">{ShortMonth} {DayofMonth}, {Year}</a>
  829. </div> — {NoteCountWithLabel}
  830. <div class="reblogb">
  831. <div style="position:absolute;margin-left:-20px;">{LikeButton size="13"}</div>
  832. <a href="{ReblogURL}" target="_blank" title="Reblog?"><img src="http://static.tumblr.com/2e9nahe/OStn8m1nu/arrow-repeat.png" style="width:15px;opacity:0.7"/></a>
  833. </div>
  834. </div>
  835. {/block:ifShowTags}
  836. {/block:IndexPage}
  837.  
  838. {block:Text}
  839. <div class="text">{block:IndexPage}{/block:IndexPage}{block:Title}<h2><b><a href="{Permalink}">{Title}</a></b></h2>{/block:Title}
  840. {Body}
  841. </div>
  842. {/block:Text}
  843.  
  844. {block:Photo}
  845. <div id="img">
  846. {block:IndexPage}<img src="{PhotoURL-500}"/>
  847. </div>
  848.  
  849. {/block:IndexPage}
  850. {block:PermalinkPage}<img src="{PhotoURL-HighRes}"/>{block:Caption}<div class="caption">{caption}</div>{/block:Caption}
  851. {/block:PermalinkPage}
  852. {/block:Photo}
  853.  
  854. {block:Photoset}
  855. {block:IndexPage}
  856. <div id="img">
  857. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  858. </div>
  859. {/block:IndexPage}
  860.  
  861. {block:PermalinkPage}<div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  862. {block:Caption}<div class="caption">{caption}</div>{/block:Caption}
  863. {/block:PermalinkPage}
  864. {/block:Photoset}
  865.  
  866.  
  867. {block:Quote}
  868. <div style="position:absolute;margin-top:-5px;margin-left:-5px;font:30px times new roman;opacity:0.5;">“</div>
  869. <div class="quote">{Quote}</div>
  870. {block:Source}<p style="{block:IndexPage}text-align:center;{/block:IndexPage}font:italic 10px georgia;">—&nbsp;{Source}</p>{/block:Source}
  871. {/block:Quote}
  872.  
  873. {block:Link}
  874. <div class="text">
  875. <a href="{URL}"><h1><b>{Name}</h1></b></a>{block:Description}{Description}{/block:Description}</div>
  876. {/block:Link}
  877.  
  878. {block:Chat}
  879. <div class="text">
  880. {block:Title}<h3>{Title}</h3>{/block:Title}
  881. {block:Lines}<p>
  882. {block:Label}<b>{Label}</b>{/block:Label}
  883. {Line}</p>
  884. {/block:Lines}
  885. </div>
  886. {/block:Chat}
  887.  
  888. {block:Audio}
  889. {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  890. {block:AudioPlayer}
  891. {AudioPlayerWhite}
  892. <div class="audio">
  893. {block:TrackName}<b>{TrackName}</b>{/block:TrackName}
  894. <br>{block:Artist}<span class="song">{Artist}</span>{/block:Artist}
  895. </div>
  896. {/block:AudioPlayer}
  897.  
  898. {block:PermalinkPage}
  899. {block:Caption}<div class="caption">{caption}</div>{/block:Caption}
  900. {/block:PermalinkPage}
  901. {/block:Audio}
  902.  
  903. {block:Answer}
  904. <div class="ask">
  905. <em><strong><u>{Asker} whispered:</u></em></strong>
  906. <br><br>{Question}
  907. </div>
  908. <div class="answer">
  909. {Answer}
  910. </div>
  911. {/block:Answer}
  912.  
  913. {block:Video}
  914. <div id="img">
  915. {block:IndexPage}
  916. <div class="video">{VideoEmbed-500}</div>
  917. </div>
  918.  
  919. {/block:IndexPage}
  920.  
  921. {block:PermalinkPage}<div class="video">{VideoEmbed-500}</div>
  922. {block:Caption}<div class="caption">{caption}</div>{/block:Caption}{/block:PermalinkPage}
  923. {/block:Video}
  924.  
  925.  
  926.  
  927. {block:ContentSource} <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{Logowidth}px" height="{LogoHeight}" alt="{SourceTitle}" /> {/block:SourceLogo} {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}--> {/block:ContentSource}
  928.  
  929. {block:IndexPage}
  930. {block:ifShowCaption}{block:Caption}<div class="caption">{caption}</div>{/block:Caption}{/block:ifShowCaption}
  931. {block:ifnotShowTags}
  932. <div class="permalink">
  933. <div class="date">
  934. <a href="{Permalink}" target="_blank">{ShortMonth} {DayofMonth}, {Year}</a>
  935. </div> — {NoteCountWithLabel}
  936. <div class="reblogb">
  937. <div style="position:absolute;margin-left:-20px;">{LikeButton size="13"}</div>
  938. <a href="{ReblogURL}" target="_blank" title="Reblog?"><img src="http://static.tumblr.com/2e9nahe/OStn8m1nu/arrow-repeat.png" style="width:15px;opacity:0.7"/></a>
  939. </div>
  940. </div>
  941. {/block:ifnotShowTags}
  942. {block:ifShowTags}{block:HasTags}<div class="tags">Tagged: {block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}<br></div>{/block:HasTags}{/block:ifShowTags}
  943.  
  944. {/block:IndexPage}
  945.  
  946.  
  947. {block:PermalinkPage}
  948. {block:Date}
  949. <div style="border-top:1px solid #ccc;width:500px;margin-top:5px;"></div>
  950. <div style="font:14px Cambria;margin-top:10px;">{DayOfWeek}, {Month} {DayOfMonth}{DayOfMonthSuffix}, {Year}</div>
  951. {/block:Date}
  952. {block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}
  953. <br>{block:HasTags}Tagged: {block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}<br>{/block:HasTags}
  954. {block:RebloggedFrom}Via: <i><a href="{ReblogParentURL}">{ReblogParentName}</i></a>
  955. <br>Source: <i><a href="{ReblogRootURL}">{ReblogRootName}</i></a>{/block:RebloggedFrom}
  956. {/block:PermalinkPage}
  957.  
  958. {block:PostNotes}{PostNotes}{/block:PostNotes}
  959.  
  960.  
  961. </div>
  962. {/block:Posts}
  963.  
  964. {block:ifnotinfinitescroll}
  965. {block:Pagination}
  966. <div id="pagination">
  967. {block:PreviousPage}<a class="back" href="{PreviousPage}">previous</a>&nbsp;&nbsp;|{/block:PreviousPage}&nbsp;&nbsp;{block:NextPage}<a class="next" href="{NextPage}">next</a>{/block:NextPage}
  968. <br>( page {CurrentPage} of {TotalPages} )
  969. </div>
  970. {/block:Pagination}
  971. {/block:ifnotinfinitescroll}
  972.  
  973. </div>
  974. </div>
  975.  
  976.  
  977.  
  978. {block:IndexPage}
  979. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.0.0/imagesloaded.pkgd.min.js"></script>
  980. {block:ifTwoColumn}
  981. <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
  982. {/block:ifTwoColumn}
  983. {block:ifInfiniteScroll}
  984. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  985. {/block:ifInfiniteScroll}
  986. <script>
  987. $(document).ready(function(){
  988. var $container = $('#content');
  989. {block:ifTwoColumn}
  990. $container.masonry({
  991. itemSelector: '.entry',
  992. columnWidth: '.entry',
  993. isFitWidth: true
  994. });
  995. $container.imagesLoaded().progress(function(){
  996. $container.masonry('layout');
  997. });
  998. {/block:ifTwoColumn}
  999. {block:ifInfinitescroll}
  1000. $container.infinitescroll({
  1001. itemSelector : ".entry",
  1002. navSelector : ".pagination",
  1003. nextSelector : ".pagination a#next",
  1004. loadingImg : "",
  1005. loadingText : "<em> </em>",
  1006. bufferPx : 100,
  1007. extraScrollPx: 50
  1008. },
  1009.  
  1010. function(newElements){
  1011. var $newElems = $(newElements);
  1012. var $newElemsIDs = $newElems.map(function(){
  1013. return this.id;
  1014. }).get();
  1015. console.log($newElems, $newElemsIDs);
  1016. Tumblr.LikeButton.get_status_by_post_ids($newElemsIDs);
  1017.  
  1018. $newElems.find('.photo-slideshow').pxuPhotoset({
  1019. lightbox: true,
  1020. rounded: false,
  1021. gutter: '4px',
  1022. photoset: '.photo-slideshow',
  1023. photoWrap: '.photo-data',
  1024. photo: '.pxu-photo'
  1025. });
  1026. var $newElems = $( newElements ).hide();
  1027. $newElems.imagesLoaded(function(){
  1028. $newElems.fadeIn();
  1029. {block:ifTwoColumn}
  1030. $container.masonry( 'appended', $newElems, true );
  1031. {/block:ifTwoColumn}
  1032. });
  1033.  
  1034. if($(window).height() >= $(document).height()) {
  1035. $container.infinitescroll('retrieve'); return false;
  1036. };
  1037.  
  1038. var color = '#ededed';
  1039. $('.soundcloud_audio_player').each(function(){
  1040. $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=false&amp;origin=tumblr&amp;color=' + color.split('#')[1], height: 20, width: '100%' });
  1041. });
  1042.  
  1043. });
  1044. {/block:ifInfinitescroll}
  1045. });
  1046. </script>
  1047. {/block:IndexPage}
  1048.  
  1049.  
  1050. <a href="http://shoseii.tumblr.com" style="font-size:10px;position:fixed;bottom:5px;right:3px;">THEME</a>
  1051.  
  1052.  
  1053.  
  1054. </body>
  1055. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement