API tools faq
paste
mercurythms

astra (theme)

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