API tools faq
paste
Advertisement
mercurythms

hydra (theme)

mercurythms
Mar 2nd, 2021 (edited)
2,729
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.42 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.  
  4. hydra :: @mercurythms :: @freddie-mercurys
  5.  
  6. please don't remove credit or take parts of this code :)
  7.  
  8.  
  9. -->
  10.  
  11. <!DOCTYPE html>
  12. <html>
  13. <head>
  14. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  15.  
  16. <link rel="shortcut icon" href="{Favicon}">
  17. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  18. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  19. <meta charset="utf-8">
  20. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  21.  
  22. <!--variables and options-->
  23.  
  24. <meta name="image:header" content=""/>
  25.  
  26. <meta name="color:background" content="#ffffff"/>
  27. <meta name="color:post background" content="#fcfcfc"/>
  28. <meta name="color:text" content="#888888"/>
  29. <meta name="color:link" content="#444444"/>
  30. <meta name="color:link hover" content="#c9c9c9"/>
  31. <meta name="color:accent" content="#ceabb1"/>
  32. <meta name="color:borders" content="#eeeeee"/>
  33.  
  34. <meta name="select:post width" content="400px" title="400px"/>
  35. <meta name="select:post width" content="450px" title="450px"/>
  36. <meta name="select:post width" content="500px" title="500px"/>
  37. <meta name="select:post width" content="540px" title="540px"/>
  38. <meta name="select:post width" content="600px" title="600px"/>
  39.  
  40. <meta name="select:icon size" content="5em" title="large"/>
  41. <meta name="select:icon size" content="4em" title="medium"/>
  42. <meta name="select:icon size" content="3em" title="small"/>
  43.  
  44. <meta name="if:multi column" content="1"/>
  45. <meta name="if:post shadow" content="1"/>
  46. <meta name="if:show tags" content="0"/>
  47.  
  48. <meta name="text:font" content="Inter"/>
  49. <meta name="text:font size" content="13"/>
  50. <meta name="text:post margin" content="100"/>
  51.  
  52. <meta name="text:home link" content="home"/>
  53. <meta name="text:ask link" content="ask"/>
  54. <meta name="text:archive link" content="past"/>
  55. <meta name="text:link 1 url" content="/"/>
  56. <meta name="text:link 1" content="link 1"/>
  57. <meta name="text:link 2 url" content="/"/>
  58. <meta name="text:link 2" content="link 2"/>
  59. <meta name="text:Link 3 url" content="/"/>
  60. <meta name="text:link 3" content="link 3"/>
  61.  
  62. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  63. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  64.  
  65. <!--google fonts-->
  66. <link rel="preconnect" href="https://fonts.gstatic.com">
  67. <link href="https://fonts.googleapis.com/css2?family={text:font}:wght@400;700&display=swap" rel="stylesheet">
  68.  
  69. <!--feather icons-->
  70. <script src="https://unpkg.com/feather-icons"></script>
  71.  
  72. <!-- responsive video -->
  73. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  74.  
  75. <!--photoset fix-->
  76. <link href="https://static.tumblr.com/0podkko/xIbplezmo/modified_photosets.css" rel="stylesheet">
  77. <script src="https://static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
  78.  
  79. <!--mobile photoset fix-->
  80. <link href="//dl.dropbox.com/s/bnoj86mka0bkplb/npf-override.css" rel="stylesheet">
  81. <script src="//dl.dropbox.com/s/vwrm94pcg4c9e71/npf-evenize.js"></script>
  82. <style type="text/css">
  83. :root {
  84. --NPF-Image-Spacing: 5px;
  85. --NPF-Bottom-Gap-From-Captions: 1em;
  86. }
  87. </style>
  88.  
  89. <!--tooltips-->
  90. <script src="https://unpkg.com/popper.js@1"></script>
  91. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  92.  
  93. <!--time ago-->
  94. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  95.  
  96. <!--masonry-->
  97. {block:ifmulticolumn}
  98. <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  99. <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
  100. <script type="text/javascript" charset="utf-8">$(document).ready(function(){
  101. var $grid = $("section").masonry({
  102. itemSelector: ".posts",
  103. initLayout: 1
  104. });
  105. $grid.on("layoutComplete", function(o, r) {
  106. console.log(r.length)
  107. }), $grid.masonry({
  108. fitWidth: 1,
  109. horizontalOrder: 0,
  110. gutter: {text:post margin},
  111. resize: 1
  112. }), $grid.imagesLoaded().progress(function() {
  113. $grid.masonry("layout")
  114. });
  115. });</script>
  116. {/block:ifmulticolumn}
  117.  
  118. <!--css-->
  119.  
  120. <style type="text/css">
  121.  
  122. /*tumblr controls*/
  123.  
  124. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  125. z-index: 999999999!important;
  126. opacity: 0.7;
  127. width: 100%;
  128. transform-origin: 100% 0;
  129. top: 15px;
  130. right: 15px;
  131. transform:scale(0.7);
  132. transform-origin:100% 0;
  133. -webkit-transform:scale(0.7);
  134. -webkit-transform-origin:100% 0;
  135. -o-transform:scale(0.7);
  136. -o-transform-origin:100% 0;
  137. -moz-transform:scale(0.7);
  138. -moz-transform-origin:100% 0;
  139. -ms-transform:scale(0.7);
  140. -ms-transform-origin:100% 0;
  141. transition: opacity 0.6s ease-in-out;
  142. -moz-transition: opacity 0.6s ease-in-out;
  143. -webkit-transition: opacity 0.6s ease-in-out;
  144. }
  145.  
  146. .tmblr-iframe-compact .tmblr-iframe--unified-controls:hover {
  147. opacity: 1;
  148. -webkit-transition: all 0.6s;
  149. -moz-transition: all 0.6s;
  150. -ms-transition: all 0.6s;
  151. -o-transition: all 0.6s;
  152. transition: all 0.6s;
  153. }
  154.  
  155. .tmblr-iframe--app-cta-button {
  156. display: none!important;
  157. }
  158.  
  159. /*tooltips*/
  160.  
  161. .tippy-tooltip.custom-theme {
  162. background-color: {color:post background};
  163. color: {color:text};
  164. text-align: center;
  165. letter-spacing: 1px;
  166. border-radius: 0.5em;
  167. padding: 0.25em;
  168. margin: 20px auto auto 10px;
  169. font-size: 1em;
  170. border: 1px solid {color:borders};
  171. {block:ifpostshadow}
  172. box-shadow: 5px 5px 10px #eee;
  173. {/block:ifpostshadow}
  174. }
  175.  
  176. /*scrollbar*/
  177.  
  178. ::-webkit-scrollbar{
  179. height: 15px;
  180. width: 15px;
  181. background: inherit;
  182. }
  183.  
  184. ::-webkit-scrollbar-thumb {background: {color:borders};}
  185.  
  186. ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {border: 5px solid {color:background};}
  187.  
  188. /*basic styling*/
  189. * {box-sizing: border-box;}
  190.  
  191. body {
  192. font: {text:font size}px/1.8em {text:font};
  193. color: {color:text};
  194. background-color: {color:background};
  195. text-align: left;
  196. word-wrap: break-word;
  197. letter-spacing: 0.08em;
  198. margin: 0;
  199. padding: 0;
  200. opacity: 1;
  201. transition: 1s opacity;
  202. }
  203.  
  204. body.fade-out {
  205. opacity: 0;
  206. transition: none;
  207. }
  208.  
  209. a {
  210. color: {color:link};
  211. text-decoration: none;
  212. -webkit-transition: all 0.3s;
  213. -moz-transition: all 0.3s;
  214. -ms-transition: all 0.3s;
  215. -o-transition: all 0.3s;
  216. transition: all 0.3s;
  217. }
  218.  
  219. a:hover {
  220. color: {color:link hover};
  221. -webkit-transition: all 0.3s;
  222. -moz-transition: all 0.3s;
  223. -ms-transition: all 0.3s;
  224. -o-transition: all 0.3s;
  225. transition: all 0.3s;
  226. }
  227.  
  228. blockquote {
  229. padding: 0 0 0 1.5em;
  230. border-left: 1px solid {color:borders};
  231. margin: 1.5em 0 1.5em 1.5em;
  232. }
  233.  
  234. h1, h2, h3, h4, h5, .title {
  235. letter-spacing: 0.15em;
  236. line-height: 170%;
  237. font-weight: bold;
  238. }
  239.  
  240. #blog-title {
  241. letter-spacing: 0.3em;
  242. font-weight: bold;
  243. }
  244.  
  245. .title a, #blog-title a {color: {color:accent};}
  246. .title a:hover, #blog-title a:hover {color: {color:link hover};}
  247.  
  248. h1, .title, #blog-title {font-size: 1.2em;}
  249. h2 {font-size: 1.1em;}
  250. h3 {font-size: 1em;}
  251. h4 {font-size: 1em;}
  252. h5 {font-size: 1em;}
  253.  
  254. small {font-size: 1em;}
  255. big {font-size: 1em;}
  256.  
  257. hr {
  258. height: 1px;
  259. border: none;
  260. box-shadow: none;
  261. background-color: {color:borders};
  262. }
  263.  
  264. pre {
  265. line-height: inherit;
  266. font-size: inherit;
  267. white-space: pre-wrap;
  268. white-space: -moz-pre-wrap;
  269. white-space: -pre-wrap;
  270. white-space: -o-pre-wrap;
  271. word-wrap: break-word;
  272. }
  273.  
  274. li {max-width: 100%; list-style-type: circle;}
  275.  
  276. .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
  277.  
  278. /*header*/
  279.  
  280. #header {
  281. position: relative;
  282. margin: {text:post margin}px auto;
  283. top: auto;
  284. text-align: center;
  285. width: calc({select:post width} - 4em);
  286. }
  287.  
  288. {block:ifheaderimage}
  289. #header-icon {
  290. width: {select:icon size};
  291. margin: 0 auto 2em auto;
  292. border-radius: 50%;
  293. }
  294. {/block:ifheaderimage}
  295.  
  296. #description {margin-top: 2em;}
  297.  
  298. nav {margin-top: 0.5em;}
  299.  
  300. nav a {margin: auto 0.5em; color: {color:accent};}
  301.  
  302. /*posts*/
  303.  
  304. main {
  305. position: relative;
  306. width: 100%;
  307. margin: auto;
  308. }
  309.  
  310. section {
  311. position: relative;
  312. width: {select:post width};
  313. margin: auto;
  314. }
  315.  
  316. article {
  317. position: relative;
  318. width: {select:post width};
  319. margin: 0 auto {text:post margin}px auto;
  320. padding: 2em;
  321. background: {color:post background};
  322. border-radius: 0.5em;
  323. border: 1px solid {color:borders};
  324. {block:ifpostshadow}
  325. box-shadow: 5px 5px 10px #eee;
  326. {/block:ifpostshadow}
  327. }
  328.  
  329. .posts p a {border-bottom: 1px solid {color:accent};}
  330.  
  331. {block:ifmulticolumn}
  332. .posts {float:left;}
  333.  
  334. .clearfix:before,.clearfix:after{content:'';display:table;}
  335. .clearfix:after{clear:both;}
  336. .clearfix{zoom:1;}
  337. {/block:ifmulticolumn}
  338.  
  339. .tumblr_video_container {max-height: {select:post width} !important; overflow: hidden !important;}
  340.  
  341. .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe {max-width: 100%;}
  342.  
  343. /*captions*/
  344.  
  345. .caption {margin-top: 2em; list-style-type: none;}
  346.  
  347. .caption p {margin: 0.5em 0;}
  348.  
  349. .caption p:last-of-type {margin-bottom: 0;}
  350.  
  351. .original-caption p:first-of-type {margin-top: 0;}
  352.  
  353. .text-caption:first-of-type {margin-top: 0;}
  354.  
  355. .caption iframe, .caption img {max-width: 100%;}
  356.  
  357. .user-icon {
  358. display: inline-block;
  359. vertical-align: middle;
  360. border-radius: 50%;
  361. width: 2em;
  362. height: 2em;
  363. margin-right: 0.5em;
  364. padding: 5px;
  365. background: {color:background};
  366. }
  367.  
  368. .username, .ask-wrap .asking, .answering {
  369. display: inline-block;
  370. vertical-align: middle;
  371. font-weight: bold;
  372. }
  373.  
  374. .deactive::after {
  375. content: '(deactivated)';
  376. margin-left: 0.5em;
  377. opacity: 0.75;
  378. color: {color:text};
  379. }
  380.  
  381. p.tmblr-attribution {margin-top: 1em !important;}
  382.  
  383. /*text*/
  384.  
  385. h1.post-title {margin-top: 0;}
  386.  
  387. /*link*/
  388.  
  389. a.link-wrap {display: block}
  390.  
  391. .link {
  392. padding: 2em;
  393. background-color: {color:background};
  394. border: 1px solid {color:borders};
  395. border-radius: 0.5em;
  396. }
  397.  
  398. .link .title {padding: 0 0.5em;}
  399.  
  400. .npf-link-block {
  401. margin-top: 1.5em;
  402. border-radius: 0;
  403. background-color: initial;
  404. }
  405.  
  406. .npf-link-block .poster .title {padding: 1em;}
  407.  
  408. .npf-link-block.no-poster .title {padding: 1em 1em 0 1em;}
  409.  
  410. .npf-link-block .title {font-size: 1em; border-bottom: none;}
  411.  
  412. .npf-link-block .bottom {padding: 1em !important;}
  413.  
  414. /*photo*/
  415.  
  416. img {
  417. margin: 0;
  418. display: block;
  419. height: auto;
  420. max-width: 100%;
  421. }
  422.  
  423. .photo img {width: 100%;}
  424.  
  425. .vignette, #vignette {opacity: 0;}
  426.  
  427. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.9) !important;}
  428.  
  429. .lightbox-image, #tumblr_lightbox img {
  430. box-shadow: none !important;
  431. border-radius: 0 !important;
  432. max-width: none;
  433. }
  434.  
  435. #tumblr_lightbox_caption, .lightbox-caption {
  436. color: #fff !important;
  437. font-family: inherit;
  438. margin-top: 1em !important;
  439. }
  440.  
  441. /*photoset*/
  442.  
  443. [photoset-layout] {grid-gap: 5px;}
  444.  
  445. [photoset-layout] div {cursor: pointer;}
  446.  
  447. /*quote*/
  448.  
  449. .quote, p.npf_quote {
  450. line-height: 170%;
  451. font-size: 1.3em;
  452. font-weight: bold;
  453. padding: 1.5em 2em;
  454. background: {color:background};
  455. border-radius: 0.5em;
  456. border: 1px solid {color:borders};
  457. }
  458.  
  459. .quote p:first-of-type {margin-top: 0;}
  460.  
  461. .quote p:last-of-type {margin-bottom: 0;}
  462.  
  463. p.npf_quote {font-family: inherit; margin-bottom: 1em;}
  464.  
  465. .source {margin-top: 2em;}
  466.  
  467. /*chat*/
  468.  
  469. .chat {padding: 0; margin: 0;}
  470.  
  471. .chat li {list-style-type: none; margin-top: 1em;}
  472.  
  473. .chat li:first-of-type {margin-top: 0;}
  474.  
  475. .chatter {font-weight: bold;}
  476.  
  477. p.npf_chat {font-family: inherit; margin-top: 1em;}
  478.  
  479. p.npf_chat b {font-family: inherit;}
  480.  
  481. /*answer*/
  482.  
  483. .ask-wrap {
  484. padding: 2em;
  485. background: {color:background};
  486. border-radius: 0.5em;
  487. border: 1px solid {color:borders};
  488. }
  489.  
  490. .ask-wrap .askicon {
  491. width: 3em;
  492. height: 3em;
  493. display: inline-block;
  494. vertical-align: middle;
  495. border-radius: 50%;
  496. margin-right: 0.5em;
  497. padding: 8px;
  498. background: {color:post background};
  499. }
  500.  
  501. .ask-wrap .asking {font-size: 1.1em;}
  502.  
  503. .question {margin-top: 1em;}
  504.  
  505. .question p:first-of-type {margin-top: 0;}
  506.  
  507. .question p:last-of-type {margin-bottom: 0;}
  508.  
  509. /*audio*/
  510.  
  511. .audiopost {
  512. background: {color:background};
  513. border-radius: 0.5em;
  514. border: 1px solid {color:borders};
  515. }
  516.  
  517. .button {
  518. width: 30px;
  519. height: 30px;
  520. overflow: hidden;
  521. position: relative;
  522. z-index: 2;
  523. margin: 7px;
  524. }
  525.  
  526. .audiobox {
  527. background-color: {color:background};
  528. z-index: 3;
  529. position: absolute;
  530. margin: 18px 0 0 18px;
  531. }
  532.  
  533. .audioinfo {
  534. height: 80px;
  535. display: flex;
  536. justify-content: center;
  537. flex-direction: column;
  538. box-sizing: border-box;
  539. padding-left: 6em;
  540. }
  541.  
  542. .audioinfo li {list-style-type: none;}
  543.  
  544. .track {font-weight: bold;}
  545.  
  546. .spotify_audio_player {max-height: 80px;}
  547.  
  548. .soundcloud_audio_player {max-height: 116px;}
  549.  
  550. /*post info*/
  551.  
  552. .info {
  553. margin-top: 1.5em;
  554. display: flex;
  555. flex-direction: row;
  556. align-items: flex-start;
  557. justify-content: space-between;
  558. }
  559.  
  560. .info a {display: inline-block;}
  561.  
  562. .info svg {width: 1.2em; height: 1.2em; vertical-align: middle;}
  563.  
  564. .like {position:relative;}
  565.  
  566. .like .like_button {
  567. position:absolute;
  568. top:0;
  569. left:0;
  570. right:0;
  571. bottom:0;
  572. width:100%;
  573. height:100%;
  574. opacity:0;
  575. }
  576.  
  577. .like .like_button iframe {width: 100%!important; height: 100%!important;}
  578.  
  579. .like .like_button.liked + svg path {color: #dc143c!important;}
  580.  
  581. .info-left a, .tags a {margin-right: 1em;}
  582.  
  583. .tags {
  584. margin-top: 0.5em;
  585. {block:ifnotshowtags}
  586. display: none;
  587. {/block:ifnotshowtags}
  588. }
  589.  
  590. .post-controls a {margin-left: 1.2em;}
  591.  
  592. .notecount {font-weight: bold;}
  593.  
  594. .source-info {margin-top: 2em;}
  595.  
  596. .source-info li {list-style-type: none;}
  597.  
  598. a.pinned-post {display: block; font-weight: bold; color: {color:accent};}
  599.  
  600. /*post notes*/
  601.  
  602. .notes {margin-top: 2em;}
  603.  
  604. ol.notes {
  605. max-width: 100%;
  606. padding: 0;
  607. margin: 2em 0 0 0;
  608. }
  609.  
  610. ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
  611.  
  612. ol.notes li.note img.avatar {
  613. border-radius: 50%;
  614. margin-right: 1em;
  615. vertical-align: middle;
  616. display: inline-block;
  617. width: 1.3em;
  618. height: 1.3em;
  619. }
  620.  
  621. /*pagination*/
  622.  
  623. #page-navigation {
  624. display: flex;
  625. justify-content: center;
  626. margin: 0 auto {text:post margin}px auto;
  627. cursor: pointer;
  628. }
  629.  
  630. #page-navigation a {margin: 0 2em;}
  631.  
  632. #page-navigation svg {width: 2em; height: 2em; stroke-width: 1.5; vertical-align: middle;}
  633.  
  634. /*scroll to top*/
  635.  
  636. #scrollup {
  637. position: fixed;
  638. bottom: 15px;
  639. left: 15px;
  640. background: {color:background};
  641. padding: 0 5px;
  642. border-radius: 5px;
  643. }
  644.  
  645. #scrollup svg {
  646. width: 1.2em;
  647. height: 1.2em;
  648. vertical-align: middle;
  649. }
  650.  
  651. /*credit*/
  652.  
  653. #credit {
  654. position: fixed;
  655. right: 15px;
  656. bottom: 15px;
  657. font-size: 1.2em;
  658. background: {color:background};
  659. padding: 0 5px;
  660. border-radius: 5px;
  661. }
  662.  
  663. /*responsive*/
  664.  
  665. @media only screen and (max-width: 720px) {
  666. body {font-size: 14px;}
  667.  
  668. main, section, article, #header {width: 85vw;}
  669.  
  670. article {padding: 1.2em;}
  671.  
  672. .user-icon, .ask-wrap .askicon {display: none;}
  673.  
  674. .info-left a, .tags a {margin-right: 0.5em;}
  675.  
  676. .post-controls a {margin-left: 1em;}
  677.  
  678. .info svg {width: 1.05em; height: 1.05em;}
  679.  
  680. .tippy-tooltip.custom-theme, .tmblr-iframe-compact .tmblr-iframe--unified-controls {display:none;}
  681. }
  682.  
  683. {CustomCSS}
  684.  
  685. </style>
  686. </head>
  687.  
  688. <!--html-->
  689.  
  690. <body>
  691.  
  692. <script>document.body.className += ' fade-out';</script>
  693.  
  694. <!--main container-->
  695.  
  696. <main>
  697.  
  698. <!--header-->
  699.  
  700. <aside id="header">
  701. {block:ifHeaderImage}<img src="{image:header}" id="header-icon" alt="header image"/></a>{/block:ifHeaderImage}
  702. <div id="blog-title"><a href="/">{Title}</a></div>
  703. {block:Description}<div id="description">{Description}</div>{/block:Description}
  704. <nav>
  705. {block:ifHomeLink}<a href="/">{text:Home Link}</a>{/block:ifHomeLink}
  706. {block:ifAskLink}<a href="/ask">{text:Ask Link}</a>{/block:ifAskLink}
  707. {block:ifArchiveLink}<a href="/archive">{text:Archive Link}</a>{/block:ifArchiveLink}
  708. {block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}
  709. {block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}
  710. {block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}
  711. </nav>
  712. </aside>
  713.  
  714. <!--post container-->
  715.  
  716. <section>
  717.  
  718. <!--posts-->
  719.  
  720. {block:Posts}
  721. <article class="posts" id="{PostID}" post-type="{PostType}">
  722.  
  723. {block:Text}
  724. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  725. {block:NotReblog}
  726. <li class="caption original-caption text-caption">
  727. <div class="caption-text">{Body}</div>
  728. </li>
  729. {/block:NotReblog}
  730. {block:RebloggedFrom}
  731. <div class="reblog-wrap">
  732. {block:Reblogs}
  733. <li class="caption text-caption">
  734. <img src="{PortraitURL-64}" class="user-icon">
  735. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  736. <div class="caption-text">{Body}</div>
  737. </li>
  738. {/block:Reblogs}
  739. </div>
  740. {/block:RebloggedFrom}
  741. {/block:Text}
  742.  
  743. {block:Link}
  744. <a href="{URL}" class="link-wrap">
  745. <div class="link"><div class="title">{Name}</div>
  746. </div>
  747. </a>
  748. {block:Description}
  749. {block:NotReblog}
  750. <li class="caption original-caption">
  751. <div class="caption-text">{Description}</div>
  752. </li>
  753. {/block:NotReblog}
  754. {/block:Description}
  755. {block:RebloggedFrom}
  756. <div class="reblog-wrap">
  757. {block:Reblogs}
  758. <li class="caption">
  759. <img src="{PortraitURL-64}" class="user-icon">
  760. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  761. <div class="caption-text">{Body}</div>
  762. </li>
  763. {/block:Reblogs}
  764. </div>
  765. {/block:RebloggedFrom}
  766. {/block:Link}
  767.  
  768. {block:Photo}
  769. <div class="photo">
  770. {LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"></a>{LinkCloseTag}
  771. </div>
  772. {block:Caption}
  773. {block:NotReblog}
  774. <li class="caption original-caption">
  775. <div class="caption-text">{Caption}</div>
  776. </li>
  777. {/block:NotReblog}
  778. {block:RebloggedFrom}
  779. <div class="reblog-wrap">
  780. {block:Reblogs}
  781. <li class="caption">
  782. <img src="{PortraitURL-64}" class="user-icon">
  783. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  784. <div class="caption-text">{Body}</div>
  785. </li>
  786. {/block:Reblogs}
  787. </div>
  788. {/block:RebloggedFrom}
  789. {/block:Caption}
  790. {/block:Photo}
  791.  
  792. {block:Photoset}
  793. <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>
  794. {block:Caption}
  795. {block:NotReblog}
  796. <li class="caption original-caption">
  797. <div class="caption-text">{Caption}</div>
  798. </li>
  799. {/block:NotReblog}
  800. {block:RebloggedFrom}
  801. <div class="reblog-wrap">
  802. {block:Reblogs}
  803. <li class="caption">
  804. <img src="{PortraitURL-64}" class="user-icon">
  805. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  806. <div class="caption-text">{Body}</div>
  807. </li>
  808. {/block:Reblogs}
  809. </div>
  810. {/block:RebloggedFrom}
  811. {/block:Caption}
  812. {/block:Photoset}
  813.  
  814. {block:Video}
  815. <div class="video">{Video-500}</div>
  816. {block:Caption}
  817. {block:NotReblog}
  818. <li class="caption original-caption">
  819. <div class="caption-text">{Caption}</div>
  820. </li>
  821. {/block:NotReblog}
  822. {block:RebloggedFrom}
  823. <div class="reblog-wrap">
  824. {block:Reblogs}
  825. <li class="caption">
  826. <img src="{PortraitURL-64}" class="user-icon">
  827. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  828. <div class="caption-text">{Body}</div>
  829. </li>
  830. {/block:Reblogs}
  831. </div>
  832. {/block:RebloggedFrom}
  833. {/block:Caption}
  834. {/block:Video}
  835.  
  836. {block:Quote}
  837. <div class="quote">{Quote}</div>
  838. {block:Source}<div class="source">&mdash; {Source}</div>{/block:Source}
  839. {/block:Quote}
  840.  
  841. {block:Chat}
  842. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  843. <ul class="chat">{block:Lines}
  844. <li>
  845. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  846. <div class="chattxt">{Line}</div>
  847. </li>
  848. {/block:Lines}</ul>
  849. {/block:Chat}
  850.  
  851. {block:Answer}
  852. <div class="ask-wrap">
  853. <img src="{AskerPortraitURL-64}" class="askicon">
  854. <div class="asking">{Asker} asked</div>
  855. <div class="question">{Question}</div>
  856. </div>
  857. {block:Answerer}
  858. <li class="caption">
  859. <img src="{AnswererPortraitURL-64}" class="user-icon">
  860. <div class="answering {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  861. <div class="caption-text">{Answer}</div>
  862. </li>
  863. {/block:Answerer}
  864. {block:NotReblog}
  865. <li class="caption original-caption">
  866. <div class="caption-text">{Replies}</div>
  867. </li>
  868. {/block:NotReblog}
  869. {block:RebloggedFrom}
  870. <div class="reblog-wrap">
  871. {block:Reblogs}
  872. <li class="caption">
  873. <img src="{PortraitURL-64}" class="user-icon">
  874. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  875. <div class="caption-text">{Body}</div>
  876. </li>
  877. {/block:Reblogs}
  878. </div>
  879. {/block:RebloggedFrom}
  880. {/block:Answer}
  881.  
  882. {block:Audio}
  883. <div class="audiopost">
  884. <div class="audiobox"><div class="button">
  885. {block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}
  886. </div></div>
  887. <div class="audioinfo">
  888. {block:TrackName}<li class="track">{TrackName}</li>{/block:TrackName}
  889. {block:Artist}<li>{Artist}</li>{/block:Artist}
  890. </div>
  891. </div>
  892. {block:Caption}
  893. {block:NotReblog}
  894. <li class="caption original-caption">
  895. <div class="caption-text">{Caption}</div>
  896. </li>
  897. {/block:NotReblog}
  898. {block:RebloggedFrom}
  899. <div class="reblog-wrap">
  900. {block:Reblogs}
  901. <li class="caption">
  902. <img src="{PortraitURL-64}" class="user-icon">
  903. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  904. <div class="caption-text">{Body}</div>
  905. </li>
  906. {/block:Reblogs}
  907. </div>
  908. {/block:RebloggedFrom}
  909. {/block:Caption}
  910. {/block:Audio}
  911.  
  912. <!--post info-->
  913.  
  914. {block:Date}
  915. {block:IndexPage}
  916.  
  917. <!--time and notecount-->
  918.  
  919. <div class="info">
  920. <div class="info-left">
  921. {block:NoteCount}<a class="notecount" href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}
  922. <a class="time-ago" href="{Permalink}">{Timestamp}</a>
  923. {block:PinnedPostLabel}<a class="pinned-post">{PinnedPostLabel}</a>{/block:PinnedPostLabel}
  924. </div>
  925.  
  926. <!--like and reblog buttons-->
  927.  
  928. <div class="post-controls">
  929. {block:ifnotshowtags}<a class="tag-icon" title="show tags"><i data-feather="tag"></i></a>{/block:ifnotshowtags}
  930. <a href="{ReblogURL}" target="_blank" title="reblog"><i data-feather="repeat"></i></a>
  931. <a class="like" title="like">{LikeButton}<i data-feather="heart"></i></a>
  932. </div>
  933. </div>
  934. {/block:IndexPage}
  935.  
  936. <!--tags-->
  937.  
  938. {block:HasTags}
  939. <div class="tags">
  940. {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
  941. </div>
  942. {/block:HasTags}
  943.  
  944. <!--permalink pages-->
  945.  
  946. {block:PermalinkPage}
  947. <div class="source-info">
  948. {block:RebloggedFrom}
  949. <li>Posted: {TimeAgo}, {NotecountWithLabel}</li>
  950. <li>Reblogged via: <a href="{ReblogParentURL}">{ReblogParentName}</a></li>
  951. <li>Originally from: <a href="{ReblogRootURL}">{ReblogRootName}</a></li>
  952. {block:ContentSource}<li>{lang:Source}: <a href="{SourceURL}">{SourceTitle}</a></li>{/block:ContentSource}
  953. {block:HasTags}<li>Filed under: {block:Tags}<a href="{TagURL}">{Tag}&nbsp;&nbsp;</a>{/block:Tags}</li>{/block:HasTags}
  954. {/block:RebloggedFrom}
  955. </div>
  956. {/block:PermalinkPage}
  957.  
  958. </div></div></div>
  959. {/block:Date}
  960.  
  961. <!--post notes-->
  962.  
  963. {block:PermalinkPage}{block:Date}
  964. {block:NoteCount}{block:PostNotes}
  965. <div class="notes">
  966. {PostNotes-64}
  967. </div>
  968. {/block:PostNotes}{/block:NoteCount}
  969. {/block:Date}{/block:PermalinkPage}
  970.  
  971. </article>
  972. {/block:Posts}
  973.  
  974. <!--end of posts container-->
  975.  
  976. </section>
  977.  
  978. <!--pagination-->
  979.  
  980. {block:Pagination}
  981. <div id="page-navigation">
  982. {block:PreviousPage}<a href="{PreviousPage}" title="back"><i data-feather="chevron-left"></i></a>{/block:PreviousPage}
  983. {block:NextPage}<a href="{NextPage}" title="forth"><i data-feather="chevron-right"></i></a>{/block:NextPage}
  984. </div>
  985. {/block:Pagination}
  986.  
  987. <!--end of main container-->
  988.  
  989. </main>
  990.  
  991. <!--scroll to top button-->
  992.  
  993. <a href="#" title="back to top" id="scrollup"><i data-feather="arrow-up"></i></a>
  994.  
  995. <!--theme credit-->
  996.  
  997. <a href="https://mercurythms.tumblr.com" title="mercurythms" id="credit">m.</a>
  998.  
  999. <script>
  1000.  
  1001. //time ago
  1002. $(".time-ago").timeAgo({
  1003. time: "short",
  1004. spaces: true,
  1005. words: false,
  1006. suffix: "ago"
  1007. });
  1008.  
  1009. //show tags
  1010. $(".tag-icon").click(function(){
  1011. $(this).parents(".posts").find(".tags").slideToggle(300);
  1012. });
  1013.  
  1014. //feather icons
  1015. feather.replace()
  1016.  
  1017. // tooltips
  1018. tippy('[title]', {
  1019. theme: 'custom',
  1020. arrow: false,
  1021. followCursor: true,
  1022. delay: 100,
  1023. placement: 'top',
  1024. zIndex: 9999999999,
  1025. maxWidth: 150,
  1026.  
  1027. content(reference) {
  1028. const title = reference.getAttribute('title');
  1029. reference.removeAttribute('title');
  1030. return title;
  1031. },
  1032. });
  1033.  
  1034. // photoset fix
  1035. initPhotosets();
  1036.  
  1037. // responsive video
  1038. $(document).ready(function() {
  1039. flexibleFrames($(".video")); // $(".video") is the class selector passed in the argument
  1040. });
  1041.  
  1042. //notecount shortener
  1043. var $container = $('.info-left');
  1044. $container.find('.notecount').each(function(){
  1045. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1046. if (n > 999) {
  1047. n = Math.floor(n / 100) / 10;
  1048. $(this).text(n + 'k notes');
  1049. }
  1050. });
  1051.  
  1052. // fade effect
  1053. $(function() {
  1054. $('body').removeClass('fade-out');
  1055. });
  1056.  
  1057. //remove redirects
  1058. function noHrefLi(){
  1059. var linkSet = document.querySelectorAll('a[href*="href.li/?"]');
  1060. Array.prototype.forEach.call(linkSet,function(el,i){
  1061. var theLink = linkSet[i].getAttribute('href').split("href.li/?")[1];
  1062. linkSet[i].setAttribute("href",theLink);
  1063. });
  1064. }
  1065. noHrefLi();
  1066.  
  1067.  
  1068. // audio player
  1069. $(document).ready(function() {
  1070. var $audio = $('iframe.tumblr_audio_player');
  1071. $audio.load(function() {
  1072. $(this).contents().find('head').append('<style type="text/css">' +
  1073. '.audio-player { background: {color:background}; color: {color:text} !important; }' +
  1074. '.audio-player .audio-info .track-artist { color: {color:text} !important; }' +
  1075. '</style>');
  1076. });
  1077. });
  1078.  
  1079. // minimal soundcloud player © shythemes.tumblr
  1080. $(document).ready(function(){
  1081. var color = '#eee'; // color of play button (hex)
  1082. $('.soundcloud_audio_player').each(function(){
  1083. $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=false&amp;origin=tumblr&amp;color=' + color.split('#')[1], height: 116, width: '100%' });
  1084. });
  1085. });
  1086.  
  1087. </script>
  1088.  
  1089. </body>
  1090. </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!