byananda

amulet

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