byananda

talisman

Oct 1st, 2020 (edited)
1,758
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.78 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!---------------------------------------------------------------------------
  6.  
  7. TALISMAN | BY ANANDA
  8. made with ♡ for free
  9.  
  10. release: 10.02.20
  11. last updated: 10.08.20
  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="#0a0a0a" />
  27. <meta name="color:text" content="#cccccc" />
  28. <meta name="color:blockquote border" content="#4e5365"/>
  29. <meta name="color:links" content="#b08096" />
  30. <meta name="color:links hover" content="#656565" />
  31. <meta name="color:posts" content="#0f0f0f" />
  32. <meta name="color:left gradient" content="#b08096" />
  33. <meta name="color:right gradient" content="#4e5365" />
  34.  
  35. <!-- posts options -->
  36. <meta name="select:posts size" content="540px" />
  37. <meta name="select:posts size" content="500px" />
  38. <meta name="select:posts size" content="450px" />
  39. <meta name="select:posts size" content="400px" />
  40.  
  41. <!-- gutter options -->
  42. <meta name="select:gutter size" content="1px" />
  43. <meta name="select:gutter size" content="2px" />
  44. <meta name="select:gutter size" content="3px" />
  45. <meta name="select:gutter size" content="4px" />
  46.  
  47. <!-- text options -->
  48. <meta name="text:google font" content="Lora" />
  49. <meta name="text:font size" content="12px" />
  50.  
  51. <!-- booleans -->
  52. <meta name="if:custom controls" content="1" />
  53.  
  54. <!-- input -->
  55. <meta name="text:sidebar title" content="sidebar title" />
  56.  
  57. <!-- images -->
  58. <meta name="image:sidebar" content="" />
  59.  
  60. <style>
  61.  
  62. body {
  63. margin:0;
  64. background-color:{color:background};
  65. font:{text:font size}/1.8em {text:Google Font}, Arial;
  66. color:{color:text};
  67. word-wrap:break-word;
  68. letter-spacing:.20px;
  69. opacity:1;
  70. transition:1s opacity;
  71. }
  72.  
  73. body.fade-out {
  74. opacity:0;
  75. transition:none;
  76. }
  77.  
  78. .flex {
  79. display:flex;
  80. flex-wrap:wrap;
  81. }
  82.  
  83. .centered {
  84. align-items:center;
  85. justify-content:center;
  86. }
  87.  
  88. .align-center {
  89. align-items:center;
  90. }
  91.  
  92. blockquote {
  93. border-left:1px solid {color:right gradient};
  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 .feather {
  107. color:{color:links hover};
  108. }
  109.  
  110. b {
  111. font-weight:600;
  112. }
  113.  
  114. p {margin:1em 0;}
  115.  
  116. p:first-of-type {margin-top:0;}
  117.  
  118. p:last-of-type {margin-bottom:0;}
  119.  
  120. h1, h2, h3, h4 {
  121. margin:1em 0;
  122. font-size:calc({text:font size} + 4px);
  123. font-weight:600;
  124. padding:0;
  125. color:{color:text};
  126. }
  127.  
  128. .posts h1:first-child, .posts h2:first-child, .posts h3:first-child, .posts h4:first-child {margin-top:0;}
  129.  
  130. .tippy-tooltip.custom-theme {
  131. text-transform:lowercase;
  132. font-weight:600;
  133. letter-spacing:.25px;
  134. font-size:calc({text:font size} - 1px);
  135. margin-top:10px;
  136. background-color:{color:posts};
  137. border:1px solid #202020;
  138. color:{color:text};
  139. text-align:center;
  140. border-radius:0;
  141. padding:3px;
  142. border-radius:0.6rem;
  143. }
  144.  
  145. .tippy-tooltip.custom-theme .tippy-svg-arrow {
  146. display:none;
  147. }
  148.  
  149. /*tumblr controls and lightbox*/
  150. .tmblr-lightbox {background:rgba({RGBcolor:background}, .95)!important;}
  151.  
  152. .tmblr-lightbox img {opacity:0;}
  153.  
  154. .lightbox-caption {
  155. color:{color:title}!important;
  156. font-family:inherit!important;
  157. font-size:1em!important;
  158. font-weight:normal!important;
  159. text-shadow:none!important;
  160. }
  161.  
  162. .lightbox-image {
  163. -moz-box-shadow:none!important;
  164. -webkit-box-shadow:none!important;
  165. box-shadow:none!important;
  166. -moz-border-radius:0px!important;
  167. -webkit-border-radius:0px!important;
  168. border-radius:0px!important;
  169. padding:0px!important;
  170. border:0!important;
  171. opacity:1!important;
  172. }
  173.  
  174. .vignette {opacity:0!Important;}
  175.  
  176. /* scrollbar by shythemes, gradient by by chris coyier */
  177. ::-webkit-scrollbar {
  178. width:17px;
  179. height:17px;
  180. }
  181.  
  182. ::-webkit-scrollbar {
  183. background-color:#202020;
  184. }
  185.  
  186. ::-webkit-scrollbar-track {
  187. border:8px solid {color:background};
  188. background-color:{color:posts};
  189. }
  190.  
  191. ::-webkit-scrollbar-thumb {
  192. border:8px solid {color:background};
  193. background: -webkit-gradient(linear,left top,left bottom,from({color:left gradient}),to({color:right gradient}));
  194. background: linear-gradient(180deg,{color:left gradient},{color:right gradient});
  195. min-height:24px;
  196. min-width:24px;
  197. }
  198.  
  199. /* tumblr controls by cyantists */
  200. {block:ifcustomcontrols}
  201. iframe.tmblr-iframe {
  202. opacity:0;
  203. display:none!important;
  204. }
  205.  
  206. .ccontrols {
  207. position:fixed;
  208. top:15px!important;
  209. right:20px!important;
  210. margin:5px;
  211. }
  212.  
  213. .ccontrols a {
  214. display:block;
  215. float:left;
  216. opacity:0.7;
  217. margin:5px;
  218. }
  219.  
  220. .ccontrols .feather {
  221. color:{color:text};
  222. }
  223.  
  224. {block:PermalinkPage}
  225. .ccontrols .like .liked + svg {
  226. opacity:.8;
  227. }
  228.  
  229. .ccontrols .like .liked + svg path {
  230. fill:red;
  231. }
  232.  
  233. .ccontrols .like .like_button {
  234. position:relative;
  235. }
  236.  
  237. .ccontrols .like .like_button iframe {
  238. position:absolute;
  239. top:0;
  240. left:0;
  241. bottom:0;
  242. right:0;
  243. z-index:2;
  244. opacity:0;
  245. }
  246. {/block:PermalinkPage}
  247. {/block:ifcustomcontrols}
  248.  
  249. {block:ifnotcustomcontrols}
  250. iframe.tmblr-iframe {
  251. z-index:1;
  252. }
  253. {/block:ifnotcustomcontrols}
  254.  
  255. main {
  256. width:100%;
  257.  
  258. justify-content:space-around;
  259. align-items:flex-start;
  260. }
  261.  
  262. #container {
  263. width:calc({select:posts size} + 250px + 100px);
  264. margin:100px auto;
  265. }
  266.  
  267. section {
  268. width:{select:posts size};
  269. }
  270.  
  271. article {
  272. background:{color:posts};
  273. width:{select:posts size};
  274. margin:0 250px 150px auto;
  275. border:1px solid #202020;
  276. padding:30px;
  277. box-shadow:0px 1px 4px -1px rgb(0, 0, 0);
  278. -webkit-box-shadow:0px 1px 4px -1px rgb(0, 0, 0);
  279. border-radius:0.6rem;
  280. }
  281.  
  282. article:last-child {
  283. margin-bottom:0;
  284. }
  285.  
  286. article img {
  287. max-width:100%;
  288. display:block;
  289. margin:auto;
  290. }
  291.  
  292. /*------- npf photoset image spacing-------*/
  293. :root {
  294. --NPF-Image-Spacing:{select:gutter size};
  295. }
  296.  
  297. .npf_row {
  298. display:flex!important;
  299. margin:calc(var(--NPF-Image-Spacing) / -2)!important;
  300. margin-bottom:calc(var(--NPF-Image-Spacing) / 2)!important;
  301. }
  302.  
  303. .npf_row:last-of-type {
  304. margin-bottom:calc(var(--NPF-Image-Spacing) / -2)!important;
  305. }
  306.  
  307. .tmblr-full {
  308. flex:1;
  309. margin:0!important;
  310. padding:calc(var(--NPF-Image-Spacing) / 2)!important;
  311. width:auto!important;
  312. height:auto!important;
  313. cursor:pointer;
  314. outline:none;
  315. }
  316.  
  317. .tmblr-full img {visibility:hidden;}
  318.  
  319. .notes {
  320. margin-top:2em;
  321. border-radius:0.6rem;
  322. background-color:{color:background};
  323. border:1px solid #202020;
  324. padding:10px 20px;
  325. list-style:none;
  326. }
  327.  
  328. ol.notes li {
  329. padding:5px 0;
  330. }
  331.  
  332. ol.notes img {
  333. display:none;
  334. }
  335.  
  336. /* sidebar */
  337. aside {
  338. display:block;
  339. width:250px;
  340. position:fixed;
  341. left:calc(50% + {select:posts size} / 2);
  342. background:{color:posts};
  343. border:1px solid #202020;
  344. padding:30px;
  345. box-shadow:0px 1px 4px -1px rgb(0, 0, 0);
  346. -webkit-box-shadow:0px 1px 4px -1px rgb(0, 0, 0);
  347. border-radius:0.6rem;
  348. }
  349.  
  350. .sideimage img {
  351. width:250px;
  352. }
  353.  
  354. .sideimage {
  355. display:block;
  356. margin-bottom:10px;
  357. }
  358.  
  359. .sidetitle {
  360. display:block;
  361. text-align:left;
  362. }
  363.  
  364. .sidetitle a {
  365. font-size:calc({text:font size} + 4px);
  366. text-transform:lowercase;
  367. font-weight:600;
  368. color:{color:right gradient};
  369. }
  370.  
  371. .description {
  372. margin:10px 0 10px 0;
  373. text-align:justify;
  374. }
  375.  
  376. .links {
  377. text-align:center;
  378. }
  379.  
  380. .links a {
  381. text-align:center;
  382. display:inline-block;
  383. margin:10px 8px;
  384. vertical-align:middle;
  385. text-transform:lowercase;
  386. }
  387.  
  388. .links .feather {
  389. padding:0 2px 3px 2px;
  390. }
  391.  
  392. .feather {
  393. stroke-width:2.3;
  394. display:inline-block;
  395. vertical-align:middle;
  396. width:calc({text:font size} + 4px);
  397. height:calc({text:font size} + 4px);
  398. color:{color:right gradient};
  399. }
  400.  
  401. .border-gradient {
  402. border-radius:0.6rem;
  403. padding:5px 10px;
  404. color:{color:links};
  405. box-shadow:0 0 6px 0 rgba(157, 96, 212, 0.5);
  406. border:solid 1px transparent;
  407. background-image:linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, {color:left gradient}, {color:right gradient});
  408. background-origin:border-box;
  409. background-clip:content-box, border-box;
  410. box-shadow:2px 1000px 1px {color:posts} inset;
  411. transition:all .2s linear;
  412. -webkit-transition:all .2s linear;
  413. -o-transition:all .2s linear;
  414. -moz-transition:all .2s linear;
  415. }
  416.  
  417. .border-gradient:hover, .border-gradient:hover .feather {
  418. box-shadow:none;
  419. color:{color:posts};
  420. }
  421.  
  422. .line-gradient {
  423. padding-bottom:2px;
  424. border-bottom:10px solid;
  425. border-image-slice:1;
  426. border-width:1.5px;
  427. border-image-source:linear-gradient(to left, {color:right gradient}, {color:left gradient});
  428. }
  429.  
  430. /* photo post */
  431. .photopost img {
  432. width:100%;
  433. }
  434.  
  435. /* link post */
  436. .link {
  437. padding:10px;
  438. }
  439.  
  440. /* quote post */
  441. .source h3 {
  442. display:inline-block;
  443. margin:0;
  444. }
  445.  
  446. .source h3:after {
  447. display:inline-block;
  448. content:'';
  449. border-top:1px solid #202020;
  450. width:2rem;
  451. margin:0 1rem;
  452. vertical-align:middle;
  453. }
  454.  
  455. /* chat post */
  456. .chat {
  457. margin:0;
  458. padding:0;
  459. }
  460.  
  461. .chat li {
  462. list-style:none;
  463. padding:10px;
  464. }
  465.  
  466. .chat li:nth-of-type(odd) {
  467. background:{color:background};
  468. color:{color:text};
  469. }
  470.  
  471. /* asks */
  472. .message {
  473. color:{color:posts};
  474. padding:20px;
  475. display:block;
  476. position:relative;
  477. border-radius:0 0 0.6rem 0.6rem;
  478. text-align:justify;
  479. margin-bottom:1.5em;
  480. background-image:linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, {color:left gradient}, {color:right gradient});
  481. background-origin:border-box;
  482. background-clip:content-box, border-box;
  483. }
  484.  
  485. .message-name {
  486. border-radius:0.6rem 0.6rem 0 0;
  487. background-color:{color:background};
  488. border:1px solid #202020;
  489. padding:10px;
  490. line-height:30px;
  491. vertical-align:middle;
  492. display:block;
  493. text-transform:lowercase;
  494. }
  495.  
  496. .message-name img {
  497. vertical-align:middle;
  498. width:30px;
  499. border-radius:50px;
  500. margin-right:10px;
  501. float:left;
  502. }
  503.  
  504. /* audio post */
  505. iframe.tumblr_audio_player {
  506. width:100%;
  507. }
  508.  
  509. /* captions */
  510. .comment {
  511. padding:0 0 1.5em 0;
  512. list-style:none;
  513. }
  514.  
  515. .comment:last-of-type {padding-bottom:0!important;}
  516.  
  517. .user {
  518. color:{color:text};
  519. display:inline-block;
  520. line-height:1em;
  521. font-weight:bold;
  522. margin-bottom:.75em;
  523. }
  524.  
  525. .captioned .comment:first-of-type {margin-top:1.5em;}
  526.  
  527. .tex li, .tex blockquote {text-align:left;}
  528.  
  529. /* post info */
  530. .info {
  531. text-transform:lowercase;
  532. font-weight:600;
  533. margin-top:30px;
  534. {block:indexpage}
  535. padding-bottom:20px;
  536. {/block:indexpage}
  537. }
  538.  
  539. .controls {
  540. display:inline-block;
  541. float:right;
  542. }
  543.  
  544. .controls a {
  545. vertical-align:middle;
  546. position:relative;
  547. display:inline-block;
  548. overflow:hidden;
  549. margin-left:5px;
  550. }
  551.  
  552. .controls .like .liked + svg path {
  553. stroke-width:2;
  554. stroke:red;
  555. fill:red;
  556. }
  557.  
  558. .controls .like .like_button {
  559. position:relative;
  560. }
  561.  
  562. .controls .like .like_button iframe {
  563. position:absolute;
  564. top:-3px;
  565. left:-3px;
  566. bottom:0;
  567. right:0;
  568. z-index:2;
  569. opacity:0;
  570. }
  571.  
  572. pre {
  573. word-wrap:break-word!Important;
  574. white-space:pre-wrap;
  575. }
  576.  
  577. /* tags */
  578. .tags {
  579. margin-top:20px;
  580. }
  581.  
  582. .tags a {
  583. font-weight:600;
  584. }
  585.  
  586. .tags a:after {
  587. content:',';
  588. }
  589.  
  590. .tags a:last-child:after {
  591. content:'.';
  592. }
  593.  
  594. .inactive:hover:after {
  595. content:'deactivated';
  596. }
  597.  
  598. /* pagination */
  599. .pagination {
  600. width:90%;
  601. text-align:center;
  602. margin:40px auto;
  603. }
  604.  
  605. .pagination a {
  606. margin:0 5px;
  607. }
  608.  
  609. /* credit */
  610.  
  611. .cr {
  612. position:fixed;
  613. color:{color:text};
  614. display:block;
  615. z-index:1;
  616. position:fixed;
  617. right:20px;
  618. bottom:20px;
  619. }
  620.  
  621. /* overlay */
  622. .overlay {
  623. height:0%;
  624. width:100%;
  625. position:fixed;
  626. z-index:2;
  627. top:0;
  628. left:0;
  629. background:{color:background};
  630. overflow-y:hidden;
  631. transition:0.7s;
  632. }
  633.  
  634. .overlay .closebtn {
  635. top:15px;
  636. right:20px;
  637. margin:10px;
  638. position:absolute;
  639. color:{color:right gradient};
  640. }
  641.  
  642. .overlay-content {
  643. width:calc({select:posts size} + 25px);
  644. background:{color:posts};
  645. border:1px solid #202020;
  646. position:relative;
  647. padding:30px 20px 30px 35px;
  648. top:20%;
  649. margin:0 auto;
  650. text-align:left;
  651. box-shadow:0px 1px 4px -1px rgb(0, 0, 0);
  652. -webkit-box-shadow:0px 1px 4px -1px rgb(0, 0, 0);
  653. border-radius:0.6rem;
  654. }
  655.  
  656. .overlay-content-scroll::-webkit-scrollbar {
  657. width:17px;
  658. height:17px;
  659. }
  660.  
  661. .overlay-content-scroll::-webkit-scrollbar {
  662. background-color:#202020; /* background color */
  663. }
  664.  
  665. .overlay-content-scroll::-webkit-scrollbar-track {
  666. border:8px solid {color:posts}; /* background color */
  667. background-color:#202020; /* light border color */
  668. }
  669.  
  670. .overlay-content-scroll::-webkit-scrollbar-thumb {
  671. border:8px solid {color:posts}; /* background color */
  672. background: -webkit-gradient(linear,left top,left bottom,from({color:left gradient}),to({color:right gradient}));
  673. background: linear-gradient(180deg,{color:left gradient},{color:right gradient});
  674. min-height:24px;
  675. min-width:24px;
  676. }
  677.  
  678. .overlay-content-scroll {
  679. width:{select:posts size};
  680. padding-right:20px;
  681. max-height:400px;
  682. overflow:auto;
  683. }
  684.  
  685. .overlay-content a {
  686. text-decoration:none;
  687. color:{color:text};
  688. }
  689.  
  690. .overlay-content h1 {
  691. font-size:calc({text:font size} + 3px);
  692. text-transform:lowercase;
  693. font-weight:600;
  694. margin-top:0;
  695. display:inline-block;
  696. }
  697.  
  698. .overlay-content h2 {
  699. display:inline-block;
  700. font-size:calc({text:font size} + 1px);
  701. text-transform:lowercase;
  702. font-weight:600;
  703. margin-bottom:0;
  704. }
  705.  
  706. .overlay-content h2:after {
  707. display:inline-block;
  708. content:'';
  709. border-top:1px solid #202020;
  710. width:2rem;
  711. margin:0 1rem;
  712. vertical-align:middle;
  713. }
  714.  
  715. .overlay .feather {
  716. margin-right:5px;
  717. }
  718.  
  719. .overlay-links {
  720. display:block;
  721. }
  722.  
  723. .overlay-links a {
  724. display:inline-block;
  725. margin:0.30em 2em 0 0;
  726. }
  727.  
  728. .currently {
  729. margin-top:1em;
  730. }
  731.  
  732. .currently span {
  733. display:block;
  734. margin:0.50em 0;
  735. }
  736.  
  737. .currently .feather {
  738. color:{color:left gradient};
  739. padding-bottom:5px;
  740. }
  741.  
  742. .elsewhere .feather {
  743. padding-bottom:5px;
  744. }
  745.  
  746. .elsewhere {
  747. margin:0.50em 0;
  748. display:block;
  749. }
  750.  
  751. .elsewhere span {
  752. display:inline-block;
  753. margin:1em 2em 0 0;
  754. }
  755.  
  756. .faq {
  757. margin-top:1em;
  758. display:block;
  759. }
  760.  
  761. .faq-q {
  762. font-weight:bold;
  763. display:block;
  764. }
  765.  
  766. .faq-a {
  767. display:inline-block;
  768. padding:8px;
  769. margin:0.50em 3em;
  770. }
  771.  
  772. .overlay-content hr {
  773. margin:20px 0;
  774. height:1px;
  775. border-width:0;
  776. color:#202020;
  777. background-color:#202020;
  778. }
  779.  
  780. /* mobile friendly sidebar */
  781. @media only screen and (max-width:1100px) {
  782. aside {
  783. position:relative;
  784. left:0;
  785. width:100%;
  786. right:auto;
  787. max-width:250px;
  788. margin:50px auto;
  789. }
  790.  
  791. section {
  792. width:100%;
  793. }
  794.  
  795. article {
  796. margin:100px auto;
  797. }
  798.  
  799. }
  800.  
  801. {CustomCSS}
  802.  
  803. </style>
  804. </head>
  805. <body>
  806. <script>document.body.className += ' fade-out';</script>
  807.  
  808. <!-- beginning of f.a.q./contact overlay -->
  809. <div id="contact" class="overlay">
  810. <a href="javascript:void(0)" class="closebtn" onclick="closeContact()" title="close"><i data-feather="x-square"></i></a>
  811. <div class="overlay-content">
  812. <div class="overlay-content-scroll">
  813.  
  814. <!-- f.a.q. item -->
  815. <h1 class="line-gradient">F.A.Q.</h1>
  816. <div class="faq"><!-- beggining of f.a.q. -->
  817. <span class="faq-q">question</span>
  818. <span class="faq-a border-gradient">answer</span>
  819.  
  820. <hr><!-- this line separates each f.a.q. item -->
  821.  
  822. <!-- f.a.q. item -->
  823. <span class="faq-q">question</span>
  824. <span class="faq-a border-gradient">answer</span>
  825. </div><!-- end of faq -->
  826.  
  827. <hr><!-- this line separates the f.a.q from the askbox -->
  828. <br><!-- this gives us an extra space between the line and the askbox -->
  829.  
  830. <!-- askbox -->
  831. <h1>{AskLabel}</h1>
  832. <iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/{name}.tumblr.com" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  833.  
  834. </div>
  835. </div>
  836. <!-- end of overlay content -->
  837. </div>
  838. <!-- end of f.a.q./contact overlay -->
  839.  
  840. <!-------------------------------------------------------------------------->
  841.  
  842. <!-- beginning of explore overlay -->
  843. <div id="explore" class="overlay">
  844. <a href="javascript:void(0)" class="closebtn" onclick="closeNav()" title="close"><i data-feather="x-square"></i></a>
  845. <!-- beginning of overlay content -->
  846. <div class="overlay-content">
  847.  
  848. <div class="overlay-content-scroll">
  849.  
  850. <!-- beginning of about -->
  851. <h1 class="line-gradient">about</h1>
  852. <p>write about yourself here</p>
  853. <!-- end of about -->
  854.  
  855. <hr><!-- this line separates each explore section -->
  856.  
  857. <!-- beginning of navigation -->
  858. <h1 class="line-gradient">navigation</h1>
  859. <nav class="overlay-links">
  860. <h2>HEADING</h2>
  861. <a href="https://YOURLINK">link</a>
  862. <a href="https://YOURLINK">link</a>
  863. <a href="https://YOURLINK">link</a>
  864. <a href="https://YOURLINK">link</a>
  865. <a href="https://YOURLINK">link</a>
  866. <a href="https://YOURLINK">link</a>
  867. <a href="https://YOURLINK">link</a>
  868. <a href="https://YOURLINK">link</a>
  869. </nav>
  870.  
  871. <nav class="overlay-links">
  872. <h2>HEADING</h2>
  873. <a href="https://YOURLINK">link</a>
  874. <a href="https://YOURLINK">link</a>
  875. <a href="https://YOURLINK">link</a>
  876. <a href="https://YOURLINK">link</a>
  877. <a href="https://YOURLINK">link</a>
  878. <a href="https://YOURLINK">link</a>
  879. <a href="https://YOURLINK">link</a>
  880. <a href="https://YOURLINK">link</a>
  881. </nav>
  882. <!-- end of navigation -->
  883.  
  884.  
  885. <hr><!-- this line separates each explore section -->
  886.  
  887. <!-- beginning of currently -->
  888. <h1 class="line-gradient">currently</h1>
  889. <div class="currently">
  890. <span><i data-feather="heart"></i> lorem ipsum</span>
  891. <span><i data-feather="paperclip"></i> lorem ipsum</span>
  892. <span><i data-feather="book"></i> lorem ipsum</span>
  893. <span><i data-feather="tv"></i> lorem ipsum</span>
  894. </div>
  895. <!-- end of currently -->
  896.  
  897. <hr><!-- this line separates each explore section -->
  898.  
  899. <!-- beginning of elsewhere -->
  900. <h1 class="line-gradient">elsewhere</h1>
  901. <div class="elsewhere">
  902.  
  903. <span><i data-feather="twitter"></i>
  904. <a href="https://YOURLINK">@username</a></span>
  905.  
  906. <span><i data-feather="instagram"></i>
  907. <a href="https://YOURLINK">@username</a></span>
  908.  
  909. <span><i data-feather="film"></i>
  910. <a href="https://YOURLINK">@username</a></span>
  911.  
  912. <span><i data-feather="user-plus"></i>
  913. <a href="https://YOURLINK">@username</a></span>
  914. </div>
  915. <!-- end of elsewhere -->
  916.  
  917. </div>
  918.  
  919. </div>
  920. <!-- end of overlay content -->
  921. </div>
  922. <!-- end of explore overlay -->
  923.  
  924. <!-------------------------------------------------------------------------->
  925.  
  926. <!-- main container -->
  927. <main class="flex">
  928.  
  929. <div id="container">
  930.  
  931. <!-- sidebar -->
  932. <aside>
  933.  
  934. <div class="side">
  935. {block:ifsidebarimage}<div class="sideimage"><img src="{image:sidebar}"></div>{/block:ifsidebarimage}
  936. {block:ifsidebartitle}<div class="sidetitle"><a href="/">{text:sidebar title}</a></div>
  937. </div>{/block:ifsidebartitle}
  938.  
  939. <div class="description">{Description}</div>
  940.  
  941. <div class="links">
  942.  
  943. <a href="/archive" class="border-gradient">archive</a>
  944.  
  945. {block:AskEnabled}
  946. {block:ifcontactoverlay}
  947. <span onclick="openContact()"><a class="border-gradient" style="cursor:pointer">contact</a></span>
  948. {/block:ifcontactoverlay}
  949.  
  950. <!-- this link appears if you disabled the contact overlay -->
  951. {block:ifnotcontactoverlay}
  952. <a class="border-gradient" href="/ask">contact</a>
  953. {/block:ifnotcontactoverlay}
  954. {/block:AskEnabled}
  955.  
  956. <span onclick="openNav()"><a class="border-gradient" style="cursor:pointer">explore</a></span>
  957.  
  958. </div>
  959.  
  960. </aside>
  961. <!-- end of sidebar -->
  962.  
  963. <!-- posts -->
  964. <section>
  965.  
  966. {block:Posts}
  967. <!-- {block:NoRebloggedFrom}
  968. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  969. {/block:NoRebloggedFrom} -->
  970. {block:ContentSource}<!-- {SourceURL}
  971. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  972. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  973. {/block:ContentSource}
  974.  
  975. <article class="posts {block:caption}captioned{/block:caption}">
  976.  
  977. {block:Text}
  978. <div class="text-post">
  979. {block:Title}<h1>{title}</h1>{/block:Title}
  980. {block:RebloggedFrom}
  981. {block:Reblogs}
  982. <li class="comment {block:Title}ted{/block:Title}">
  983. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user line-gradient" target="_blank">{username}</a>
  984. <div class="tex">{body}</div>
  985. </li>
  986. {/block:Reblogs}
  987. {/block:RebloggedFrom}
  988. {block:NotReblog}
  989. <li class="comment {block:Title}ted{/block:Title}">
  990. <div class="tex">{body}</div>
  991. </li>
  992. {/block:NotReblog}
  993. </div>
  994. {/block:Text}
  995.  
  996. {block:Photo}
  997. <img src="{PhotoURL-highres}" al="{photoalt}" class="photopost">
  998. {/block:Photo}
  999.  
  1000. {block:Photoset}
  1001. <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>
  1002. {/block:Photoset}
  1003.  
  1004. {block:Panorama}
  1005. <img src="{photourl-panorama}" alt="{photoalt}">
  1006. {/block:Panorama}
  1007.  
  1008. {block:Quote}
  1009. <h1>"{Quote}"</h1>
  1010. <div class="source">
  1011. <h3><i data-feather="feather"></i></h3>{Source}
  1012. </div>
  1013. {/block:Quote}
  1014.  
  1015. {block:Chat}
  1016. <ul class="chat">
  1017. {block:Lines}
  1018. <li>{block:Label}{Label}{/block:Label} {Line}</li>
  1019. {/block:Lines}
  1020. </ul>
  1021. {/block:Chat}
  1022.  
  1023. {block:Link}<div class="title"><a href="{URL}">{name}</a></div>
  1024. {block:Description}
  1025. {block:NotReblog}
  1026. <li class="comment ted">
  1027. <div class="tex">{description}</div>
  1028. </li>
  1029. {/block:NotReblog}
  1030. {/block:Description}
  1031. {block:RebloggedFrom}
  1032. {block:Reblogs}
  1033. <li class="comment">
  1034. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user line-gradient" target="_blank">{username}</a>
  1035. <div class="tex">{body}</div>
  1036. </li>
  1037. {/block:Reblogs}
  1038. {/block:RebloggedFrom}
  1039. {/block:Link}
  1040.  
  1041. {block:Video}
  1042. <div class="video">{Video-500}</div>
  1043. {/block:Video}
  1044.  
  1045. {block:Audio}
  1046. <div class="audio">
  1047. {block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
  1048. </div>
  1049. {/block:Audio}
  1050.  
  1051. {block:Answer}
  1052. <span class="message-name"><img src="{AskerPortraitURL-30}"/> <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user line-gradient" target="_blank">{asker}</a> sent a message</span>
  1053. <div class="message">{question}</div>
  1054. {block:Answerer}
  1055. <li class="comment">
  1056. <div class="user line-gradient">{answerer} replied</div>
  1057. <div class="tex">{answer}</div>
  1058. </li>
  1059. {/block:Answerer}
  1060. {block:NotReblog}
  1061. <li class="comment">
  1062. <div class="tex">{replies}</div>
  1063. </li>
  1064. {/block:NotReblog}
  1065. {block:RebloggedFrom}
  1066. {block:Reblogs}
  1067. <li class="comment">
  1068. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user line-gradient" target="_blank">{username}</a>
  1069. <div class="tex">{body}</div>
  1070. </li>
  1071. {/block:Reblogs}
  1072. {/block:RebloggedFrom}
  1073. {/block:Answer}
  1074.  
  1075. {block:Caption}
  1076. {block:Reblogs}
  1077. <li class="comment">
  1078. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user line-gradient" target="_blank">{username}</a>
  1079. <div class="tex">{body}</div>
  1080. </li>
  1081. {/block:Reblogs}
  1082. {block:NotReblog}
  1083. <li class="comment"><div class="tex">{caption}</div></li>
  1084. {/block:NotReblog}
  1085. {/block:Caption}
  1086.  
  1087. {block:Date}
  1088. <div class="info">
  1089. {block:IndexPage}
  1090. <a href="{permalink}" class="border-gradient hvr-sweep-to-right" style="padding:8px" title="{TimeAgo}">{ShortMonth} {DayofMonth}, {Year}</a>
  1091.  
  1092. <div class="controls">
  1093. <span><a href="{ReblogURL}" target="_blank" class="reblog" title="reblog"><i data-feather="repeat"></i></a></span>
  1094.  
  1095. <span><a href="#" class="like" title="like">{LikeButton}<i data-feather="heart"></i></a></span>
  1096. </div>
  1097. {/block:IndexPage}
  1098.  
  1099. {block:PermalinkPage}
  1100. <a href="{permalink}" class="border-gradient hvr-sweep-to-right" style="padding:8px">{NoteCountWithLabel}</a>
  1101.  
  1102. {block:Rebloggedfrom}
  1103. <div style="float:right;vertical-align:top">via: <a href="{reblogparenturl}"><b>{reblogparentname}</b></a>
  1104. </div>{/block:Rebloggedfrom}
  1105.  
  1106. <!-- tags -->
  1107. {block:Hastags}
  1108. <div class="tags">
  1109. Tagged as:</b>
  1110. {block:Tags}
  1111. <a href="{TagURL}">#{Tag}</a>
  1112. {/block:Tags}
  1113. </div>
  1114. {/block:Hastags}
  1115. {/block:PermalinkPage}
  1116. </div>
  1117. {/block:Date}
  1118.  
  1119. {PostNotes}
  1120. </article>
  1121. <!-- end of posts -->
  1122. {/block:Posts}
  1123.  
  1124. <!-- pagination -->
  1125. {block:Pagination}
  1126. <div class="pagination">
  1127. {block:previouspage}
  1128. <a href="{previouspage}">forward</a>
  1129. {/block:previouspage}
  1130. {block:JumpPagination length="5"}
  1131. {block:CurrentPage}<a class="current_page"><b>{PageNumber}</b></a>{/block:CurrentPage}
  1132. {block:JumpPage}<a class="jump_page" href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1133. {/block:JumpPagination}
  1134. {block:nextpage}
  1135. <a href="{nextpage}">onward</a>
  1136. {/block:nextpage}
  1137. </div>
  1138. {/block:Pagination}
  1139. </section>
  1140. <!-- end of section -->
  1141. </div>
  1142.  
  1143. </main>
  1144. <!-- end of container -->
  1145.  
  1146. <!-------------------------------------------------------------------------->
  1147.  
  1148. {block:ifcustomcontrols}
  1149. <div class="ccontrols">
  1150. <a href="https://tumblr.com/dashboard" target="_blank" title="dashboard"><i data-feather="layout"></i></a>
  1151.  
  1152. {block:IndexPage}
  1153. <a href="https://tumblr.com/follow/{Name}" title="follow"><i data-feather="plus-square"></i></a>
  1154. <a href="https://www.tumblr.com/message/{Name}" target="_blank" title="chat"><i data-feather="message-square"></i></a>
  1155. {/block:IndexPage}
  1156.  
  1157. {block:PermalinkPage}{block:Posts}{block:Date}
  1158. <a href="{EmbedUrl}" target="_blank" title="embed"><i data-feather="code"></i></a>
  1159. <a href="{ReblogURL}" title="reblog"><i data-feather="repeat"></i></a>
  1160. <a href="#" class="like" title="like">{LikeButton}<i data-feather="heart"></i></a>
  1161. {/block:Date}{/block:Posts}{/block:PermalinkPage}
  1162. </div>
  1163. {/block:ifcustomcontrols}
  1164.  
  1165. <!-------------------------------------------------------------------------->
  1166.  
  1167. <a href="https://byananda.tumblr.com" class="cr" title="by ananda">by a.</a>
  1168.  
  1169. <!-------------------------------------------------------------------------->
  1170.  
  1171. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1172. <!-- fonts & icons -->
  1173. <link href="https://fonts.googleapis.com/css?family={text:google font}:700,600,500,400" rel="stylesheet">
  1174. <script src="https://unpkg.com/feather-icons"></script>
  1175. <!-- pxu photosets -->
  1176. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  1177. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1178. <!-- video resizing -->
  1179. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  1180. <!-- tooltips -->
  1181. <script src="https://unpkg.com/popper.js@1"></script>
  1182. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1183. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1184. <!--npf fix by glenthemes -->
  1185. <script src="//dl.dropbox.com/s/m8mtje1avef2a2y/npf-styling.js"></script>
  1186. <script src="//cdn.jsdelivr.net/gh/boscoxvi/npfphotosets/npfphotosets.js"></script>
  1187. <script>
  1188. npfPhotosets(".posts", npfOptions);
  1189. </script>
  1190. <!-- npf photosets by codematurgy -->
  1191. <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">
  1192. <script>
  1193. npfPhotosets("postSelector", {
  1194. rowClass:"npf_row",
  1195. imageContainerClass:"tmblr-full",
  1196. generatedPhotosetContainerClass:"npf_photoset",
  1197. imageClass:"npf_image",
  1198. includeCommonPhotosets: true,
  1199. useTumblrLightbox: true,
  1200. insertGalleryIndicator: false,
  1201. galleryIndicatorClass: "npf_gallery_indicator",
  1202. galleryIndicatorContent: "<img src='image_url'>",
  1203. photosetMargins:""
  1204. });
  1205. </script>
  1206.  
  1207. <script>
  1208. /// FEATHER ICONS
  1209.  
  1210. feather.replace()
  1211.  
  1212. /// FADE
  1213.  
  1214. $(function() {
  1215. $('body').removeClass('fade-out');
  1216. });
  1217.  
  1218. /// PHOTOSETS
  1219.  
  1220. $(document).ready(function(){
  1221. $('.photo-slideshow').pxuPhotoset({
  1222. lightbox: true,
  1223. rounded: false,
  1224. gutter: '{select:gutter size}',
  1225. borderRadius: '0px',
  1226. photoset: '.photo-slideshow',
  1227. photoWrap: '.photo-data',
  1228. photo: '.pxu-photo'
  1229. });
  1230. });
  1231.  
  1232. /// VIDEO RESIZING
  1233.  
  1234. function flexFrame() {
  1235. $(".caption").each(function() {
  1236. $(this).find("iframe").wrap("<div class='capframe'></div>");
  1237. flexibleFrames($(".capframe"));
  1238. });
  1239. flexibleFrames($(".video"));
  1240. }
  1241. $(document).ready(flexFrame);
  1242.  
  1243. /// TOOLTIPS
  1244.  
  1245. tippy('a[title]', {
  1246. theme:'custom',
  1247. arrow:tippy.roundArrow,
  1248. zIndex:9999999999,
  1249. maxWidth:300,
  1250. placement:'bottom-start',
  1251.  
  1252. content(reference) {
  1253. const title = reference.getAttribute('title');
  1254. reference.removeAttribute('title');
  1255. return title;
  1256. },
  1257. });
  1258.  
  1259. /// OVERLAY
  1260.  
  1261. function openNav() {
  1262. document.getElementById("explore").style.height = "100%";
  1263. }
  1264.  
  1265. function closeNav() {
  1266. document.getElementById("explore").style.height = "0%";
  1267. }
  1268.  
  1269. function openContact() {
  1270. document.getElementById("contact").style.height = "100%";
  1271. }
  1272.  
  1273. function closeContact() {
  1274. document.getElementById("contact").style.height = "0%";
  1275. }
  1276.  
  1277. /// AUDIO
  1278.  
  1279. $('iframe.tumblr_audio_player').load( function() {
  1280. $('iframe.tumblr_audio_player').contents().find("head").append($("<style type='text/css'> .audio-player{background:{color:text} !important} </style>"));
  1281. });
  1282. </script>
  1283.  
  1284. <!---------------------------------------------------------------------------
  1285.  
  1286. thanks for using! ♡
  1287.  
  1288. CREDITS:
  1289. ₒ base code by egg design and sorrism
  1290. ₒ feather icons by cole bemis
  1291. ₒ pxu photosets by pixel union, modified version by bychloethemes
  1292. ₒ responsive videos by nouvae
  1293. ₒ tippy.js tooltips by atomiks
  1294. ₒ npf photosets by codematurgy and mobile fix by glenthemes
  1295.  
  1296. all resources used on this theme can be found at /credits
  1297.  
  1298. ---------------------------------------------------------------------------->
  1299.  
  1300. </body>
  1301. </html>
Add Comment
Please, Sign In to add comment