byananda

constance

Dec 28th, 2020 (edited)
6,224
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.70 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!---------------------------------------------------------------------------
  6.  
  7. CONSTANCE | BY ANANDA
  8. made with ♡ for free
  9.  
  10. release: 12.28.2020
  11. last updated: 12.28.2020
  12.  
  13. ---------------------------------------------------------------------------->
  14.  
  15. <link rel="shortcut icon" href="{Favicon}" />
  16.  
  17. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  18.  
  19. <title>{block:PostSummary}{PostSummary} @ {Name} {/block:PostSummary} {Title}</title>
  20.  
  21. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  22.  
  23. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  24.  
  25. <!-- color options -->
  26. <meta name="color:background" content="#ffffff" />
  27. <meta name="color:text" content="#656565" />
  28. <meta name="color:links" content="#71adab" />
  29. <meta name="color:links hover" content="#71adab" />
  30. <meta name="color:posts" content="#fbfbfb" />
  31.  
  32. <!-- posts options -->
  33. <meta name="select:posts size" content="540px" />
  34. <meta name="select:posts size" content="500px" />
  35. <meta name="select:posts size" content="450px" />
  36. <meta name="select:posts size" content="400px" />
  37.  
  38. <!-- gutter options -->
  39. <meta name="select:gutter size" content="1px" />
  40. <meta name="select:gutter size" content="2px" />
  41. <meta name="select:gutter size" content="3px" />
  42. <meta name="select:gutter size" content="4px" />
  43.  
  44. <!-- text options -->
  45. <meta name="text:google font" content="Karma" />
  46. <meta name="text:font size" content="14px" />
  47.  
  48. <!-- image -->
  49. <meta name="image:sidebar" />
  50.  
  51. <style>
  52.  
  53. body {
  54. margin:0;
  55. background-color:{color:background};
  56. font:{text:font size}/1.8em {text:google font}, Arial;
  57. color:{color:text};
  58. word-wrap:break-word;
  59. letter-spacing:.20px;
  60. opacity:1;
  61. transition:1s opacity;
  62. }
  63.  
  64. body.fade-out {
  65. opacity:0;
  66. transition:none;
  67. }
  68.  
  69. .flex {
  70. display:flex;
  71. flex-wrap:wrap;
  72. }
  73.  
  74. .centered {
  75. align-items:center;
  76. justify-content:center;
  77. }
  78.  
  79. .align-center {
  80. align-items:center;
  81. }
  82.  
  83. .feather {
  84. stroke-width:2.5;
  85. display:inline-block;
  86. vertical-align:middle;
  87. width:calc({text:font size} + 1px);
  88. height:calc({text:font size} + 1px);
  89. color:{color:links};
  90. }
  91.  
  92. blockquote {
  93. border-left:1px solid {color:links};
  94. padding-left:10px;
  95. }
  96.  
  97. a {
  98. text-decoration:none;
  99. color:{color:links};
  100. transition:all .2s linear;
  101. -webkit-transition:all .2s linear;
  102. -o-transition:all .2s linear;
  103. -moz-transition:all .2s linear;
  104. }
  105.  
  106. a:hover, a:hover {
  107. color:{color:links hover};
  108. }
  109.  
  110. small {
  111. font-size:calc({text:font size} - 2px)
  112. }
  113.  
  114. b {
  115. font-weight:600;
  116. }
  117.  
  118. p {margin:1em 0;}
  119.  
  120. p:first-of-type {margin-top:0;}
  121.  
  122. p:last-of-type {margin-bottom:0;}
  123.  
  124. hr {
  125. border-top:1px solid {color:links};
  126. }
  127.  
  128. h1, h2, h3, h4 {
  129. text-align:center;
  130. margin:0 0 0.50em 0;
  131. font-size:calc({text:font size} + 4px);
  132. font-weight:600;
  133. padding:0;
  134. color:{color:text};
  135. }
  136.  
  137. .posts h1:first-child, .posts h2:first-child, .posts h3:first-child, .posts h4:first-child {margin-top:0;}
  138.  
  139. .tippy-tooltip.custom-theme {
  140. text-transform:uppercase;
  141. font-weight:600;
  142. letter-spacing:.50px;
  143. font-size:calc({text:font size} - 3px);
  144. margin-top:10px;
  145. color:{color:background};
  146. text-align:center;
  147. background:{color:links hover};
  148. padding:6px 3px 3px 3px;
  149. border-radius:0.6rem;
  150. }
  151.  
  152. .tippy-tooltip.custom-theme .tippy-svg-arrow {
  153. fill:{color:links hover};
  154. }
  155.  
  156. /*tumblr controls and lightbox*/
  157. .tmblr-lightbox {background:rgba({RGBcolor:background}, .95)!important;}
  158.  
  159. .tmblr-lightbox img {opacity:0;}
  160.  
  161. .lightbox-caption {
  162. color:{color:title}!important;
  163. font-family:inherit!important;
  164. font-size:1em!important;
  165. font-weight:normal!important;
  166. text-shadow:none!important;
  167. }
  168.  
  169. .lightbox-image {
  170. -moz-box-shadow:none!important;
  171. -webkit-box-shadow:none!important;
  172. box-shadow:none!important;
  173. -moz-border-radius:0px!important;
  174. -webkit-border-radius:0px!important;
  175. border-radius:0px!important;
  176. padding:0px!important;
  177. border:0!important;
  178. opacity:1!important;
  179. }
  180.  
  181. .vignette {opacity:0!Important;}
  182.  
  183. ::-webkit-scrollbar {
  184. width:6px;
  185. height:10px;
  186. }
  187.  
  188. ::-webkit-scrollbar-thumb {
  189. border-radius:10px;
  190. background:{color:links};
  191. }
  192.  
  193. main {
  194. width:100%;
  195. justify-content:space-around;
  196. align-items:flex-start;
  197. }
  198.  
  199. #container {
  200. width:calc({select:posts size} + 250px + 200px);
  201. margin:40px auto 40px 200px;
  202. }
  203.  
  204. section {
  205. margin:100px 0;
  206. width:{select:posts size};
  207. float:right;
  208. }
  209.  
  210. article {
  211. background:{color:background};
  212. width:{select:posts size};
  213. text-align:left;
  214. }
  215.  
  216. article img {
  217. max-width:100%;
  218. display:block;
  219. margin:auto;
  220. }
  221.  
  222. /*------- npf photoset image spacing-------*/
  223. :root {
  224. --NPF-Image-Spacing:{select:gutter size};
  225. }
  226.  
  227. .npf_row {
  228. display:flex!important;
  229. margin:calc(var(--NPF-Image-Spacing) / -2)!important;
  230. margin-bottom:calc(var(--NPF-Image-Spacing) / 2)!important;
  231. }
  232.  
  233. .npf_row:last-of-type {
  234. margin-bottom:calc(var(--NPF-Image-Spacing) / -2)!important;
  235. }
  236.  
  237. .tmblr-full {
  238. flex:1;
  239. margin:0!important;
  240. padding:calc(var(--NPF-Image-Spacing) / 2)!important;
  241. width:auto!important;
  242. height:auto!important;
  243. cursor:pointer;
  244. outline:none;
  245. }
  246.  
  247. .tmblr-full img {visibility:hidden;}
  248.  
  249. /* sidebar */
  250. aside {
  251. margin:100px 0 0 0;
  252. display:block;
  253. width:250px;
  254. position:fixed;
  255. text-align:center;
  256. }
  257.  
  258. aside img {
  259. width:100%;
  260. margin:0 auto 15px auto;
  261. display:block;
  262. border-radius:0.6rem;
  263. background:{color:links};
  264. }
  265.  
  266. .sidetitle a {
  267. color:{color:text};
  268. }
  269.  
  270. .tabs a {
  271. padding:3px 8px;
  272. color:{color:text};
  273. }
  274.  
  275. ul.tabs {
  276. margin:0px;
  277. padding:0px;
  278. list-style:none;
  279. }
  280.  
  281. ul.tabs li {
  282. padding:3px 8px;
  283. background:none;
  284. display:inline-block;
  285. margin:0 5px;
  286. cursor:pointer;
  287. }
  288.  
  289. ul.tabs li.current {
  290. padding:3px 8px;
  291. border-radius:100%;
  292. background:{color:links};
  293. border-bottom:0;
  294. border-top:0;
  295. -webkit-animation:fadeEffect 1s;
  296. animation: fadeEffect 1s;
  297. box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
  298. }
  299.  
  300. ul.tabs li.current .feather {
  301. color:{color:background};
  302. }
  303.  
  304. .tab-content {
  305. margin-top:1.5em;
  306. display:none;
  307. padding:30px 40px;
  308. border:1px solid #eee;
  309. background:{color:posts};
  310. border-radius:0.6rem;
  311. -webkit-animation:fadeEffect 1s;
  312. animation: fadeEffect 1s;
  313. box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
  314. }
  315.  
  316. /* Fade in tabs */
  317. @-webkit-keyframes fadeEffect {
  318. from {opacity:0;}
  319. to {opacity:1;}
  320. }
  321.  
  322. @keyframes fadeEffect {
  323. from {opacity:0;}
  324. to {opacity:1;}
  325. }
  326.  
  327. .tab-content.current {
  328. color:{color:text};
  329. display:inherit;
  330. }
  331.  
  332. .links {
  333. display:inline;
  334. counter-reset:section;
  335. }
  336.  
  337. .links a {
  338. margin:0 10px;
  339. }
  340.  
  341. .links a:before {
  342. counter-increment: section;
  343. content:'' counter(section) '.';
  344. color:{color:text};
  345. font-size:calc({text:font size} - 1px);
  346. padding-right:3px;
  347. }
  348.  
  349. /* photo post */
  350. .photopost img {
  351. width:100%;
  352. }
  353.  
  354. /* link post */
  355. .link {
  356. padding:10px;
  357. }
  358.  
  359. /* quote post */
  360. .source {
  361. margin-bottom:1em;
  362. text-align:center;
  363. font-size:calc({text:font size} - 2px);
  364. }
  365.  
  366. .source .feather {
  367. margin-right:10px;
  368. padding:8px;
  369. border-radius:100%;
  370. background:{color:links};
  371. color:{color:background};
  372. }
  373.  
  374. /* chat post */
  375. .chat {
  376. margin:0;
  377. padding:0;
  378. }
  379.  
  380. .chat li {
  381. list-style:none;
  382. padding:10px;
  383. }
  384.  
  385. .chat li:nth-of-type(odd) {
  386. background:{color:background};
  387. color:{color:text};
  388. }
  389.  
  390. /* audio post */
  391. iframe.tumblr_audio_player {
  392. width:100%;
  393. }
  394.  
  395. /* captions */
  396. .comment {
  397. list-style:none;
  398. padding:0 20px 0 0;
  399. }
  400.  
  401. .captioned .comment:first-of-type {margin-top:20px;}
  402.  
  403. .comment:last-of-type {padding-bottom:0!important;}
  404.  
  405. .comment-header {
  406. margin-bottom:10px;
  407. display:flex;
  408. align-items:center;
  409. }
  410.  
  411. .user {
  412. color:{color:text};
  413. display:inline-block;
  414. font-weight:bold;
  415. line-height:18px;
  416. }
  417.  
  418. .icon {
  419. margin-right:7px;
  420. display:inline-block;
  421. float:left;
  422. }
  423.  
  424. .icon img {
  425. width:18px;
  426. height:18px;
  427. border-radius:100%;
  428. }
  429.  
  430. .tex li, .tex blockquote {text-align:left;}
  431.  
  432. /* post info */
  433. .info {
  434. margin-top:1.5em;
  435. width:calc({select:posts size} - 80px);
  436. background:{color:posts};
  437. padding:30px 40px;
  438. text-align:center;
  439. {block:IndexPage}
  440. margin-bottom:150px;
  441. {/block:IndexPage}
  442. border:1px solid #eee;
  443. border-radius:0.6rem;
  444. box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
  445. }
  446.  
  447. .info:last-child {
  448. margin-bottom:0;
  449. }
  450.  
  451. .info-links a {
  452. text-transform:uppercase;
  453. font-weight:700;
  454. margin-right:2em;
  455. }
  456.  
  457. .custom-like-button {
  458. position: relative;
  459. display: inline-block;
  460. cursor: pointer;
  461. }
  462.  
  463. .like-b {
  464. position:relative;
  465. display: inline-block;
  466. height:auto;
  467. vertical-align:middle;
  468. overflow:hidden;
  469. }
  470.  
  471. .like-b .like_button iframe {
  472. position:absolute;
  473. top:0;
  474. left:0;
  475. bottom:0;
  476. right:0;
  477. z-index:2;
  478. opacity:0.000001;
  479. }
  480.  
  481. .like-b .liked + .b {
  482. color:inherit;
  483. }
  484.  
  485. .like-b .liked + .b:after {
  486. content:'d';
  487. }
  488.  
  489. pre {
  490. word-wrap:break-word!Important;
  491. white-space:pre-wrap;
  492. }
  493.  
  494. .tags {
  495. padding:0 40px;
  496. }
  497.  
  498. .tags a {
  499. font-weight:normal;
  500. text-transform:lowercase;
  501. color:{color:text};
  502. margin:0;
  503. }
  504.  
  505. .tags a:after {
  506. content:'•';
  507. margin:0 5px 0 7px;
  508. color:{color:links};
  509. }
  510.  
  511. .tags a:last-child:after {
  512. content:'';
  513. }
  514.  
  515. /* notes */
  516. .notes {
  517. margin-top:40px;
  518. list-style:none;
  519. width:calc({select:posts size} - 80px);
  520. padding:40px;
  521. background:{color:background};
  522. border:1px solid #eee;
  523. border-radius:0.6rem;
  524. }
  525.  
  526. ol.notes {
  527. margin:0;
  528. padding:0;
  529. border:0;
  530. }
  531.  
  532. ol.notes li {
  533. padding:5px 0;
  534. }
  535.  
  536. ol.notes img {
  537. vertical-align:middle;
  538. border-radius:100%;
  539. margin-right:5px;
  540. }
  541.  
  542. /* pagination */
  543. .pagination {
  544. background:{color:links};
  545. padding:30px 40px;
  546. width:calc({select:posts size} - 80px);
  547. text-align:center;
  548. border-radius:0.6rem;
  549. box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
  550. }
  551.  
  552. .pagination .feather {
  553. color:{color:background};
  554. }
  555.  
  556. .pagination a {
  557. padding-top:3px;
  558. color:{color:background};
  559. margin:0 5px;
  560. }
  561.  
  562. /* credit */
  563. .cr {
  564. position:fixed;
  565. color:{color:text};
  566. display:block;
  567. z-index:1;
  568. position:fixed;
  569. right:20px;
  570. bottom:20px;
  571. }
  572.  
  573. /* mobile friendly sidebar */
  574. @media only screen and (max-width:1100px) {
  575. aside {
  576. position:relative;
  577. left:0;
  578. width:100%;
  579. right:auto;
  580. max-width:450px;
  581. margin:50px auto;
  582. }
  583.  
  584. section {
  585. width:100%;
  586. }
  587.  
  588. article {
  589. margin:0 auto 0 auto;
  590. width:450px;
  591. }
  592.  
  593. .info {
  594. margin:0 auto 150px auto;
  595. margin-top:1.5em;
  596. width:450px;
  597. }
  598.  
  599. .pagination {
  600. width:450px;
  601. }
  602.  
  603. }
  604.  
  605. {CustomCSS}
  606.  
  607. </style>
  608. </head>
  609. <body>
  610. <script>document.body.className += ' fade-out';</script>
  611.  
  612. <!-------------------------------------------------------------------------->
  613.  
  614. <!-- main container -->
  615. <main class="flex">
  616.  
  617. <div id="container">
  618.  
  619. <!-- sidebar -->
  620. <aside>
  621.  
  622. {block:ifsidebarimage}<a href="/"><img src="{image:sidebar}"></a>{/block:ifsidebarimage}
  623.  
  624. <h1 class="sidetitle"><a href="/">{Title}</a></h1>
  625.  
  626. <!-- menu buttons -->
  627. <ul class="tabs">
  628. <a href="/ask"><i data-feather="mail"></i></a>
  629. <li class="tab-link current" data-tab="tab-1"><i data-feather="user"></i></li>
  630. <li class="tab-link" data-tab="tab-2"><i data-feather="map"></i></span></li>
  631. <li class="tab-link" data-tab="tab-3"><i data-feather="flag"></i></li>
  632. <a href="/archive"><i data-feather="clock"></i></a>
  633. </ul>
  634.  
  635. <div id="tab-1" class="tab-content current">
  636. {description}
  637. </div>
  638.  
  639. <!-- begginning of links tag -->
  640. <div id="tab-2" class="tab-content">
  641. <div class="links">
  642.  
  643. <a href="https://YOUR-LINK">link</a>
  644. <a href="https://YOUR-LINK">link</a>
  645. <a href="https://YOUR-LINK">link</a>
  646. <a href="https://YOUR-LINK">link</a>
  647. <a href="https://YOUR-LINK">link</a>
  648. <a href="https://YOUR-LINK">link</a>
  649.  
  650. </div>
  651. </div>
  652. <!-- end of links tag -->
  653.  
  654. <!-- begginning of updates tab -->
  655. <div id="tab-3" class="tab-content">
  656.  
  657.  
  658. <b>heading</b><br>
  659. lorem ipsum
  660.  
  661. <hr>
  662.  
  663. <b>heading</b><br>
  664. lorem ipsum
  665.  
  666. <hr>
  667.  
  668. <b>heading</b><br>
  669. lorem ipsum
  670.  
  671.  
  672. </div>
  673. <!-- end of updates tab -->
  674.  
  675. </aside>
  676. <!-- end of sidebar -->
  677.  
  678. <!-- posts -->
  679. <section>
  680.  
  681. {block:Posts}
  682. <!-- {block:NoRebloggedFrom}
  683. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  684. {/block:NoRebloggedFrom} -->
  685. {block:ContentSource}<!-- {SourceURL}
  686. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  687. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  688. {/block:ContentSource}
  689.  
  690. <article class="posts {block:caption}captioned{/block:caption}">
  691.  
  692. {block:Text}
  693. <div class="text-post">
  694. {block:Title}<h1>{title}</h1>{/block:Title}
  695. {block:RebloggedFrom}
  696. {block:Reblogs}
  697. <li class="comment {block:Title}ted{/block:Title}">
  698. <div class="comment-header"><a href="{Permalink}" class="icon"><img src="{PortraitURL-64}"></a><a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a></a></div>
  699. <div class="tex">{body}</div>
  700. </li>
  701. {/block:Reblogs}
  702. {/block:RebloggedFrom}
  703. {block:NotReblog}
  704. <li class="comment {block:Title}ted{/block:Title}">
  705. <div class="tex">{body}</div>
  706. </li>
  707. {/block:NotReblog}
  708. </div>
  709. {/block:Text}
  710.  
  711. {block:Photo}
  712. <img src="{PhotoURL-highres}" al="{photoalt}" class="photopost">
  713. {/block:Photo}
  714.  
  715. {block:Photoset}
  716. <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>
  717. {/block:Photoset}
  718.  
  719. {block:Panorama}
  720. <img src="{photourl-panorama}" alt="{photoalt}">
  721. {/block:Panorama}
  722.  
  723. {block:Quote}
  724. <h1>"{Quote}"</h1>
  725. <div class="source">
  726. <i data-feather="feather"></i>
  727. {Source}
  728. </div>
  729. {/block:Quote}
  730.  
  731. {block:Chat}
  732. <ul class="chat">
  733. {block:Lines}
  734. <li>{block:Label}{Label}{/block:Label} {Line}</li>
  735. {/block:Lines}
  736. </ul>
  737. {/block:Chat}
  738.  
  739. {block:Link}<div class="title"><a href="{URL}">{name}</a></div>
  740. {block:Description}
  741. {block:NotReblog}
  742. <li class="comment ted">
  743. <div class="tex">{description}</div>
  744. </li>
  745. {/block:NotReblog}
  746. {/block:Description}
  747. {block:RebloggedFrom}
  748. {block:Reblogs}
  749. <li class="comment">
  750. <div class="comment-header"><a href="{Permalink}" class="icon"><img src="{PortraitURL-64}"></a><a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a></a></div>
  751. <div class="tex">{body}</div>
  752. </li>
  753. {/block:Reblogs}
  754. {/block:RebloggedFrom}
  755. {/block:Link}
  756.  
  757. {block:Video}
  758. <div class="video">{Video-500}</div>
  759. {/block:Video}
  760.  
  761. {block:Audio}
  762. <div class="audio">
  763. {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  764. </div>
  765. {/block:Audio}
  766.  
  767. {block:Answer}
  768. <h1>{Question}</h1>
  769. <div class="source">
  770. <i data-feather="mail"></i>
  771. sent by {Asker}
  772. </div>
  773. {block:Answerer}
  774. <li class="comment">
  775. <div class="user">{answerer} replied</div>
  776. <div class="tex">{answer}</div>
  777. </li>
  778. {/block:Answerer}
  779. {block:NotReblog}
  780. <li class="comment">
  781. <div class="tex">{replies}</div>
  782. </li>
  783. {/block:NotReblog}
  784. {block:RebloggedFrom}
  785. {block:Reblogs}
  786. <li class="comment">
  787. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a>
  788. <div class="tex">{body}</div>
  789. </li>
  790. {/block:Reblogs}
  791. {/block:RebloggedFrom}
  792. {/block:Answer}
  793.  
  794. {block:Caption}
  795. {block:Reblogs}
  796. <li class="comment">
  797. <div class="comment-header"><a href="{Permalink}" class="icon"><img src="{PortraitURL-64}"></a><a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a></a></div>
  798. <div class="tex">{body}</div>
  799. </li>
  800. {/block:Reblogs}
  801. {block:NotReblog}
  802. <li class="comment"><div class="tex">{caption}</div></li>
  803. {/block:NotReblog}
  804. {/block:Caption}
  805. </article>
  806. <!-- end of posts -->
  807.  
  808. {block:Date}
  809. <div class="info">
  810.  
  811. <div class="info-links">
  812. <a href="{permalink}">{Month} {DayofMonth}</a>
  813.  
  814. {block:Notecount}<a href="{permalink}">{NoteCountWithLabel}</a>{/block:Notecount}
  815.  
  816. {block:Rebloggedfrom}<a href="{reblogparenturl}">via</a>{/block:Rebloggedfrom}
  817.  
  818. <a href="{ReblogURL}" target="_blank">reblog</a>
  819.  
  820. <a class="like-b" href="#">{LikeButton}<span class="b">like</span></a>
  821. </div>
  822.  
  823. <!-- tags -->
  824. {block:Hastags}
  825. <div class="tags">
  826. {block:Tags}
  827. <a href="{TagURL}">{Tag}</a>
  828. {/block:Tags}
  829. </div>
  830. {/block:Hastags}
  831.  
  832. </div>
  833. {/block:Date}
  834.  
  835. {block:PostNotes}
  836. <div class="notes">
  837. {PostNotes}
  838. </div>
  839. {/block:PostNotes}
  840.  
  841. {/block:Posts}
  842.  
  843. <!-- pagination -->
  844. {block:Pagination}
  845. <div class="pagination">
  846. <h1 style="margin:0;">
  847. {block:previouspage}
  848. <a href="{previouspage}"><i data-feather="chevron-left"></i></a>
  849. {/block:previouspage}
  850. {block:JumpPagination length="5"}
  851. {block:CurrentPage}<a class="current_page"><b>{PageNumber}</b></a>{/block:CurrentPage}
  852. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}
  853. {/block:JumpPagination}
  854. {block:nextpage}
  855. <a href="{nextpage}"><i data-feather="chevron-right"></i></a>
  856. {/block:nextpage}
  857. </h1>
  858. </div>
  859. {/block:Pagination}
  860. </section>
  861. <!-- end of section -->
  862. </div>
  863.  
  864. </main>
  865. <!-- end of container -->
  866.  
  867. <!-------------------------------------------------------------------------->
  868.  
  869. <a href="https://byananda.tumblr.com" class="cr" title="by ananda">by a.</a>
  870.  
  871. <!-------------------------------------------------------------------------->
  872.  
  873. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  874. <!-- fonts & icons -->
  875. <link href="https://fonts.googleapis.com/css?family={text:google font}:700,600,500,400" rel="stylesheet">
  876. <script src="https://unpkg.com/feather-icons"></script>
  877. <!-- pxu photosets -->
  878. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  879. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  880. <!-- video resizing -->
  881. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  882. <!-- tooltips -->
  883. <script src="https://unpkg.com/popper.js@1"></script>
  884. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  885. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  886. <!-- npf fix by glenthemes -->
  887. <script src="//dl.dropbox.com/s/m8mtje1avef2a2y/npf-styling.js"></script>
  888. <script src="//cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script>
  889. <script>
  890. npfPhotosets(".posts", npfOptions);
  891. </script>
  892. <!-- npf photosets by codematurgy -->
  893. <script src="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script><link href="https://cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosetstyle.css" rel="stylesheet" type="text/css">
  894. <script>
  895. npfPhotosets("postSelector", {
  896. rowClass:"npf_row",
  897. imageContainerClass:"tmblr-full",
  898. generatedPhotosetContainerClass:"npf_photoset",
  899. imageClass:"npf_image",
  900. includeCommonPhotosets: true,
  901. useTumblrLightbox: true,
  902. insertGalleryIndicator: false,
  903. galleryIndicatorClass: "npf_gallery_indicator",
  904. galleryIndicatorContent: "<img src='image_url'>",
  905. photosetMargins:""
  906. });
  907. </script>
  908.  
  909. <script>
  910. /// FEATHER ICONS
  911.  
  912. feather.replace()
  913.  
  914. /// FADE
  915.  
  916. $(function() {
  917. $('body').removeClass('fade-out');
  918. });
  919.  
  920. /// PHOTOSETS
  921.  
  922. $(document).ready(function(){
  923. $('.photo-slideshow').pxuPhotoset({
  924. lightbox: true,
  925. rounded: false,
  926. gutter: '{select:gutter size}',
  927. borderRadius: '0px',
  928. photoset: '.photo-slideshow',
  929. photoWrap: '.photo-data',
  930. photo: '.pxu-photo'
  931. });
  932. });
  933.  
  934. /// VIDEO RESIZING
  935.  
  936. function flexFrame() {
  937. $(".caption").each(function() {
  938. $(this).find("iframe").wrap("<div class='capframe'></div>");
  939. flexibleFrames($(".capframe"));
  940. });
  941. flexibleFrames($(".video"));
  942. }
  943. $(document).ready(flexFrame);
  944.  
  945. /// TOOLTIPS
  946.  
  947. tippy('a[title]', {
  948. theme:'custom',
  949. arrow:tippy.roundArrow,
  950. zIndex:9999999999,
  951. maxWidth:300,
  952. placement:'bottom-start',
  953.  
  954. content(reference) {
  955. const title = reference.getAttribute('title');
  956. reference.removeAttribute('title');
  957. return title;
  958. },
  959. });
  960.  
  961. /// AUDIO
  962.  
  963. $('iframe.tumblr_audio_player').load( function() {
  964. $('iframe.tumblr_audio_player').contents().find("head").append($("<style type='text/css'> .audio-player{background:{color:links} !important} </style>"));
  965. });
  966.  
  967. // TABS
  968.  
  969. $(document).ready(function(){
  970.  
  971. $('ul.tabs li').click(function(){
  972. var tab_id = $(this).attr('data-tab');
  973.  
  974. $('ul.tabs li').removeClass('current');
  975. $('.tab-content').removeClass('current');
  976.  
  977. $(this).addClass('current');
  978. $("#"+tab_id).addClass('current');
  979. })
  980.  
  981. })
  982. </script>
  983.  
  984. <!---------------------------------------------------------------------------
  985.  
  986. thanks for using! ♡
  987.  
  988. CREDITS:
  989. ₒ base code by egg design and sorrism
  990. ₒ feather icons by cole bemis
  991. ₒ pxu photosets by pixel union, modified version by bychloethemes
  992. ₒ responsive videos by nouvae
  993. ₒ tippy.js tooltips by atomiks
  994. ₒ npf photosets by codematurgy and mobile fix by glenthemes
  995.  
  996. all resources used on this theme can be found at /credits
  997.  
  998. ---------------------------------------------------------------------------->
  999.  
  1000. </body>
  1001. </html>
Advertisement
Add Comment
Please, Sign In to add comment