API tools faq
paste
Advertisement
mercurythms

capricorn (theme)

mercurythms
Oct 15th, 2022 (edited)
1,296
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 41.21 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. theme 03: capricorn // @freddie-mercurys
  4.  
  5. credits
  6. - base code - @seyche
  7. - icon fonts - https://phosphoricons.com
  8. - css photosets - @annasthms and @eggdesign
  9. - npf photoset fix - @glenthemes
  10. - custom audio player - @annasthms
  11. - dark mode button inspired by @22mm
  12. - tippy.js tooltips - atomiks
  13. - fade in effect - cory laviska
  14. - remove tumblr redirects - @magnusthemes
  15. - responsive iframes - @nouvae
  16. - custom like and reblog button inspired by @shythemes
  17. - notecount shortener - @shythemes
  18. - time ago plugin - @bychloethemes
  19.  
  20. please don't remove credit or take parts of this code :)
  21.  
  22. -->
  23.  
  24. <!DOCTYPE html>
  25. <html lang="en" data-theme="light">
  26. <head>
  27. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  28.  
  29. <link rel="shortcut icon" href="{Favicon}">
  30. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  31. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  32. <meta charset="utf-8">
  33. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  34.  
  35. <!--variables and options-->
  36.  
  37. <meta name="image:header" content=""/>
  38.  
  39. <meta name="color:background" content="#ffffff"/>
  40. <meta name="color:secondary background" content="#f6f6f6"/>
  41. <meta name="color:text" content="#333333"/>
  42. <meta name="color:link" content="#bbbbbb"/>
  43. <meta name="color:accent" content="#71d3d7"/>
  44. <meta name="color:borders" content="#eeeeee"/>
  45. <meta name="color:dark mode background" content="#212121"/>
  46. <meta name="color:dark mode secondary background" content="#333333"/>
  47. <meta name="color:dark mode text" content="#f6f6f6"/>
  48. <meta name="color:dark mode link" content="#cccccc"/>
  49. <meta name="color:dark mode accent" content="#71d3d7"/>
  50. <meta name="color:dark mode borders" content="#444444"/>
  51.  
  52. <meta name="select:post width" content="400px" title="400px"/>
  53. <meta name="select:post width" content="450px" title="450px"/>
  54. <meta name="select:post width" content="500px" title="500px"/>
  55. <meta name="select:post width" content="540px" title="540px"/>
  56.  
  57. <meta name="if:show post borders" content="1"/>
  58. <meta name="if:rounded corners" content="1"/>
  59. <meta name="if:show pop up description" content="1"/>
  60. <meta name="if:show pop up stats" content="1"/>
  61.  
  62. <meta name="text:title" content="blog title"/>
  63. <meta name="text:font" content="Inter"/>
  64. <meta name="text:font size" content="13"/>
  65. <meta name="text:post margin" content="150"/>
  66.  
  67. <meta name="text:home link" content="home"/>
  68. <meta name="text:ask link" content="contact"/>
  69. <meta name="text:archive link" content="archive"/>
  70. <meta name="text:popup link" content="more"/>
  71. <meta name="text:popup title" content="pop-up title"/>
  72. <meta name="text:popup description" content="Popup text goes here! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."/>
  73. <meta name="text:blog status" content="type your blog status here"/>
  74. <meta name="text:currently reading" content="type what you're reading here"/>
  75. <meta name="text:currently watching" content="type what you're watching here"/>
  76. <meta name="text:currently listening to" content="type what you're listening to here"/>
  77. <meta name="text:link 1 URL" content="/"/>
  78. <meta name="text:link 1" content="link 1"/>
  79. <meta name="text:link 2 URL" content="/"/>
  80. <meta name="text:link 2" content="link 2"/>
  81. <meta name="text:link 3 URL" content="/"/>
  82. <meta name="text:link 3" content="link 3"/>
  83. <meta name="text:link 4 URL" content="/"/>
  84. <meta name="text:link 4" content="link 4"/>
  85. <meta name="text:link 5 URL" content="/"/>
  86. <meta name="text:link 5" content="link 5"/>
  87. <meta name="text:link 6 URL" content="/"/>
  88. <meta name="text:link 6" content="link 6"/>
  89. <meta name="text:link 7 URL" content="/"/>
  90. <meta name="text:link 7" content="link 7"/>
  91. <meta name="text:link 8 URL" content="/"/>
  92. <meta name="text:link 8" content="link 8"/>
  93.  
  94. <!--jquery-->
  95. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  96. <!--google fonts-->
  97. <link rel="preconnect" href="https://fonts.gstatic.com">
  98. <link href="https://fonts.googleapis.com/css2?family={text:font}:wght@400;600&display=swap" rel="stylesheet">
  99. <!--icon fonts-->
  100. <script src="https://unpkg.com/phosphor-icons"></script>
  101. <!--tooltips-->
  102. <script src="https://unpkg.com/popper.js@1"></script>
  103. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  104. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/animations/perspective.css"/>
  105. <!--photoset fixes-->
  106. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  107. <!--
  108. NPF images fix v3.0 by @glenthemes [2021]
  109. 💌 git.io/JRBt7
  110. --->
  111. <script src="//npf-images-v3.github.io/script.js"></script>
  112. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  113. <style tmblr-npf>
  114. :root {
  115. --NPF-Caption-Spacing:2em;
  116. --NPF-Image-Spacing:1px;
  117. }
  118. </style>
  119. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  120. <!--time ago-->
  121. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  122. <!-- responsive iframes -->
  123. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  124. <!--custom audio player-->
  125. <script src="https://cdn.jsdelivr.net/gh/annasthms/customaudio@latest/customaudio.min.js"></script>
  126. <!--smooth scroll-->
  127. <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>
  128.  
  129. <script>const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  130. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme); </script>
  131.  
  132. <style type="text/css">
  133.  
  134. :root {
  135. --google-font: {text:font};
  136. --font-size: {text:font size}px;
  137. --post-width: {select:post width};
  138. --post-margin: {text:post margin}px;
  139. --caption-spacing: 2em;
  140. {block:ifroundedcorners}
  141. --rounded-corners: 10px;
  142. {/block:ifroundedcorners}
  143. {block:ifnotroundedcorners}
  144. --rounded-corners: 0em;
  145. {/block:ifnotroundedcorners}
  146. }
  147.  
  148. :root, html[data-theme='light'] {
  149. --LightOn: block;
  150. --LightOff: none;
  151. --background-color: {color:background};
  152. --secondary-color: {color:secondary background};
  153. --text-color: {color:text};
  154. --link-color: {color:link};
  155. --accent-color: {color:accent};
  156. --border-color: {color:borders};
  157. }
  158.  
  159. html[data-theme='dark'] {
  160. --LightOn: none;
  161. --LightOff: block;
  162. --background-color: {color:dark mode background};
  163. --secondary-color: {color:dark mode secondary background};
  164. --text-color: {color:dark mode text};
  165. --link-color: {color:dark mode link};
  166. --accent-color: {color:dark mode accent};
  167. --border-color: {color:dark mode borders};
  168. }
  169.  
  170. html.theme-transition,
  171. html.theme-transition *,
  172. html.theme-transition *:before,
  173. html.theme-transition *:after {
  174. transition: 0s !important;
  175. transition-delay: 0 !important;
  176. }
  177.  
  178. /*-- basic styling --*/
  179.  
  180. * {box-sizing: border-box;}
  181.  
  182. body {
  183. font-family: var(--google-font);
  184. font-size: var(--font-size);
  185. -webkit-font-smoothing: antialiased;
  186. color: var(--text-color);
  187. background-color: var(--background-color);
  188. line-height: 180%;
  189. word-wrap: break-word;
  190. letter-spacing: 0.2px;
  191. margin: 0;
  192. padding: 0;
  193. transition: 0.3s opacity;
  194. }
  195.  
  196. body.fade-out {
  197. opacity: 0;
  198. transition: none;
  199. }
  200.  
  201. a {
  202. color: var(--link-color);
  203. text-decoration: none;
  204. -webkit-transition: all 0.3s;
  205. -moz-transition: all 0.3s;
  206. -ms-transition: all 0.3s;
  207. -o-transition: all 0.3s;
  208. transition: all 0.3s;
  209. }
  210.  
  211. a:hover {
  212. color: var(--accent-color);
  213. -webkit-transition: all 0.3s;
  214. -moz-transition: all 0.3s;
  215. -ms-transition: all 0.3s;
  216. -o-transition: all 0.3s;
  217. transition: all 0.3s;
  218. }
  219.  
  220. blockquote {
  221. padding: 0 0 0 1.5em;
  222. border-left: 1px solid var(--border-color);
  223. margin: 1.5em 0 1.5em 1.5em;
  224. }
  225.  
  226. h1, h2, h3, h4, h5, .title {font-weight: 600;}
  227.  
  228. h1, .title {
  229. font-size: calc(var(--font-size) + 3px);
  230. letter-spacing: 0.5px;
  231. }
  232.  
  233. h2, h3, h4, h5 {font-size: var(--font-size);}
  234.  
  235. small, big {font-size: var(--font-size);}
  236.  
  237. hr {
  238. height: 1px;
  239. border: none;
  240. box-shadow: none;
  241. background-color: var(--border-color);
  242. }
  243.  
  244. pre {
  245. line-height: inherit;
  246. font-size: inherit;
  247. white-space: pre-wrap;
  248. white-space: -moz-pre-wrap;
  249. white-space: -pre-wrap;
  250. white-space: -o-pre-wrap;
  251. word-wrap: break-word;
  252. }
  253.  
  254. /*--scrollbar--*/
  255.  
  256. ::-webkit-scrollbar {
  257. width:17px;
  258. height:17px;
  259. background-color:var(--background-color);
  260. }
  261.  
  262. ::-webkit-scrollbar-track {
  263. border: 8px solid var(--background-color);
  264. background-color: var(--border-color);
  265. }
  266.  
  267. ::-webkit-scrollbar-thumb {
  268. border: 8px solid var(--background-color);
  269. background-color:var(--text-color);
  270. min-height:100px;
  271. min-width:100px;
  272. }
  273.  
  274. /*--tooltips--*/
  275.  
  276. .tippy-tooltip.custom-theme {
  277. background: transparent;
  278. color: var(--text-color);
  279. font-size: var(--font-size);
  280. text-transform: lowercase;
  281. text-align: center;
  282. }
  283.  
  284. /*-- controls --*/
  285.  
  286. #controls-icon {
  287. cursor: pointer;
  288. font-size: calc(var(--font-size) + 10px);
  289. color: var(--text-color);
  290. vertical-align: middle;
  291. }
  292.  
  293. body.controls-click .tmblr-iframe {
  294. position: fixed;
  295. opacity: 0.8;
  296. visibility: visible;
  297. -webkit-transition: all 0.5s;
  298. -moz-transition: all 0.5s;
  299. -ms-transition: all 0.5s;
  300. -o-transition: all 0.5s;
  301. transition: all 0.5s;
  302. }
  303.  
  304. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  305. z-index: 999999!important;
  306. top: 93px !important;
  307. right: 20px !important;
  308. opacity: 0;
  309. visibility: hidden;
  310. transform: scale(0.8);
  311. transform-origin: 100% 0;
  312. -webkit-transform: scale(0.8);
  313. -webkit-transform-origin: 100% 0;
  314. -o-transform: scale(0.8);
  315. -o-transform-origin: 100% 0;
  316. -moz-transform: scale(0.8);
  317. -moz-transform-origin: 100% 0;
  318. -ms-transform: scale(0.8);
  319. -ms-transform-origin: 100% 0;
  320. -webkit-transition: all 0.5s;
  321. -moz-transition: all 0.5s;
  322. -ms-transition: all 0.5s;
  323. -o-transition: all 0.5s;
  324. transition: all 0.5s;
  325. }
  326.  
  327. .tmblr-iframe--app-cta-button {display: none!important;}
  328.  
  329. /*-- top bar --*/
  330.  
  331. #top-bar {
  332. display: flex;
  333. justify-content: space-between;
  334. align-items: center;
  335. width: 100%;
  336. position: fixed;
  337. top: 0;
  338. left: 0;
  339. height: 80px;
  340. background: var(--background-color);
  341. border-bottom: 1px solid var(--border-color);
  342. z-index: 1;
  343. }
  344.  
  345. #top-bar a {color: var(--text-color);}
  346. #top-bar a:hover {color: var(--accent-color);}
  347.  
  348. .title-wrap {
  349. display: flex;
  350. align-items: center;
  351. grid-gap: var(--caption-spacing);
  352. }
  353.  
  354. #header-img {
  355. width: 80px;
  356. height: 80px;
  357. background: var(--accent-color);
  358. }
  359.  
  360. nav {margin-right: 15px;}
  361. nav a {margin-left: 2em;}
  362.  
  363. /*-- pop-up --*/
  364.  
  365. #pop-up {
  366. width: 100%;
  367. height: 100%;
  368. top: 0;
  369. left: 0;
  370. position: fixed;
  371. z-index: 9999999;
  372. background: var(--background-color);
  373. display: none;
  374. }
  375.  
  376. .fade {
  377. top:0;
  378. left:0;
  379. position:fixed;
  380. z-index:99999999;
  381. width:100%;
  382. height:100%;
  383. }
  384.  
  385. .pop-up-content-outer {
  386. top:50%;
  387. left:50%;
  388. transform:translate(-50%,-50%);
  389. position: fixed;
  390. border: 1px solid var(--border-color);
  391. z-index:99999999;
  392. width: var(--post-width);
  393. border-radius: var(--rounded-corners);
  394. overflow: hidden;
  395. }
  396.  
  397. .pop-up-content-inner {
  398. padding:var(--caption-spacing);
  399. max-height: var(--post-width);
  400. overflow-y: auto;
  401. }
  402.  
  403. .popup-title-wrap {
  404. display: flex;
  405. justify-content: space-between;
  406. align-items: center;
  407. margin-bottom: var(--caption-spacing);
  408. padding-bottom: var(--caption-spacing);
  409. border-bottom: 1px dashed var(--border-color);
  410. }
  411.  
  412. #pop-up-close-icon {
  413. cursor: pointer;
  414. float: right;
  415. font-size: calc(var(--font-size) + 8px);
  416. background: var(--secondary-color);
  417. color: var(--text-color);
  418. padding: 10px;
  419. border-radius: var(--rounded-corners);
  420. vertical-align: middle;
  421. margin-left: 0.5em;
  422. }
  423.  
  424. .pop-up-description, .pop-up-stats {
  425. margin: var(--caption-spacing) 0;
  426. padding-bottom: var(--caption-spacing);
  427. border-bottom: 1px dashed var(--border-color);
  428. }
  429.  
  430. .pop-up-stats {text-align: center;}
  431. .pop-up-stats p {margin: 0;}
  432.  
  433. .pop-up-links {width: 100%; border: 0;}
  434. .pop-up-links tr {text-align: center;}
  435.  
  436. .find {
  437. margin: var(--caption-spacing) auto 0 auto;
  438. padding: 4px 8px;
  439. border: 1px solid var(--border-color);
  440. border-radius: 20px;
  441. width: 75%;
  442. }
  443.  
  444. .find input {
  445. border: 0;
  446. outline: 0;
  447. background: var(--background-color);
  448. font-family: inherit;
  449. color: var(--text-color);
  450. font-size: var(--font-size);
  451. }
  452.  
  453. .find input[type=text] {
  454. font-size: var(--font-size);
  455. color: var(--text-color);
  456. vertical-align: middle;
  457. }
  458.  
  459. #search-icon {
  460. font-size: calc(var(--font-size) + 5px);
  461. color: var(--text-color);
  462. vertical-align: middle;
  463. }
  464.  
  465. /*-- posts --*/
  466.  
  467. main {
  468. position: relative;
  469. width: var(--post-width);
  470. margin: auto;
  471. }
  472.  
  473. article {
  474. width: 100%;
  475. position: relative;
  476. margin: var(--post-margin) auto;
  477. }
  478.  
  479. {block:ifShowPostBorders}
  480. .posts {
  481. border: 1px solid var(--border-color);
  482. border-radius: var(--rounded-corners);
  483. padding: var(--caption-spacing);
  484. }
  485. {/block:ifShowPostBorders}
  486.  
  487. .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%;}
  488.  
  489. /*-- captions --*/
  490.  
  491. .caption {margin: var(--caption-spacing) 0;}
  492. .caption:last-of-type {margin-bottom: 0;}
  493. .text-caption:first-of-type {margin-top: 0;}
  494.  
  495. .user-icon {
  496. display: inline-block;
  497. vertical-align: middle;
  498. width: 2.5em;
  499. height: 2.5em;
  500. border-radius: 100%;
  501. padding: 2px;
  502. border: 1px solid var(--border-color);
  503. margin-right: 1em;
  504. }
  505.  
  506. .username {
  507. display: inline-block;
  508. vertical-align: middle;
  509. }
  510. .username a {
  511. color: var(--text-color);
  512. font-weight: 600;
  513. }
  514. .username a:hover {color: var(--accent-color);}
  515.  
  516. .deactive::after {
  517. content: '(deactivated)';
  518. margin-left: 1em;
  519. opacity: 0.75;
  520. color: var(--text-color);
  521. }
  522.  
  523. p.tmblr-attribution {margin-top: var(--caption-spacing) !important;}
  524.  
  525. /*-- text ---*/
  526.  
  527. h1.post-title {margin-top: 0;}
  528.  
  529. /*-- link --*/
  530.  
  531. .link {
  532. display: flex;
  533. align-items: center;
  534. grid-gap: var(--caption-spacing);
  535. font-size: calc(var(--font-size) + 3px);
  536. font-weight: 600;
  537. letter-spacing: 0.5px;
  538. padding-bottom: var(--caption-spacing);
  539. border-bottom: 1px dashed var(--border-color);
  540. }
  541.  
  542. .link a {color: var(--text-color);}
  543. .link a:hover {color: var(--accent-color);}
  544.  
  545. #link-icon {
  546. cursor: pointer;
  547. font-size: calc(var(--font-size) + 5px);
  548. padding: 8px;
  549. border-radius: var(--rounded-corners);
  550. background: var(--accent-color);
  551. color: var(--background-color);
  552. vertical-align: middle;
  553. }
  554.  
  555. .npf-link-block {
  556. border: 0;
  557. padding: 0;
  558. background-color: inherit;
  559. color: inherit;
  560. }
  561.  
  562. .npf-link-block.no-poster .title {
  563. font-size: calc(var(--font-size) + 3px);
  564. font-weight: 600;
  565. letter-spacing: 0.5px;
  566. padding :0;
  567. }
  568. .npf-link-block.no-poster .bottom {display: none;}
  569.  
  570. /*-- photo/video --*/
  571.  
  572. img {
  573. margin: 0;
  574. display: block;
  575. height: auto;
  576. max-width: 100%;
  577. }
  578.  
  579. .photo {border-radius: var(--rounded-corners); overflow: hidden;}
  580. .photo img {width: 100%;}
  581. .vignette, #vignette {opacity: 0;}
  582. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  583.  
  584. .lightbox-image, #tumblr_lightbox img {
  585. box-shadow: none !important;
  586. border-radius: 0 !important;
  587. max-width: none;
  588. }
  589.  
  590. #tumblr_lightbox_caption, .lightbox-caption {
  591. color: #fff !important;
  592. font-family: inherit;
  593. margin-top: 1em !important;
  594. }
  595.  
  596. figure.tmblr-full img {
  597. max-width: 100%;
  598. width: 100%;
  599. height: auto;
  600. }
  601.  
  602. .video, figure.tmblr-embed.tmblr-full {border-radius: var(--rounded-corners); overflow: hidden;}
  603.  
  604. figure.tmblr-embed.tmblr-full iframe {max-width: 100%;}
  605.  
  606. /*-- photoset --*/
  607.  
  608. [photoset-layout] {
  609. grid-gap: 1px;
  610. border-radius: var(--rounded-corners);
  611. overflow: hidden;
  612. }
  613.  
  614. [photoset-layout] div {cursor: pointer;}
  615.  
  616. .npf_inst {
  617. border-radius: var(--rounded-corners);
  618. overflow: hidden;
  619. }
  620.  
  621. /*-- quote --*/
  622.  
  623. .quote, p.npf_quote {
  624. display: flex;
  625. align-items: center;
  626. grid-gap: var(--caption-spacing);
  627. font-family: inherit;
  628. font-size: calc(var(--font-size) + 3px);
  629. font-weight: 600;
  630. letter-spacing: 0.5px;
  631. }
  632.  
  633. #quote-icon {
  634. cursor: pointer;
  635. font-size: calc(var(--font-size) + 5px);
  636. padding: 8px;
  637. border-radius: var(--rounded-corners);
  638. background: var(--accent-color);
  639. color: var(--background-color);
  640. vertical-align: middle;
  641. }
  642.  
  643. .quote p:first-of-type {margin-top: 0;}
  644. .quote p:last-of-type {margin-bottom: 0;}
  645.  
  646. .source {margin-top: var(--caption-spacing);}
  647.  
  648. /*-- chat --*/
  649.  
  650. .chat {padding: 0; margin: 0;}
  651. .chat li, p.npf_chat {list-style-type: none; margin-top: var(--caption-spacing);}
  652. .chat li:first-of-type {margin-top: 0;}
  653. .chatter, p.npf_chat b {font-weight: 600;}
  654.  
  655. p.npf_chat, p.npf_chat b {font-family: inherit;}
  656.  
  657. /*-- answer --*/
  658.  
  659. .ask-wrap {
  660. padding-bottom: var(--caption-spacing);
  661. border-bottom: 1px dashed var(--border-color);
  662. }
  663.  
  664. .asker-wrap {
  665. display: flex;
  666. align-items: center;
  667. grid-gap: var(--caption-spacing);
  668. }
  669.  
  670. #question-icon {
  671. cursor: pointer;
  672. font-size: calc(var(--font-size) + 5px);
  673. padding: 8px;
  674. border-radius: var(--rounded-corners);
  675. background: var(--accent-color);
  676. color: var(--background-color);
  677. vertical-align: middle;
  678. }
  679.  
  680. .asking {
  681. display: flex;
  682. flex-direction: column;
  683. grid-gap: -1em;
  684. font-weight: 600;
  685. text-transform: lowercase;
  686.  
  687. }
  688. .asking a {color: var(--text-color);}
  689. .asking a:hover {color: var(--accent-color);}
  690.  
  691. .sent {font-weight: 400;}
  692.  
  693. .question {margin-top: 1em;}
  694. .question p:first-of-type {margin-top: 0;}
  695. .question p:last-of-type {margin-bottom: 0;}
  696.  
  697. /*-- audio --*/
  698.  
  699. .audio_post {
  700. display:flex;
  701. justify-content: space-between;
  702. align-items: center;
  703. }
  704.  
  705. .custom_audio_wrapper {
  706. display: flex;
  707. flex-direction: column;
  708. flex-grow: 1;
  709. }
  710.  
  711. .album-art{
  712. width: 100px;
  713. height: 100px;
  714. border-radius: var(--rounded-corners);
  715. overflow: hidden;
  716. }
  717.  
  718. .audio-info-wrapper {
  719. display: flex;
  720. justify-content: center;
  721. align-items: center;
  722. grid-gap: var(--caption-spacing);
  723. margin-bottom: var(--caption-spacing);
  724. }
  725.  
  726. .player {
  727. display: flex;
  728. justify-content: space-between;
  729. align-items: center;
  730. }
  731.  
  732. .audio_info p {margin: 0;}
  733.  
  734. .track {
  735. font-size: calc(var(--font-size) + 3px);
  736. font-weight: 600;
  737. }
  738.  
  739. #audio-player-icon {
  740. cursor: pointer;
  741. font-size: calc(var(--font-size) + 10px);
  742. background: var(--secondary-color);
  743. color: var(--text-color);
  744. padding: 15px;
  745. border-radius: 100%;
  746. vertical-align: middle;
  747. margin-right: 1em;
  748. }
  749.  
  750. .custom_audio_seekbar {
  751. height: 12px;
  752. flex-grow: 1;
  753. background: var(--secondary-color);
  754. border-radius: 1em;
  755. cursor: pointer;
  756. }
  757.  
  758. .custom_audio_seekbar_progress {
  759. width: 0;
  760. height: 100%;
  761. background: var(--text-color);
  762. border: 5px solid var(--secondary-color);
  763. border-radius: 1em;
  764. }
  765.  
  766. .spotify_audio_player, .soundcloud_audio_player {
  767. max-height: 80px;
  768. border-radius: var(--rounded-corners);
  769. }
  770.  
  771. /*-- post info --*/
  772.  
  773. .bottom-info, .top-info {
  774. display: flex;
  775. justify-content: space-between;
  776. align-items: center;
  777. }
  778.  
  779. .bottom-info {
  780. margin-top: var(--caption-spacing);
  781. padding-top: var(--caption-spacing);
  782. border-top: 1px dashed var(--border-color);
  783. }
  784.  
  785. .top-info {
  786. margin-bottom: var(--caption-spacing);
  787. padding-bottom: var(--caption-spacing);
  788. border-bottom: 1px dashed var(--border-color);
  789. }
  790.  
  791. .bottom-info a, .top-info a {color: var(--text-color);}
  792. .bottom-info a:hover, .top-info a:hover {color: var(--accent-color);}
  793.  
  794. .bottom-info-left, .bottom-info-right, .top-info-left, .top-info-right {
  795. display: flex;
  796. align-items: center;
  797. grid-gap: 1em;
  798. }
  799.  
  800. .dot {
  801. content:"";
  802. width: 5px;
  803. height: 5px;
  804. border-radius: 100%;
  805. vertical-align: middle;
  806. background: var(--border-color);
  807. }
  808.  
  809. .time-ago, .notecount {text-transform: lowercase; font-weight: 600;}
  810.  
  811. .like {position: relative;}
  812.  
  813. .like .like_button {
  814. position: absolute;
  815. top: 0;
  816. left: 0;
  817. right: 0;
  818. bottom: 0;
  819. width: 100%;
  820. height: 100%;
  821. opacity: 0;
  822. }
  823.  
  824. .like .like_button iframe {
  825. width: 100%!important;
  826. height: 100%!important;
  827. }
  828.  
  829. .like_button.liked + #post-info-icon {color: #dc143c!important;}
  830.  
  831. .tags {
  832. display: flex;
  833. flex-direction: row;
  834. flex-wrap: wrap;
  835. align-items: center;
  836. margin-top: calc(var(--caption-spacing) / 2);
  837. grid-gap: 1em;
  838. }
  839.  
  840. #pinned-post-icon {
  841. cursor: pointer;
  842. font-size: calc(var(--font-size) + 7px);
  843. vertical-align: middle;
  844. color: var(--accent-color);
  845. }
  846.  
  847. #post-info-icon {
  848. cursor: pointer;
  849. font-size: calc(var(--font-size) + 7px);
  850. vertical-align: middle;
  851. color: var(--text-color);
  852. }
  853.  
  854. /*-- post notes --*/
  855.  
  856. .notes {margin-top: var(--caption-spacing);}
  857.  
  858. ol.notes {
  859. max-width: 100%;
  860. padding: 0;
  861. margin-top: var(--caption-spacing);;
  862. }
  863.  
  864. ol.notes li.note {
  865. padding: 0.5em 0;
  866. list-style-type: none;
  867. }
  868.  
  869. ol.notes li.note img.avatar {display: none;}
  870.  
  871. ol.notes li.reblog::before, ol.notes li.like::before, ol.notes li.reply::before {
  872. font-family: 'phosphor';
  873. font-size: calc(var(--font-size) + 3px);
  874. vertical-align: middle;
  875. margin-right: 1em;
  876. }
  877.  
  878. ol.notes li.reblog::before {content: "\f267"; color: var(--text-color);}
  879. ol.notes li.like::before {content: "\f460"; color:#dc143c;}
  880. ol.notes li.reply::before {content: "\f339"; color: var(--text-color);}
  881. ol.notes li.original_post:before {content: "\f613"; color: var(--text-color);}
  882.  
  883. /*--pagination--*/
  884.  
  885. #page-navigation {
  886. display: flex;
  887. justify-content: space-between;
  888. align-content: center;
  889. }
  890.  
  891. #page-icon {
  892. font-size: calc(var(--font-size) + 5px);
  893. color: var(--text-color);
  894. vertical-align: middle;
  895. }
  896.  
  897. .pages a {color: var(--text-color);}
  898. .pages a:hover {color: var(--accent-color);}
  899.  
  900. .current-page {font-weight: 600; color: var(--accent-color);}
  901.  
  902. /*--bottom buttons--*/
  903.  
  904. #bottom-buttons {
  905. display: flex;
  906. flex-direction: column;
  907. position: fixed;
  908. bottom: 15px;
  909. right: 15px;
  910. z-index: 999999;
  911. grid-gap: var(--caption-spacing);
  912. }
  913.  
  914. #buttons-icon {
  915. cursor: pointer;
  916. color: var(--text-color);
  917. font-size: calc(var(--font-size) + 8px);
  918. vertical-align: middle;
  919. }
  920.  
  921. button#theme-toggle {
  922. outline: none;
  923. border: 0;
  924. background: transparent;
  925. padding: 0;
  926. cursor: pointer;
  927. }
  928.  
  929. .light-on{
  930. display: var(--LightOn);
  931. }
  932. .light-off{
  933. display: var(--LightOff);
  934. }
  935.  
  936. /*-- ness --*/
  937.  
  938. /*--- for mobile devices ---*/
  939.  
  940. @media only screen and (max-width: 720px) {
  941. main, .pop-up-content-outer {width: 80vw;}
  942. .pop-up-content-inner {max-height: 80vh;}
  943.  
  944. #controls {display:none;}
  945.  
  946. #top-bar .title {display:none;}
  947. }
  948.  
  949. /*---- END OF MEDIA QUERIES -----*/
  950.  
  951. {CustomCSS}
  952.  
  953. </style>
  954. </head>
  955.  
  956. <!-- html -->
  957.  
  958. <body>
  959.  
  960. <script>document.body.className += ' fade-out';</script>
  961.  
  962. <!--pop up content-->
  963.  
  964. <div id="pop-up"> <div class="fade"></div>
  965. <div class="pop-up-content-outer">
  966. <div class="pop-up-content-inner">
  967. <div class="popup-title-wrap">
  968. <h1 class="pop-up-title">{text:popup title}</h1>
  969. <a title="close" class="closepopup"><i class="ph-x" id="pop-up-close-icon"></i></a>
  970. </div>
  971. {block:ifshowpopupdescription}<div class="pop-up-description">{text:popup description}</div>{/block:ifshowpopupdescription}
  972. {block:ifshowpopupstats}<div class="pop-up-stats">
  973. <p><b>currently:</b> {text:blog status}</p>
  974. <p><b>reading:</b> {text:currently reading}</p>
  975. <p><b>watching:</b> {text:currently watching}</p>
  976. <p><b>listening to:</b> {text:currently listening to}</p>
  977. </div>{/block:ifshowpopupstats}
  978. <table class="pop-up-links">
  979. <tr>
  980. <td>{block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}</td>
  981. <td>{block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}</td>
  982. </tr>
  983. <tr>
  984. <td>{block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}</td>
  985. <td>{block:ifLink4}<a href="{text:Link 4 URL}">{text:Link 4}</a>{/block:ifLink4}</td>
  986. </tr>
  987. <tr>
  988. <td>{block:ifLink5}<a href="{text:Link 5 URL}">{text:Link 5}</a>{/block:ifLink5}</td>
  989. <td>{block:ifLink6}<a href="{text:Link 6 URL}">{text:Link 6}</a>{/block:ifLink6}</td>
  990. </tr>
  991. <tr>
  992. <td>{block:ifLink7}<a href="{text:Link 7 URL}">{text:Link 7}</a>{/block:ifLink7}</td>
  993. <td>{block:ifLink8}<a href="{text:Link 8 URL}">{text:Link 8}</a>{/block:ifLink8}</td>
  994. </tr>
  995. </table>
  996. <form action="/search" method="get" class="find" name="sform">
  997. <i class="ph-magnifying-glass" id="search-icon"></i>
  998. <input type="text" name="q" placeholder="search..." value="{SearchQuery}" value autocomplete="off" class="upper"/>
  999. </form>
  1000. </div>
  1001. </div>
  1002. </div>
  1003.  
  1004. <main><!-- main = main container -->
  1005.  
  1006. <!--top bar-->
  1007.  
  1008. <aside id="top-bar">
  1009. <div class="title-wrap">
  1010. <img src="{image:Header}" id="header-img" alt="header image"/></a>
  1011. <div class="title"><a href="/">{text:title}</a></div>
  1012. </div>
  1013. <nav>
  1014. {block:ifHomeLink}<a href="/" title="{text:Home Link}"><i class="ph-house" id="controls-icon"></i></a>{/block:ifHomeLink}
  1015. {block:ifAskLink}<a href="/ask" title="{text:Ask Link}"><i class="ph-chat-teardrop" id="controls-icon"></i></a>{/block:ifAskLink}
  1016. {block:ifArchiveLink}<a href="/archive" title="{text:Archive Link}"><i class="ph-clock-counter-clockwise" id="controls-icon"></i></a>{/block:ifArchiveLink}
  1017. <a href="#!" class="click" title="{text:Popup Link}"><i class="ph-list-plus" id="controls-icon"></i></a>
  1018. <!--tumblr controls-->
  1019. <a id="controls" title="show controls"><i class="ph-toggle-left" id="controls-icon" onclick="myFunction(this)"></i></a>
  1020. </nav>
  1021. </aside>
  1022.  
  1023. <!-- posts -->
  1024.  
  1025. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  1026. <article class="posts" id="{PostID}" post-type="{PostType}">
  1027.  
  1028. <!-- top post info -->
  1029.  
  1030. {block:Date}
  1031. <div class="top-info">
  1032.  
  1033. <div class="top-info-left">
  1034. {block:PinnedPostLabel}<a href="{Permalink}" class="pinned-post"><i class="ph-push-pin" id="pinned-post-icon"></i></a>{/block:PinnedPostLabel}
  1035. <i class="ph-map-pin" id="post-info-icon"></i> <a class="time-ago" href="{Permalink}">{Timestamp}</a>
  1036. </div>
  1037.  
  1038. <div class="top-info-right">
  1039. {block:RebloggedFrom}<a href="{ReblogParentURL}" title="via {ReblogParentName}"><i class="ph-arrow-u-up-right" id="post-info-icon"></i></a>
  1040. <div class="dot"></div>
  1041. <a href="{ReblogRootURL}" title="posted by {ReblogRootName}"><i class="ph-user-circle" id="post-info-icon"></i></a>
  1042. {/block:RebloggedFrom}
  1043. {block:NotReblog}
  1044. <a href="{Permalink}" title="posted by {Name}"><i class="ph-user-circle" id="post-info-icon"></i></a>
  1045. {/block:NotReblog}
  1046. </div>
  1047.  
  1048. </div>
  1049. {/block:Date}
  1050.  
  1051. {block:Text}
  1052. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1053. {block:NotReblog}
  1054. <div class="caption text-caption">
  1055. <div class="comment">{Body}</div>
  1056. </div>
  1057. {/block:NotReblog}
  1058. {block:RebloggedFrom}
  1059. {block:Reblogs}
  1060. <div class="caption text-caption">
  1061. <div class="commenter source-head"><img src="{PortraitURL-64}" class="user-icon">
  1062. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1063. </div>
  1064. <div class="comment">{Body}</div>
  1065. </div>
  1066. {/block:Reblogs}
  1067. {/block:RebloggedFrom}
  1068. {/block:Text}
  1069.  
  1070. {block:Link}
  1071. <div class="link">
  1072. <i class="ph-arrow-square-out" id="link-icon"></i>
  1073. <a href="{URL}">{Name}</a>
  1074. </div>
  1075. {block:Description}
  1076. {block:NotReblog}
  1077. <div class="caption">
  1078. <div class="comment">{Description}</div>
  1079. </div>
  1080. {/block:NotReblog}
  1081. {/block:Description}
  1082. {block:RebloggedFrom}
  1083. {block:Reblogs}
  1084. <div class="caption">
  1085. <img src="{PortraitURL-64}" class="user-icon">
  1086. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1087. <div class="comment">{Body}</div>
  1088. </div>
  1089. {/block:Reblogs}
  1090. {/block:RebloggedFrom}
  1091. {/block:Link}
  1092.  
  1093. {block:Photo}
  1094. <div class="photo">
  1095. {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}
  1096. </div>
  1097. {block:Caption}
  1098. {block:NotReblog}
  1099. <div class="caption">
  1100. <div class="comment">{Caption}</div>
  1101. </div>
  1102. {/block:NotReblog}
  1103. {block:RebloggedFrom}
  1104. {block:Reblogs}
  1105. <div class="caption">
  1106. <img src="{PortraitURL-64}" class="user-icon">
  1107. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1108. <div class="comment">{Body}</div>
  1109. </div>
  1110. {/block:Reblogs}
  1111. {/block:RebloggedFrom}
  1112. {/block:Caption}
  1113. {/block:Photo}
  1114.  
  1115. {block:Photoset}
  1116. <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>
  1117. {block:Caption}
  1118. {block:NotReblog}
  1119. <div class="caption">
  1120. <div class="comment">{Caption}</div>
  1121. </div>
  1122. {/block:NotReblog}
  1123. {block:RebloggedFrom}
  1124. {block:Reblogs}
  1125. <div class="caption">
  1126. <img src="{PortraitURL-64}" class="user-icon">
  1127. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1128. <div class="comment">{Body}</div>
  1129. </div>
  1130. {/block:Reblogs}
  1131. {/block:RebloggedFrom}
  1132. {/block:Caption}
  1133. {/block:Photoset}
  1134.  
  1135. {block:Video}
  1136. <div class="video">{Video-500}</div>
  1137. {block:Caption}
  1138. {block:NotReblog}
  1139. <div class="caption">
  1140. <div class="comment">{Caption}</div>
  1141. </div>
  1142. {/block:NotReblog}
  1143. {block:RebloggedFrom}
  1144. {block:Reblogs}
  1145. <div class="caption">
  1146. <img src="{PortraitURL-64}" class="user-icon">
  1147. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1148. <div class="comment">{Body}</div>
  1149. </div>
  1150. {/block:Reblogs}
  1151. {/block:RebloggedFrom}
  1152. {/block:Caption}
  1153. {/block:Video}
  1154.  
  1155. {block:Quote}
  1156. <div class="quote">
  1157. <i class="ph-quotes" id="quote-icon"></i>
  1158. {Quote}
  1159. </div>
  1160. {block:Source}<div class="source">{Source}</div>{/block:Source}
  1161. {/block:Quote}
  1162.  
  1163. {block:Chat}
  1164. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1165. <ul class="chat">{block:Lines}
  1166. <li>
  1167. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  1168. {Line}
  1169. </li>
  1170. {/block:Lines}</ul>
  1171. {/block:Chat}
  1172.  
  1173. {block:Answer}
  1174. <div class="ask-wrap">
  1175. <div class="asker-wrap">
  1176. <i class="ph-chat-teardrop-dots" id="question-icon"></i>
  1177. <div class="asking">
  1178. {Asker}
  1179. <div class="sent">sent a message</div>
  1180. </div>
  1181. </div>
  1182. <div class="question">{Question}</div>
  1183. </div>
  1184. {block:Answerer}
  1185. <div class="caption">
  1186. <img src="{AnswererPortraitURL-64}" class="user-icon">
  1187. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  1188. <div class="comment">{Answer}</div>
  1189. </div>
  1190. {/block:Answerer}
  1191. {block:NotReblog}
  1192. <div class="caption">
  1193. {Replies}
  1194. </div>
  1195. {/block:NotReblog}
  1196. {block:RebloggedFrom}
  1197. {block:Reblogs}
  1198. <div class="caption">
  1199. <img src="{PortraitURL-64}" class="user-icon">
  1200. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1201. <div class="comment">{Body}</div>
  1202. </div>
  1203. {/block:Reblogs}
  1204. {/block:RebloggedFrom}
  1205. {/block:Answer}
  1206.  
  1207. {block:Audio}
  1208. {block:AudioPlayer}
  1209. {AudioPlayer}
  1210. <div class="audio_post">
  1211. <div class="custom_audio_wrapper">
  1212. <div class="audio-info-wrapper">
  1213. {block:AlbumArt}
  1214. <img src="{AlbumArtURL}" class="album-art">
  1215. {/block:AlbumArt}
  1216. <div class="audio_info">
  1217. {block:TrackName}<p><div class="track">{TrackName}</div></p>{/block:TrackName}
  1218. {block:ifnotTrackName}<p><div class="track">Listen</div></p>{/block:ifnotTrackName}
  1219. {block:Artist}<p>{Artist}</p>{/block:Artist}
  1220. </div>
  1221. </div>
  1222. <div class="player">
  1223. <div class="custom_audio_buttons"></div>
  1224. <div class="custom_audio_seekbar"></div>
  1225. </div>
  1226. </div>
  1227. </div>
  1228. {/block:AudioPlayer}
  1229. {block:Caption}
  1230. {block:NotReblog}
  1231. <div class="caption">
  1232. <div class="comment">{Caption}</div>
  1233. </div>
  1234. {/block:NotReblog}
  1235. {block:RebloggedFrom}
  1236. {block:Reblogs}
  1237. <div class="caption">
  1238. <img src="{PortraitURL-64}" class="user-icon">
  1239. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1240. <div class="comment">{Body}</div>
  1241. </div>
  1242. {/block:Reblogs}
  1243. {/block:RebloggedFrom}
  1244. {/block:Caption}
  1245. {/block:Audio}
  1246.  
  1247. <!-- bottom post info -->
  1248.  
  1249. {block:Date}
  1250. <div class="bottom-info">
  1251.  
  1252. <div class="bottom-info-left">
  1253. <i class="ph-activity" id="post-info-icon"></i> <a class="notecount" href="{block:NoteCount}{Permalink}{/block:NoteCount}">{NoteCountwithLabel}</a>
  1254. </div>
  1255.  
  1256. <div class="bottom-info-right">
  1257. <a href="{ReblogURL}" target="_blank" title="reblog this post"><i class="ph-arrow-clockwise" id="post-info-icon"></i></a>
  1258. <div class="dot"></div>
  1259. <a class="like" title="like this post">{LikeButton}<i class="ph-heart" id="post-info-icon"></i></a>
  1260. </div>
  1261.  
  1262. </div>
  1263. {/block:Date}
  1264.  
  1265. <!-- tags -->
  1266.  
  1267. {block:HasTags}
  1268. <div class="tags">
  1269. filed under: {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
  1270. </div>
  1271. {/block:HasTags}
  1272.  
  1273. <!-- post notes -->
  1274.  
  1275. {block:PermalinkPage}{block:Date}
  1276. {block:NoteCount}{block:PostNotes}
  1277. <div class="notes">
  1278. {PostNotes-64}
  1279. </div>
  1280. {/block:PostNotes}{/block:NoteCount}
  1281. {/block:Date}{/block:PermalinkPage}
  1282.  
  1283. </article>
  1284. {/block:Posts}
  1285.  
  1286. <!-- pagination -->
  1287.  
  1288. {block:Pagination}
  1289. <article id="page-navigation">
  1290. <a class="prev-page" href="{block:PreviousPage}{PreviousPage}{/block:PreviousPage}" title="go to previous page"><i class="ph-arrow-left" id="page-icon"></i></a>
  1291. {block:JumpPagination length="5"}
  1292. <div class="pages">
  1293. {block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}
  1294. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1295. </div>
  1296. {/block:JumpPagination}
  1297. <a class="next-page" href="{block:NextPage}{NextPage}{/block:NextPage}" title="go to next page"><i class="ph-arrow-right" id="page-icon"></i></a>
  1298. </article>
  1299. {/block:Pagination}
  1300.  
  1301. </main><!-- end of main container -->
  1302.  
  1303. <!--bottom buttons-->
  1304.  
  1305. <div id="bottom-buttons">
  1306. <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  1307. <span class="light-on" title="dark mode"><i class="ph-moon" id="buttons-icon"></i></span>
  1308. <span class="light-off" title="light mode"><i class="ph-sun-dim" id="buttons-icon"></i></span>
  1309. </button>
  1310. <a href="#" title="back to top" id="scrollup"><i class="ph-arrow-up" id="buttons-icon"></i></a>
  1311. <a href="https://freddie-mercurys.tumblr.com" title="theme by @freddie-mercurys" id="credit"><i class="ph-smiley" id="buttons-icon"></i></a>
  1312. </div>
  1313.  
  1314. <script>
  1315.  
  1316. //fade effect
  1317. $(function() {
  1318. $('body').removeClass('fade-out');
  1319. });
  1320.  
  1321. //time ago
  1322. $(".time-ago").timeAgo({
  1323. time: "short", // can be "letter" "short" or "word"
  1324. spaces: true, // adds spaces between words and numbers
  1325. words: false, // turns numbers to words
  1326. prefix: "", // adds a prefix to the outputted string. could be "~" or "about"
  1327. suffix: "ago", // adds a suffix to the outputted string. could be "ago"
  1328. });
  1329.  
  1330. //dark mode button
  1331. const toggle = document.getElementById("theme-toggle");
  1332.  
  1333. toggle.onclick = function () {
  1334. document.documentElement.classList.add("theme-transition");
  1335.  
  1336. let currentTheme = document.documentElement.getAttribute("data-theme");
  1337. let targetTheme = "light";
  1338.  
  1339. if (currentTheme === "light") {
  1340. targetTheme = "dark";
  1341. }
  1342.  
  1343. window.setTimeout(function () {
  1344. document.documentElement.classList.remove("theme-transition");
  1345. }, 50);
  1346.  
  1347. document.documentElement.setAttribute("data-theme", targetTheme);
  1348. localStorage.setItem("theme", targetTheme);
  1349. };
  1350.  
  1351. //pop-up
  1352. $(document).ready(function(){
  1353. $('.click,.fade').click(function() {
  1354. $('#pop-up').fadeIn();
  1355. });
  1356. $(".closepopup").click(function() {
  1357. $("#pop-up").fadeOut();
  1358. });
  1359. });
  1360.  
  1361. //show controls
  1362. $(document).ready(function(){
  1363. $('#controls').click(function(){
  1364. $('body').toggleClass('controls-click');
  1365. });
  1366. });
  1367.  
  1368. function myFunction(x) {
  1369. x.classList.toggle("ph-toggle-right");
  1370. }
  1371.  
  1372. //tooltips
  1373. tippy('[title]', {
  1374. theme: 'custom',
  1375. arrow: false,
  1376. followCursor: true,
  1377. delay: 100,
  1378. placement: 'top',
  1379. zIndex: 9999999999,
  1380. maxWidth: 200,
  1381. animation: 'perspective',
  1382.  
  1383. content(reference) {
  1384. const title = reference.getAttribute('title');
  1385. reference.removeAttribute('title');
  1386. return title;
  1387. },
  1388. });
  1389.  
  1390. //notecount shortener
  1391. var $container = $('article');
  1392. $container.find('.notecount').each(function(){
  1393. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1394. if (n > 999) {
  1395. n = Math.floor(n / 100) / 10;
  1396. $(this).text(n + 'k notes');
  1397. }
  1398. });
  1399.  
  1400. //scroll to top
  1401. $("#scrollup").click(function(){
  1402. $("html, body").animate({scrollTop : 0},800);
  1403. return false;
  1404. });
  1405.  
  1406. //custom audio player
  1407. customAudio({
  1408. post: "article",
  1409. wrappers: {
  1410. audio: ".custom_audio_wrapper",
  1411. buttons: ".custom_audio_buttons",
  1412. duration: ".custom_audio_duration",
  1413. timeCurrent: ".custom_audio_current_time",
  1414. timeLeft: ".custom_audio_time_left",
  1415. seekbar: ".custom_audio_seekbar"
  1416. },
  1417. default: false,
  1418. pauseAll: true,
  1419. playButton: "<i class='ph-play-fill' id='audio-player-icon'></i>",
  1420. pauseButton: "<i class='ph-pause-fill' id='audio-player-icon'></i>",
  1421. errorIcon: "<i class='ph-x-fill' id='audio-player-icon'></i>",
  1422. hideInfoIfError: true,
  1423. }).create();
  1424.  
  1425. //photosets
  1426. function gatherData(images, arr) {
  1427. for (let i = 0; i < images.length; i++) {
  1428. let currentData = {
  1429. "width": images[i].getAttribute('data-width'),
  1430. "height": images[i].getAttribute('data-height'),
  1431. "low_res": images[i].getAttribute('data-lowres'),
  1432. "high_res": images[i].getAttribute('data-highres')
  1433. };
  1434. arr.push(currentData);
  1435. }
  1436. }
  1437. function getIndex(elem) {
  1438. let i = 0;
  1439. while( (elem = elem.previousElementSibling) != null ) i++;
  1440. return i;
  1441. }
  1442. function lightbox(elem) {
  1443. let currentPhotoset = elem.parentNode;
  1444. let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  1445. let data = [];
  1446. gatherData(photosetPhotos, data);
  1447. Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  1448. }
  1449.  
  1450. // responsive iframes
  1451. $(document).ready(function() {
  1452. flexibleFrames($(".video"));
  1453. });
  1454.  
  1455. //remove redirects
  1456. function noHrefLi(){
  1457. var linkSet = document.querySelectorAll('a[href*="href.li/?"]');
  1458. Array.prototype.forEach.call(linkSet,function(el,i){
  1459. var theLink = linkSet[i].getAttribute('href').split("href.li/?")[1];
  1460. linkSet[i].setAttribute("href",theLink);
  1461. });
  1462. }
  1463. noHrefLi();
  1464.  
  1465. </script>
  1466.  
  1467.  
  1468. </body>
  1469. </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!