aeternaphantasia

theme #15: årtionde

Mar 4th, 2021
4,090
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.86 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>{Title}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  8.  
  9. <!--
  10.  
  11. Theme #15: årtionde
  12. coded by kuzuriha
  13.  
  14. 1. Don't remove the credit.
  15. 2. Don't move the credit. Just leave it there.
  16. 3. Don't use as a base code.
  17. 4. Please enjoy! If you find any bugs, please contact me! c:
  18.  
  19. This theme is coded for @codingcabin's theme challenge, New Year New Theme. The color used in this theme is #DECADE.
  20.  
  21. Icon courtesy of @alydae
  22. -->
  23.  
  24. <!--variables-->
  25. <meta name="image:bg" content=""/>
  26.  
  27. <meta name="color:bg" content="#F1F1F1"/>
  28. <meta name="color:accent" content="#decade"/>
  29. <meta name="color:body" content="#141414"/>
  30. <meta name="color:topbar" content="#fff"/>
  31. <meta name="color:post bg" content="#fff"/>
  32.  
  33. <meta name="image:icon" content=""/>
  34.  
  35. <meta name="text:link1" content=""/>
  36. <meta name="text:link1URL" content=""/>
  37. <meta name="text:link2" content=""/>
  38. <meta name="text:link2URL" content=""/>
  39. <meta name="text:link3" content=""/>
  40. <meta name="text:link3URL" content=""/>
  41. <meta name="text:link4" content=""/>
  42. <meta name="text:link4URL" content=""/>
  43.  
  44. <meta name="text:column numbers" content=""/>
  45. <meta name="text:column margin" content=""/>
  46. <meta name="text:post size" content=""/>
  47.  
  48. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  49. <!-- NPF IMAGES READJUSTMENT | @glenthemes v2.0 [last updated: 2021-02-10] --> <link href="//dl.dropbox.com/s/bnoj86mka0bkplb/npf-override.css" rel="stylesheet">
  50. <script src="//dl.dropbox.com/s/vwrm94pcg4c9e71/npf-evenize.js"></script>
  51. <script>
  52. $(document).ready(function(){
  53. $(".npf_inst").each(function(){
  54. if($(this).parent(".cap").prev(".reblogheader").length){
  55. if($(this).next("p").length){
  56. $(this).prependTo($(this).parents(".text-post"));
  57. }
  58. }
  59. });
  60. });
  61. </script>
  62.  
  63. <script src="https://static.tumblr.com/0podkko/qWqq8va08/photosets.js"></script>
  64.  
  65. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  66.  
  67. <script src="https://static.tumblr.com/0podkko/GKRptp03o/customaudio.min.js"></script>
  68.  
  69. <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
  70.  
  71. <script src="https://static.tumblr.com/wdp3vza/pJvosgmgd/jquery.style-my-tooltips.js"></script>
  72.  
  73. <script>
  74.  
  75. (function($){
  76.  
  77. $(document).ready(function(){
  78.  
  79. $("a[title]").style_my_tooltips({
  80.  
  81. tip_follows_cursor:true,
  82.  
  83. tip_delay_time:0,
  84.  
  85. tip_fade_speed:0,
  86.  
  87. attribute:"title"
  88.  
  89. });
  90.  
  91. });
  92.  
  93. })(jQuery);
  94.  
  95. </script>
  96.  
  97. <style type="text/css">
  98. @import url('https://fonts.googleapis.com/css2?family=PT+Sans&family=PT+Serif&display=swap');
  99.  
  100. :root { --NPF-Image-Spacing:5px; --NPF-Bottom-Gap-From-Captions:1em; }
  101.  
  102. iframe.tmblr-iframe {
  103. z-index:99999999999999!important;
  104. top:10px!important;
  105. right:0!important;
  106. opacity:0.4;
  107. /* delete invert(1) from here */
  108. filter:invert(1) contrast(150%);
  109. -webkit-filter:invert(1) contrast(150%);
  110. -o-filter:invert(1) contrast(150%);
  111. -moz-filter:invert(1) contrast(150%);
  112. -ms-filter:invert(1) contrast(150%);
  113. /* to here if your blog has a dark background */
  114. transform:scale(0.65);
  115. transform-origin:100% 0;
  116. -webkit-transform:scale(0.65);
  117. -webkit-transform-origin:100% 0;
  118. -o-transform:scale(0.65);
  119. -o-transform-origin:100% 0;
  120. -moz-transform:scale(0.65);
  121. -moz-transform-origin:100% 0;
  122. -ms-transform:scale(0.65);
  123. -ms-transform-origin:100% 0;}
  124.  
  125. iframe.tmblr-iframe:hover {
  126. opacity:0.6!important;}
  127.  
  128. ::selection{
  129. background:{color:accent};
  130. color:#fff;
  131. }
  132.  
  133. ::-moz-selection{
  134. background:{color:accent};
  135. color:#fff;
  136. }
  137.  
  138. ::-webkit-scrollbar{
  139. width:9px;
  140. background:#ccc;
  141. border:4px solid #fff;
  142. }
  143.  
  144. ::-webkit-scrollbar-thumb:vertical{
  145. height:auto;
  146. background:{color:accent};
  147. border:4px solid #fff;
  148. }
  149.  
  150. #s-m-t-tooltip {
  151. max-width:200px;
  152. padding:5px 10px 5px 10px;
  153. margin:20px 14px 7px 10px;
  154. background-color:{color:accent}; /* change the background color */
  155. font-style: normal;
  156. font-size:10px; /* change the font size */
  157. line-height:13px;
  158. letter-spacing:1px; /* change the letter spacing */
  159. text-transform:lowercase; /* can be uppercase, lowercase, none*/
  160. color:#fff; /* change the text color */
  161. z-index:999999;
  162. }
  163.  
  164.  
  165. body{
  166. margin:0;
  167. padding:0;
  168. font-family:'PT Sans';
  169. font-size:12px;
  170. color:{color:body};
  171. background:{color:bg} url('{image:bg}') fixed;
  172. }
  173.  
  174. a{
  175. text-decoration:none;
  176. }
  177.  
  178. #blogtitle{
  179. font-size:22px;
  180. font-weight:700;
  181. font-family:'PT Serif';
  182. display:block;
  183. width:100%;
  184. margin-top:10px;
  185. margin-bottom:10px;
  186. text-align:center;
  187. }
  188.  
  189.  
  190. .navlink a{
  191. font-family:'PT Serif';
  192. color:{color:body};
  193. text-transform:uppercase;
  194. font-weight:700;
  195. padding:8px;
  196. margin-right:10px;
  197. background:{color:accent};
  198. }
  199.  
  200. #header{
  201. width:95%;
  202. margin:0 auto;
  203. margin-top:30px;
  204. display:flex;
  205. flex-wrap:wrap;
  206. align-items:center;
  207. justify-content:center;
  208. }
  209.  
  210.  
  211. #navbar{
  212. width:100%;
  213. text-align:center;
  214. margin-top:10px;
  215. }
  216.  
  217. #bar{
  218. width:100%;
  219. height:30px;
  220. z-index:-1;
  221. position:absolute;
  222. background:{color:accent};
  223. top:65px;
  224. }
  225.  
  226. #icon{
  227. background:#fff;
  228. width:80px;
  229. height:80px;
  230. padding:10px;
  231. }
  232.  
  233. #icon img{
  234. width:80px;
  235. height:80px;
  236. max-width:80px;
  237. max-height:80px;
  238. }
  239.  
  240. #container{
  241. margin:0 auto;
  242. margin-top:50px;
  243. {block:IndexPage}
  244. width:95%;
  245. column-count:{text:column numbers};
  246. column-gap:{text:column margin}px;
  247. {/block:IndexPage}
  248.  
  249. {block:PermalinkPage}
  250. width:{text:post size}px;
  251. {/block:PermalinkPage}
  252. }
  253.  
  254. #desc{
  255. width:100%;
  256. text-align:center;
  257. margin-bottom:10px;
  258. }
  259.  
  260. .post{
  261. position:relative;
  262. width:{text:post size}px;
  263. min-width:400px;
  264. max-width:600px;
  265. margin:0 auto;
  266. {block:IndexPage}
  267. margin-left:{text:column margin}px;
  268. {/block:IndexPage}
  269. margin-bottom:90px;
  270. break-inside:avoid;
  271. display:inline-block;
  272. }
  273.  
  274. .post img{
  275. width:100%;
  276. }
  277.  
  278. .cap{
  279. background:{color:post bg};
  280. word-wrap:break-word;
  281. padding:4px 10px 3px 10px;
  282. text-align:justify;
  283. }
  284.  
  285. .title{
  286. display:block;
  287. padding:10px;
  288. font-family:'PT Serif';
  289. font-size:16px;
  290. font-weight:700;
  291. text-align:center;
  292. background:{color:accent};
  293. }
  294.  
  295. .cap a{
  296. color:{color:body};
  297. box-shadow:0 -5px 0 inset {color:accent};
  298. }
  299.  
  300. .cap blockquote{
  301. padding-left:5px;
  302. border-left:1px solid {color:accent};
  303. }
  304.  
  305. .cap blockquote blockquote{
  306. padding-left:5px;
  307. border-left:1px solid {color:accent};
  308. }
  309.  
  310. #quote{
  311. font-family:'PT Serif';
  312. padding:10px;
  313. position:relative;
  314. font-size:20px;
  315. text-transform:lowercase;
  316. }
  317.  
  318. #quote:after{
  319. width:15%;
  320. height:3px;
  321. content:'';
  322. left:10px;
  323. bottom:0;
  324. position:absolute;
  325. background:{color:accent};
  326. }
  327.  
  328. #source{
  329. padding:10px;
  330. }
  331.  
  332. #link a{
  333. display:block;
  334. font-family:'PT Serif';
  335. font-size:16px;
  336. font-weight:700;
  337. box-shadow:none;
  338. padding:10px;
  339. color:#fff;
  340. background:{color:accent};
  341. text-align:center;
  342. }
  343.  
  344. .reblogcont{
  345. position:absolute;
  346. left:calc({text:post size}px + 10px);
  347. top:0;
  348. width:35px;
  349. }
  350.  
  351. .controls a{
  352. display:block;
  353. width:15px;
  354. height:15px;
  355. padding:10px;
  356. background:#fff;
  357. color:{color:accent};
  358. margin-bottom:10px;
  359. text-align:center;
  360. font-size:15px;
  361. }
  362.  
  363. .controls .like{
  364. display:inline-block;
  365. }
  366.  
  367. .controls .like .liked + svg {
  368. opacity:1;
  369. }
  370.  
  371. .controls .like .liked + svg path {
  372. fill:#ec5a5a;
  373. }
  374.  
  375. .controls .like .like_button {
  376. position:relative;
  377. }
  378.  
  379. .controls .like .like_button iframe {
  380. position:absolute;
  381. top:0;
  382. left:0;
  383. bottom:0;
  384. right:0;
  385. z-index:2;
  386. opacity:0;
  387. }
  388.  
  389. .pinfo{
  390. position:absolute;
  391. display:flex;
  392. width:{text:post width}px;
  393. max-width:{text:post width}px;
  394. align-items:center;
  395. margin-top:10px;
  396. }
  397.  
  398. .tagcont{
  399. margin-left:10px
  400. }
  401.  
  402. .tagcont a{
  403. font-size:10px;
  404. display:inline;
  405. text-transform:uppercase;
  406. color:{color:body};
  407. background:{color:accent};
  408. font-family:'PT Serif';
  409. margin-bottom:2px;
  410. margin-right:2px;
  411. }
  412.  
  413. .npf_image, .npf_image a{
  414. box-shadow:none !important;
  415. }
  416.  
  417. .reblogheader{
  418. background:{color:post bg};
  419. margin-bottom:5px;
  420. margin-top:5px;
  421. display:flex;
  422. align-items:center;
  423. padding:10px;
  424. }
  425.  
  426. .reblogheader a{
  427. font-family:'PT Serif';
  428. color:{color:body};
  429. text-transform:uppercase;
  430. font-weight:700;
  431. display:inline;
  432. letter-spacing:1px;
  433. }
  434.  
  435. .answerer{
  436. padding:6px;
  437. }
  438.  
  439. .cap .answerer a{
  440. box-shadow:none;
  441. }
  442.  
  443. .avatar{
  444. width:20px;
  445. height:20px;
  446. margin-right:10px;
  447. padding:4px;
  448. border-radius:30px;
  449. border:3px solid {color:accent};
  450. }
  451.  
  452. .avatar img{
  453. width:20px;
  454. height:20px;
  455. max-width:20px;
  456. max-height:20px;
  457. border-radius:30px;
  458. }
  459.  
  460. .rebloginfo{
  461. display:flex;
  462. align-items:center;
  463. margin-left:auto;
  464. }
  465.  
  466. .audio_container{
  467. width:100%;
  468. display:flex;
  469. background:{color:post bg};
  470. align-items:center;
  471. }
  472.  
  473. .audio_art img{
  474. width:120px;
  475. height:120px;
  476. max-width:120px;
  477. max-height:120px;
  478. }
  479.  
  480. .audio_player{
  481. width:30px;
  482. height:30px;
  483. padding:5px;
  484. font-size:30px;
  485. line-height:100%;
  486. position:absolute;
  487. text-align:center;
  488. color:#fff;
  489. top:40px;
  490. left:40px;
  491. opacity:.5;
  492. transition:.5s ease;
  493. }
  494.  
  495. .audio_player:hover{
  496. opacity:1;
  497. }
  498.  
  499. .audio_buttons svg {
  500. width : 1.25em;
  501. height : 1.25em;
  502. }
  503.  
  504. .error_icon svg {
  505. stroke : red;
  506. }
  507.  
  508. .audio_info{
  509. font-family:'PT Serif';
  510. font-weight:700;
  511. padding:10px;
  512. font-size:18px;
  513. background:{color:post bg};
  514. margin-left:20px;
  515. margin-right:20px;
  516. width:calc(100% - 140px);
  517. border:2px solid {color:accent};
  518. }
  519.  
  520. .audio_info .artist, .audio_info .album{
  521. font-family:'PT Sans';
  522. font-size:14px;
  523. font-weight:400;
  524. text-transform:uppercase;
  525. }
  526.  
  527. .qbox{
  528. background:{color:post bg};
  529. padding:10px;
  530. margin-bottom:5px;
  531. }
  532.  
  533. #asker{
  534. display:inline;
  535. color:{color:body};
  536. text-transform:uppercase;
  537. }
  538.  
  539. #asker a{
  540. color:{color:body};
  541. text-transform:uppercase;
  542. font-family:'PT Serif';
  543. }
  544.  
  545.  
  546. .pnotes{
  547. width:calc({text:post width}px - 20px);
  548. position:absolute;
  549. padding:10px;
  550. background:{color:post bg};
  551. }
  552.  
  553. .pnotes ol li{
  554. display:block;
  555. padding:10px;
  556. list-style-type:none!important;
  557. }
  558.  
  559. .pnotes a{
  560. color:{color:body};
  561. font-weight:700;
  562. }
  563.  
  564. ol.notes{
  565. width:100%;
  566. margin-left:-40px;
  567. margin-top:-2px;
  568. }
  569.  
  570. .note li{
  571. display:block;
  572. padding:10px;
  573. }
  574.  
  575. .pnotes img.avatar{
  576. display:none;
  577. }
  578.  
  579. footer{
  580. display:block;
  581. width:95%
  582. padding:10px;
  583. margin:0 auto;
  584. margin-bottom:30px;
  585. text-align:center;
  586. }
  587.  
  588. #pagin a, .jump_page a, .current_page{
  589. color:{color:body};
  590. display:inline-block;
  591. min-width:12px;
  592. background:{color:accent};
  593. padding:5px;
  594. font-size:10px;
  595. margin-right:10px;
  596. margin-bottom:10px;
  597. line-height:100%;
  598. text-align:center;
  599. font-family:'PT Serif';
  600. }
  601.  
  602. .current_page{
  603. font-weight:700;
  604. }
  605. </style>
  606. <script src="//static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  607. <link href="//static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  608. </head>
  609.  
  610. <body>
  611. <div id="header">
  612. <div id="icon"><img src="{image:icon}"/></div>
  613. <div id="blogtitle">{Title}</div>
  614. <div id="desc">{Description}</div>
  615. <div id="navbar">
  616. <div class="navlink">
  617. <a href="/">home</a>
  618. <a href="/ask">message</a>
  619. <a href="/archive">archive</a>
  620. <a href="//kuzuriha.tumblr.com">theme</a>
  621. {block:ifLink1}
  622. <a href="{text:Link1URL}">{text:Link1}</a>
  623. {/block:ifLink1}
  624.  
  625. {block:ifLink2}
  626. <a href="{text:Link2URL}">{text:Link2}</a>
  627. {/block:ifLink2}
  628.  
  629. {block:ifLink3}
  630. <a href="{text:Link3URL}">{text:Link3}</a>
  631. {/block:ifLink3}
  632.  
  633. {block:ifLink4}
  634. <a href="{text:Link4URL}">{text:Link4}</a>
  635. {/block:ifLink4}
  636. </div></div>
  637. </div>
  638.  
  639. <div id="bar"></div>
  640.  
  641. <div id="container">
  642. {block:Posts}
  643. <div class="post" id="{PostID}" post-type="{PostType}">
  644.  
  645. {block:Text}
  646. <div class="text-post">
  647. {block:Title}<div class="title">{Title}</div>{/block:Title}
  648. {block:NotReblog}<div class="cap">{Body}</div>{/block:NotReblog}
  649. {block:RebloggedFrom}
  650. {block:Reblogs}
  651. <div class="reblogheader">
  652. {block:IsActive}
  653. <div class="avatar"><img src="{PortraitURL-64}"/></div>
  654. <a href="{Permalink}">{Username}</a>
  655. {/block:IsActive}
  656.  
  657. {block:IsDeactivated}
  658. <div class="avatar"><img src="{PortraitURL-64}"/></div>
  659. <strike>{Username}</strike>
  660. {/block:IsDeactivated}
  661.  
  662. <div class="rebloginfo">
  663. <a href="{ReblogParentURL}" title="via: {ReblogParentName}">
  664. <div class="avatar"><img src="{ReblogParentPortraitURL-16}"></div></a>
  665. <a href="{ReblogRootURL}" title="src: {ReblogRootName}">
  666. <div class="avatar"><img src="{ReblogRootPortraitURL-16}"></div></a>
  667. </div>
  668. </div>
  669. <div class="cap">{Body}</div>
  670. {/block:Reblogs}
  671. {/block:RebloggedFrom}
  672. </div>
  673. {/block:Text}
  674.  
  675. {block:Photo}
  676. <center><img src="{PhotoURL-HighRes}"/></center>
  677. {block:NotReblog}{block:Caption}<div class="cap">{Caption}</div>{/block:Caption}{/block:NotReblog}
  678.  
  679. {block:RebloggedFrom}
  680. {block:Reblogs}
  681. <div class="reblogheader">
  682. {block:IsActive}
  683. <div class="avatar"><img src="{PortraitURL-64}"/></div>
  684. <a href="{Permalink}">{Username}</a>
  685. {/block:IsActive}
  686.  
  687. {block:IsDeactivated}
  688. <div class="avatar"><img src="{PortraitURL-64}"/></div>
  689. <strike>{Username}</strike>
  690. {/block:IsDeactivated}
  691.  
  692. <div class="rebloginfo">
  693. <a href="{ReblogParentURL}" title="via: {ReblogParentName}">
  694. <div class="avatar"><img src="{ReblogParentPortraitURL-16}"></div></a>
  695. <a href="{ReblogRootURL}" title="src: {ReblogRootName}">
  696. <div class="avatar"><img src="{ReblogRootPortraitURL-16}"></div></a>
  697. </div>
  698. </div>
  699. <div class="cap">{Body}</div>
  700. {/block:Reblogs}
  701. {/block:RebloggedFrom}
  702. {/block:Photo}
  703.  
  704. {block:Photoset}
  705. <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>
  706.  
  707. {block:NotReblog}
  708. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  709. {/block:NotReblog}
  710.  
  711. {block:RebloggedFrom}
  712. {block:Reblogs}
  713. <div class="reblogheader">
  714. {block:IsActive}
  715. <div class="avatar"><img src="{PortraitURL-64}"/></div>
  716. <a href="{Permalink}">{Username}</a>
  717. {/block:IsActive}
  718.  
  719. {block:IsDeactivated}
  720. <div class="avatar"><img src="{PortraitURL-64}"/></div>
  721. <strike>{Username}</strike>
  722. {/block:IsDeactivated}
  723.  
  724. <div class="rebloginfo">
  725. <a href="{ReblogParentURL}" title="via: {ReblogParentName}">
  726. <div class="avatar"><img src="{ReblogParentPortraitURL-16}"></div></a>
  727. <a href="{ReblogRootURL}" title="src: {ReblogRootName}">
  728. <div class="avatar"><img src="{ReblogRootPortraitURL-16}"></div></a>
  729. </div>
  730. </div>
  731. <div class="cap">{Body}</div>
  732. {/block:Reblogs}
  733. {/block:RebloggedFrom}
  734. {/block:Photoset}
  735.  
  736. {block:Video}
  737. <div class="video">{Video-500}</div>
  738.  
  739. {block:NotReblog}
  740. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  741. {/block:NotReblog}
  742.  
  743. {block:RebloggedFrom}
  744. {block:Reblogs}
  745. <div class="reblogheader">
  746. {block:IsActive}
  747. <div class="avatar"><img src="{PortraitURL-64}"/></div>
  748. <a href="{Permalink}">{Username}</a>
  749. {/block:IsActive}
  750.  
  751. {block:IsDeactivated}
  752. <div class="avatar"><img src="{PortraitURL-64}"/></div>
  753. <strike>{Username}</strike>
  754. {/block:IsDeactivated}
  755. </div>
  756. <div class="cap">{Body}</div>
  757. {/block:Reblogs}
  758. {/block:RebloggedFrom}
  759. {/block:Video}
  760.  
  761. {block:Quote}
  762. <div class="cap">
  763. <div id="quote">{Quote}</div>
  764. {block:Source}<div id="source">{Source}</div>{/block:Source}
  765. </div>
  766. {/block:Quote}
  767.  
  768. {block:Link}
  769. <div id="link"><a href="{URL}">{Name}</a></div>
  770. {block:NotReblog}
  771. {block:Description}
  772. <div class="cap">{Description}</div>{/block:Description}
  773. {/block:NotReblog}
  774. {block:RebloggedFrom}
  775. {block:Reblogs}
  776. <div class="reblogheader">
  777. {block:IsActive}
  778. <div class="avatar"><img src="{PortraitURL-64}"/></div>
  779. <a href="{Permalink}">{Username}</a>
  780. {/block:IsActive}
  781.  
  782. {block:IsDeactivated}
  783. <div class="avatar"><img src="{PortraitURL-64}"/></div>
  784. <strike>{Username}</strike>
  785. {/block:IsDeactivated}
  786.  
  787. <div class="rebloginfo">
  788. <a href="{ReblogParentURL}" title="via: {ReblogParentName}">
  789. <div class="avatar"><img src="{ReblogParentPortraitURL-16}"></div></a>
  790. <a href="{ReblogRootURL}" title="src: {ReblogRootName}">
  791. <div class="avatar"><img src="{ReblogRootPortraitURL-16}"></div></a>
  792. </div>
  793. </div>
  794. <div class="cap">{Body}</div>
  795. {/block:Reblogs}
  796. {/block:RebloggedFrom}
  797. {/block:Link}
  798.  
  799. {block:Chat}
  800. {block:Title}<div class="title">{Title}</div>{/block:Title}
  801. <div class="cap">
  802. <ul class="chat">
  803. {block:Lines}
  804. <li class="line_{Alt}"><span class="label">{block:Label}{Label}{/block:Label}</span> {Line}
  805. {/block:Lines}
  806. </li>
  807. </ul>
  808. </div>
  809. {/block:Chat}
  810.  
  811. {block:Audio}
  812. <div class="audio_container">
  813. <div class="audio_art">
  814. {block:AlbumArt}
  815. <img src="{AlbumArtURL}"/>
  816. {block:ifnotalbumarturl}
  817. <img src="https://64.media.tumblr.com/d6b9b7a76bccffee6dbc1d69e5e625bd/tumblr_mjcin8WReA1rb8evoo3_r1_500.png"/>
  818. {/block:ifnotalbumarturl}
  819. {/block:AlbumArt}
  820. </div>
  821. {block:AudioPlayer}
  822. {AudioPlayer}
  823. <div class="audio_player">{audio:AudioButtons}</div>
  824. <div class="audio_info">
  825. {block:TrackName}{TrackName}<br>{/block:TrackName}
  826. {block:Album}<span class="album">{Album}</span><br>{/block:Album}
  827. {block:Artist}<span class="artist">{Artist}</span>{/block:Artist}
  828. </div>
  829. {/block:AudioPlayer}
  830. </div>
  831. {block:NotReblogged}
  832. {block:Caption}<div class="cap">{Caption}</div>{/block:Caption}
  833. {/block:NotReblogged}
  834.  
  835. {block:RebloggedFrom}
  836. {block:Reblogs}
  837. <div class="reblogheader">
  838. {block:IsActive}
  839. <div class="avatar"><img src="{PortraitURL-64}"/></div>
  840. <a href="{Permalink}">{Username}</a>
  841. {/block:IsActive}
  842.  
  843. {block:IsDeactivated}
  844. <div class="avatar"><img src="{PortraitURL-64}"/></div>
  845. <strike>{Username}</strike>
  846. {/block:IsDeactivated}
  847.  
  848. <div class="rebloginfo">
  849. <a href="{ReblogParentURL}" title="via: {ReblogParentName}">
  850. <div class="avatar"><img src="{ReblogParentPortraitURL-16}"></div></a>
  851. <a href="{ReblogRootURL}" title="src: {ReblogRootName}">
  852. <div class="avatar"><img src="{ReblogRootPortraitURL-16}"></div></a>
  853. </div>
  854. </div>
  855. <div class="cap">{Body}</div>
  856. {/block:Reblogs}
  857. {/block:RebloggedFrom}
  858. {/block:Audio}
  859.  
  860. {block:Answer}
  861. <div class="qbox">
  862. <div class="qtext">
  863. <span id="asker"><b>{Asker}:</b></span> {Question}
  864. </div>
  865. </div>
  866.  
  867. {block:Answerer}
  868. <div class="cap">
  869. {block:RebloggedFrom}
  870. <div class="reblogheader answerer">
  871. <div class="avatar"><img src="{AnswererPortraitURL-64}"/></div><a href="{Permalink}">{Answerer}</a>
  872. </div>
  873. {/block:RebloggedFrom}
  874. {Answer}</div>
  875. {/block:Answerer}
  876.  
  877. {block:NotReblog}
  878. <div class="cap">{Replies}</div>
  879. {/block:NotReblog}
  880.  
  881. {block:RebloggedFrom}
  882. {block:Reblogs}
  883. <div class="reblogheader">
  884. {block:IsActive}
  885. <div class="avatar"><img src="{PortraitURL-64}"/></div>
  886. <a href="{Permalink}">{Username}</a>
  887. {/block:IsActive}
  888.  
  889. {block:IsDeactivated}
  890. <div class="avatar"><img src="{PortraitURL-64}"/></div>
  891. <strike>{Username}</strike>
  892. {/block:IsDeactivated}
  893.  
  894. <div class="rebloginfo">
  895. <a href="{ReblogParentURL}" title="via: {ReblogParentName}">
  896. <div class="avatar"><img src="{ReblogParentPortraitURL-16}"></div></a>
  897. <a href="{ReblogRootURL}" title="src: {ReblogRootName}">
  898. <div class="avatar"><img src="{ReblogRootPortraitURL-16}"></div></a>
  899. </div>
  900. </div>
  901. <div class="cap">{Body}</div>
  902. {/block:Reblogs}
  903. {/block:RebloggedFrom}
  904. {/block:Answer}
  905.  
  906. {block:IndexPage}
  907. {block:Date}
  908. <div class="pinfo">
  909. <span style="padding:6px;background:{color:accent};font-family:'PT Serif';text-transform:uppercase;margin-right:10px;font-weight:700;">{Month} {DayOfMonth}</span>
  910. {NoteCount}
  911.  
  912. {block:HasTags}
  913. <div class="tagcont">{block:Tags}<a href="{TagURL}">#{Tag}</a>
  914. {/block:Tags}
  915. </div>
  916. {/block:HasTags}
  917. </div>
  918. <div class="reblogcont">
  919. <div class="controls">
  920. <a href="{ReblogURL}" target="_blank" title="reblog" class="reblog"><i class="bx bx-refresh"></i>
  921. </a>
  922. <a href="#" class="like" title="like">{LikeButton}<i class="bx bx-heart"></i>
  923. </a>
  924. <a href="{Permalink}" title="post link"><i class="bx bx-bookmark"></i></a>
  925. </div>
  926. </div>
  927. {/block:Date}
  928.  
  929. {/block:IndexPage}
  930.  
  931. {block:ContentSource}
  932. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  933. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  934. {/block:SourceLogo}
  935. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  936. {/block:ContentSource}
  937.  
  938. {block:PermalinkPage}
  939. {block:PostNotes}
  940. <div class="pnotes">
  941. <ol class="notes">{PostNotes}</ol>
  942. </div>
  943. {/block:PostNotes}
  944. {/block:PermalinkPage}
  945.  
  946. </div><!--end posts-->
  947. {/block:Posts}
  948. </div>
  949. </body>
  950.  
  951. {block:Pagination}
  952. <footer>
  953. <div id="pagin">
  954. {block:PreviousPage}<a href="{PreviousPage}" class="prev_page">back</a>{/block:PreviousPage}
  955. {block:JumpPagination length="5"}
  956. {block:CurrentPage}<span class="current_page">{CurrentPage}</span>{/block:CurrentPage}
  957. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}
  958. {/block:JumpPagination}
  959. {block:NextPage}<a href="{NextPage}" class="next_page">next</a>{/block:NextPage}
  960. </div>
  961. </footer>
  962. {/block:Pagination}
  963.  
  964.  
  965. <script>
  966. undoPhotoset({
  967. 'posts': '.post', // change '.post.text' to the text post selector
  968. 'text class': '.text-post', // change 'text' to the text post unique class (can be '')
  969. 'photoset class': '.photo-slideshow' // change 'photoset' to the photoset post unique class (can be '')
  970. },true); // true = pxu, false = css photosets
  971.  
  972. undoPhotoset();
  973.  
  974. $(document).ready(function(){
  975. $('.photo-slideshow').pxuPhotoset({
  976. lightbox: true,
  977. rounded: false,
  978. gutter: '5px',
  979. borderRadius: '0px',
  980. photoset: '.photo-slideshow',
  981. photoWrap: '.photo-data',
  982. photo: '.pxu-photo'
  983. });
  984.  
  985. customAudio({
  986. post: ".post",
  987. default: false,
  988. pauseAll: true,
  989. playButton: "<i class='bx bx-play'></i>",
  990. pauseButton: "<i class='bx bx-pause'></i>",
  991. errorIcon: "<i class='bx bx-x'></i>",
  992. hideInfoIfError: true,
  993. callAfterLoad:null,
  994. });
  995. customAudio();
  996.  
  997. function flexFrame() {
  998. $(".cap").each(function() {
  999. $(this).find("iframe").wrap("<div class='capframe'></div>"); // wrap iframe
  1000. flexibleFrames($(".capframe"));
  1001. });
  1002. flexibleFrames($(".video"));
  1003. }
  1004.  
  1005. $(document).ready(flexFrame);
  1006.  
  1007. });
  1008. </script>
  1009. </html>
Advertisement
Add Comment
Please, Sign In to add comment