API tools faq
paste
Advertisement
mercurythms

io (theme)

mercurythms
Oct 10th, 2021 (edited)
3,571
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 29.17 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.  
  4. io :: @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.  
  23. <!--variables and options-->
  24.  
  25. <meta name="image:sidebar" content=""/>
  26.  
  27. <meta name="color:background" content="#ffffff"/>
  28. <meta name="color:sidebar background" content="#f8f8f9"/>
  29. <meta name="color:text" content="#444444"/>
  30. <meta name="color:link" content="#666666"/>
  31. <meta name="color:link hover" content="#babcca"/>
  32. <meta name="color:accent" content="#b1b3c3"/>
  33. <meta name="color:pagination" content="#dcdde4"/>
  34. <meta name="color:borders" content="#dddde6"/>
  35.  
  36. <meta name="select:post width" content="400px" title="400px"/>
  37. <meta name="select:post width" content="500px" title="500px"/>
  38. <meta name="select:post width" content="540px" title="540px"/>
  39.  
  40. <meta name="select:sidebar width" content="50%" title="50%"/>
  41. <meta name="select:sidebar width" content="40%" title="40%"/>
  42. <meta name="select:sidebar width" content="33%" title="33%"/>
  43.  
  44. <meta name="if:show date" content="1"/>
  45. <meta name="if:hide tags" content="1"/>
  46. <meta name="if:search bar" content="1"/>
  47.  
  48. <meta name="text:font" content="Work Sans"/>
  49. <meta name="text:title font" content="Playfair Display"/>
  50. <meta name="text:font size" content="13"/>
  51. <meta name="text:post margin" content="150"/>
  52. <meta name="text:icon size" content="80"/>
  53.  
  54. <meta name="text:home title" content="home"/>
  55. <meta name="text:home icon" content="home"/>
  56. <meta name="text:ask title" content="ask"/>
  57. <meta name="text:ask icon" content="mail"/>
  58. <meta name="text:archive title" content="past"/>
  59. <meta name="text:archive icon" content="clock"/>
  60. <meta name="text:link 1 url" content="/"/>
  61. <meta name="text:link 1 title" content="link 1"/>
  62. <meta name="text:link 1 icon" content="sun"/>
  63. <meta name="text:link 2 url" content="/"/>
  64. <meta name="text:link 2 title" content="link 2"/>
  65. <meta name="text:link 2 icon" content="moon"/>
  66. <meta name="text:link 3 url" content="/"/>
  67. <meta name="text:link 3 title" content="link 3"/>
  68. <meta name="text:link 3 icon" content="lightning"/>
  69.  
  70. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  71. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  72. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  73.  
  74. <!--google font-->
  75. <link rel="preconnect" href="https://fonts.gstatic.com">
  76. <link href="https://fonts.googleapis.com/css2?family={text:font}:wght@400;600;800&display=swap" rel="stylesheet">
  77. <link href="https://fonts.googleapis.com/css2?family={text:title font}:wght@400;600;800&display=swap" rel="stylesheet">
  78.  
  79. <!--icons-->
  80. <script src="//glenthemes.github.io/system-uicons/init-icons.js"></script>
  81. <link href="//glenthemes.github.io/system-uicons/style.css" rel="stylesheet">
  82.  
  83. <!--music player icons-->
  84. <script src="https://unpkg.com/feather-icons"></script>
  85.  
  86. <!--responsive video-->
  87. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  88.  
  89. <!--photoset fix-->
  90. <link href="https://static.tumblr.com/0podkko/xIbplezmo/modified_photosets.css" rel="stylesheet">
  91. <script src="https://static.tumblr.com/0podkko/jfMplm3f8/modified_photosets.js"></script>
  92.  
  93. <!--mobile photoset fix-->
  94. <!--
  95. NPF images fix v3.0 by @glenthemes [2021]
  96. 💌 git.io/JRBt7
  97. --->
  98. <script src="//npf-images-v3.github.io/script.js"></script>
  99. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  100. <style tmblr-npf>
  101. :root {
  102. --NPF-Caption-Spacing:1em;
  103. --NPF-Image-Spacing:1px;
  104. }
  105. </style>
  106.  
  107. <!--tooltips-->
  108. <script src="https://unpkg.com/popper.js@1"></script>
  109. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  110. <link
  111. rel="stylesheet"
  112. href="https://unpkg.com/tippy.js@5/animations/scale.css"
  113. />
  114.  
  115. <!--custom audio player-->
  116. <script src="https://cdn.jsdelivr.net/gh/annasthms/customaudio@latest/customaudio.min.js"></script>
  117.  
  118. <!--smooth scroll-->
  119. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" integrity="sha512-HaoDYc3PGduguBWOSToNc0AWGHBi2Y432Ssp3wNIdlOzrunCtB2qq6FrhtPbo+PlbvRbyi86dr5VQx61eg/daQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  120.  
  121. <!--css-->
  122.  
  123. <style type="text/css">
  124.  
  125. /*tumblr controls*/
  126.  
  127. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  128. z-index: 999999!important;
  129. margin-right: 3em;
  130. margin-top: 10px;
  131. opacity: 0;
  132. visibility: hidden;
  133. transform: scale(0.7);
  134. transform-origin: 100% 0;
  135. -webkit-transform: scale(0.7);
  136. -webkit-transform-origin: 100% 0;
  137. -o-transform: scale(0.7);
  138. -o-transform-origin: 100% 0;
  139. -moz-transform: scale(0.7);
  140. -moz-transform-origin: 100% 0;
  141. -ms-transform: scale(0.7);
  142. -ms-transform-origin: 100% 0;
  143. -webkit-transition: all 0.5s;
  144. -moz-transition: all 0.5s;
  145. -ms-transition: all 0.5s;
  146. -o-transition: all 0.5s;
  147. transition: all 0.5s;
  148. }
  149.  
  150. body.controls-click .tmblr-iframe {
  151. position: fixed;
  152. opacity: 0.6;
  153. visibility: visible;
  154. -webkit-transition: all 0.5s;
  155. -moz-transition: all 0.5s;
  156. -ms-transition: all 0.5s;
  157. -o-transition: all 0.5s;
  158. transition: all 0.5s;
  159. }
  160.  
  161. .tmblr-iframe--app-cta-button {
  162. display: none!important;
  163. }
  164.  
  165. #controls {
  166. position: fixed;
  167. top: 15px;
  168. right: 15px;
  169. padding: 0 5px;
  170. border-radius: 5px;
  171. z-index: 999999;
  172. }
  173.  
  174. /*scrollbar*/
  175.  
  176. ::-webkit-scrollbar{
  177. height:11px;
  178. width:11px;
  179. background:inherit;
  180. }
  181.  
  182. ::-webkit-scrollbar-thumb {background:{color:accent};}
  183.  
  184. ::-webkit-scrollbar-track {background:{color:borders};}
  185.  
  186. ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {border:5px solid {color:background};}
  187.  
  188. /*tooltips*/
  189.  
  190. .tippy-tooltip.custom-theme {
  191. margin: -5px 0;
  192. text-align: center;
  193. letter-spacing: 1px;
  194. text-transform:lowercase;
  195. color: white;
  196. border: 0;
  197. border-radius: 5px;
  198. }
  199.  
  200. /*basic styling*/
  201.  
  202. body {
  203. font-family: {text:font};
  204. font-size: {text:font size}px;
  205. line-height: 180%;
  206. word-wrap: break-word;
  207. letter-spacing: 0.5px;
  208. color: {color:text};
  209. background: {color:background};
  210. margin: 0;
  211. padding: 0;
  212. transition: 1s opacity;
  213. }
  214.  
  215. body.fade-out {
  216. opacity: 0;
  217. transition: none;
  218. }
  219.  
  220. a {
  221. color: {color:link};
  222. text-decoration: none;
  223. transition: 300ms !important;
  224. }
  225.  
  226. a:hover {
  227. color: {color:link hover}!important;
  228. transition: 300ms !important;
  229. }
  230.  
  231. blockquote {
  232. padding: 0 0 0 1.5em;
  233. border-left: 1px solid {color:borders};
  234. margin: 1.5em 0 1.5em 1.5em;
  235. }
  236.  
  237. h1, h2, h3, h4, h5, .title a {
  238. color: {color:accent};
  239. font-family: {text:title font};
  240. font-size: 1.1em;
  241. letter-spacing: 1.5px;
  242. font-weight: bold;
  243. text-transform: uppercase;
  244. }
  245.  
  246. small {font-size: 1em;}
  247. big {font-size: 1em;}
  248.  
  249. b {font-weight: 600;}
  250.  
  251. hr {
  252. height: 1px;
  253. border: none;
  254. box-shadow: none;
  255. background-color: {color:borders};
  256. }
  257.  
  258. pre {
  259. line-height: inherit;
  260. font-size: inherit;
  261. white-space: pre-wrap;
  262. white-space: -moz-pre-wrap;
  263. white-space: -pre-wrap;
  264. white-space: -o-pre-wrap;
  265. word-wrap: break-word;
  266. }
  267.  
  268. .system-uicons {
  269. --System-UIcons-Color:{color:link};
  270. --System-UIcons-Size:1.4em;
  271. transition: 300ms!important;
  272. cursor:pointer;
  273. }
  274.  
  275. .system-uicons:hover {
  276. --System-UIcons-Color:{color:link hover};
  277. transition: 300ms!important;
  278. }
  279.  
  280.  
  281. /*layout*/
  282.  
  283. main {
  284. display: flex;
  285. margin: auto;
  286. }
  287.  
  288. .container {flex: auto; min-height: 100vh;}
  289. .container:first-of-type {
  290. background: {color:sidebar background};
  291. width: {select:sidebar width};
  292. }
  293. .container:last-of-type {width: calc(100% - {select:sidebar width});}
  294.  
  295. /*sidebar*/
  296.  
  297. #sidebar {
  298. display: flex;
  299. flex-direction: column;
  300. justify-content: center;
  301. align-items: center;
  302. position: fixed;
  303. width: {select:sidebar width};
  304. height: 100%;
  305. text-align: center;
  306. border-right: 1px solid {color:borders}
  307. }
  308.  
  309. {block:ifSidebarImage}
  310. #side-img {
  311. width: {text:icon size}px;
  312. height: {text:icon size}px;
  313. margin: 0 auto 1.5em auto;
  314. border-radius: 100%;
  315. }
  316. {/block:ifSidebarImage}
  317.  
  318. #sidebar .title, #description, nav {width: 215px;}
  319.  
  320. #description, nav {margin: 1em auto 0 auto;}
  321.  
  322. nav {
  323. display: flex;
  324. justify-content: space-around;
  325. align-items: center;
  326. }
  327.  
  328. .sfm {
  329. display:flex;
  330. justify-content: space-between;
  331. align-items:center;
  332. width: 160px;
  333. margin: 2em auto 0 auto;
  334. padding: 0.2em 0;
  335. border-bottom: 1px solid {color:borders};
  336. }
  337.  
  338. .sfm input {
  339. width:140px;
  340. background: {color:sidebar background};
  341. border:0;
  342. outline:0;
  343. font-family: {text:font};
  344. letter-spacing: 1px;
  345. text-transform: lowercase;
  346. }
  347.  
  348. /*posts*/
  349.  
  350. article {
  351. position: relative;
  352. margin: {text:post margin}px auto;
  353. width: {select:post width};
  354. }
  355.  
  356. .posts li, .posts blockquote, figure, video, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption iframe {max-width: 100%;}
  357.  
  358. /*captions*/
  359.  
  360. .caption {margin-top: 2em; list-style-type: none;}
  361. .caption p {margin:0.5em 0;}
  362. .text-caption:first-of-type {margin-top: 0;}
  363. .caption img {min-width:100%;}
  364.  
  365. .username, .ask-wrap .asking {
  366. display: inline-block;
  367. vertical-align: middle;
  368. font-weight: 600;
  369. text-transform: lowercase;
  370. }
  371.  
  372. .username a, .ask-wrap .asking a {
  373. color: {color:text};
  374. }
  375.  
  376. .username:after {
  377. content: "";
  378. display: block;
  379. margin-top:-10px;
  380. height: 5px;
  381. background-color: {color:borders};
  382. }
  383.  
  384. p.tmblr-attribution {display: none;}
  385.  
  386. /*----- TEXT -----*/
  387.  
  388. h1.post-title {margin-top: 0;}
  389.  
  390. /*links*/
  391.  
  392. a.link-wrap {
  393. color: {color:accent};
  394. font-family: {text:title font};
  395. font-size: 1.1em;
  396. letter-spacing: 1.5px;
  397. font-weight: bold;
  398. text-transform: uppercase;
  399. }
  400.  
  401. .npf-link-block {
  402. margin-top: 1.5em;
  403. background-color: inherit;
  404. border: 1px solid inherit;
  405. color: inherit;
  406. }
  407.  
  408. /*photos*/
  409.  
  410. img {
  411. display: block;
  412. margin: 0;
  413. height: auto;
  414. max-width: 100%;
  415. }
  416.  
  417. .photo img {width: 100%;}
  418. .vignette, #vignette {opacity: 0;}
  419. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  420.  
  421. .lightbox-image, #tumblr_lightbox img {
  422. box-shadow: none !important;
  423. border-radius: 0 !important;
  424. max-width: none;
  425. }
  426.  
  427. #tumblr_lightbox_caption, .lightbox-caption {
  428. margin-top: 1em !important;
  429. color: #fff !important;
  430. font-family: inherit;
  431. }
  432.  
  433. /*photoset*/
  434.  
  435. [photoset-layout] {grid-gap: 1px;}
  436. [photoset-layout] div {cursor: pointer;}
  437.  
  438. /*quote*/
  439.  
  440. .quote {
  441. color: {color:accent};
  442. font-family: {text:title font};
  443. font-size: 1.1em;
  444. letter-spacing: 1.5px;
  445. font-weight: bold;
  446. text-transform: uppercase;
  447. }
  448.  
  449. .quote p:first-of-type {margin-top: 0;}
  450. .quote p:last-of-type {margin-bottom: 0;}
  451.  
  452. .source {margin-top: 1em;}
  453.  
  454. /*chat*/
  455.  
  456. .chat {padding: 0; margin: 0;}
  457. .chat li {list-style-type: none; margin-top: 1em;}
  458. .chat li:first-of-type {margin-top: 0;}
  459. .chatter {
  460. font-weight: 600;
  461. }
  462.  
  463. p.npf_chat, p.npf_chat b {font-family: inherit;}
  464.  
  465. /*asks*/
  466.  
  467. .ask-wrap {border: 1px solid {color:borders}; padding: 1.5em; background: {color:sidebar background};}
  468.  
  469. .question {margin-top: 0.5em;}
  470. .question p:first-of-type {margin-top: 0;}
  471. .question p:last-of-type {margin-bottom: 0;}
  472.  
  473. /*audio*/
  474.  
  475. .audio-post {
  476. display: flex;
  477. align-items: center;
  478. width: 100%;
  479. height: 100px;
  480. background: {color:sidebar background};
  481. border: 1px solid {color:borders};
  482. }
  483.  
  484. .album-art {
  485. vertical-align: middle;
  486. width: 100px;
  487. height: 100px;
  488. }
  489.  
  490. .custom_audio_wrapper {
  491. display: flex;
  492. flex-direction: column;
  493. flex-grow: 1;
  494. margin: 0 2em;
  495. }
  496.  
  497. .play {
  498. display: flex;
  499. justify-content: space-between;
  500. align-items: center;
  501. }
  502.  
  503. .custom_audio_buttons {
  504. height: 2em;
  505. }
  506. .custom_audio_buttons svg {
  507. width: 2em;
  508. height: 2em;
  509. stroke-width:1.5;
  510. color: {color:text};
  511. cursor: pointer;
  512. }
  513. .custom_audio_error_icon svg {
  514. stroke: #dc143c;
  515. }
  516.  
  517. .custom_audio_seekbar {height: 0;}
  518.  
  519. .audio_info {
  520. text-align: right;
  521. line-height: 160%;
  522. }
  523.  
  524. .audio_info p {margin: 0;}
  525.  
  526. .track {
  527. font-family: {text:title font};
  528. font-size: 1.1em;
  529. font-weight: 600;
  530. letter-spacing: 1.5px;
  531. text-transform: uppercase;
  532. }
  533.  
  534. .spotify_audio_player {max-height: 80px;}
  535.  
  536. .soundcloud_audio_player {max-height: 116px; margin-top: 1em;}
  537.  
  538. /*post info*/
  539.  
  540. .info {
  541. display: flex;
  542. justify-content: space-between;
  543. align-items: center;
  544. width: 100%;
  545. margin-top: 2em;
  546. }
  547.  
  548. .info hr {
  549. flex-grow: 1;
  550. height: 1px;
  551. margin: 0 1em;
  552. background: {color:borders};
  553. }
  554.  
  555. .info-left a {
  556. display: inline-block;
  557. font-size: 1.1em;
  558. letter-spacing: 1px;
  559. font-weight:600;
  560. text-transform:lowercase;
  561. }
  562.  
  563. .info-right {
  564. display: flex;
  565. align-items: center;
  566. }
  567. .info-right a {margin-left: 1em;}
  568. .info-right a:first-of-type {margin-left: 0.5em;}
  569.  
  570. .like {position:relative;}
  571.  
  572. .like .like_button {
  573. position:absolute;
  574. top:0;
  575. left:0;
  576. right:0;
  577. bottom:0;
  578. width:100%;
  579. height:100%;
  580. opacity:0;
  581. }
  582.  
  583. .like .like_button iframe {width: 100%!important; height: 100%!important;}
  584.  
  585. .like .like_button.liked + .system-uicons path {--System-UIcons-Color:#dc143c!important;}
  586.  
  587. .tags {
  588. margin: 0.5em 1em 0 1em;
  589. {block:ifhidetags}display: none;{/block:ifhidetags}
  590. }
  591. .tags a {margin-right: 1em;}
  592.  
  593. a.pinned-post {margin-right: 1em;}
  594.  
  595. .pinned-post .system-uicons {
  596. padding:2px;
  597. background: {color:pagination};
  598. --System-UIcons-Color: white;
  599. border-radius:50%;
  600. }
  601.  
  602. /*post notes*/
  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 {display:none;}
  613.  
  614. /*pagination*/
  615.  
  616. #page-navigation {
  617. position:fixed;
  618. display:flex;
  619. flex-direction:column;
  620. top:50%;
  621. z-index:3;
  622. left:calc({select:sidebar width} - 15px)!important;
  623. transform: translateY(-50%);
  624. }
  625.  
  626. #page-navigation a {margin:1em 0;}
  627.  
  628. #page-navigation .system-uicons {
  629. padding:2px;
  630. background: {color:pagination};
  631. --System-UIcons-Color: white;
  632. --System-UIcons-Size:2em;
  633. border-radius:50%;
  634. }
  635.  
  636. #mobile-pagination {
  637. display:none;
  638. }
  639.  
  640. /*credit*/
  641.  
  642. #credit {
  643. position: fixed;
  644. bottom: 15px;
  645. right: 15px;
  646. font-size: 1.2em;
  647. padding: 0 5px;
  648. border-radius: 5px;
  649. color: {color:accent};
  650. z-index:999999;
  651. }
  652.  
  653. /*responsiveness*/
  654.  
  655. @media only screen and (max-width: 1100px) {
  656.  
  657. main {flex-direction: column;}
  658.  
  659. .container:first-of-type {width:100%; border-bottom: 1px solid {color:borders};}
  660. .container:last-of-type {width:100%;}
  661.  
  662. article {margin: {text:post margin}px auto;}
  663.  
  664. #sidebar {
  665. position: static;
  666. width: {select:post width};
  667. min-height: 100vh;
  668. top: auto;
  669. margin: auto;
  670. padding: 0;
  671. transform: translate(0, 0);
  672. text-align: center;
  673. border-right: 0;
  674. }
  675.  
  676. #page-navigation {display: none;}
  677.  
  678. #mobile-pagination {
  679. display: flex;
  680. justify-content: center;
  681. align-items: center;
  682. }
  683.  
  684. #mobile-pagination a {
  685. margin: 0 3em;
  686. vertical-align: middle;
  687. }
  688.  
  689. #mobile-pagination .system-uicons {
  690. padding:2px;
  691. background: {color:pagination};
  692. --System-UIcons-Color: white;
  693. --System-UIcons-Size:2em;
  694. border-radius:50%;
  695. }
  696.  
  697. }
  698.  
  699. @media only screen and (max-width: 720px) {
  700.  
  701. #sidebar, article {width: 75vw;}
  702.  
  703. #controls {display: none;}
  704. }
  705.  
  706. {CustomCSS}
  707.  
  708. </style>
  709. </head>
  710.  
  711. <!--html-->
  712.  
  713. <body>
  714.  
  715. <script>document.body.className += ' fade-out';</script>
  716.  
  717. <div id="controls"><i class="system-uicons" icon-name="menu vertical" title="click for controls"></i></div>
  718.  
  719. <!-- main = main container -->
  720.  
  721. <main>
  722.  
  723. <!--sidebar-->
  724.  
  725. <div class="container">
  726.  
  727. <aside id="sidebar">
  728. {block:ifSidebarImage}<img src="{image:Sidebar}" id="side-img" alt="sidebar image"/></a>{/block:ifSidebarImage}
  729. <div class="title"><a href="/">{Title}</a></div>
  730. {block:Description}<div id="description">{Description}</div>{/block:Description}
  731. <nav>
  732. {block:ifHomeTitle}<a href="/" title="{text:home title}"><i class="system-uicons" icon-name="{text:home icon}"></i></a>{/block:ifHomeLink}
  733. {block:ifAskTitle}<a href="/ask" title="{text:ask title}"><i class="system-uicons" icon-name="{text:ask icon}"></i></a>{/block:ifAskTitle}
  734. {block:ifArchiveTitle}<a href="/archive" title="{text:archive title}"><i class="system-uicons" icon-name="{text:archive icon}"></i>
  735. </a>{/block:ifArchiveLink}
  736. {block:ifLink1Title}<a href="{text:link 1 url}" title="{text:link 1 title}"><i class="system-uicons" icon-name="{text:link 1 icon}"></i>
  737. </a>{/block:ifLink1Title}
  738. {block:ifLink2Title}<a href="{text:link 2 url}" title="{text:link 2 title}"><i class="system-uicons" icon-name="{text:link 2 icon}"></i></a>{/block:ifLink2Title}
  739. {block:ifLink3Title}<a href="{text:link 3 url}" title="{text:link 3 title}"><i class="system-uicons" icon-name="{text:link 3 icon}"></i></a>{/block:ifLink3Title}
  740. </nav>
  741. {block:ifsearchbar}
  742. <form action="/search" method="get" class="sfm">
  743. <input type="text" name="q" placeholder="search..." value="{SearchQuery}" value autocomplete="off"/>
  744. <i class="system-uicons" icon-name="search"></i>
  745.  
  746. </form>
  747. {/block:ifsearchbar}
  748. </aside>
  749.  
  750. </div>
  751.  
  752. <!-- post container -->
  753.  
  754. <div class="container">
  755.  
  756. {block:TagPage}
  757. <article>
  758. <h1>Viewing posts filed under #{Tag}</h1>
  759. </article>
  760. {/block:TagPage}
  761.  
  762. {block:DayPage}
  763. <article>
  764. <h1>Viewing posts made on {Month} {DayOfMonth}, {Year}</h1>
  765. </article>
  766. {/block:DayPage}
  767.  
  768. <!--posts-->
  769.  
  770. {block:Posts}
  771. <article class="posts" id="{PostID}">
  772.  
  773. {block:Text}
  774. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  775. {block:NotReblog}
  776. <li class="caption text-caption">
  777. {Body}
  778. </li>
  779. {/block:NotReblog}
  780. {block:RebloggedFrom}
  781. {block:Reblogs}
  782. <li class="caption text-caption source-head">
  783. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  784. {Body}
  785. </li>
  786. {/block:Reblogs}
  787. {/block:RebloggedFrom}
  788. {/block:Text}
  789.  
  790. {block:Link}
  791. <a href="{URL}" class="link-wrap">
  792. <div class="title">{Name}</div>
  793. </a>
  794. {block:Description}
  795. {block:NotReblog}
  796. <li class="caption">
  797. {Description}
  798. </li>
  799. {/block:NotReblog}
  800. {/block:Description}
  801. {block:RebloggedFrom}
  802. {block:Reblogs}
  803. <li class="caption">
  804.  
  805. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  806. {Body}
  807. </li>
  808. {/block:Reblogs}
  809. {/block:RebloggedFrom}
  810. {/block:Link}
  811.  
  812. {block:Photo}
  813. <div class="photo">
  814. {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}
  815. </div>
  816. {block:Caption}
  817. {block:NotReblog}
  818. <li class="caption">
  819. {Caption}
  820. </li>
  821. {/block:NotReblog}
  822. {block:RebloggedFrom}
  823. {block:Reblogs}
  824. <li class="caption">
  825.  
  826. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  827. {Body}
  828. </li>
  829. {/block:Reblogs}
  830. {/block:RebloggedFrom}
  831. {/block:Caption}
  832. {/block:Photo}
  833.  
  834. {block:Photoset}
  835. <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>
  836. {block:Caption}
  837. {block:NotReblog}
  838. <li class="caption">
  839. {Caption}
  840. </li>
  841. {/block:NotReblog}
  842. {block:RebloggedFrom}
  843. {block:Reblogs}
  844. <li class="caption">
  845.  
  846. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  847. {Body}
  848. </li>
  849. {/block:Reblogs}
  850. {/block:RebloggedFrom}
  851. {/block:Caption}
  852. {/block:Photoset}
  853.  
  854. {block:Video}
  855. <div class="video">{Video-500}</div>
  856. {block:Caption}
  857. {block:NotReblog}
  858. <li class="caption">
  859. {Caption}
  860. </li>
  861. {/block:NotReblog}
  862. {block:RebloggedFrom}
  863. {block:Reblogs}
  864. <li class="caption">
  865.  
  866. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  867. {Body}
  868. </li>
  869. {/block:Reblogs}
  870. {/block:RebloggedFrom}
  871. {/block:Caption}
  872. {/block:Video}
  873.  
  874. {block:Quote}
  875. <div class="quote">{Quote}</div>
  876. {block:Source}<div class="source">{Source}</div>{/block:Source}
  877. {/block:Quote}
  878.  
  879. {block:Chat}
  880. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  881. <ul class="chat">{block:Lines}
  882. <li>
  883. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  884. {Line}
  885. </li>
  886. {/block:Lines}</ul>
  887. {/block:Chat}
  888.  
  889. {block:Answer}
  890. <div class="ask-wrap">
  891. <div class="asking">{Asker} asked</div>
  892. <div class="question">{Question}</div>
  893. </div>
  894. {block:Answerer}
  895. <li class="caption">
  896. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  897. {Answer}
  898. </li>
  899. {/block:Answerer}
  900. {block:NotReblog}
  901. <li class="caption">
  902. {Replies}
  903. </li>
  904. {/block:NotReblog}
  905. {block:RebloggedFrom}
  906. {block:Reblogs}
  907. <li class="caption">
  908.  
  909. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  910. {Body}
  911. </li>
  912. {/block:Reblogs}
  913. {/block:RebloggedFrom}
  914. {/block:Answer}
  915.  
  916. {block:Audio}
  917. {block:AudioPlayer}
  918. {AudioPlayer}
  919. <div class="audio-post">
  920. <div class="custom_audio_wrapper">
  921. <div class="play">
  922. <div class="custom_audio_buttons"></div>
  923. <div class="audio_info">
  924. {block:TrackName}<p><div class="track">{TrackName}</div></p>{/block:TrackName}
  925. {block:ifnotTrackName}<p>Listen</p>{/block:ifnotTrackName}
  926. {block:Artist}<p>{Artist}</p>{/block:Artist}
  927. </div>
  928. </div>
  929. <div class="custom_audio_seekbar"></div>
  930. </div>
  931. {block:AlbumArt}
  932. <img src="{AlbumArtURL}" class="album-art">
  933. {/block:AlbumArt}
  934. </div>
  935. {/block:AudioPlayer}
  936. {block:Caption}
  937. {block:NotReblog}
  938. <li class="caption">
  939. {Caption}
  940. </li>
  941. {/block:NotReblog}
  942. {block:RebloggedFrom}
  943. {block:Reblogs}
  944. <li class="caption">
  945.  
  946. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  947. {Body}
  948. </li>
  949. {/block:Reblogs}
  950. {/block:RebloggedFrom}
  951. {/block:Caption}
  952. {/block:Audio}
  953.  
  954. <!--bottom info-->
  955.  
  956. {block:Date}
  957. <div class="info">
  958. <div class="info-left">
  959. {block:PinnedPostLabel}<a href="{Permalink}" class="pinned-post"><i class="system-uicons" icon-name="bookmark"></i></a>{/block:PinnedPostLabel}
  960. {block:ifshowdate}<a href="{Permalink}" title="{NoteCountWithLabel}">{ShortMonth} {DayOfMonth}</a>{/block:ifshowdate}
  961. {block:ifnotshowdate}<a href="{Permalink}" title="posted on {ShortMonth} {DayOfMonth}"><div class="notecount">{NoteCountWithLabel}</div></a>{/block:ifnotshowdate}
  962. </div><hr>
  963.  
  964. <!-- reblog and tag buttons -->
  965.  
  966. <div class="info-right">
  967. <a href="{ReblogURL}" target="_blank" title="reblog"><i class="system-uicons" icon-name="swap"></i></a>
  968. <a class="like" title="like">{LikeButton}<i class="system-uicons" icon-name="heart"></i></a>
  969. {block:ifhidetags}<a class="tag-icon" title="show tags"><i class="system-uicons" icon-name="hash"></i></a>{/block:ifhidetags}
  970. </div>
  971. </div>
  972. {/block:Date}
  973.  
  974. <!--tags-->
  975.  
  976. {block:HasTags}
  977. <div class="tags">
  978. {block:Tags}<a href="{TagURL}"># {Tag}</a>{/block:Tags}
  979. </div>
  980. {/block:HasTags}
  981.  
  982. <!--post divider-->
  983.  
  984. </article>
  985. <hr>
  986.  
  987. <!--post notes-->
  988.  
  989. {block:PermalinkPage}{block:Date}
  990. {block:NoteCount}{block:PostNotes}
  991. <article class="notes">
  992. {PostNotes-64}
  993. </article>
  994. <hr>
  995. {/block:PostNotes}{/block:NoteCount}
  996. {/block:Date}{/block:PermalinkPage}
  997.  
  998. {/block:Posts}
  999.  
  1000. <!-- end of posts container -->
  1001.  
  1002. <!--pagination-->
  1003.  
  1004. {block:Pagination}
  1005. <div id="page-navigation">
  1006. <a href="{block:NextPage}{NextPage}{/block:NextPage}" title="next"><i class="system-uicons" icon-name="chevron right"></i></a>
  1007. <a href="{block:PreviousPage}{PreviousPage}{/block:PreviousPage}" title="back"><i class="system-uicons" icon-name="chevron left"></i></a>
  1008. <a href="#" title="back to top"><i class="system-uicons" icon-name="chevron up"></i></a></div>
  1009.  
  1010. <article id="mobile-pagination">
  1011. <a href="{block:PreviousPage}{PreviousPage}{/block:PreviousPage}" title="back"><i class="system-uicons" icon-name="chevron left"></i></a>
  1012. <a href="{block:NextPage}{NextPage}{/block:NextPage}" title="next"><i class="system-uicons" icon-name="chevron right"></i></a>
  1013. <a href="#" title="back to top"><i class="system-uicons" icon-name="chevron up"></i></a>
  1014. </article>
  1015.  
  1016. {/block:Pagination}
  1017.  
  1018. <a href="https://mercurythms.tumblr.com" title="mercurythms" id="credit">m.</a>
  1019.  
  1020. <!-- end of main container -->
  1021. </main>
  1022.  
  1023. <script>
  1024.  
  1025. //show controls
  1026. $(document).ready(function(){
  1027. $('#controls').click(function(){
  1028. $('body').toggleClass('controls-click');
  1029. });
  1030. });
  1031.  
  1032. //show tags
  1033. {block:ifhidetags}
  1034. $(document).ready(function(){
  1035. $(".tag-icon").click(function(){
  1036. $(this).parents("article").find(".tags").slideToggle(300);
  1037. });
  1038. });
  1039. {/block:ifhidetags}
  1040.  
  1041. // tooltips
  1042. tippy('[title]', {
  1043. theme: 'custom',
  1044. arrow: false,
  1045. followCursor: false,
  1046. delay: 100,
  1047. placement: 'top',
  1048. zIndex: 9999999999,
  1049. maxWidth: 150,
  1050. animation: 'scale',
  1051.  
  1052. content(reference) {
  1053. const title = reference.getAttribute('title');
  1054. reference.removeAttribute('title');
  1055. return title;
  1056. },
  1057. });
  1058.  
  1059. // photoset fix
  1060. initPhotosets();
  1061.  
  1062. // fade effect
  1063. $(function() {
  1064. $('body').removeClass('fade-out');
  1065. });
  1066.  
  1067. // responsive video
  1068. $(document).ready(function() {
  1069. flexibleFrames($(".video")); // $(".video") is the class selector passed in the argument
  1070. });
  1071.  
  1072. //notecount shortener
  1073. var $container = $('.info-left');
  1074. $container.find('.notecount').each(function(){
  1075. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1076. if (n > 999) {
  1077. n = Math.floor(n / 100) / 10;
  1078. $(this).text(n + 'k notes');
  1079. }
  1080. });
  1081.  
  1082. //audio player
  1083. customAudio({
  1084. post: "article",
  1085. wrappers: {
  1086. audio: ".custom_audio_wrapper",
  1087. buttons: ".custom_audio_buttons",
  1088. duration: ".custom_audio_duration",
  1089. timeCurrent: ".custom_audio_current_time",
  1090. timeLeft: ".custom_audio_time_left",
  1091. seekbar: ".custom_audio_seekbar"
  1092. },
  1093. default: false,
  1094. pauseAll: true,
  1095. playButton: "<i data-feather='play-circle'></i>",
  1096. pauseButton: "<i data-feather='pause-circle'></i>",
  1097. errorIcon: "<i data-feather='x'></i>",
  1098. hideInfoIfError: true,
  1099. callAfterLoad: () => {
  1100. feather.replace();
  1101. }
  1102. }).create();
  1103.  
  1104. // minimal soundcloud player © shythemes.tumblr
  1105. $(document).ready(function(){
  1106. var color = '{color:accent}'; // color of play button (hex)
  1107. $('.soundcloud_audio_player').each(function(){
  1108. $(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%' });
  1109. });
  1110. });
  1111.  
  1112. //remove redirects
  1113. function noHrefLi(){
  1114. var linkSet = document.querySelectorAll('a[href*="href.li/?"]');
  1115. Array.prototype.forEach.call(linkSet,function(el,i){
  1116. var theLink = linkSet[i].getAttribute('href').split("href.li/?" )[1];
  1117. linkSet[i].setAttribute("href",theLink);
  1118. });
  1119. }
  1120. noHrefLi();
  1121.  
  1122. </script>
  1123.  
  1124. </body>
  1125. </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!