API tools faq
paste
Advertisement
softcodesthemes

golden / theme

softcodesthemes
Apr 26th, 2021 (edited)
5,666
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 36.62 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!---
  5.  
  6.  
  7.  
  8.  
  9. golden
  10. @softcodes
  11.  
  12.  
  13.  
  14.  
  15. --->
  16.  
  17. <head>
  18. <title>{Title} {block:TagPage}/ #{Tag}{/block:TagPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  19.  
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  23. <meta charset="utf-8">
  24. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  25.  
  26. <!----- VARIABLES AND OPTIONS ----->
  27.  
  28. <meta name="image:sidebar" content=""/>
  29.  
  30. <meta name="color:background" content="ffffff"/>
  31. <meta name="color:text" content="#666666"/>
  32. <meta name="color:link" content="#aaaaaa"/>
  33. <meta name="color:accent" content="#ecc46f"/>
  34. <meta name="color:borders" content="#eeeeee"/>
  35. <meta name="color:headings" content="#222222"/>
  36. <meta name="color:question" content="#f8f8f8"/>
  37. <meta name="color:selection text" content="#000000"/>
  38. <meta name="color:selection background" content="#f5e2ba"/>
  39. <meta name="color:tooltip" content="#666666"/>
  40. <meta name="color:tooltip text" content="#ffffff"/>
  41.  
  42. <meta name="if:sidebar image" content="1"/>
  43.  
  44. <meta name="select:text align" content="left" title="left"/>
  45. <meta name="select:text align" content="justify" title="justify"/>
  46.  
  47. <meta name="select:post width" content="400px" title="400px"/>
  48. <meta name="select:post width" content="450px" title="450px"/>
  49. <meta name="select:post width" content="500px" title="500px"/>
  50. <meta name="select:post width" content="540px" title="540px"/>
  51.  
  52. <meta name="select:photoset gutter" content="1px" title="1px"/>
  53. <meta name="select:photoset gutter" content="2px" title="2px"/>
  54. <meta name="select:photoset gutter" content="3px" title="3px"/>
  55. <meta name="select:photoset gutter" content="4px" title="4px"/>
  56.  
  57. <meta name="select:title font" content="Poppins">
  58. <meta name="select:title font" content="Playfair Display">
  59. <meta name="select:title font" content="Roboto Slab">
  60. <meta name="select:title font" content="Montserrat">
  61. <meta name="select:title font" content="Mulish">
  62. <meta name="select:title font" content="Noto Serif JP">
  63.  
  64. <meta name="text:font" content="Roboto"/>
  65. <meta name="text:title" content="your title here">
  66. <meta name="text:font size" content="12px"/>
  67. <meta name="text:letterspacing" content="0.5px"/>
  68. <meta name="text:post margin" content="150px"/>
  69.  
  70. <meta name="text:home link" content="home"/>
  71. <meta name="text:ask link" content="ask"/>
  72. <meta name="text:archive link" content="archive"/>
  73. <meta name="text:link 1 URL" content=""/>
  74. <meta name="text:link 1" content=""/>
  75. <meta name="text:link 2 URL" content=""/>
  76. <meta name="text:link 2" content=""/>
  77. <meta name="text:link 3 URL" content=""/>
  78. <meta name="text:link 3" content=""/>
  79. <meta name="text:link 4 URL" content=""/>
  80. <meta name="text:link 4" content=""/>
  81.  
  82. <link rel="preconnect" href="https://fonts.gstatic.com">
  83. <link href="https://fonts.googleapis.com/css2?family={text:font}:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap" rel="stylesheet">
  84.  
  85. <link rel="preconnect" href="https://fonts.gstatic.com">
  86. <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap" rel="stylesheet">
  87.  
  88. <link rel="preconnect" href="https://fonts.gstatic.com">
  89. <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@900&display=swap" rel="stylesheet">
  90.  
  91. <link rel="preconnect" href="https://fonts.gstatic.com">
  92. <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@900&display=swap" rel="stylesheet">
  93.  
  94. <link rel="preconnect" href="https://fonts.gstatic.com">
  95. <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet">
  96.  
  97. <link rel="preconnect" href="https://fonts.gstatic.com">
  98. <link href="https://fonts.googleapis.com/css2?family=Mulish:wght@900&display=swap" rel="stylesheet">
  99.  
  100. <link rel="preconnect" href="https://fonts.gstatic.com">
  101. <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@900&display=swap" rel="stylesheet">
  102.  
  103. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  104.  
  105. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  106.  
  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:1em;
  116. --NPF-Image-Spacing:{select:photoset gutter};
  117. }
  118. </style>
  119.  
  120. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  121.  
  122.  
  123. <script>
  124. (function($){
  125. $(document).ready(function(){
  126. $("a[title]").style_my_tooltips({
  127. tip_follows_cursor:true,
  128. tip_delay_time:90,
  129. tip_fade_speed:300,
  130. attribute:"title"
  131. });
  132. });
  133. })(jQuery);
  134. </script>
  135.  
  136. <!----- CSS ----->
  137.  
  138. <style type="text/css">
  139.  
  140. /* --- fade in --- */
  141.  
  142. @-webkit-keyframes fadein {
  143. 0% {opacity: 0;}
  144. 100% { opacity: 1; } }
  145.  
  146. @-moz-keyframes fadein {
  147. 0% { opacity: 0; }
  148. 100% { opacity: 1; } }
  149.  
  150. @keyframes fadein {
  151. 0% { opacity: 0; }
  152. 100% { opacity: 1; } }
  153.  
  154. ::-webkit-scrollbar {width:10px;height:9px;}
  155. ::-webkit-scrollbar {background-color:transparent;}
  156. ::-webkit-scrollbar-track {border:4px solid {color:background};background-color:#ddd;}
  157. ::-webkit-scrollbar-thumb {border:4px solid {color:background};background-color:{color:accent};min-height:50px;min-width:50px;}
  158.  
  159. ::-moz-selection {background:{color:selection background};color:{color:selection text};}
  160. ::selection {background:{color:selection background};color:{color:selection text};}
  161.  
  162. #s-m-t-tooltip {
  163. max-width:300px;
  164. margin-top:25px;
  165. margin-left:15px;
  166. font-size:10px;
  167. letter-spacing:1px;
  168. text-align:center;
  169. text-transform:uppercase;
  170. color:{color:tooltip text};
  171. background-color:{color:tooltip};
  172. padding:2px 6px;
  173. border-radius:2px;
  174. z-index:999999;
  175. }
  176.  
  177. /*----- BASIC STYLING -----*/
  178.  
  179. body {
  180. font-family: {text:font}, sans-serif;
  181. font-size:{text:font size};
  182. color: {color:text};
  183. letter-spacing:{text:letterspacing};
  184. background-color: {color:background};
  185. text-align:{select:text align};
  186. line-height: 175%;
  187. word-wrap: break-word;
  188. margin: 0;
  189. padding: 0;
  190. -moz-osx-font-smoothing:grayscale;
  191. -webkit-font-smoothing:antialiased;
  192. font-smoothing:antialiased;
  193. -webkit-animation: fadein 1.5s;
  194. -moz-animation:fadein 1.5s;
  195. animation:fadein 1.5s;
  196. }
  197.  
  198. a {
  199. color: {color:link};
  200. text-decoration: none;
  201. -webkit-transition: all 0.3s;
  202. -moz-transition: all 0.3s;
  203. -ms-transition: all 0.3s;
  204. -o-transition: all 0.3s;
  205. transition: all 0.3s;
  206. }
  207.  
  208. a:hover {
  209. color: {color:accent};
  210. -webkit-transition: all 0.3s;
  211. -moz-transition: all 0.3s;
  212. -ms-transition: all 0.3s;
  213. -o-transition: all 0.3s;
  214. transition: all 0.3s;
  215. }
  216.  
  217. blockquote {
  218. padding: 0 0 0 1.75em;
  219. border-left: 1px solid {color:borders};
  220. margin: 1em 0 1.5em 1em;
  221. }
  222.  
  223. h1, h2, h3, h4, h5 {
  224. line-height: 145%;
  225. text-transform:lowercase;
  226. color:{color:headings};
  227. font-weight:400;
  228. }
  229.  
  230. h1 {font-size: 1.5em;}
  231. h2 {font-size: 1.25em;}
  232. h3 {font-size: 1em;}
  233. h4 {font-size: 1em;}
  234. h5 {font-size: 1em;}
  235.  
  236. small {font-size:{text:font size};}
  237. big {font-size:{text:font size};}
  238.  
  239. hr {
  240. height: 1px;
  241. border: none;
  242. box-shadow: none;
  243. background-color: {color:borders};
  244. }
  245.  
  246. pre {
  247. line-height: inherit;
  248. font-size: inherit;
  249. white-space: pre-wrap;
  250. white-space: -moz-pre-wrap;
  251. white-space: -pre-wrap;
  252. white-space: -o-pre-wrap;
  253. word-wrap: break-word;
  254. }
  255.  
  256. li {max-width: 100%; list-style-type: circle;}
  257.  
  258. .tmblr-iframe-compact .tmblr-iframe--unified-controls {z-index: 999999999!important;}
  259.  
  260. /*---- sidebar ----*/
  261.  
  262. #sidebar {
  263. width: 300px;
  264. height: auto;
  265. position: fixed;
  266. top:100px;
  267. left:100px;
  268. }
  269.  
  270. {block:ifsidebarimage}
  271. #side-img {
  272. width:55px;
  273. height:55px;
  274. border-radius:100%;
  275. padding:4px;
  276. border:1px solid {color:borders};
  277. margin-bottom:2em;
  278. -webkit-transition: all 0.3s;
  279. -moz-transition: all 0.3s;
  280. -ms-transition: all 0.3s;
  281. -o-transition: all 0.3s;
  282. transition: all 0.3s;
  283. }
  284.  
  285. #side-img img {
  286. width:55px;
  287. height:55px;
  288. border-radius:100%;
  289. }
  290.  
  291. #side-img:hover {
  292. border-color:{color:accent};
  293. -webkit-transition: all 0.3s;
  294. -moz-transition: all 0.3s;
  295. -ms-transition: all 0.3s;
  296. -o-transition: all 0.3s;
  297. transition: all 0.3s;
  298. }
  299.  
  300. {/block:ifsidebarimage}
  301.  
  302. {block:ifnotsidebarimage}
  303. #side-img {display:none;}
  304. {/block:ifnotsidebarimage}
  305.  
  306. #blogname {
  307. font-family:{select:title font};
  308. font-size:28px;
  309. letter-spacing:-1.5px;
  310. color:{color:text};
  311. margin-bottom:1em;
  312. font-weight:900;
  313. }
  314.  
  315. #blogname a {color:{color:accent};}
  316. #blogname a:hover {color:{color:text};}
  317.  
  318. #description {
  319. display:block;
  320. margin:2em 0 2.5em 0;
  321. width:250px;
  322. }
  323.  
  324. .navline {
  325. display:inline-block;
  326. height:1px;
  327. width:12px;
  328. margin-left:0px;
  329. background-color:{color:accent};
  330. margin:0 10px 4px 0px;
  331. -webkit-transition: all 0.5s;
  332. -moz-transition: all 0.5s;
  333. -ms-transition: all 0.5s;
  334. -o-transition: all 0.5s;
  335. transition: all 0.5s;
  336. }
  337.  
  338. nav {
  339. display:block;
  340. width:250px;
  341. }
  342.  
  343. nav a {
  344. display:inline-block;
  345. color:{color:text};
  346. background-color:{color:background};
  347. }
  348.  
  349. nav a:hover .navline {
  350. width:25px;
  351. -webkit-transition: all 0.5s;
  352. -moz-transition: all 0.5s;
  353. -ms-transition: all 0.5s;
  354. -o-transition: all 0.5s;
  355. transition: all 0.5s;
  356. }
  357.  
  358. nav svg {
  359. display:inline-block;
  360. margin-right: 1em;
  361. margin-bottom:-2px;
  362. color:{color:accent};
  363. }
  364.  
  365. /*----- POSTS -----*/
  366.  
  367. main {
  368. position: relative;
  369. width:{select:post width};
  370. margin: auto;
  371. }
  372.  
  373. section {
  374. position: relative;
  375. width: {select:post width};
  376. margin-left:100px;
  377. }
  378.  
  379. article {
  380. width: 100%;
  381. position: relative;
  382. margin: 100px auto {text:post margin} auto;
  383. }
  384.  
  385. /* video */
  386.  
  387. .tumblr_video_container {
  388. width:{select:post width}!important;
  389. height:auto;
  390. }
  391.  
  392. .posts li, .posts blockquote, figure, iframe, .video, .video iframe, figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe {max-width:100%;}
  393.  
  394. /*----- CAPTIONS -----*/
  395.  
  396. .caption {
  397. margin-top: 2em;
  398. padding-bottom:2em;
  399. list-style-type: none;
  400. border-bottom:1px solid {color:borders};
  401. }
  402.  
  403. .caption p {margin: 1em 0;}
  404. .caption p:last-of-type {margin-bottom: 0;}
  405.  
  406. .original-caption p:first-of-type {margin-top: 0;}
  407. .text-caption:first-of-type {margin-top: 0;}
  408. .caption iframe, .caption img {max-width: 100%;}
  409.  
  410. .user-icon {
  411. display: inline-block;
  412. vertical-align: middle;
  413. border-radius: 50%;
  414. width: 2em;
  415. height: 2em;
  416. margin-right: 1em;
  417. }
  418.  
  419. .username {
  420. display:inline-block;
  421. vertical-align: middle;
  422. text-transform:lowercase;
  423. font-weight:700;
  424. }
  425.  
  426. .username a {
  427. color: inherit;
  428. text-decoration: none;
  429. background:
  430. linear-gradient({color:accent}, transparent, {color:accent}, transparent, {color:accent}, transparent, {color:accent})
  431. repeat-x
  432. 0 100% /* Bottom-aligned */
  433. /
  434. 100% 3px; /* 100% width, 3px height */
  435. box-decoration-break: clone;
  436. }
  437.  
  438. .username a:hover {color:{color:headings};}
  439.  
  440. .deactive::after {
  441. content: '(deactivated)';
  442. margin-left: 1em;
  443. opacity: 0.75;
  444. color: {color:text};
  445. }
  446.  
  447. p.tmblr-attribution {margin-top: 1em !important;}
  448.  
  449. /*----- TEXT -----*/
  450.  
  451. h1.post-title {
  452. font-family:{select:title font};
  453. margin-bottom:0.75em;
  454. font-size:1.75em;
  455. font-weight:400;
  456. letter-spacing:-0.5px;
  457. }
  458.  
  459. h1.post-title a {
  460. color:{color:headings};
  461. }
  462.  
  463. /*----- LINK -----*/
  464.  
  465. a.link-wrap {display: block; border: 1px solid {color:borders};}
  466. .link {padding: 2em;}
  467. .link-host, .link-txt {margin-top: 1.5em;}
  468.  
  469. .npf-link-block {
  470. margin-top: 1.5em;
  471. border-radius: 0;
  472. background-color: initial;
  473. }
  474.  
  475. .npf-link-block .poster .title {padding: 1.5em;}
  476. .npf-link-block.no-poster .title {padding: 1.5em 1.5em 0 1.5em;}
  477. .npf-link-block .title {font-size: 1.25em; border-bottom: none;}
  478. .npf-link-block .bottom {padding: 1.5em !important;}
  479.  
  480. /*----- PHOTO -----*/
  481.  
  482. img {
  483. margin: 0;
  484. display: block;
  485. height: auto;
  486. max-width: 100%;
  487. }
  488.  
  489. .photo img {width: 100%;}
  490.  
  491. /*---- tumblr lightbox ----*/
  492.  
  493. .vignette, #vignette {opacity: 0;}
  494. .tmblr-lightbox, #tumblr_lightbox {background-color: rgba(130, 130, 130, 0.75) !important;}
  495.  
  496. .lightbox-image, #tumblr_lightbox img {
  497. box-shadow: none !important;
  498. border-radius: 0 !important;
  499. max-width: none;
  500. }
  501.  
  502. #tumblr_lightbox_caption, .lightbox-caption {
  503. color: {color:background} !important;
  504. font-family: inherit;
  505. margin-top: 1em !important;
  506. }
  507.  
  508. /*----- PHOTOSET -----*/
  509.  
  510. .post-content div.npf_row, .post div.npf_row, body div.npf_row {
  511. margin-left: 0 !important;
  512. margin-right: 0 !important;
  513. }
  514.  
  515. .photo-slideshow {visibility: hidden;} .photo-slideshow.processed {visibility: visible;} .photo-slideshow .row {clear: both;width: 100%;} .photo-slideshow .pxu-photo {display: block;float: clear;width: 100%;overflow: hidden;} .photo-slideshow .pxu-photo img {display: block;} .photo-slideshow.processed .pxu-photo img {width:100%;height: auto;} .photo-slideshow .pxu-photo:first-child img {margin:auto;} .photo-slideshow .count-1 {max-width:100%;height: auto;} .set {margin-left:10px;} .photo-slideshow .count-2 {width:50%;height: auto;} .photo-slideshow .count-3 {width:33.33%;height: auto;}
  516.  
  517. /*---- audio ----*/
  518.  
  519. .audio {
  520. margin-bottom:-5px!important;
  521. }
  522.  
  523. /*----- QUOTE -----*/
  524.  
  525. .quote, p.npf_quote {
  526. line-height: 150%;
  527. font-size: 1.75em;
  528. font-family:{select:title font};
  529. color:{color:headings};
  530. letter-spacing:-0.5px;
  531. }
  532.  
  533. .quote p:first-of-type {margin-top: 0;}
  534. .quote p:last-of-type {margin-bottom: 0;}
  535. p.npf_quote {font-family: inherit; margin-bottom: 1em;}
  536.  
  537. .source {
  538. margin-top:1em;
  539. text-transform:normal;
  540. font-size:{text:font size}!important;
  541. font-weight:400;
  542. font-family:{text:font}!important;
  543. color:{color:text};
  544. letter-spacing:0;
  545. }
  546.  
  547. /*----- CHAT -----*/
  548.  
  549. .chat {
  550. margin:0 0 2em 0;
  551. padding:0 0 2em 0;
  552. border-bottom:1px solid {color:borders};
  553. }
  554.  
  555. .chat li {
  556. list-style-type:none;
  557. margin-bottom:5px;
  558. }
  559.  
  560. .chat li:first-of-type {margin-top:0;}
  561. .chat li:last-of-type {margin-bottom:0;}
  562.  
  563. .chatter {
  564. font-weight:bold;
  565. float:left;
  566. margin-right:5px;
  567. }
  568.  
  569. p.npf_chat {font-family: inherit; margin-top: 1em;}
  570. p.npf_chat b {font-family: inherit;}
  571.  
  572. /*----- ANSWER -----*/
  573.  
  574. .ask-wrap {
  575. display:block;
  576. }
  577.  
  578. .line {
  579. height:1px;
  580. width:100%;
  581. margin: 0 auto -12px auto;
  582. background-color:{color:accent};
  583. z-index:-1px;
  584. }
  585.  
  586. .a-wrap {display:block;z-index:1;}
  587.  
  588. .asker {
  589. text-transform:lowercase;
  590. display:inline-block;
  591. font-weight:900;
  592. font-family:{select:title font};
  593. font-size:calc({text:font size} + 3px);
  594. letter-spacing:-0.5px;
  595. background-color:#ffffff;
  596. padding-right:5px;
  597. }
  598.  
  599. .asker a {display:inline-block;color:{color:text};}
  600. .asker a:hover {color:{color:accent};}
  601.  
  602. .askerimg {
  603. display:inline-block;
  604. width:20px;
  605. height:20px;
  606. vertical-align:middle;
  607. float:right;
  608. background-color:#ffffff;
  609. padding-left:7px;
  610. }
  611.  
  612. .askerimg img {
  613. width:20px;
  614. height:20px;
  615. border-radius:100%;
  616. margin-bottom:-4px;
  617. }
  618.  
  619. .question {
  620. display:block;
  621. margin-top:0.75em;
  622. padding:20px;
  623. background-color:{color:question};
  624. border-radius:3px;
  625. }
  626.  
  627. .question p:first-of-type {margin-top: 0;}
  628. .question p:last-of-type {margin-bottom: 0;}
  629.  
  630. /*----- INFO -----*/
  631.  
  632. .info {
  633. margin-top:2em;
  634. display: flex;
  635. flex-direction: row;
  636. align-items: flex-start;
  637. justify-content: space-between;
  638. text-transform:lowercase;
  639. background-color:{color:background};
  640. }
  641.  
  642. .info a {
  643. display: inline-block;
  644. vertical-align: middle;
  645. color:{color:text};
  646. margin-right:0.75em;
  647. }
  648.  
  649. .info a:hover {color:{color:accent};}
  650.  
  651. .info svg {
  652. display:inline-block;
  653. margin-bottom:-2px;
  654. color:{color:accent};
  655. vertical-align:middle;
  656. }
  657.  
  658. .n {
  659. font-family:{select:title font};
  660. font-size:calc({text:font size} + 1px);
  661. letter-spacing:-0.5px;
  662. }
  663.  
  664. .info-left a {
  665. margin-left:0.75em;
  666. }
  667.  
  668. .post-controls a {margin:0px;}
  669.  
  670. .post-controls svg {
  671. -webkit-transition: all 0.3s;
  672. -moz-transition: all 0.3s;
  673. -ms-transition: all 0.3s;
  674. -o-transition: all 0.3s;
  675. transition: all 0.3s;
  676. }
  677.  
  678. .likeb {
  679. position: relative;
  680. display: inline-block;
  681. height: 1.6em;
  682. margin-bottom:0px;
  683. }
  684.  
  685. .likeb .like_button iframe {
  686. position: absolute;
  687. top: 0;
  688. left: 0;
  689. bottom: 0;
  690. right: 0;
  691. z-index: 2;
  692. opacity: 0;
  693. }
  694.  
  695. .like_button iframe {width: 100% !important; height: 100% !important;}
  696. .likeb .liked + .actual-button svg {color: red;}
  697.  
  698. .info-left a {margin-right: 1em;display:inline-block;}
  699. .info-left a:hover {color:{color:accent};}
  700.  
  701.  
  702. /*---- source info -----*/
  703.  
  704. .source-info {margin-top:2em;}
  705. .source-info li {list-style-type: none;text-transform:lowercase;}
  706. .source-info li a {
  707. list-style-type: none;
  708. background-color:transparent;
  709. padding:0px;
  710. }
  711.  
  712. /*---- pinned post -----*/
  713.  
  714. a.pinned-post {font-weight: bold; color: {color:accent};}
  715.  
  716.  
  717. /*---- tags -----*/
  718.  
  719. .tags {display:block;margin-top:1em;}
  720. .tags a {margin-right:1.2em;color:{color:link};}
  721. .tags a:hover {color:{color:text};}
  722.  
  723. .tag-day {font-weight: bold;}
  724.  
  725.  
  726. /*---- POST NOTES -----*/
  727.  
  728. .notes {margin:0;text-transform:lowercase;}
  729.  
  730. ol.notes {
  731. max-width: 100%;
  732. padding: 0;
  733. margin: 2em 0 0 0;
  734. }
  735.  
  736. ol.notes li.note {padding: 0.5em 0; list-style-type: none;}
  737.  
  738. ol.notes li.note blockquote {
  739. margin-bottom:0px;
  740. margin-left:2.25em;
  741. }
  742.  
  743. ol.notes li.note blockquote a {font-style:italic;}
  744.  
  745. ol.notes li.note img.avatar {
  746. border-radius: 50%;
  747. margin-right: 1em;
  748. vertical-align: middle;
  749. display: inline-block;
  750. width: 1.25em;
  751. height: 1.25em;
  752. }
  753.  
  754. /*---- PAGINATION -----*/
  755.  
  756. #page-navigation {
  757. text-align: center;
  758. }
  759. #page-navigation a {margin: 0 0.5em;}
  760.  
  761. .current-page {
  762. color: {color:accent};
  763. font-weight: bold;
  764. margin: 0 0.5em;
  765. }
  766.  
  767. #page-navigation svg {
  768. margin-bottom:-2px;
  769. }
  770.  
  771. .scrollToTopBtn {
  772. background-color:transparent;
  773. border: none;
  774. color:{color:link};
  775. cursor: pointer;
  776. font-size: 16px;
  777. width:20px;
  778. height:16px;
  779. position: fixed;
  780. bottom:45px;
  781. right:11px;
  782. z-index: 100;
  783. opacity: 0;
  784. transition: all .5s ease
  785. }
  786.  
  787. .showBtn {
  788. opacity: 1;
  789. }
  790.  
  791. #soft {
  792. position: fixed;
  793. bottom: 15px;
  794. right: 15px;
  795. font-size: 15px;
  796. }
  797.  
  798. /*--- for small desktop/tablet screens. converts sidebar to header ---*/
  799.  
  800. @media only screen and (max-width: 1100px) {
  801. main {width: {select:post width};}
  802.  
  803. #sidebar {
  804. position: relative;
  805. margin: {text:post margin}px auto;
  806. width: 100%;
  807. top:50px;
  808. left:0;
  809. }
  810.  
  811. section {margin-left: 0;}
  812. }
  813.  
  814. /*--- for mobile devices ---*/
  815.  
  816. @media only screen and (max-width: 720px) {
  817. main, section {width: 80vw;}
  818. }
  819.  
  820. /*---- END OF MEDIA QUERIES -----*/
  821.  
  822. iframe.tmblr-iframe {
  823. z-index:99999999999999!important;
  824. top:4px!important;
  825. right:0!important;
  826. opacity:0.4;
  827. /* delete invert(1) from here */
  828. filter:invert(1) contrast(150%);
  829. -webkit-filter:invert(1) contrast(150%);
  830. -o-filter:invert(1) contrast(150%);
  831. -moz-filter:invert(1) contrast(150%);
  832. -ms-filter:invert(1) contrast(150%);
  833. /* to here if your blog has a dark background */
  834. transform:scale(0.65);
  835. transform-origin:100% 0;
  836. -webkit-transform:scale(0.65);
  837. -webkit-transform-origin:100% 0;
  838. -o-transform:scale(0.65);
  839. -o-transform-origin:100% 0;
  840. -moz-transform:scale(0.65);
  841. -moz-transform-origin:100% 0;
  842. -ms-transform:scale(0.65);
  843. -ms-transform-origin:100% 0;
  844. -moz-transition-duration: 0.3s;
  845. -o-transition-duration: 0.3s;
  846. -webkit-transition-duration: 0.3s;
  847. transition-duration: 0.3s;
  848. }
  849.  
  850. iframe.tmblr-iframe:hover {
  851. opacity:0.8!important;
  852. -moz-transition-duration: 0.3s;
  853. -o-transition-duration: 0.3s;
  854. -webkit-transition-duration: 0.3s;
  855. transition-duration: 0.3s;
  856. }
  857.  
  858. {CustomCSS}
  859.  
  860. </style>
  861. </head>
  862. <body>
  863.  
  864. <div class="scrollToTopBtn"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 25 25" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>️</div>
  865.  
  866.  
  867. <!-- main = main container -->
  868.  
  869. <main>
  870.  
  871. <aside id="sidebar">
  872.  
  873. {block:ifsidebarimage}
  874. <div id="side-img"><a href="/"><img src="{image:sidebar}"/></a></div>
  875. {/block:ifsidebarimage}
  876.  
  877. <nav>
  878. {block:ifHomeLink}<a href="/"><div class="navline"></div>{text:Home Link}</a><br/>{/block:ifHomeLink}
  879. {block:AskEnabled}{block:ifAskLink}<a href="/ask"><div class="navline"></div>{text:Ask Link}</a><br/>{/block:ifAskLink}{/block:AskEnabled}
  880. {block:ifArchiveLink}<a href="/archive"><div class="navline"></div>{text:Archive Link}</a><br/>{/block:ifArchiveLink}
  881. {block:ifLink1}<a href="{text:Link 1 URL}"><div class="navline"></div>{text:Link 1}</a><br/>{/block:ifLink1}
  882. {block:ifLink2}<a href="{text:Link 2 URL}"><div class="navline"></div>{text:Link 2}</a><br/>{/block:ifLink2}
  883. {block:ifLink3}<a href="{text:Link 3 URL}"><div class="navline"></div>{text:Link 3}</a><br/>{/block:ifLink3}
  884. {block:ifLink4}<a href="{text:Link 4 URL}"><div class="navline"></div>{text:Link 4}</a><br/>{/block:ifLink4}
  885. </nav>
  886.  
  887. <div id="description">{Description}</div>
  888.  
  889. <div id="blogname"><a href="/">{text:title}</a></div>
  890.  
  891. </aside>
  892.  
  893. <!----- TAG AND DAY PAGES ----->
  894.  
  895. <!-- section = your post container -->
  896.  
  897. <section>
  898.  
  899. {block:TagPage}
  900. <article class="tagday-page">
  901. Viewing posts filed under <span class="tag-day">#{Tag}</span>
  902. </article>
  903. {/block:TagPage}
  904.  
  905. {block:DayPage}
  906. <article class="tagday-page">
  907. Viewing posts made on <span class="tag-day">{Month} {DayOfMonth}, {Year}</span>
  908. </article>
  909. {/block:DayPage}
  910.  
  911. <!----- POSTS ----->
  912.  
  913. {block:Posts}
  914. <article class="posts" id="{PostID}">
  915.  
  916. {block:Text}
  917. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  918. {block:NotReblog}
  919. <li class="caption original-caption text-caption">
  920. <div class="caption-text">{Body}</div>
  921. </li>
  922. {/block:NotReblog}
  923. {block:RebloggedFrom}
  924. <div class="reblog-wrap">
  925. {block:Reblogs}
  926. <li class="caption text-caption">
  927.  
  928. <img src="{PortraitURL-64}" class="user-icon">
  929. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  930.  
  931. <div class="caption-text">{Body}</div>
  932. </li>
  933. {/block:Reblogs}
  934. </div>
  935. {/block:RebloggedFrom}
  936. {/block:Text}
  937.  
  938. {block:Link}
  939. <a href="{URL}" class="link-wrap">
  940. {block:Thumbnail}<img src="{Thumbnail-HighRes}">{/block:Thumbnail}
  941. <div class="link">
  942. <div class="title">{Name}</div>
  943. {block:Excerpt}<div class="link-txt">{Excerpt}</div>{/block:Excerpt}
  944. {block:Host}<div class="link-host">{Host}</div>{/block:Host}
  945. </div>
  946. </a>
  947. {block:Description}
  948. {block:NotReblog}
  949. <li class="caption original-caption">
  950. <div class="caption-text">{Description}</div>
  951. </li>
  952. {/block:NotReblog}
  953. {/block:Description}
  954. {block:RebloggedFrom}
  955. <div class="reblog-wrap">
  956. {block:Reblogs}
  957. <li class="caption">
  958. <img src="{PortraitURL-64}" class="user-icon">
  959. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  960. <div class="caption-text">{Body}</div>
  961. </li>
  962. {/block:Reblogs}
  963. </div>
  964. {/block:RebloggedFrom}
  965. {/block:Link}
  966.  
  967. {block:Photo}
  968. <div class="photo">
  969. {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}
  970. </div>
  971. {block:Caption}
  972. {block:NotReblog}
  973. <li class="caption original-caption">
  974. <div class="caption-text">{Caption}</div>
  975. </li>
  976. {/block:NotReblog}
  977. {block:RebloggedFrom}
  978. <div class="reblog-wrap">
  979. {block:Reblogs}
  980. <li class="caption">
  981. <img src="{PortraitURL-64}" class="user-icon">
  982. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  983. <div class="caption-text">{Body}</div>
  984. </li>
  985. {/block:Reblogs}
  986. </div>
  987. {/block:RebloggedFrom}
  988. {/block:Caption}
  989. {/block:Photo}
  990.  
  991.  
  992. <!-- photoset -->
  993.  
  994. {block:Photoset}
  995. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  996. {block:Caption}
  997. {block:NotReblog}
  998. <li class="caption original-caption">
  999. <div class="caption-text">{Caption}</div>
  1000. </li>
  1001. {/block:NotReblog}
  1002. {block:RebloggedFrom}
  1003. <div class="reblog-wrap">
  1004. {block:Reblogs}
  1005. <li class="caption">
  1006. <img src="{PortraitURL-64}" class="user-icon">
  1007. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1008. <div class="caption-text">{Body}</div>
  1009. </li>
  1010. {/block:Reblogs}
  1011. </div>
  1012. {/block:RebloggedFrom}
  1013. {/block:Caption}
  1014. {/block:Photoset}
  1015.  
  1016.  
  1017. <!-- video -->
  1018.  
  1019. {block:Video}
  1020. <div class="video">{Video-500}</div>
  1021. {block:Caption}
  1022. {block:NotReblog}
  1023. <li class="caption original-caption">
  1024. <div class="caption-text">{Caption}</div>
  1025. </li>
  1026. {/block:NotReblog}
  1027. {block:RebloggedFrom}
  1028. <div class="reblog-wrap">
  1029. {block:Reblogs}
  1030. <li class="caption">
  1031. <img src="{PortraitURL-64}" class="user-icon">
  1032. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1033. <div class="caption-text">{Body}</div>
  1034. </li>
  1035. {/block:Reblogs}
  1036. </div>
  1037. {/block:RebloggedFrom}
  1038. {/block:Caption}
  1039. {/block:Video}
  1040.  
  1041. {block:Quote}
  1042. <div class="caption"><div class="quote">{Quote}
  1043. {block:Source}<div class="source">{Source}</div>{/block:Source}
  1044. </div></div>
  1045. {/block:Quote}
  1046.  
  1047. {block:Chat}
  1048. {block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
  1049. <ul class="chat">{block:Lines}
  1050. <li>
  1051. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  1052. <div class="chattxt">{Line}</div>
  1053. </li>
  1054. {/block:Lines}</ul>
  1055. {/block:Chat}
  1056.  
  1057. <!-- answer -->
  1058.  
  1059. {block:Answer}
  1060. <div class="ask-wrap">
  1061.  
  1062. <div class="line"></div>
  1063.  
  1064. <div class="a-wrap">
  1065. <div class="asker">{asker}</div>
  1066. <div class="askerimg"><img src="{AskerPortraitURL-128}"/></div>
  1067. </div>
  1068.  
  1069. <div class="question">{Question}</div>
  1070. </div>
  1071. {block:Answerer}
  1072. <li class="caption">
  1073. <img src="{AnswererPortraitURL-64}" class="user-icon">
  1074. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Answerer}</a></div>
  1075. <div class="answer">{Answer}</div>
  1076. </li>
  1077. {/block:Answerer}
  1078. {block:NotReblog}
  1079. <li class="caption original-caption">
  1080. <div class="answer">{Replies}</div>
  1081. </li>
  1082. {/block:NotReblog}
  1083. {block:RebloggedFrom}
  1084. <div class="reblog-wrap">
  1085. {block:Reblogs}
  1086. <li class="caption">
  1087. <img src="{PortraitURL-64}" class="user-icon">
  1088. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1089. <div class="answer">{Body}</div>
  1090. </li>
  1091. {/block:Reblogs}
  1092. </div>
  1093. {/block:RebloggedFrom}
  1094. {/block:Answer}
  1095.  
  1096. {block:Audio}
  1097. <div class="audio">
  1098. {AudioEmbed}
  1099. </div>
  1100. {block:Caption}
  1101. {block:NotReblog}
  1102. <li class="caption original-caption">
  1103. <div class="caption-text">{Caption}</div>
  1104. </li>
  1105. {/block:NotReblog}
  1106. {block:RebloggedFrom}
  1107. <div class="reblog-wrap">
  1108. {block:Reblogs}
  1109. <li class="caption">
  1110. <img src="{PortraitURL-64}" class="user-icon">
  1111. <div class="username {block:IsDeactivated}deactive{/block:IsDeactivated}"><a href="{Permalink}">{Username}</a></div>
  1112. <div class="caption-text">{Body}</div>
  1113. </li>
  1114. {/block:Reblogs}
  1115. </div>
  1116. {/block:RebloggedFrom}
  1117. {/block:Caption}
  1118. {/block:Audio}
  1119.  
  1120.  
  1121. <!----- INFO ----->
  1122.  
  1123. {block:Date}
  1124. <div class="info">
  1125. <div class="info-left">
  1126. {block:PinnedPostLabel}<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 25 25" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bookmark" style="margin-bottom:-3px;"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path></svg><a href="{Permalink}" class="pinned-post">{PinnedPostLabel}</a>{/block:PinnedPostLabel}
  1127.  
  1128. <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 25 25" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2" style="margin-bottom:-3px;"><line x1="18" y1="20" x2="18" y2="10"></line><line x1="12" y1="20" x2="12" y2="4"></line><line x1="6" y1="20" x2="6" y2="14"></line></svg><a class="notecount n" href="{Permalink}">{NoteCountWithLabel}</a><svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 25 25" fill="{color:accent}" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg><a href="{Permalink}" style="margin-bottom:-4px;">{ShortMonth} {DayOfMonth}, {Year}</a>
  1129. </div>
  1130.  
  1131. <div class="post-controls">
  1132. <a class="likeb" href="#" title="like">{LikeButton}<span class="actual-button"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 25 25" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.8,4.6c-2.1-2.1-5.6-2.1-7.8,0c0,0,0,0,0,0L12,5.7l-1.1-1.1c-2.1-2.1-5.6-2.1-7.8,0s-2.1,5.6,0,7.8l1.1,1.1 l7.8,7.8l7.8-7.8l1.1-1.1C23,10.2,23,6.8,20.8,4.6C20.8,4.6,20.8,4.6,20.8,4.6z"/></svg></span></a>
  1133.  
  1134. <a href="{ReblogURL}" target="_blank" title="reblog"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 25 25" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-repeat" style="margin-left:5px;"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg></a>
  1135. </div>
  1136. </div>
  1137.  
  1138. <!-- content source on permalink pages -->
  1139. {block:PermalinkPage}
  1140. <div class="source-info">
  1141. {block:RebloggedFrom}
  1142. <li>Reblogged via: <a href="{ReblogParentURL}">{ReblogParentName}</a></li>
  1143. <li>Originally from: <a href="{ReblogRootURL}">{ReblogRootName}</a></li>
  1144. {/block:RebloggedFrom}
  1145. {block:ContentSource}<li>{lang:Source}: <a href="{SourceURL}">{SourceTitle}</a></li>{/block:ContentSource}
  1146. </div>
  1147. {/block:PermalinkPage}
  1148. {/block:Date}
  1149.  
  1150. <!----- TAGS ----->
  1151.  
  1152. {block:HasTags}
  1153. <div class="tags">
  1154. {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
  1155. </div>
  1156. {/block:HasTags}
  1157.  
  1158. <!----- POST NOTES ----->
  1159.  
  1160. {block:PermalinkPage}{block:Date}
  1161. {block:NoteCount}{block:PostNotes}
  1162. <div class="notes">
  1163. {PostNotes-64}
  1164. </div>
  1165. {/block:PostNotes}{/block:NoteCount}
  1166. {/block:Date}{/block:PermalinkPage}
  1167.  
  1168. </article>
  1169. {/block:Posts}
  1170.  
  1171. <!-- end of posts container -->
  1172.  
  1173. <!----- PAGINATION ----->
  1174.  
  1175. {block:Pagination}
  1176. <article id="page-navigation">
  1177. {block:PreviousPage}<a href="{PreviousPage}"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 25 25" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg></a>{/block:PreviousPage}
  1178. {block:JumpPagination length="5"}
  1179. {block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}
  1180. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
  1181. {/block:JumpPagination}
  1182. {block:NextPage}<a href="{NextPage}"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 25 25" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></a>{/block:NextPage}
  1183. </article>
  1184. {/block:Pagination}
  1185.  
  1186. </section>
  1187.  
  1188. <!-- end of main container -->
  1189.  
  1190. </main>
  1191.  
  1192. <!----- CREDIT: if you make significant modifications, feel free to replace with your own. if you use this as a theme without changes, leave in place. ----->
  1193.  
  1194. <a href="https://softcodes.tumblr.com" title="theme by @softcodes" id="soft"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 25 25" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></a>
  1195.  
  1196. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  1197. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1198. <script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1199.  
  1200. <script>
  1201. $(document).ready(function(){
  1202. $('.photo-slideshow').pxuPhotoset({
  1203. lightbox: true,
  1204. highRes: true,
  1205. gutter: '{select:photoset gutter}',
  1206. borderRadius: '0px',
  1207. photoset: '.photo-slideshow',
  1208. photoWrap: '.photo-data',
  1209. photo: '.pxu-photo'
  1210. });
  1211.  
  1212. }); </script>
  1213.  
  1214. <script>
  1215. $(document).ready(function() {
  1216. // audio player
  1217. var $audio = $('iframe.tumblr_audio_player');
  1218. $audio.load(function() {
  1219. $(this).contents().find('head').append('<style type="text/css">' +
  1220. '.audio-player { background: {color:accent}; color: {color:background} !important; }' +
  1221. '.audio-player .audio-info .track-artist { color: {color:background} !important; }' +
  1222. '</style>');
  1223. });
  1224. });
  1225. </script>
  1226.  
  1227. <script>
  1228. var $container = $('.posts');
  1229. $container.find('.notecount').each(function(){
  1230. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  1231. if (n > 999) {
  1232. n = Math.floor(n / 100) / 10;
  1233. $(this).text(n + 'k notes');
  1234. }
  1235. });
  1236. </script>
  1237.  
  1238. <script>
  1239. var scrollToTopBtn = document.querySelector(".scrollToTopBtn")
  1240. var rootElement = document.documentElement
  1241.  
  1242. function handleScroll() {
  1243. var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight
  1244. if ((rootElement.scrollTop / scrollTotal ) > 0.05) {
  1245. scrollToTopBtn.classList.add("showBtn")
  1246. } else {
  1247. scrollToTopBtn.classList.remove("showBtn")
  1248. }
  1249. }
  1250.  
  1251. function scrollToTop() {
  1252. rootElement.scrollTo({
  1253. top: 0,
  1254. behavior: "smooth"
  1255. })
  1256. }
  1257. scrollToTopBtn.addEventListener("click", scrollToTop)
  1258. document.addEventListener("scroll", handleScroll)
  1259. </script>
  1260.  
  1261. </body>
  1262. </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!