API tools faq
paste
Advertisement
mercurythms

dark nights (theme)

mercurythms
Oct 8th, 2020 (edited)
1,564
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.11 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.  
  4. dark nights :: @mercurythms :: @freddie-mercurys
  5.  
  6. please don't remove credit or take parts of this code :)
  7.  
  8.  
  9. -->
  10.  
  11. <!DOCTYPE html>
  12. <head>
  13.  
  14. <title>{block:PostSummary}{PostSummary} : {/block:PostSummary}{Title}</title>
  15.  
  16. <link rel="shortcut icon" href="{favicon}">
  17.  
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  19. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  20.  
  21. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  22.  
  23. <!--variables-->
  24.  
  25. <meta name="image:icon" content=""/>
  26.  
  27. <meta name="color:background" content="#ffffff"/>
  28. <meta name="color:navigation background" content="#fad19f"/>
  29. <meta name="color:sidebar background" content="#fbfbfb"/>
  30. <meta name="color:tooltip background" content="#f5ad58"/>
  31. <meta name="color:text" content="#777777"/>
  32. <meta name="color:link" content="#bbbbbb"/>
  33. <meta name="color:link hover" content="#cccccc"/>
  34. <meta name="color:navigation link" content="#fbfbfb"/>
  35. <meta name="color:accent"content="#f5ad58"/>
  36. <meta name="color:borders" content="#eeeeee"/>
  37.  
  38. <meta name="text:home title" content="index"/>
  39. <meta name="text:home icon" content="home"/>
  40. <meta name="text:ask title" content="message"/>
  41. <meta name="text:ask icon" content="mail"/>
  42. <meta name="text:archive title" content="history"/>
  43. <meta name="text:archive icon" content="archive"/>
  44. <meta name="text:link 1 url" content="" />
  45. <meta name="text:link 1" content="" />
  46. <meta name="text:link 1 icon" content="" />
  47. <meta name="text:link 2 url" content="" />
  48. <meta name="text:link 2" content="" />
  49. <meta name="text:link 2 icon" content="" />
  50. <meta name="text:link 3 url" content="" />
  51. <meta name="text:link 3" content="" />
  52. <meta name="text:link 3 icon" content="" />
  53. <meta name="text:audio url" content="https://dl.dropbox.com/s/ia2f7je9qsy0rw9/The%20Nightmare%20Before%20Christmas%20-%20This%20is%20halloween.m4a" />
  54. <meta name="text:song title" content="this is halloween" />
  55.  
  56. <meta name="select:font" content="Karla" title="Karla">
  57. <meta name="select:font" content="Open Sans" title="Open Sans">
  58. <meta name="select:font" content="Nunito Sans" title="Nunito Sans">
  59. <meta name="select:font" content="Overpass" title="Overpass">
  60. <meta name="select:font" content="Roboto" title="Roboto">
  61. <meta name="select:font" content="Rubik" title="Rubik">
  62.  
  63. <meta name="select:font size" content="13px" title="13px"/>
  64. <meta name="select:font size" content="15px" title="15px"/>
  65. <meta name="select:font size" content="14px" title="14px"/>
  66. <meta name="select:font size" content="12px" title="12px"/>
  67.  
  68. <meta name="select:post width" content="540px" title="540px"/>
  69. <meta name="select:post width" content="400px" title="400px"/>
  70. <meta name="select:post width" content="450px" title="450px"/>
  71. <meta name="select:post width" content="500px" title="500px"/>
  72.  
  73. <meta name="if:icon music player" content="1"/>
  74. <meta name="if:spooky font" content="1"/>
  75.  
  76. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  77. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  78.  
  79. <!--google fonts-->
  80. <link href="https://fonts.googleapis.com/css?family={select:font}:400,400i,700,700i&display=swap" rel="stylesheet">
  81. <link href="https://fonts.googleapis.com/css2?family=Creepster&display=swap" rel="stylesheet">
  82.  
  83. <!--feather icons-->
  84. <script src="https://unpkg.com/feather-icons"></script>
  85.  
  86. <!--tooltips-->
  87. <script src="https://unpkg.com/popper.js@1"></script>
  88. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  89.  
  90. <!--animate on scroll-->
  91. <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
  92. <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  93.  
  94. <!--photoset fix-->
  95. <link href="https://static.tumblr.com/0podkko/xIbplezmo/modified_photosets.css" rel="stylesheet">
  96. <script src="https://static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
  97.  
  98. <!--mobile photoset fix-->
  99. <link href="//dl.dropbox.com/s/bnoj86mka0bkplb/npf-override.css" rel="stylesheet">
  100. <script src="//dl.dropbox.com/s/vwrm94pcg4c9e71/npf-evenize.js"></script>
  101. <style type="text/css">
  102. :root {
  103. --NPF-Image-Spacing: 1px;
  104. --NPF-Bottom-Gap-From-Captions: 1em;
  105. }
  106. </style>
  107.  
  108. <!--inline image fix-->
  109. <script src="//dl.dropbox.com/s/1mztc6y7i6ry9ri/gtresizing.js"> </script>
  110.  
  111. <!-- responsive video -->
  112. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  113.  
  114. <style type="text/css">
  115.  
  116. /*tumblr controls*/
  117.  
  118. .iframe-controls--desktop {
  119. white-space:nowrap!important;
  120. top:6px!important;
  121. right:10px!important;
  122. opacity:.6!important;
  123. position:fixed!important;
  124. transform:scale(0.65);
  125. transform-origin:100% 0;
  126. }
  127.  
  128. .tmblr-iframe--app-cta-button {
  129. display: none!important;
  130. }
  131.  
  132. /*tooltip*/
  133.  
  134. .tippy-tooltip.custom-theme {
  135. background:{color:tooltip background};
  136. color: {color:navigation link};
  137. border:0px solid {color:borders};
  138. text-transform:capitalize;
  139. text-align: center;
  140. letter-spacing: .7px;
  141. padding: 0em;
  142. margin: 5px;
  143. font-size: .9em;
  144. }
  145.  
  146. /*scrollbar*/
  147.  
  148. ::-webkit-scrollbar {
  149. height:5px;
  150. width:5px;
  151. background:inherit;
  152. }
  153.  
  154. ::-webkit-scrollbar-thumb {background:{color:accent};}
  155.  
  156. /*main structure*/
  157.  
  158. body {
  159. background:{color:background};
  160. color:{color:text};
  161. font:{select:font size}/1.5em {select:font}, sans-serif;
  162. -webkit-font-smoothing: antialiased;
  163. letter-spacing:.5px;
  164. word-wrap:break-word;
  165. text-align:justify;
  166. overflow-x:hidden;
  167. margin:0;
  168. opacity: 1;
  169. transition: 1s opacity;
  170. }
  171.  
  172. body.fade-out {
  173. opacity: 0;
  174. transition: none;
  175. }
  176.  
  177. a {
  178. color:{color:link};
  179. text-decoration:none;
  180. transition:all .3s linear;
  181. -webkit-transition:all .3s linear;
  182. -o-transition:all .3s linear;
  183. -moz-transition:all .3s linear;
  184. }
  185.  
  186. a, a img {cursor:pointer;}
  187.  
  188. a:hover {
  189. color:{color:link hover};
  190. text-decoration:none;
  191. }
  192.  
  193. img {
  194. opacity:1;
  195. border:0;
  196. text-decoration:none;
  197. max-width:100%;
  198. height:auto;
  199. display:block;
  200. }
  201.  
  202. blockquote {
  203. padding:.25em 0 .25em 15px;
  204. margin:.5em 0;
  205. border-left:1px solid #eee;
  206. }
  207.  
  208. pre {
  209. padding:0;
  210. margin:0;
  211. line-height:inherit!important;
  212. background:transparent;
  213. font-family:inherit!Important;
  214. font-size:inherit!important;
  215. white-space:pre-wrap;
  216. white-space:-moz-pre-wrap;
  217. white-space:-pre-wrap;
  218. white-space:-o-pre-wrap;
  219. word-wrap:break-word;
  220. }
  221.  
  222. p {margin:1em 0;}
  223.  
  224. p:first-of-type {margin-top:0;}
  225.  
  226. p:last-of-type {margin-bottom:0;}
  227.  
  228. b, strong, b a, strong a {
  229. font-weight:bold!important;
  230. color:{color:accent};
  231. }
  232.  
  233. small, big, sub, pre {
  234. font-size:1em!important;
  235. line-height:1.5em!important;
  236. vertical-align:baseline!important;
  237. }
  238.  
  239. h1, h2, h3, h4 {
  240. margin:1.5em 0;
  241. font-size:1.5em;
  242. padding:0;
  243. color:{color:accent};
  244. font-weight:bold;
  245. }
  246.  
  247. .posts h1:first-child, .posts h2:first-child, .posts h3:first-child, .posts h4:first-child {margin-top:0;}
  248.  
  249. /*sidebar*/
  250.  
  251. aside {
  252. display:block;
  253. position:fixed;
  254. top:0;
  255. height:100%;
  256. width:200px;
  257. margin-left:5.5em;
  258. background:{color:sidebar background};
  259. padding:0 3em 0 3em;
  260. text-align:center;
  261. }
  262.  
  263. .sidebar {
  264. margin-top:50vh;
  265. transform:translateY(-50%);
  266. }
  267.  
  268. .icon {
  269. position: relative;
  270. width: 80px;
  271. height: 80px;
  272. border-radius: 50%;
  273. background: {color:background};
  274. margin:2em 4em;
  275. }
  276.  
  277. .icon img {
  278. width: 60px;
  279. height: 60px;
  280. border-radius: 50%;
  281. display: inline;
  282. margin: 11px;
  283. }
  284.  
  285. .icon:before, .icon a:before {
  286. content: '';
  287. width: 80px;
  288. height: 80px;
  289. border-radius: 50%;
  290. border-top: 1px solid {color:borders};
  291. border-left: 1px solid {color:borders};
  292. border-right: 1px solid {color:borders};
  293. border-bottom: 1px solid {color:accent};
  294. position: absolute;
  295. z-index: 9;
  296. animation-name: spin;
  297. animation-duration: 3s;
  298. animation-iteration-count: infinite;
  299. animation-timing-function: linear;
  300. }
  301.  
  302. @keyframes spin {
  303. from {
  304. transform: rotate(0deg)
  305. }
  306.  
  307. to {
  308. transform: rotate(360deg)
  309. }
  310. }
  311.  
  312. #blogtitle {
  313. {block:ifspookyfont}
  314. font-family: 'Creepster', cursive;
  315. {/block:ifspookyfont}
  316. display:block;
  317. margin-bottom:1em;
  318. font-size:1.25em;
  319. letter-spacing:2px;
  320. text-transform:capitalize;
  321. font-weight:700;
  322. }
  323.  
  324. #blogtitle a{
  325. color:{color:accent};
  326. }
  327.  
  328. #description {
  329. display:block;
  330. margin-bottom:1em;
  331. }
  332.  
  333. /*navigation*/
  334.  
  335. nav {
  336. display:block;
  337. position:fixed;
  338. top:0;
  339. padding:0 2em;
  340. height:100vh;
  341. background:{color:navigation background};
  342. }
  343.  
  344. .navlinks {
  345. margin-top:50vh;
  346. transform:translateY(-50%);
  347. }
  348.  
  349. .navlinks a {
  350. display:block;
  351. margin:3em 0;
  352. border:0;
  353. color:{color:navigation link};
  354. }
  355.  
  356. .navlinks svg {
  357. width:1.5em;
  358. height:1.5em;
  359. stroke-width:1.5;
  360. vertical-align:middle;
  361. }
  362.  
  363. /*pagination*/
  364.  
  365. footer {
  366. position:fixed;
  367. bottom:0;
  368. padding:.75em 0;
  369. width:{select:post width};
  370. background:{color:background};
  371. text-align:left;
  372. color:{color:link};
  373. }
  374.  
  375. footer span {
  376. display:inline-block;
  377. float:right;
  378. }
  379.  
  380. footer a {
  381. display:inline-block;
  382. border:0;
  383. margin:0 .5em;
  384. }
  385.  
  386. footer svg {
  387. width:1.2em;
  388. height:1.2em;
  389. vertical-align:middle;
  390. color:{color:accent};
  391. margin-bottom:2px;
  392. }
  393.  
  394. /*posts*/
  395.  
  396. main {
  397. position:relative;
  398. margin:auto;
  399. width:100vw;
  400. }
  401.  
  402. section {
  403. margin:150px 0 100px 430px;
  404. width:{select:post width};
  405. }
  406.  
  407. article {
  408. width:{select:post width};
  409. overflow:hidden;
  410. margin-bottom:150px;
  411. {block:PermalinkPage}
  412. margin-bottom: 50px;
  413. {/block:PermalinkPage}
  414. }
  415.  
  416. .posts:last-child {margin-bottom:0px;}
  417.  
  418. .ph {
  419. position:relative;
  420. overflow:hidden;
  421. }
  422.  
  423. .ph img {
  424. width:100%;
  425. display:block;
  426. }
  427.  
  428. /*photosets*/
  429.  
  430. [photoset-layout] {grid-gap: 1px;}
  431.  
  432. [photoset-layout] div {cursor: pointer;}
  433.  
  434. /*titles*/
  435.  
  436. .title {
  437. font-size:1.3em;
  438. text-transform:capitalize;
  439. letter-spacing:1px;
  440. font-weight:700;
  441. color:{color:accent};
  442. border:0;
  443. margin-bottom:1em;
  444. }
  445.  
  446. .title a {color:{color:accent};}
  447.  
  448. .title a:hover {color:{color:link hover};}
  449.  
  450. .ted {margin-top:1em;}
  451.  
  452. /*captions*/
  453.  
  454. .comment {
  455. padding:0 0 1em 0;
  456. list-style:none;
  457. }
  458.  
  459. .comment:last-of-type {padding-bottom:0!important;}
  460.  
  461. .user {
  462. display:inline-block;
  463. text-transform:capitalize;
  464. font-weight:700;
  465. margin-bottom:.75em;
  466. }
  467.  
  468. .user:before {
  469. content:'';
  470. position:relative;
  471. display:inline-block;
  472. width:5px;
  473. height:5px;
  474. background:{color:link};
  475. opacity:.5;
  476. border-radius:100%;
  477. margin-right:4px;
  478. top:-1px;
  479. }
  480.  
  481. .user a{color:{color:link};}
  482.  
  483. .user a:hover{color:{color:link hover};}
  484.  
  485. .captioned .comment:first-of-type {margin-top:1em;}
  486.  
  487. .tex li, .tex blockquote {text-align:left;}
  488.  
  489. /*quote*/
  490.  
  491. .source {margin-top:.5em;}
  492.  
  493. /*audio*/
  494.  
  495. .player {
  496. width:30px;
  497. height:30px;
  498. margin-right:1em;
  499. border:1px solid {color:borders};
  500. border-radius:100%;
  501. overflow:hidden;
  502. }
  503.  
  504. .hold {
  505. display: flex;
  506. flex-direction: row;
  507. flex-wrap: nowrap;
  508. justify-content: flex-start;
  509. align-items: center;
  510. align-content: stretch;
  511. }
  512.  
  513. .audio_info {
  514. color:{color:text};
  515. line-height:1.3em;
  516. }
  517.  
  518. .audio_info span {
  519. white-space:nowrap;
  520. overflow:hidden;
  521. text-overflow:ellipsis;
  522. display:block;
  523. }
  524.  
  525. .hold .track {
  526. color:{color:accent};
  527. text-transform:capitalize;
  528. letter-spacing:1px;
  529. font-weight:700;
  530. }
  531.  
  532. /*asks*/
  533.  
  534. .q {
  535. text-align:left;
  536. margin-bottom:2em;
  537. }
  538.  
  539. /*chat*/
  540.  
  541. .chat {
  542. text-align:left;
  543. margin:0;
  544. padding:0;
  545. list-style:none;
  546. }
  547.  
  548. .l {
  549. padding:15px 0;
  550. border-bottom:1px solid {color:borders};
  551. }
  552.  
  553. .label {
  554. font-weight:bold;
  555. color:{color:accent};
  556. display:inline-block;
  557. }
  558.  
  559. .l:first-of-type {padding-top:0;}
  560.  
  561. .l:last-of-type {
  562. padding-bottom:0;
  563. border:0;
  564. }
  565.  
  566. /*permalink and notes*/
  567.  
  568. .info {
  569. display:block;
  570. color:{color:link};
  571. background:{color:sidebar background};
  572. margin-top:1.5em;
  573. padding:1.5em;
  574. }
  575.  
  576. .info a {
  577. position: relative;
  578. overflow: hidden;
  579. display:inline-block;
  580. margin-right:1.2em;
  581. }
  582.  
  583. .info a:last-child {margin-right:0;}
  584.  
  585. .info svg {
  586. width:1em;
  587. height:1em;
  588. vertical-align:middle;
  589. color:{color:accent};
  590. margin-bottom:2px;
  591. margin-right:.2em;
  592. }
  593.  
  594. .likereblog {float:right;}
  595.  
  596. .info .like .liked + svg path {fill: {color:accent};}
  597.  
  598. .info .like .like_button {position: relative;}
  599.  
  600. .info .like .like_button iframe {
  601. position: absolute;
  602. top: 0;
  603. left: 0;
  604. bottom: 0;
  605. right: 0;
  606. z-index: 2;
  607. opacity: 0.000001;
  608. }
  609.  
  610. .tags {
  611. display:block;
  612. margin-top:.5em;
  613. }
  614.  
  615. .tags a {
  616. color:{color:link};
  617. display: inline-block;
  618. margin:0 1em 0 0;
  619. transition:all .3s linear;
  620. -webkit-transition:all .3s linear;
  621. -o-transition:all .3s linear;
  622. -moz-transition:all .3s linear;
  623. }
  624.  
  625. .pagenotes {padding-top:0;}
  626.  
  627. ol.notes {
  628. list-style-type:none;
  629. padding:0px;
  630. margin:0px;
  631. }
  632.  
  633. ol.notes li.note {
  634. display:block;
  635. padding:0;
  636. margin:5px 0;
  637. }
  638.  
  639. ol.notes li.note img.avatar {display:none!important;}
  640.  
  641. a.more_notes_link {
  642. display:block;
  643. text-align:center;
  644. color:{color:accent};
  645. }
  646.  
  647. /*dark mode button*/
  648.  
  649. .nightmode svg, .normalmode svg {
  650. cursor:pointer;
  651. width:1.5em;
  652. height:1.5em;
  653. stroke-width:1.5;
  654. vertical-align:middle;
  655. color:{color:navigation link};
  656. }
  657.  
  658. body.night, body.night nav, body.night footer {
  659. background:#292f36;
  660. color:#cccccc;
  661. transition:.6s;
  662. }
  663.  
  664. body.night .icon:before, body.night .icon a:before {
  665. border-top: 1px solid #555;
  666. border-left: 1px solid #555;
  667. border-right: 1px solid #555;
  668. border-bottom: 1px solid {color:accent};
  669. transition:.6s;
  670. }
  671.  
  672. body.night a {color:#cccccc; transition:.6s;}
  673.  
  674. body.night blockquote {border-left:1px solid #555; transition:.6s;}
  675.  
  676. body.night svg {color:{color:accent}; transition:.6s;}
  677.  
  678. body.night aside, body.night .info, body.night .icon {background:#21262c; transition:.6s;}
  679.  
  680.  
  681. /*responsive*/
  682.  
  683. @media only screen and (max-width: 1024px) {
  684.  
  685. section {
  686. margin:50px auto 100px auto;
  687. width:80vw;
  688. }
  689.  
  690. article {
  691. width:80vw;
  692. text-align:justify;
  693. }
  694.  
  695. aside {
  696. position:static;
  697. height:auto;
  698. width:100vw;
  699. margin-left:0;
  700. padding:0;
  701. text-align:center;
  702. }
  703.  
  704. .sidebar {
  705. margin-top:0;
  706. padding-top:3em;
  707. transform:translateY(0);
  708. }
  709.  
  710. .icon {
  711. margin:0 auto 2em auto;
  712. }
  713.  
  714. #description {padding:0 3em 3em 3em;}
  715.  
  716. nav {
  717. position:static;
  718. top:0;
  719. padding:1em 0;
  720. height:auto;
  721. text-align:center;
  722. background:{color:navigation background};
  723. }
  724.  
  725. .navlinks {
  726. margin-top:0;
  727. transform:translateY(0%);
  728. }
  729.  
  730. .navlinks a {
  731. display:inline-block;
  732. margin:0 1em;
  733. }
  734.  
  735. footer {width:80vw}
  736.  
  737. }
  738.  
  739. /*theme credit*/
  740.  
  741. .credit {
  742. display:block;
  743. position:fixed;
  744. right:10px;
  745. bottom:10px;
  746. font-size:1.2em;
  747. }
  748.  
  749. {CustomCSS}
  750.  
  751. </style>
  752.  
  753. </head>
  754.  
  755. <body>
  756.  
  757. <script>document.body.className += ' fade-out';</script>
  758.  
  759. <main>
  760.  
  761. <nav>
  762. <div class="navlinks">
  763. {block:ifHomeTitle}<a href="/" title="{text:home title}"><i data-feather="{text:home icon}"></i></a>{/block:ifHomeTitle}
  764. {block:ifAskTitle}<a href="/ask" title="{text:ask title}"><i data-feather="{text:ask icon}"></i></a>{/block:ifAskTitle}
  765. {block:ifArchiveTitle}<a href="/archive" title="{text:archive title}"><i data-feather="{text:archive icon}"></i></a>{/block:ifArchiveTitle}
  766. {block:ifLink1}<a href="{text:Link 1 URL}" title="{text:Link 1}"><i data-feather="{text:link 1 icon}"></i></a>{/block:ifLink1}
  767. {block:ifLink2}<a href="{text:Link 2 URL}" title="{text:Link 2}"><i data-feather="{text:link 2 icon}"></i></a>{/block:ifLink2}
  768. {block:ifLink3}<a href="{text:Link 3 URL}" title="{text:Link 3}"><i data-feather="{text:link 3 icon}"></i></a>{/block:ifLink3}
  769. <a class="nightmode" title="Dark Mode"><i data-feather="moon"></i></a>
  770. <a class="normalmode" title="Light Mode"><i data-feather="sun"></i></a>
  771. </nav>
  772.  
  773. <aside>
  774. <div class="sidebar">
  775. {block:ifnoticonmusicplayer}
  776. <div class="icon"><img src="{image:icon}"/></div>
  777. {/block:ifnoticonmusicplayer}
  778. {block:ificonmusicplayer}
  779. <div class="icon">
  780. <audio id="myAudio" src="{text:audio url}" preload="auto"></audio>
  781. <a title="▷ Play {text:song title}" onclick="togglePlay()"></a>
  782. <img src="{image:icon}">
  783. </div>
  784. {/block:ificonmusicplayer}
  785. <div id="blogtitle"><a href="/">{Title}</a></div>
  786. <div id="description">{Description}</div>
  787. </div>
  788. </aside>
  789.  
  790. <section>
  791.  
  792. {block:posts}
  793. <article class="posts {block:caption}captioned{/block:caption}" id="{PostID}" post-type="{PostType}" data-aos="fade-up">
  794.  
  795. {block:Quote}
  796. <div class="title quote">{quote}</div>
  797. {block:Source}<div class="source">{source}</div>{/block:Source}
  798. {/block:Quote}
  799.  
  800. {block:Text}
  801. {block:Title}<div class="title">{title}</div>{/block:Title}
  802. {block:RebloggedFrom}
  803. {block:Reblogs}
  804. <li class="comment {block:Title}ted{/block:Title}">
  805. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a>
  806. <div class="tex">{body}</div>
  807. </li>
  808. {/block:Reblogs}
  809. {/block:RebloggedFrom}
  810. {block:NotReblog}
  811. <li class="comment {block:Title}ted{/block:Title}">
  812. <div class="tex">{body}</div>
  813. </li>
  814. {/block:NotReblog}
  815. {/block:Text}
  816.  
  817. {block:Link}<div class="title"><a href="{URL}">{name}</a></div>
  818. {block:Description}
  819. {block:NotReblog}
  820. <li class="comment ted">
  821. <div class="tex">{description}</div>
  822. </li>
  823. {/block:NotReblog}
  824. {/block:Description}
  825. {block:RebloggedFrom}
  826. {block:Reblogs}
  827. <li class="comment">
  828. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a>
  829. <div class="tex">{body}</div>
  830. </li>
  831. {/block:Reblogs}
  832. {/block:RebloggedFrom}
  833. {/block:Link}
  834.  
  835. {block:Chat}
  836. {block:Title}<div id="title">{title}</div>{/block:Title}
  837. <ol class="chat {block:Title}ted{/block:Title}">
  838. {block:lines}
  839. <li class="l {Alt}">
  840. {block:label}<span class="label">{label}</span>{/block:label}{line}
  841. </li>
  842. {/block:lines}
  843. </ol>
  844. {/block:Chat}
  845.  
  846. <div class="ph">
  847.  
  848. {block:Photo}{linkopentag}<img src="{photoURL-HighRes}" alt="{PhotoAlt}"/>{linkclosetag}{/block:Photo}
  849.  
  850. {block:Photoset}
  851. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>{/block:Photoset}
  852.  
  853. {block:Video}
  854. <div class="video">{Video-500}</div>
  855. {/block:Video}
  856.  
  857. {block:Audio}
  858. {block:audioplayer}
  859. <div class="hold">
  860. <div class="player">{audioplayerwhite}</div>
  861. <div class="audio_info">
  862. {block:trackname}<span class="track">{trackname}</span>{/block:trackname}
  863. {block:artist}<span class="artist">{artist}</span>{/block:artist}
  864. </div>
  865. </div>
  866. {/block:audioplayer}
  867. {/block:Audio}
  868.  
  869. {block:caption}
  870. {block:Reblogs}
  871. <li class="comment">
  872. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a>
  873. <div class="tex">{body}</div>
  874. </li>
  875. {/block:Reblogs}
  876. {block:NotReblog}
  877. <li class="comment">
  878. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{name}</a>
  879. <div class="tex">{caption}</div>
  880. </li>
  881. {/block:NotReblog}
  882. {/block:caption}
  883.  
  884. </div>
  885.  
  886. {block:Answer}
  887. <div class="q">
  888. <div class="user">{asker}</span> sent:</div>
  889. <div class="tex">{question}</div>
  890. </div>
  891. {block:Answerer}
  892. <li class="comment">
  893. <div class="user">{answerer} replied:</div>
  894. <div class="tex">{answer}</div>
  895. </li>
  896. {/block:Answerer}
  897. {block:NotReblog}
  898. <li class="comment">
  899. <div class="tex">{replies}</div>
  900. </li>
  901. {/block:NotReblog}
  902. {block:RebloggedFrom}
  903. {block:Reblogs}
  904. <li class="comment">
  905. <a {block:haspermalink}href="{permalink}"{/block:haspermalink} class="user" target="_blank">{username}</a>
  906. <div class="tex">{body}</div>
  907. </li>
  908. {/block:Reblogs}
  909. {/block:RebloggedFrom}
  910. {/block:Answer}
  911.  
  912.  
  913. {block:Date}
  914.  
  915. <div class="info">
  916. {block:PinnedPostLabel}<a href="{permalink}"><i data-feather="x"></i>{PinnedPostLabel}</a><br>{/block:PinnedPostLabel}
  917. <a href="{permalink}"><i data-feather="bookmark"></i> Posted on {Month} {DayOfMonth}{DayOfMonthSuffix}</a>
  918. <div class="likereblog"><a href="{ReblogURL}" title="Reblog This Post"><i data-feather="rotate-cw"></i></a>
  919. <a class="like" title="Like This Post">{LikeButton}<i data-feather="heart"></i></a></div>
  920.  
  921. {block:hastags}
  922. <div class="tags">{block:Tags}<a href="{TagUrl}"># {Tag}</a>{/block:Tags}</div>
  923. {/block:hasTags}
  924.  
  925. </div>
  926.  
  927. {/block:Date}
  928.  
  929. </article>
  930.  
  931. {block:PostNotes}
  932. <article class="posts pagenotes">
  933. {block:RebloggedFrom}
  934. <span style="margin-top:5px">via: <a href="{ReblogParentURL}">{ReblogParentName}</a>
  935. {block:ContentSource} &mdash; source: <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:ContentSource}
  936. </span>
  937. {/block:RebloggedFrom}
  938.  
  939. {PostNotes}
  940. </article>
  941. {/block:PostNotes}
  942.  
  943. {/block:Posts}
  944.  
  945. {block:Pagination}
  946. <footer id="pagination">
  947. <span>
  948. {block:PreviousPage}<a href="{PreviousPage}"><i data-feather="chevron-left"></i> back</a>{block:nextpage}{/block:nextpage}{/block:PreviousPage} {block:NextPage}<a href="{NextPage}">next <i data-feather="chevron-right"></i></a>{/block:NextPage}
  949. </span>
  950. <a href="#"><i data-feather="chevron-up"></i> back to top</a>
  951. </footer>
  952. {/block:Pagination}
  953.  
  954. </section> <!--end of entries-->
  955.  
  956. </main> <!--end of content-->
  957.  
  958. <div class="credit"><a href="https://mercurythms.tumblr.com" title="mercurythms">m.</a></div>
  959.  
  960. <script>
  961.  
  962. // fade in effect
  963. $(function() {
  964. $('body').removeClass('fade-out');
  965. });
  966.  
  967. //dark mode
  968. var mode = localStorage.getItem('mode');
  969. if (mode)
  970. $('body').addClass(mode);
  971.  
  972. $(document).ready(function(){
  973. $('.nightmode').click(function(){
  974. $('body').toggleClass('night');
  975. localStorage.setItem('mode', 'night');
  976. $('.nightmode').css('opacity', '0');
  977. $('.normalmode').css('opacity', '1');
  978. });
  979. $(".normalmode").click(function() {
  980. $("body").removeClass("night");
  981. localStorage.setItem('mode', null);
  982. $('.nightmode').css('opacity', '1');
  983. $('.normalmode').css('opacity', '0');
  984. });
  985. if ($('body').hasClass('night')) {
  986. $('.nightmode').css('opacity', '0');
  987. $('.normalmode').css('opacity', '1');
  988. }
  989.  
  990. else {
  991. $('.nightmode').css('opacity', '1');
  992. $('.normalmode').css('opacity', '0');
  993. }
  994. });
  995.  
  996. //feather icons
  997. feather.replace()
  998.  
  999. //tooltips
  1000. tippy('[title]', {
  1001. theme: 'custom',
  1002. arrow: false,
  1003. followCursor: true,
  1004. delay: 100,
  1005. placement: 'bottom-start',
  1006. zIndex: 9999999999,
  1007. maxWidth: 400,
  1008.  
  1009. content(reference) {
  1010. const title = reference.getAttribute('title');
  1011. reference.removeAttribute('title');
  1012. return title;
  1013. },
  1014. });
  1015.  
  1016. // photoset fix
  1017. initPhotosets();
  1018.  
  1019. //responsive video
  1020. $(document).ready(function() {
  1021. flexibleFrames($(".video"));
  1022. });
  1023.  
  1024. //animated scrolling
  1025. AOS.init({offset: 100,duration: 500});
  1026.  
  1027. //remove redirects
  1028. function noHrefLi(){
  1029. var linkSet = document.querySelectorAll('a[href*="href.li/?"]');
  1030. Array.prototype.forEach.call(linkSet,function(el,i){
  1031. var theLink = linkSet[i].getAttribute('href').split("href.li/?")[1];
  1032. linkSet[i].setAttribute("href",theLink);
  1033. });
  1034. }
  1035. noHrefLi();
  1036.  
  1037. //play music on icon click
  1038. {block:ificonmusicplayer}
  1039. var myAudio = document.getElementById("myAudio");
  1040. var isPlaying = false;
  1041.  
  1042. function togglePlay() {
  1043. isPlaying ? myAudio.pause() : myAudio.play();
  1044. };
  1045.  
  1046. myAudio.onplaying = function() {
  1047. isPlaying = true;
  1048. };
  1049. myAudio.onpause = function() {
  1050. isPlaying = false;
  1051. };
  1052. {/block:ificonmusicplayer}
  1053.  
  1054. </script>
  1055.  
  1056. {block:ContentSource}
  1057. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1058. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1059. {/block:SourceLogo}
  1060. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1061. {/block:ContentSource}
  1062. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!