nicolas-sage

custom theme 07

Sep 11th, 2024
169
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 60.92 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en" data-theme="light">
  3. <head>
  4. <link rel="shortcut icon" href="{Favicon}" />
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  6. <title>{Title}</title>
  7. {block:Description}
  8. <meta name="description" content="{MetaDescription}" />
  9. {/block:Description}
  10. {NewPostStyles}
  11. <meta charset="utf-8">
  12. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  13.  
  14. <!----
  15. _________
  16. / \
  17. | __ __ |
  18. | |__| |__| | CUSTOM THEME 07 BY SAGE / PHANTOMCODES
  19. | | https://phantomcodes.tumblr.com
  20. | _ _ _ |
  21. |_| |_| |_| |_|
  22.  
  23.  
  24.  
  25. CREDITS:
  26. - tabler icons / https://tabler-icons.io/
  27. - tippy.js tooltips / https://atomiks.github.io/tippyjs/
  28. - bunny fonts / https://fonts.bunny.net/
  29. - pxu photosets by pixel union with modifications by bychloethemes / https://bychloethemes.tumblr.com/post/155956945114/modified-pxu-photoset-script-modified-by
  30. - responsive videos by nouvae / https://nouvae.tumblr.com/post/176815415055/tutorial-responsive-tumblr-videos-and-external
  31. - time ago plugin by chloethemes / https://bychloethemes.tumblr.com/plugins/timeago
  32. - notes shortener by shythemes / https://shythemes.tumblr.com/post/156021137818/hello-i-was-wondering-if-you-knew-how-to-shorten
  33. - day/night mode tutorial by eggdesign / https://egg.design/post/186889223257/day-night-mode-tutorial-after-featuring-a
  34. - dark mode guide by 22mm / https://22mm.tumblr.com/post/673476677544837120/a-dark-mode-guide-with-css-variables-and-js-this
  35. - npf images fix by glenthemes / https://github.com/npf-images-v3/npf-images-v3.github.io/blob/main/WELCOME.md
  36. - npf audio player by glenthemes / https://glenthemes.tumblr.com/post/722160746171072512/npf-audio-player
  37. - unblue polls by glenthemes / https://glenthemes.tumblr.com/post/708014819571302400/unblue-polls
  38. - copy link to post tutorial by glenthemes / https://glenthemes.tumblr.com/post/173993578944/copy-link-to-post-button-tutorial
  39. - hide tutorial by lmthemes / https://lmthemes.tumblr.com/post/30046967698/tutorial-05-hide-stuff-tutorial-in-this
  40.  
  41. ---->
  42.  
  43. <!-- STYLESHEETS -->
  44.  
  45. <!---- PHOTOSET ---->
  46. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  47. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  48. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  49.  
  50. <!----- BUNNY FONTS ---->
  51. <link href="https://fonts.bunny.net/css?family={text:body font}:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" /><link href="https://fonts.bunny.net/css?family={text:title font}:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" />
  52.  
  53. <!---- ICONS ---->
  54. <script src="https://unpkg.com/phosphor-icons"></script>
  55. <script src="https://unpkg.com/[email protected]"></script>
  56. <script src="//pull.cappuccicons.com/cpf.js"></script>
  57.  
  58. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
  59. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/tabler-icons.min.css">
  60.  
  61. <!---- TOOLTIPS ---->
  62. <script src="https://unpkg.com/popper.js@1"></script>
  63. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  64.  
  65. <!--- FLICKITY --->
  66. <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
  67.  
  68. <!---- VIDEOS ---->
  69. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  70.  
  71. <!---- COPY LINK ---->
  72. <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
  73. <script>
  74. $(document).ready(function(){
  75. var clipboard = new ClipboardJS("#copybutton");
  76. });
  77. </script>
  78.  
  79. <!---- TIME AGO ----->
  80. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  81. <script type="text/javascript">
  82. $(document).ready(function() {
  83. $(".time-ago").timeAgo({
  84. time: "short",
  85. spaces: true,
  86. words: false,
  87. prefix: "",
  88. suffix: "ago",
  89. });
  90. });
  91. </script>
  92.  
  93. <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  94. <link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
  95.  
  96. <!--
  97. NPF images fix v3.0 by @glenthemes [2021]
  98. 💌 git.io/JRBt7
  99. --->
  100. <script src="//npf-images-v3.github.io/script.js"></script>
  101. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  102. <style tmblr-npf>
  103. :root {
  104. --NPF-Caption-Spacing:1em;
  105. --NPF-Image-Spacing:4px;
  106. }
  107. </style>
  108.  
  109. <!---- VARIABLES ---->
  110.  
  111. <meta name="image:Sidebar" content="" />
  112.  
  113. <meta name="color:Background" content="#eee" />
  114. <meta name="color:Posts" content="#f2f2f2" />
  115. <meta name="color:Borders" content="#e8e8e8" />
  116. <meta name="color:Title" content="#404040" />
  117. <meta name="color:Text" content="#606060" />
  118. <meta name="color:Accent One" content="#cd709d"/>
  119. <meta name="color:Accent Two" content="#de8c9b"/>
  120. <meta name="color:Accent Three" content="#e69189"/>
  121.  
  122. <meta name="color:Night Background" content="#383838" />
  123. <meta name="color:Night Posts" content="#3a3a3a" />
  124. <meta name="color:Night Borders" content="#484848" />
  125. <meta name="color:Night Title" content="#fafafa" />
  126. <meta name="color:Night Text" content="#dadada" />
  127. <meta name="color:Night Accent One" content="#ffbad7"/>
  128. <meta name="color:Night Accent Two" content="#ffa5b6"/>
  129. <meta name="color:Night Accent Three" content="#ffb7b7"/>
  130.  
  131. <meta name="select:Corners" content="0px" title="sharp"/>
  132. <meta name="select:Corners" content="5px" title="slightly round"/>
  133.  
  134. <meta name="select:Post Width" content="400px" title="400px"/>
  135. <meta name="select:Post Width" content="350px" title="350px"/>
  136.  
  137. <meta name="text:Body Font" content="Lora"/>
  138. <meta name="text:Title Font" content="Merriweather"/>
  139. <meta name="text:Font Size" content="12"/>
  140. <meta name="text:Blog Name" content="your url here"/>
  141. <meta name="text:Custom Description" content="custom description"/>
  142.  
  143. <meta name="text:Sidebar Link 1" content="/"/>
  144. <meta name="text:Sidebar Link 1 Name" content="link one"/>
  145. <meta name="text:Sidebar Link 2" content="/"/>
  146. <meta name="text:Sidebar Link 2 Name" content="link two"/>
  147.  
  148. <meta name="text:Popup Link 1" content="/"/>
  149. <meta name="text:Popup Link 1 Name" content="popup link"/>
  150. <meta name="text:Popup Link 2" content="/"/>
  151. <meta name="text:Popup Link 2 Name" content="popup link"/>
  152. <meta name="text:Popup Link 3" content="/"/>
  153. <meta name="text:Popup Link 3 Name" content=""/>
  154. <meta name="text:Popup Link 4" content=""/>
  155. <meta name="text:Popup Link 4 Name" content=""/>
  156. <meta name="text:Popup Link 5" content=""/>
  157. <meta name="text:Popup Link 5 Name" content=""/>
  158. <meta name="text:Popup Link 6" content=""/>
  159. <meta name="text:Popup Link 6 Name" content=""/>
  160.  
  161. <!--- day/night --->
  162. <script>
  163. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  164. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
  165. </script>
  166.  
  167. <!------- CSS -------->
  168. <style>
  169.  
  170. /* theme options - common */
  171. :root {
  172. --Spacing: 1rem;
  173. --Corners:{select:Corners};
  174. --PostWidth:{select:Post Width};
  175. }
  176.  
  177. /* theme options - day/night */
  178. :root, html[data-theme='light'] {
  179. --LightOn: flex;
  180. --LightOff: none;
  181. --ColorBackground: {color:background};
  182. --ColorPosts: {color:posts};
  183. --ColorBorders: {color:borders};
  184. --ColorTitle: {color:title};
  185. --ColorText: {color:text};
  186. --ColorAccentOne: {color:accent one};
  187. --ColorAccentTwo: {color:accent two};
  188. --ColorAccentThree: {color:accent three};
  189. --ColorOpacity: rgba(255,255,255,.25);
  190. --ColorReverseOpacity: rgba(0,0,0,.15);
  191. }
  192. html[data-theme='dark'] {
  193. --LightOn: none;
  194. --LightOff: flex;
  195. --ColorBackground: {color:night background};
  196. --ColorPosts: {color:night posts};
  197. --ColorBorders: {color:night borders};
  198. --ColorTitle: {color:night title};
  199. --ColorText: {color:night text};
  200. --ColorAccentOne: {color:night accent one};
  201. --ColorAccentTwo: {color:night accent two};
  202. --ColorAccentThree: {color:night accent three};
  203. --ColorOpacity: rgba(0,0,0,.15);
  204. --ColorReverseOpacity: rgba(255,255,255,.15);
  205. }
  206. html.theme-transition,
  207. html.theme-transition *,
  208. html.theme-transition *:before,
  209. html.theme-transition *:after {
  210. transition: 0s !important;
  211. transition-delay: 0 !important;
  212. }
  213.  
  214. .light-on{
  215. display: var(--LightOn);
  216. }
  217. .light-off{
  218. display: var(--LightOff);
  219. }
  220.  
  221. /*--- TOOLTIPS ---*/
  222.  
  223. .tippy-tooltip.custom-theme {
  224. font-size:.95em;
  225. font-weight:500;
  226. color:var(--ColorPosts);
  227. text-transform:lowercase;
  228. text-align:center;
  229. background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  230. border-radius:5px;
  231. }
  232.  
  233. /*--- SCROLLBAR ---*/
  234. ::-webkit-scrollbar {
  235. width:4px;
  236. height:4px;
  237. background:var(--ColorBackground);
  238. }
  239. ::-webkit-scrollbar-track {
  240. margin-bottom:.5rem;
  241. background:var(--ColorBackground);
  242. border-radius: 5px;
  243. }
  244. ::-webkit-scrollbar-thumb {
  245. background:linear-gradient(to top, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  246. border-radius: 5px;
  247. }
  248.  
  249. /*--- TEXT SELECTION ---*/
  250. ::-moz-selection { /* Code for Firefox */
  251. color:var(--ColorPosts);
  252. background:var(--ColorAccentOne);
  253. }
  254.  
  255. ::selection {
  256. color:var(--ColorPosts);
  257. background:var(--ColorAccentOne);
  258. }
  259.  
  260. * {box-sizing:border-box;}
  261.  
  262. body {
  263. font-family:'{text:body font}', sans-serif;
  264. font-size:{text:font size}px;
  265. color:var(--ColorText);
  266. line-height:150%;
  267. word-wrap:break-word;
  268. letter-spacing:.04em;
  269. margin:0;
  270. background-color:var(--ColorBackground);
  271. }
  272. body {
  273. opacity:1;
  274. transition:.75s opacity;
  275. }
  276.  
  277. body.fade-out {
  278. opacity:0;
  279. transition:none;
  280. }
  281. html {background-color:var(--ColorBackground); scrollbar-gutter:stable;}
  282.  
  283. a {
  284. color:var(--ColorAccentOne);
  285. text-decoration:none;
  286. -webkit-transition: all 0.4s;
  287. -moz-transition: all 0.4s;
  288. -ms-transition: all 0.4s;
  289. -o-transition: all 0.4s;
  290. transition: all 0.4s;
  291. }
  292.  
  293. a:hover {
  294. color:var(--ColorAccentThree);
  295. -webkit-transition: all 0.4s;
  296. -moz-transition: all 0.4s;
  297. -ms-transition: all 0.4s;
  298. -o-transition: all 0.4s;
  299. transition: all 0.4s;
  300. }
  301.  
  302. blockquote {
  303. border-left:1.5px solid var(--ColorBorders);
  304. padding-left:.75em;
  305. margin-left:1em;
  306. }
  307. blockquote p {padding:0!important;}
  308.  
  309. ul {list-style-type:circle; margin:0 0 1rem 0; padding-right:.5rem;}
  310. ol {list-style-type:decimal-leading-zero; margin:0;}
  311. li::marker {color:var(--ColorAccentOne)}
  312.  
  313. small {font-size:.95em;}
  314. big {font-size:1.1em;}
  315.  
  316. h1 {font-size:1.35em; margin:0; color:var(--ColorTitle); display:inline-block;}
  317. h1 a {color:var(--ColorTitle);}
  318. h1 a:hover {color:var(--ColorAccentThree);}
  319. h2 {font-size:1.25em; color:var(--ColorTitle);}
  320. h3 {font-size:1.15em; color:var(--ColorTitle);}
  321. h4 {font-size:1.1em; color:var(--ColorTitle);}
  322. h5 {font-size:1.05em; color:var(--ColorTitle);}
  323. h1, h1 a, h2, h3, h4, h5 {font-family:'{text:title font}', sans-serif;}
  324.  
  325. button {font-size:1em;}
  326.  
  327. hr {
  328. height:1px;
  329. border:none;
  330. box-shadow:none;
  331. background:var(--ColorBorders);
  332. }
  333.  
  334. pre {
  335. word-wrap:break-word!important;
  336. white-space:pre-wrap;
  337. }
  338.  
  339. b, strong {
  340. color:var(--ColorTitle);
  341. font-weight:800;
  342. }
  343.  
  344. b a:hover {
  345. color:var(--ColorAccentThree);
  346. -webkit-transition: all 0.4s;
  347. -moz-transition: all 0.4s;
  348. -ms-transition: all 0.4s;
  349. -o-transition: all 0.4s;
  350. transition: all 0.4s;
  351. }
  352.  
  353. /* common link effects */
  354. .sb-desc a, .aanswer a {
  355. display:inline-block;
  356. position:relative;
  357. border-bottom:1.5px solid var(--ColorBorders);
  358. }
  359. .sb-desc a:after, .aanswer a:after {
  360. content: '';
  361. position:absolute;
  362. bottom:-1.5px;
  363. left:0;
  364. width:100%;
  365. height:1.5px;
  366. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  367. transform:scaleX(0);
  368. transform-origin:center;
  369. transition:transform 0.4s ease-out;
  370. }
  371. .sb-desc a:hover:after, .aanswer a:hover:after {
  372. transform:scaleX(1);
  373. transform-origin:center;
  374. }
  375.  
  376. .sr-text {
  377. border: 0;
  378. clip: rect(1px, 1px, 1px, 1px);
  379. clip-path: inset(50%);
  380. height: 1px;
  381. margin: -1px;
  382. overflow: hidden;
  383. padding: 0;
  384. position: absolute;
  385. width: 1px;
  386. word-wrap: normal !important;
  387. }
  388.  
  389. /*--- FIXED BUTTONS ---*/
  390. .fixedbuttons {
  391. position:fixed;
  392. top:.5rem;
  393. right:.5rem;
  394. display:flex;
  395. justify-content:flex-end;
  396. align-items:center;
  397. gap:.5rem;
  398. z-index:99999;
  399. }
  400.  
  401. /* SCROLL TO TOP */
  402. a#totop {
  403. display:none;
  404. justify-content:center;
  405. align-items:center;
  406. background:var(--ColorBackground);
  407. cursor:help;
  408. }
  409. a#totop i {
  410. font-size:1.5em;
  411. color:var(--ColorTitle);
  412. }
  413. a#totop:hover i {
  414. color:var(--ColorAccentOne);
  415. -webkit-animation-duration: 2.5s;
  416. animation-duration: 2.5s;
  417. -webkit-animation-fill-mode: both;
  418. animation-fill-mode: both;
  419. -webkit-animation-timing-function: ease-in-out;
  420. animation-timing-function: ease-in-out;
  421. animation-iteration-count:1;
  422. -webkit-animation-iteration-count:1;
  423. animation-name:totop;
  424. -moz-animation-name:totop;
  425. }
  426.  
  427. @keyframes totop {
  428. 0% {
  429. -webkit-transform: translateY(0px);
  430. -ms-transform: translateY(0px);
  431. transform: translateY(0px)
  432. }
  433. 10% {
  434. -webkit-transform: translateY(-3px);
  435. -ms-transform: translateY(-3px);
  436. transform: translateY(-3px)
  437. }
  438. 20% {
  439. -webkit-transform: translateY(0px);
  440. -ms-transform: translateY(0px);
  441. transform: translateY(0px)
  442. }
  443. 30% {
  444. -webkit-transform: translateY(-3px);
  445. -ms-transform: translateY(-3px);
  446. transform: translateY(-3px)
  447. }
  448. 40% {
  449. -webkit-transform: translateY(0px);
  450. -ms-transform: translateY(0px);
  451. transform: translateY(0px)
  452. }
  453. 50% {
  454. -webkit-transform: translateY(0px);
  455. -ms-transform: translateY(0px);
  456. transform: translateY(0px)
  457. }
  458. 60% {
  459. -webkit-transform: translateY(0px);
  460. -ms-transform: translateY(0px);
  461. transform: translateY(0px)
  462. }
  463. 70% {
  464. -webkit-transform: translateY(-3px);
  465. -ms-transform: translateY(-3px);
  466. transform: translateY(-3px)
  467. }
  468. 80% {
  469. -webkit-transform: translateY(0px);
  470. -ms-transform: translateY(0px);
  471. transform: translateY(0px)
  472. }
  473. 90% {
  474. -webkit-transform: translateY(-3px);
  475. -ms-transform: translateY(-3px);
  476. transform: translateY(-3px)
  477. }
  478. 100% {
  479. -webkit-transform: translateY(0px);
  480. -ms-transform: translateY(0px);
  481. transform: translateY(0px)
  482. }
  483. }
  484.  
  485. /* DAY/NIGHT */
  486. button#theme-toggle {
  487. position:relative;
  488. outline:none;
  489. border:none;
  490. background:none;
  491. padding:0;
  492. display:flex;
  493. justify-content:center;
  494. align-items:center;
  495. background:var(--ColorBackground);
  496. cursor:help;
  497. }
  498.  
  499. button#theme-toggle span {
  500. justify-content:center;
  501. align-items:center;
  502. -webkit-transition: all 0.4s;
  503. -moz-transition: all 0.4s;
  504. -ms-transition: all 0.4s;
  505. -o-transition: all 0.4s;
  506. transition: all 0.4s;
  507. }
  508.  
  509. button#theme-toggle i {
  510. font-size:1.4em;
  511. color:var(--ColorTitle);
  512. -webkit-transition: all 0.4s;
  513. -moz-transition: all 0.4s;
  514. -ms-transition: all 0.4s;
  515. -o-transition: all 0.4s;
  516. transition: all 0.4s;
  517. }
  518. button#theme-toggle:hover i {
  519. color:var(--ColorAccentOne);
  520. -webkit-transition: all 0.4s;
  521. -moz-transition: all 0.4s;
  522. -ms-transition: all 0.4s;
  523. -o-transition: all 0.4s;
  524. transition: all 0.4s;
  525. -webkit-animation-duration: .75s;
  526. animation-duration: .75s;
  527. -webkit-animation-fill-mode: both;
  528. animation-fill-mode: both;
  529. -webkit-animation-timing-function: ease-in-out;
  530. animation-timing-function: ease-in-out;
  531. animation-iteration-count:1;
  532. -webkit-animation-iteration-count:1;
  533. animation-name:daynight;
  534. -moz-animation-name:daynight;
  535. }
  536.  
  537. @keyframes daynight {
  538. 50% {
  539. -webkit-transform: scaleX(-1);
  540. -ms-transform: scaleX(-1);
  541. transform: scaleX(-1);
  542. }
  543. }
  544.  
  545. /* TUMBLR CONTROLS */
  546. a#controlsbutton {
  547. display:flex;
  548. justify-content:center;
  549. align-items:center;
  550. background:var(--ColorBackground);
  551. cursor:help;
  552. }
  553. a#controlsbutton i {
  554. font-size:1.45em;
  555. color:var(--ColorTitle);
  556. -webkit-transition: all 0.4s;
  557. -moz-transition: all 0.4s;
  558. -ms-transition: all 0.4s;
  559. -o-transition: all 0.4s;
  560. transition: all 0.4s;
  561. }
  562. a#controlsbutton:hover i {
  563. color:var(--ColorAccentOne);
  564. -webkit-animation-duration: 1.5s;
  565. animation-duration: 1.5s;
  566. -webkit-animation-fill-mode: both;
  567. animation-fill-mode: both;
  568. -webkit-animation-timing-function: ease-in-out;
  569. animation-timing-function: ease-in-out;
  570. animation-iteration-count:1;
  571. -webkit-animation-iteration-count:1;
  572. animation-name:tumblrcontrols;
  573. -moz-animation-name:tumblrcontrols;
  574. }
  575. body.controls-click a#controlsbutton i {color:var(--ColorAccentOne);}
  576.  
  577. @keyframes tumblrcontrols {
  578. 45% {
  579. -webkit-transform: rotate(180deg);
  580. -ms-transform: rotate(180deg);
  581. transform: rotate(180deg);
  582. }
  583. 55% {
  584. -webkit-transform: rotate(180deg);
  585. -ms-transform: rotate(180deg);
  586. transform: rotate(180deg);
  587. }
  588. 100% {
  589. -webkit-transform: rotate(360deg);
  590. -ms-transform: rotate(360deg);
  591. transform: rotate(360deg);
  592. }
  593. }
  594.  
  595. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  596. transform:scale(.65);
  597. margin-top:.75rem;
  598. opacity:0;
  599. visibility:hidden;
  600. z-index:999999999!important;
  601. }
  602.  
  603. body.controls-click iframe.tmblr-iframe {
  604. opacity:1.0;
  605. visibility:visible;
  606. -webkit-transition: all 0.5s;
  607. -moz-transition: all 0.5s;
  608. -ms-transition: all 0.5s;
  609. -o-transition: all 0.5s;
  610. transition: all 0.5s;
  611. }
  612.  
  613. /*--- FIXED CREDIT: DO NOT TOUCH ---*/
  614. a.credit {
  615. position:fixed;
  616. right:.5rem;
  617. bottom:.5rem;
  618. padding:.25rem;
  619. display:flex;
  620. justify-content:center;
  621. align-items:center;
  622. background:var(--ColorBackground);
  623. border-radius:var(--Corners);
  624. z-index:99999;
  625. }
  626. a.credit i {
  627. font-size:1.6em;
  628. color:var(--ColorTitle);
  629. background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  630. background-clip:text;
  631. -webkit-background-clip:text;
  632. transition:ease-in-out .5s;
  633. -webkit-transition: all 0.4s;
  634. -moz-transition: all 0.4s;
  635. -ms-transition: all 0.4s;
  636. -o-transition: all 0.4s;
  637. transition: all 0.4s;
  638. }
  639. a.credit:hover i {
  640. color:transparent;
  641. -webkit-animation-duration: 2s;
  642. animation-duration: 2s;
  643. -webkit-animation-fill-mode: both;
  644. animation-fill-mode: both;
  645. -webkit-animation-timing-function: ease-in-out;
  646. animation-timing-function: ease-in-out;
  647. animation-iteration-count:infinite;
  648. -webkit-animation-iteration-count:infinite;
  649. animation-name: bounce;
  650. -moz-animation-name: bounce;
  651. }
  652.  
  653. @keyframes bounce {
  654. 0% {
  655. -webkit-transform: translateY(0px);
  656. -ms-transform: translateY(0px);
  657. transform: translateY(0px)
  658. }
  659. 25% {
  660. -webkit-transform: translateY(-3px);
  661. -ms-transform: translateY(-3px);
  662. transform: translateY(-3px)
  663. }
  664. 50% {
  665. -webkit-transform: translateY(0px);
  666. -ms-transform: translateY(0px);
  667. transform: translateY(0px)
  668. }
  669. 75% {
  670. -webkit-transform: translateY(-3px);
  671. -ms-transform: translateY(-3px);
  672. transform: translateY(-3px)
  673. }
  674. 100% {
  675. -webkit-transform: translateY(0px);
  676. -ms-transform: translateY(0px);
  677. transform: translateY(0px)
  678. }
  679. }
  680.  
  681. /*--- SIDEBAR ---*/
  682. #leftsidebar {
  683. position:fixed;
  684. top:0;
  685. left:1rem;
  686. width:275px;
  687. height:100%;
  688. padding:4rem 1rem 1rem 1rem;
  689. display:flex;
  690. flex-direction:column;
  691. justify-content:flex-start;
  692. align-items:flex-start;
  693. gap:.5rem;
  694. background:var(--ColorBackground);
  695. transition:ease-in-out .55s;
  696. z-index:99;
  697. }
  698.  
  699. .sb-img {
  700. width:100%;
  701. height:auto;
  702. display:flex;
  703. justify-content:center;
  704. align-items:center;
  705. border-radius:var(--Corners);
  706. }
  707. .sb-img img {width:100%; height:auto; object-fit:cover; border-radius:var(--Corners);}
  708. a.sb-title {
  709. width:100%;
  710. font-family:'{text:title font}', sans-serif;
  711. font-size:1.2em;
  712. color:var(--ColorTitle);
  713. font-weight:600;
  714. }
  715. .sb-desc p:last-of-type {margin-bottom:0;}
  716.  
  717. /* sidebar nav */
  718. nav {
  719. position:relative;
  720. width:100%;
  721. margin-top:.5rem;
  722. display:flex;
  723. flex-direction:column;
  724. gap:.5rem;
  725. }
  726. nav a.mainlink {
  727. width:fit-content;
  728. display:flex;
  729. justify-content:flex-start;
  730. align-items:center;
  731. gap:.5rem;
  732. }
  733. nav a.mainlink:hover {gap:.35rem;}
  734. nav a.mainlink span {color:var(--ColorTitle);}
  735. nav a.mainlink i {
  736. font-size:1.3em;
  737. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  738. -webkit-background-clip:text;
  739. -webkit-text-fill-color:transparent;
  740. -webkit-transition: all 0.4s;
  741. -moz-transition: all 0.4s;
  742. -ms-transition: all 0.4s;
  743. -o-transition: all 0.4s;
  744. transition: all 0.4s;
  745. }
  746.  
  747. nav a#navbutton {cursor:help;}
  748. nav a#navbutton:hover i {transform:rotate(90deg);}
  749. body.nav-click a#navbutton i {transform:rotate(90deg);}
  750.  
  751. /* nav popup */
  752. .sb-nav {
  753. position:absolute;
  754. top:calc(100% + .5rem);
  755. max-width:100%;
  756. padding:.5rem;
  757. display:none;
  758. justify-content:flex-start;
  759. align-items:center;
  760. flex-wrap:wrap;
  761. gap:.5rem;
  762. background:var(--ColorPosts);
  763. border:1px solid var(--ColorBorders);
  764. border-radius:var(--Corners);
  765. }
  766. body.nav-click .sb-nav {display:flex;}
  767. .sb-navtitle {
  768. width:100%;
  769. }
  770. .sb-navtitle b {
  771. position:relative;
  772. display:inline-block;
  773. font-family:'{text:title font}', sans-serif;
  774. text-shadow:0 .5px var(--ColorPosts);
  775. line-height:120%;
  776. z-index:1;
  777. }
  778. .sb-navtitle b:after {
  779. content: '';
  780. position:absolute;
  781. bottom:0;
  782. left:0;
  783. width:100%;
  784. height:50%;
  785. opacity:.5;
  786. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  787. z-index:-1;
  788. }
  789. .sb-nav a {
  790. width:calc(50% - .25rem);
  791. }
  792. .sb-nav a span {
  793. position:relative;
  794. display:inline-block;
  795. color:var(--ColorText);
  796. line-height:120%;
  797. z-index:1;
  798. -webkit-transition: all 0.4s;
  799. -moz-transition: all 0.4s;
  800. -ms-transition: all 0.4s;
  801. -o-transition: all 0.4s;
  802. transition: all 0.4s;
  803. }
  804. .sb-nav a:hover span {color:var(--ColorTitle); text-shadow:0 .5px var(--ColorPosts);}
  805. .sb-nav a span:after {
  806. content: '';
  807. position:absolute;
  808. bottom:0;
  809. left:0;
  810. width:100%;
  811. height:50%;
  812. opacity:.5;
  813. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  814. transform:scaleY(0);
  815. transform-origin:bottom;
  816. transition:transform 0.4s ease-out;
  817. z-index:-1;
  818. }
  819. .sb-nav a span:hover:after {
  820. transform:scaleY(1);
  821. transform-origin:bottom;
  822. }
  823.  
  824. /*-- ask box --*/
  825. #ask_form {margin-bottom:-.5em; border-radius: 0 0 var(--Corners) var(--Corners);}
  826. #submit_form {margin-bottom:-.5em; border-radius: 0 0 var(--Corners) var(--Corners);}
  827. /*-- read more --*/
  828. a.read_more {font-size:.95em; text-transform:uppercase;}
  829.  
  830. /*--- MAIN STYLING ---*/
  831.  
  832. main {
  833. position:relative;
  834. width:100%;
  835. height:100%;
  836. display:flex;
  837. flex-direction:column;
  838. align-items:center;
  839. }
  840. section {
  841. position:relative;
  842. width:100%;
  843. height:100%;
  844. margin:auto;
  845. display:flex;
  846. justify-content:center;
  847. transition:ease-in-out .55s;
  848. }
  849.  
  850. .section-wrap {
  851. position:relative;
  852. width:100%;
  853. }
  854.  
  855. article {
  856. position:relative;
  857. width:100%;
  858. max-width:calc(var(--PostWidth) + 4rem + 2px);
  859. margin:2rem auto 2rem auto;
  860. padding:1rem 2rem 1rem 2rem;
  861. transition:ease-in-out .55s;
  862. }
  863. article:first-of-type {padding-top:2rem;}
  864. article:last-of-type {border-bottom:none;}
  865.  
  866. .article-wrap {width:100%;}
  867.  
  868. .post-wrap {
  869. position:relative;
  870. width:100%;
  871. padding:1rem;
  872. background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  873. border-radius:var(--Corners);
  874. z-index:1;
  875. }
  876. .post-wrap:after {
  877. content:'';
  878. position:absolute;
  879. top:1px;
  880. left:1px;
  881. width:calc(100% - 2px);
  882. height:calc(100% - 2px);
  883. background:var(--ColorPosts);
  884. border-radius:calc(var(--Corners) - 1px);
  885. z-index:-1;
  886. }
  887.  
  888. /*-- TOP POST INFO --*/
  889. .topinfo {
  890. position:relative;
  891. margin-bottom:.5rem;
  892. display:flex;
  893. justify-content:flex-start;
  894. align-items:center;
  895. gap:.5rem;
  896. }
  897. .topinfoleft {
  898. display:flex;
  899. justify-content:flex-start;
  900. align-items:center;
  901. gap:.5rem;
  902. }
  903. .til-name {
  904. display:flex;
  905. justify-content:flex-start;
  906. align-items:center;
  907. gap:.25rem;
  908. }
  909. .til-icon {
  910. display:flex;
  911. justify-content:center;
  912. align-items:center;
  913. }
  914. .til-icon i {
  915. font-size:1.3em;
  916. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  917. -webkit-background-clip:text;
  918. -webkit-text-fill-color:transparent;
  919. }
  920. .til-icon#pinned i {transform:rotate(-45deg);}
  921. .til-name a b {
  922. font-size:1.05em;
  923. font-weight:bold;
  924. color:var(--ColorTitle);
  925. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  926. background-clip:text;
  927. -webkit-background-clip:text;
  928. transition:ease-in-out .5s;
  929. }
  930. .til-name a:hover b {color:transparent;}
  931.  
  932. /* more info */
  933. .moreinfo {
  934. position:absolute;
  935. top:calc(100% + .5rem);
  936. left:calc(100% + .5rem);
  937. max-width:125px;
  938. overflow:hidden;
  939. z-index:9;
  940. }
  941. .moreinfowrap {
  942. display:flex;
  943. flex-direction:column;
  944. gap:.25rem;
  945. }
  946. .moreinfo a {
  947. display:flex;
  948. justify-content:flex-start;
  949. align-items:center;
  950. gap:.35rem;
  951. }
  952. .moreinfo-icon {
  953. display:flex;
  954. justify-content:center;
  955. align-items:center;
  956. margin-left:-1px;
  957. padding-bottom:1px;
  958. background:var(--ColorBackground);
  959. z-index:1;
  960. }
  961. .moreinfo-icon i {
  962. font-size:1.3em;
  963. color:var(--ColorTitle);
  964. background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  965. background-clip:text;
  966. -webkit-background-clip:text;
  967. transition:ease-in-out .5s;
  968. }
  969. .moreinfo a:hover .moreinfo-icon i {color:transparent;}
  970. .moreinfo a li {
  971. margin-left:-100%;
  972. list-style-type:none;
  973. -webkit-transition: all 01s;
  974. -moz-transition: all 01s;
  975. -ms-transition: all 01s;
  976. -o-transition: all 01s;
  977. transition: all 01s;
  978. }
  979. .moreinfo a:nth-of-type(2) li {transition-delay:.25s; transition-property:margin-left;}
  980. .moreinfo a:nth-of-type(3) li {transition-delay:.5s; transition-property:margin-left;}
  981. article:hover .moreinfo a li {margin-left:0;}
  982. .moreinfo a span {
  983. font-size:.95em;
  984. color:var(--ColorText);
  985. opacity:0;
  986. text-transform:lowercase;
  987. white-space:nowrap;
  988. overflow:hidden;
  989. text-overflow:ellipsis;
  990. border-bottom:1px solid var(--ColorBorders);
  991. -webkit-transition: all 01s;
  992. -moz-transition: all 01s;
  993. -ms-transition: all 01s;
  994. -o-transition: all 01s;
  995. transition: all 01s;
  996. }
  997. .moreinfo a:hover span {color:var(--ColorTitle);}
  998. article:hover .moreinfo a span {opacity:1;}
  999. .moreinfo a:nth-of-type(1):hover span {border-bottom:1px solid var(--ColorAccentOne);}
  1000. .moreinfo a:nth-of-type(2):hover span {border-bottom:1px solid var(--ColorAccentTwo);}
  1001. .moreinfo a:nth-of-type(3):hover span {border-bottom:1px solid var(--ColorAccentThree);}
  1002.  
  1003. /*--- POST STUFF ---*/
  1004.  
  1005. article .caption p {
  1006. margin:0!important;
  1007. padding:.5rem 0 .5rem 0;
  1008. }
  1009. .caption p {margin-top:0!important; margin-bottom:0;}
  1010. .caption p:first-of-type {padding-top:.25rem;}
  1011. .caption p:last-of-type {padding-bottom:0;}
  1012.  
  1013. /*-- text posts --*/
  1014. .userlink {
  1015. display:flex;
  1016. justify-content:flex-start;
  1017. align-items:center;
  1018. gap:.5rem;
  1019. padding:0;
  1020. margin:.5rem 0 .5rem 0;
  1021. }
  1022. .userlink.first {display:none;}
  1023. .userlink img {
  1024. width:1.5em;
  1025. height:1.5em;
  1026. border-radius:100%;
  1027. }
  1028. .userlink a {color:var(--ColorTitle); font-weight:600;}
  1029. .userlink a:hover {color:var(--ColorAccentTwo);}
  1030. .userlink a.deactive:after {
  1031. content:'(deactivated)';
  1032. margin-left:.5em;
  1033. font-size:.9em;
  1034. font-weight:normal;
  1035. color:var(--ColorText);
  1036. }
  1037.  
  1038. p:empty {
  1039. display:none;
  1040. }
  1041.  
  1042. article .quote,
  1043. article .source {
  1044. padding:1rem;
  1045. }
  1046.  
  1047. article h1 {
  1048. margin:0;
  1049. padding:1rem 0 1rem 0;
  1050. font-family:'{text:title font}', sans-serif;
  1051. font-size:1.3rem;
  1052. color:var(--ColorTitle);
  1053. }
  1054. article h2 {
  1055. margin:0;
  1056. padding:.5rem 0 .5rem 0;
  1057. }
  1058.  
  1059. article img {display:block;}
  1060. article iframe,
  1061. article img {max-width:100%;}
  1062.  
  1063. .vignette, #vignette {opacity:0;}
  1064. .tmblr-lightbox, #tumblr_lightbox {
  1065. backdrop-filter:blur(10px);
  1066. background-color:rgba(0,0,0,.25)!important;
  1067. z-index:9999999;
  1068. }
  1069. .lightbox-image, #tumblr_lightbox img {
  1070. box-shadow:none!important;
  1071. }
  1072. #tumblr_lightbox_caption, .lightbox-caption {
  1073. color:#fff!important;
  1074. font-family:inherit;
  1075. margin-top:1em!important;
  1076. z-index:9999999;
  1077. }
  1078.  
  1079. /*-- photo posts --*/
  1080. .npf_inst > *:last-child {
  1081. border-radius:0 0 var(--Corners) var(--Corners);
  1082. }
  1083. .npf_inst > *:first-child {
  1084. border-radius:var(--Corners) var(--Corners) 0 0;
  1085. }
  1086. .npf_inst > *:only-child {
  1087. border-radius:var(--Corners);
  1088. }
  1089.  
  1090. /*-- poll posts --*/
  1091. .poll-post {padding:0;}
  1092. .poll-post p {padding-top:.5rem!important; padding-bottom:.5rem!important;}
  1093. .poll-post .poll-question {
  1094. font-size:1.2rem!important;
  1095. color:var(--ColorTitle);
  1096. padding:0!important;
  1097. margin:0!important;
  1098. }
  1099. .poll-post a.poll-row {}
  1100. .poll-post a.poll-row:hover {}
  1101. .poll-post .poll-see-results {
  1102. font-weight:bold;
  1103. text-transform:uppercase;
  1104. color:var(--ColorTitle)!important;
  1105. }
  1106.  
  1107. /*-- quote posts --*/
  1108. .quotepost {width:100%;}
  1109. .quote {
  1110. font-family:'{text:title font}', sans-serif;
  1111. font-size:1.1em;
  1112. color:var(--ColorTitle);
  1113. }
  1114. .source {
  1115. color:var(--ColorTitle);
  1116. }
  1117.  
  1118. /*-- link posts --*/
  1119. .npf-link-block, .linkpost {
  1120. position:relative;
  1121. width:100%;
  1122. margin:0!important;
  1123. color:var(--ColorPosts)!important;
  1124. text-shadow:0 1px rgba(0,0,0,.1);
  1125. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  1126. border:none!important;
  1127. border-radius:var(--Corners)!important;
  1128. z-index:1;
  1129. }
  1130. .linkpost {padding:.75rem;}
  1131.  
  1132. .npf-link-block .poster {border-bottom:none!important; border-radius:0!important;}
  1133.  
  1134. .npf-link-block .description, .linkpost a {
  1135. color:var(--ColorPosts)!important;
  1136. text-shadow:0 1px rgba(0,0,0,.1);
  1137. transition:ease-in-out .5s;
  1138. }
  1139. .npf-link-block a:hover .description, .linkpost a:hover {text-shadow:none;}
  1140.  
  1141. .npf-link-block .title {text-shadow:0 1px rgba(0,0,0,.1);}
  1142.  
  1143. .npf-link-block .bottom .site-name {
  1144. color:var(--ColorTitle);
  1145. -webkit-transition: all 0.5s;
  1146. -moz-transition: all 0.5s;
  1147. -ms-transition: all 0.5s;
  1148. -o-transition: all 0.5s;
  1149. transition: all 0.5s;
  1150. }
  1151. .npf-link-block a:hover .bottom .site-name {opacity:1;}
  1152.  
  1153. /*-- answer posts --*/
  1154. .answer-post .caption:last-of-type {padding-top:0!important; padding-bottom:0!important;}
  1155. article .question {
  1156. width:100%;
  1157. margin-bottom:1rem;
  1158. display:flex;
  1159. gap:1rem;
  1160. }
  1161. .qicon {
  1162. width:1.5rem;
  1163. height:1.5rem;
  1164. margin-top:.35rem;
  1165. padding:1.5px;
  1166. display:flex;
  1167. justify-content:center;
  1168. align-items:center;
  1169. background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  1170. border-radius:100%;
  1171. }
  1172. .qicon img {
  1173. width:100%;
  1174. height:100%;
  1175. border-radius:100%;
  1176. }
  1177.  
  1178. .qbulk {
  1179. position:relative;
  1180. width:calc(100% - 2rem);
  1181. padding:.75rem;
  1182. background:var(--ColorBackground);
  1183. border:1px solid var(--ColorBorders);
  1184. border-radius:var(--Corners);
  1185. }
  1186. .qbulk:after {
  1187. content:'';
  1188. position:absolute;
  1189. top:calc(.5rem + 1px);
  1190. right:calc(-.5rem - 1px);
  1191. width:1rem;
  1192. height:1rem;
  1193. transform:rotate(45deg);
  1194. background:var(--ColorBackground);
  1195. border-top:1px solid var(--ColorBorders);
  1196. border-right:1px solid var(--ColorBorders);
  1197. border-top-right-radius:var(--Corners);
  1198. }
  1199. .qbulk li {
  1200. width:fit-content;
  1201. display:flex;
  1202. justify-content:center;
  1203. align-items:center;
  1204. gap:.25rem;
  1205. }
  1206. .qbulk a {color:var(--ColorTitle);}
  1207. .qbulk a:hover {color:var(--ColorAccentTwo);}
  1208. .qcont {
  1209. position:relative;
  1210. width:100%;
  1211. text-align:left;
  1212. }
  1213. .qcont p:last-of-type {margin-bottom:0;}
  1214.  
  1215. /* answer */
  1216. article .replies, article .answer {
  1217. padding:0;
  1218. }
  1219. .answerheader {
  1220. display:flex;
  1221. justify-content:flex-start;
  1222. align-items:center;
  1223. gap:.5rem;
  1224. }
  1225. .answerheader li {list-style-type:none;}
  1226. .answerheader li a {color:var(--ColorTitle);}
  1227. .answerheader li a:hover {color:var(--ColorAccentTwo);}
  1228. .answerheader .aicon {
  1229. width:1.5rem;
  1230. height:1.5rem;
  1231. display:flex;
  1232. justify-content:center;
  1233. align-items:center;
  1234. padding:1.5px;
  1235. background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  1236. border-radius:100%;
  1237. }
  1238. .answerheader .aicon img {
  1239. width:100%;
  1240. height:100%;
  1241. border-radius:100%;
  1242. }
  1243. .answerheader a {color:var(--ColorTitle);}
  1244. .answerheader a:hover {color:var(--ColorAccentTwo);}
  1245. .answercont {}
  1246. .answercont p:last-of-type {margin-bottom:0;}
  1247.  
  1248. /*--- AUDIO POSTS ---*/
  1249. .audiopost {
  1250. width:100%;
  1251. display:flex;
  1252. justify-content:space-between;
  1253. align-items:center;
  1254. background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  1255. border-radius:var(--Corners);
  1256. }
  1257. .audiopost iframe {width:100%;}
  1258.  
  1259. .albumart {
  1260. display:flex;
  1261. justify-content:center;
  1262. align-items:center;
  1263. }
  1264.  
  1265. .albumart img {
  1266. width:5.5rem;
  1267. height:5.5rem;
  1268. object-fit:cover;
  1269. border-radius:0 var(--Corners) var(--Corners) 0;
  1270. }
  1271.  
  1272. .audiotitle {
  1273. padding:.5rem 1rem .5rem 1rem;
  1274. display:flex;
  1275. justify-content:flex-start;
  1276. align-items:center;
  1277. gap:1rem;
  1278. }
  1279.  
  1280. .audioplay {
  1281. width:30px;
  1282. height:30px;
  1283. overflow:hidden;
  1284. position:relative;
  1285. z-index:1;
  1286. }
  1287. .audioplaybg {
  1288. transform:scale(.85);
  1289. display:flex;
  1290. justify-content:center;
  1291. align-items:center;
  1292. padding:8px 8px 5px 5px;
  1293. background:#f2f2f2;
  1294. border-radius:100%;
  1295. }
  1296.  
  1297. .audiotitle li {
  1298. display:flex;
  1299. flex-direction:column;
  1300. align-items:flex-start;
  1301. gap:.15em;
  1302. }
  1303.  
  1304. .audiotitle b {font-size:1.05em; color:var(--ColorPosts); text-shadow:0 1px rgba(0,0,0,.1);}
  1305.  
  1306. .audiotitle span {color:var(--ColorPosts); text-shadow:0 1px rgba(0,0,0,.1);}
  1307.  
  1308. .spotify_audio_player,
  1309. article iframe[src*='soundcloud'] {
  1310. max-height:calc(170px + 1rem);
  1311. border:0;
  1312. padding:1rem;
  1313. padding-bottom:0;
  1314. }
  1315.  
  1316. /*--- CHAT POSTS ---*/
  1317. .chatpost li {
  1318. font-family:'Courier', sans-serif;
  1319. width:100%;
  1320. list-style-type:none;
  1321. }
  1322. .chatpost li b {text-transform:uppercase;}
  1323.  
  1324. .npf_chat {margin:0!important; padding:0!important;}
  1325. .npf_chat:first-of-type {margin:0!important; padding:0!important;}
  1326.  
  1327. /*-- BOTTOM POST INFO --*/
  1328. .bottompostinfo {
  1329. width:3rem;
  1330. float:right;
  1331. margin-top:.5rem;
  1332. margin-left:.5rem;
  1333. display:flex;
  1334. justify-content:flex-end;
  1335. align-items:center;
  1336. gap:.5rem;
  1337. }
  1338.  
  1339. a.reblog-btn {
  1340. display:flex;
  1341. justify-content:center;
  1342. align-items:center;
  1343. }
  1344. a.reblog-btn i {
  1345. font-size:1.5em;
  1346. color:var(--ColorTitle);
  1347. -webkit-transition: all 0.4s;
  1348. -moz-transition: all 0.4s;
  1349. -ms-transition: all 0.4s;
  1350. -o-transition: all 0.4s;
  1351. transition: all 0.4s;
  1352. }
  1353. a.reblog-btn:hover i {color:var(--ColorAccentOne);}
  1354.  
  1355. a.like-button {
  1356. display:flex;
  1357. justify-content:center;
  1358. align-items:center;
  1359. }
  1360. a.like-button i {
  1361. font-size:1.35em;
  1362. color:transparent;
  1363. -webkit-text-stroke-width:1.5px;
  1364. -webkit-text-stroke-color:var(--ColorTitle);
  1365. -webkit-transition: all 0.4s;
  1366. -moz-transition: all 0.4s;
  1367. -ms-transition: all 0.4s;
  1368. -o-transition: all 0.4s;
  1369. transition: all 0.4s;
  1370. }
  1371. a.like-button:hover i {-webkit-text-stroke-color:var(--ColorAccentOne);}
  1372. .bottompostinfo span {
  1373. display:flex;
  1374. justify-content:center;
  1375. align-items:center;
  1376. -webkit-transition: all 0.4s;
  1377. -moz-transition: all 0.4s;
  1378. -ms-transition: all 0.4s;
  1379. -o-transition: all 0.4s;
  1380. transition: all 0.4s;
  1381. }
  1382. .like-button {
  1383. position:relative;
  1384. display:inline-block;
  1385. }
  1386. .like-button .like_button iframe {
  1387. position:absolute;
  1388. top:0;
  1389. left:0;
  1390. bottom:0;
  1391. right:0;
  1392. z-index:2;
  1393. opacity:0;
  1394. }
  1395. .like_button iframe {width:100%!important; height:100%!important;}
  1396. .like-button .liked + .actual-button i {
  1397. -webkit-text-stroke-color:transparent;
  1398. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  1399. -webkit-background-clip:text;
  1400. -webkit-text-fill-color:transparent;
  1401. }
  1402.  
  1403. /*--- TAGS ---*/
  1404. .tags {
  1405. width:calc(100% - 3.5rem);
  1406. height:50px;
  1407. margin-top:.5rem;
  1408. opacity:0;
  1409. line-height:140%;
  1410. display:flex;
  1411. justify-content:flex-start;
  1412. align-items:flex-start;
  1413. flex-wrap:wrap;
  1414. gap:0rem .5rem;
  1415. -webkit-transition: all 01s;
  1416. -moz-transition: all 01s;
  1417. -ms-transition: all 01s;
  1418. -o-transition: all 01s;
  1419. transition: all 01s;
  1420. }
  1421. article:hover .tags {opacity:1;}
  1422. .tags span {
  1423. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  1424. -webkit-background-clip:text;
  1425. -webkit-text-fill-color:transparent;
  1426. }
  1427. .tags a {font-size:.975em; color:var(--ColorText);}
  1428. .tags a:nth-of-type(odd):hover {color:var(--ColorAccentOne);}
  1429. .tags a:nth-of-type(even):hover {color:var(--ColorAccentTwo);}
  1430.  
  1431. /*--- TAG / DAY PAGES ---*/
  1432. article.tdpage {
  1433. display:flex;
  1434. justify-content:flex-start;
  1435. align-items:center;
  1436. gap:.5rem;
  1437. }
  1438. article.tdpage b {}
  1439. article.tdpage i {
  1440. font-size:1.3em;
  1441. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  1442. -webkit-background-clip:text;
  1443. -webkit-text-fill-color:transparent;
  1444. }
  1445.  
  1446. /*--- PERMALINK PAGE ---*/
  1447. .permalinkpage {
  1448. width:100%;
  1449. max-width:var(--PostWidth);
  1450. background:var(--ColorPosts);
  1451. border-radius:var(--Corners);
  1452. border:1px solid var(--ColorBorders);
  1453. }
  1454.  
  1455. .permalink-info {
  1456. width:100%;
  1457. padding:.75rem;
  1458. display:flex;
  1459. flex-direction:column;
  1460. justify-content:flex-start;
  1461. align-items:flex-start;
  1462. gap:1rem;
  1463. }
  1464. .permalink-info li {
  1465. display:flex;
  1466. justify-content:flex-start;
  1467. align-items:center;
  1468. gap:.5rem;
  1469. }
  1470. .permalink-info span {text-transform:lowercase;}
  1471. .permalink-info li i {
  1472. font-size:1.2em;
  1473. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  1474. -webkit-background-clip:text;
  1475. -webkit-text-fill-color:transparent;
  1476. }
  1477. .permalink-info a {font-weight:600; color:var(--ColorTitle);}
  1478. .permalink-info a:hover {color:var(--ColorAccentOne);}
  1479. .permalink-info b {font-weight:500;}
  1480.  
  1481. /* post notes */
  1482. .postnotes {width:100%; padding:.75rem; border-top:1px solid var(--ColorBorders);}
  1483. ol.notes {
  1484. max-width:100%;
  1485. margin:0;
  1486. padding:0;
  1487. font-size:.95em;
  1488. }
  1489.  
  1490. .more_notes_link {
  1491. width:100%!important;
  1492. }
  1493. a.more_notes_link {
  1494. font-size:.925em;
  1495. font-weight:normal;
  1496. color:var(--ColorTitle);
  1497. letter-spacing:.075em;
  1498. text-transform:uppercase!important;
  1499. }
  1500. a.more_notes_link:hover {color:var(--ColorAccentOne);}
  1501.  
  1502. ol.notes li.note blockquote {
  1503. display:none;
  1504. }
  1505.  
  1506. ol.notes li.note {
  1507. padding:.5rem .75rem .5rem 0;
  1508. list-style-type:none;
  1509. display:flex;
  1510. align-items:center;
  1511. gap:.25rem;
  1512. font-size:.975em;
  1513. }
  1514. ol.notes li.note:first-of-type {border-top:none;}
  1515. ol.notes li.note a {color:var(--ColorTitle); font-weight:500; text-transform:lowercase;}
  1516.  
  1517. ol.notes li.note img.avatar {
  1518. display:none;
  1519. }
  1520.  
  1521. ol.notes li.note.reblog::after {
  1522. content:'\ec37';
  1523. color:var(--ColorAccentOne);
  1524. }
  1525.  
  1526. ol.notes li.note.like::after {
  1527. content:'\eb04';
  1528. color:var(--ColorAccentTwo);
  1529. }
  1530.  
  1531. ol.notes li.note.reply::after {
  1532. content:'\e9d7';
  1533. color:var(--ColorAccentTwo);
  1534. }
  1535. ol.notes li.note.reply span {
  1536. width:calc(100% - 3rem);
  1537. color:var(--ColorText);
  1538. white-space:nowrap;
  1539. overflow:hidden;
  1540. text-overflow:ellipsis;
  1541. }
  1542. ol.notes li.note.reply span.action {
  1543. color:var(--ColorText);
  1544. }
  1545.  
  1546. ol.notes li.note.original_post::after {
  1547. content:'\eb68';
  1548. color:var(--ColorTitle);
  1549. }
  1550. ol.notes li.note.original_post {
  1551. font-weight:bold;
  1552. color:var(--ColorTitle);
  1553. }
  1554.  
  1555. ol.notes li.note.reblog, ol.notes li.note.like, ol.notes li.note.original_post, ol.notes li.note.reply, a.more_notes_link {
  1556. position:relative;
  1557. }
  1558. ol.notes li.note.reblog span, ol.notes li.note.like span, ol.notes li.note.original_post span, ol.notes li.note.reply span {margin-right:.3em; margin-left:.3em;}
  1559. ol.notes li.note.reblog::after, ol.notes li.note.like::after, ol.notes li.note.original_post::after, ol.notes li.note.reply::after, a.more_notes_link::after {
  1560. position:absolute;
  1561. right:0;
  1562. font-family:'cappuccicons';
  1563. }
  1564.  
  1565. /*--- PAGINATION ---*/
  1566. article.pagination {
  1567. display:flex;
  1568. justify-content:space-between;
  1569. align-items:center;
  1570. gap:1rem;
  1571. }
  1572. .paginationtitle {
  1573. font-size:.95em;
  1574. text-transform:lowercase;
  1575. white-space:nowrap;
  1576. }
  1577.  
  1578. a.pg-prev, a.pg-next {
  1579. display:flex;
  1580. justify-content:center;
  1581. align-items:center;
  1582. gap:.25rem;
  1583. }
  1584. a.pg-prev i, a.pg-next i {
  1585. font-size:1.5em;
  1586. color:var(--ColorTitle);
  1587. background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree));
  1588. background-clip:text;
  1589. -webkit-background-clip:text;
  1590. transition:ease-in-out .5s;
  1591. }
  1592. a.pg-prev:hover i, a.pg-next:hover i {color:transparent;}
  1593. a.pg-prev span, a.pg-next span {
  1594. color:var(--ColorText);
  1595. -webkit-transition: all 0.5s;
  1596. -moz-transition: all 0.5s;
  1597. -ms-transition: all 0.5s;
  1598. -o-transition: all 0.5s;
  1599. transition: all 0.5s;
  1600. }
  1601. a.pg-prev:hover span, a.pg-next:hover span {color:var(--ColorTitle);}
  1602.  
  1603. a#nobtn {opacity:.4; cursor:not-allowed;}
  1604. a#nobtn i {color:var(--ColorText);}
  1605. a#nobtn:hover i, a#nobtn:hover span {color:var(--ColorText);}
  1606.  
  1607. /*--- RESPONSIVENESS
  1608. @media only screen and (max-width: 900px) {
  1609. #leftsidebar {display:none;}
  1610. }
  1611.  
  1612. {CustomCSS}
  1613. </style>
  1614.  
  1615. <!--✻✻✻✻✻✻ UN-BLUE POLLS by @glenthemes ✻✻✻✻✻✻-->
  1616. <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
  1617. <style>
  1618. .poll-post {
  1619. --Poll-Question-Font-Size:1.2em;
  1620.  
  1621. --Poll-Option-Background-Color:var(--ColorPosts);
  1622. --Poll-Option-Corner-Rounding:var(--Corners);
  1623. --Poll-Option-Border-Size:1px;
  1624. --Poll-Option-Border-Color:var(--ColorBorders);
  1625. --Poll-Option-Padding:.25rem;
  1626. --Poll-Option-Font-Size:1em;
  1627. --Poll-Option-Spacing:.25rem;
  1628. --Poll-Option-Text-Color:var(--ColorText);
  1629.  
  1630. --Poll-Option-HOVER-Border-Color:var(--ColorAccentOne);
  1631. --Poll-Option-HOVER-Background-Color:var(--ColorAccentOne);
  1632. --Poll-Option-HOVER-Text-Color:var(--ColorBackground);
  1633. --Poll-Option-HOVER-Speed:0.4s;
  1634. }
  1635. </style>
  1636.  
  1637. </head>
  1638.  
  1639. <body class="{block:homepage}home{/block:homepage}{block:tagpage}tag{/block:tagpage}{block:searchpage}search{/block:searchpage}{block:submitpage}submit-{/block:submitpage}{block:AskPage}ask{/block:AskPage}-page">
  1640.  
  1641. <!--✻✻✻✻✻✻ npf audio player by @glenthemes ✻✻✻✻✻✻-->
  1642. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  1643. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  1644. <script>
  1645. tumblr_npf_audio({
  1646. emptyTitleText: "untitled track",
  1647. emptyArtistText: "untitled artist",
  1648. emptyAlbumText: "",
  1649.  
  1650. titleLabel: "",
  1651. artistLabel: "",
  1652. albumLabel: ""
  1653. });
  1654. </script>
  1655. <style edit-npf-audio-player>
  1656. figcaption.audio-caption,
  1657. figcaption.audio-caption + audio[controls]{
  1658. display:none!important;
  1659. }
  1660. .npf-audio-wrapper {
  1661. --NPF-Audio-Buttons-Size: 1.4rem;
  1662. --NPF-Audio-Buttons-Color:var(--ColorPosts); /* color of play & pause buttons */
  1663. --NPF-Audio-Buttons-Spacing: 1.3rem; /* space between buttons and song info */
  1664. --NPF-Audio-Image-Size:85px;
  1665. --NPF-Audio-Image-Spacing:0px; /* gap between player info and cover image */
  1666. }
  1667. .npf-audio-image {border-radius:0 var(--Corners) var(--Corners) 0;}
  1668.  
  1669. .npf-audio-background {
  1670. background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo), var(--ColorAccentThree)); /* background color of player (optional) */
  1671. padding:1.5rem;
  1672. border-radius:var(--Corners) 0 0 var(--Corners);
  1673. }
  1674.  
  1675. .npf-audio-title-label,
  1676. .npf-audio-artist-label,
  1677. .npf-audio-album-label {
  1678. font-weight:bold;
  1679. }
  1680.  
  1681. .npf-audio-title,
  1682. .npf-audio-artist,
  1683. .npf-audio-album {
  1684. color:var(--ColorPosts); /* color of audio text (optional) */
  1685. text-shadow:0 1px rgba(0,0,0,.1);
  1686. }
  1687. .npf-audio-title {font-weight:bold;}
  1688. </style>
  1689.  
  1690. <!-- main container -->
  1691. <main>
  1692.  
  1693. <!--- FIXED BUTTONS --->
  1694. <div class="fixedbuttons">
  1695. <a id="totop" title="back to top" href="#top" target="_self"><i class="ti ti-arrow-narrow-up"></i></a>
  1696. <!-- day/night -->
  1697. <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  1698. <span class="light-on" title="turn off the lights"><i class="ti ti-moon"></i></span>
  1699. <span class="light-off" title="turn on the lights"><i class="ti ti-sun-high"></i></span>
  1700. </button>
  1701. <a title="toggle controls" id="controlsbutton"><i class="ti ti-settings"></i></a>
  1702. </div>
  1703. </div><!-- fixed buttons ends -->
  1704.  
  1705. <!-- main content -->
  1706. <section>
  1707.  
  1708. <!--- LEFT SIDEBAR --->
  1709. <div id="leftsidebar">
  1710. {block:ifSidebarImage}<div class="sb-img"><img src="{image:Sidebar}"></div>{/block:ifSidebarImage}
  1711. <a class="sb-title" href="/">{Title}</a>
  1712. <div class="sb-desc">{text:Custom Description}</div>
  1713. <nav><!-- sidebar nav -->
  1714. <a class="mainlink" href="/"><i class="ti ti-home"></i><span>home</span></a>
  1715. <a class="mainlink" href="/ask"><i class="ti ti-message-circle"></i><span>ask</span></a>
  1716. <a class="mainlink" href="/archive"><i class="ti ti-archive"></i></i><span>archive</span></a>
  1717. {block:ifSidebarLink1}<a class="mainlink" href="{text:Sidebar Link 1}"><i class="ti ti-flower"></i><span>{text:Sidebar Link 1 Name}</span></a>{/block:ifSidebarLink1}
  1718. {block:ifSidebarLink2}<a class="mainlink" href="{text:Sidebar Link 2}"><i class="ti ti-mushroom"></i><span>{text:Sidebar Link 2 Name}</span></a>{/block:ifSidebarLink2}
  1719. {block:ifPopupLink1}<a class="mainlink" id="navbutton"><i class="ti ti-caret-right"></i><span>navigate</span></a>
  1720. <div class="sb-nav"><!-- nav popup -->
  1721. <div class="sb-navtitle"><b>tags</b></div>
  1722. <a href="{text:Popup Link 1}"><span>{text:Popup Link 1 Name}</span></a>
  1723. {block:ifPopupLink2}<a href="{text:Popup Link 2}"><span>{text:Popup Link 2 Name}</span></a>{/block:ifPopupLink2}
  1724. {block:ifPopupLink3}<a href="{text:Popup Link 3}"><span>{text:Popup Link 3 Name}</span></a>{/block:ifPopupLink3}
  1725. {block:ifPopupLink4}<a href="{text:Popup Link 4}"><span>{text:Popup Link 4 Name}</span></a>{/block:ifPopupLink4}
  1726. {block:ifPopupLink5}<a href="{text:Popup Link 5}"><span>{text:Popup Link 5 Name}</span></a>{/block:ifPopupLink5}
  1727. {block:ifPopupLink6}<a href="{text:Popup Link 6}"><span>{text:Popup Link 6 Name}</span></a>{/block:ifPopupLink6}
  1728. </div>{/block:ifPopupLink1}
  1729. </nav>
  1730. </div><!-- left sidebar ends -->
  1731.  
  1732. <div class="section-wrap"><!-- posts start -->
  1733.  
  1734. <!--- TAG AND DAY PAGES --->
  1735. {block:TagPage}
  1736. <article class="tdpage">
  1737. <i class="ti ti-tag"></i>
  1738. <div class="tdpage-text">showing <b>{tagresultcount}</b> posts tagged <b>#{Tag}</b></div>
  1739. </article>
  1740. {/block:TagPage}
  1741.  
  1742. {block:DayPage}
  1743. <article class="tdpage">
  1744. <i class="ti ti-calendar-event"></i>
  1745. <div class="tdpage-text">showing posts made on <b>{Month} {DayOfMonth}{DayofMonthSuffix}, {Year}</b></div>
  1746. </article>
  1747. {/block:DayPage}
  1748.  
  1749. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  1750. <article class="posts" id="{PostID}" post-type="{PostType}">
  1751.  
  1752. <div class="article-wrap"><!-- article wrap -->
  1753.  
  1754. {block:Date}
  1755. <div class="topinfo"><!-- top post info -->
  1756. <div class="topinfoleft">
  1757. {block:NotReblog}
  1758. <div class="til-name">
  1759. {block:PinnedPostLabel}<div id="pinned" class="til-icon"><i class="ti ti-pin"></i></div>{/block:PinnedPostLabel}
  1760. <div class="til-icon" {block:PinnedPostLabel}style="display:none;"{/block:PinnedPostLabel}><i class="ti ti-map-pin"></i></div>
  1761. <a href="{Permalink}"><b>{text:Blog Name}</b></a>
  1762. </div>
  1763. {/block:NotReblog}
  1764. {block:RebloggedFrom}
  1765. <div class="til-name">
  1766. {block:PinnedPostLabel}<div id="pinned" class="til-icon"><i class="ti ti-pin"></i></div>{/block:PinnedPostLabel}
  1767. <div class="til-icon" {block:PinnedPostLabel}style="display:none;"{/block:PinnedPostLabel}><i class="ti ti-user"></i></div>
  1768. <a target="_blank" href="{ReblogRootURL}"><b>{ReblogRootName}</b></a>
  1769. </div>
  1770. {/block:RebloggedFrom}
  1771. </div>
  1772.  
  1773. <div class="moreinfo"><!-- more info -->
  1774. <div class="moreinfowrap">
  1775. {block:RebloggedFrom}
  1776. <a href="{ReblogParentURL}"><div class="moreinfo-icon"><i class="ti ti-reload"></i></div><li><span>{ReblogParentName}</span></li></a>
  1777. {/block:RebloggedFrom}
  1778. <a href="{Permalink}"><div class="moreinfo-icon"><i class="ti ti-calendar-dot"></i></div><li><span>{ShortMonth} {DayofMonth}{DayofMonthSuffix} {Year}</span></li></a>
  1779. {block:NoteCount}<a href="{Permalink}"><div class="moreinfo-icon"><i class="ti ti-note"></i></div><li><span class="notecount" >{NoteCountWithLabel}</span></li></a>{/block:NoteCount}
  1780. </div>
  1781. </div><!-- more info ends -->
  1782. </div><!-- top post info ends -->
  1783. {/block:Date}
  1784.  
  1785. <div class="post-wrap"><!-- post wrap // posts start -->
  1786.  
  1787. {block:Photo}
  1788. <div class="photopost"><img src="{PhotoURL-HighRes}" alt="{photoalt}" class="photos"></div>
  1789. {/block:Photo}
  1790.  
  1791. {block:Photoset}
  1792. <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>
  1793. {/block:Photoset}
  1794.  
  1795. {block:Quote}<!-- quote posts -->
  1796. <div class="quotepost">
  1797. <div class="quote">
  1798. "{Quote}"
  1799. </div>
  1800. <div class="source">
  1801. -{Source}
  1802. </div>
  1803. </div>{/block:Quote}
  1804.  
  1805. {block:Chat}<!-- chat posts -->
  1806. <div class="chatpost">
  1807. {block:Lines}
  1808. <li>
  1809. {block:Label}<b>{Label}</b>{/block:Label}
  1810. <span>{Line}</span>
  1811. </li>
  1812. {/block:Lines}
  1813. </div>
  1814. {/block:Chat}
  1815.  
  1816. {block:Link}<!-- link posts -->
  1817. <div class="linkpost">
  1818. <a href="{URL}" target="_blank">
  1819. {Name}
  1820. </a>
  1821. </div>
  1822. {/block:Link}
  1823.  
  1824. {block:Video}<!-- video posts -->
  1825. {Video-700}
  1826. {/block:Video}
  1827.  
  1828. {block:Audio}<!-- audio posts -->
  1829. <div class="audiopost">
  1830. <div class="audiotitle">
  1831. <div class="audioplaybg"><div class="audioplay">{block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}</div></div>
  1832. <li><b>{block:trackname}{Trackname}{/block:trackname}</b>
  1833. <span>{block:Artist}{Artist}{/block:Artist}</span></li>
  1834. </div><!-- audiotitle -->
  1835. <div class="albumart">{block:albumart}<img src="{AlbumArtURL}">{/block:albumart}</div>
  1836. </div>
  1837. {/block:Audio}
  1838.  
  1839. {block:Answer}<!-- answer posts -->
  1840. <div class="answer-post">
  1841. <div class="question">
  1842. <div class="qbulk">
  1843. <li><b>{Asker}</b> sent:</li>
  1844. <div class="qcont">{Question}</div>
  1845. </div>
  1846. <div class="qicon"><img src="{AskerPortraitURL-128}"></div>
  1847. </div>
  1848. {block:Answerer}
  1849. <div class="answer">
  1850. <div class="answerheader"><div class="aicon"><img src="{AnswererPortraitURL-128}"></div><li><b>{Answerer}</b> answered:</li></div>
  1851. <div class="answercont">{Answer}</div>
  1852. </div>
  1853. {/block:Answerer}
  1854. {block:NotReblog}
  1855. <div class="answer">
  1856. <div class="answerheader"><div class="aicon"><img src="{PortraitURL-128}"></div><li><b><a href="/">{text:Blog Name}</a></b> answered:</li></div>
  1857. <div class="answercont">{Replies}</div>
  1858. </div>
  1859. {/block:NotReblog}
  1860. </div>{/block:Answer}
  1861.  
  1862. <!-- text posts -->
  1863. <div class="caption {block:notreblog} original-post {/block:notreblog}">
  1864. {block:Text}
  1865. {block:Title}<h2>{Title}</h2>{/block:Title}
  1866. {/block:Text}
  1867. {block:NotReblog}
  1868. {block:Caption}{Caption}{/block:Caption}
  1869. {block:Text}{Body}{/block:Text}
  1870. {/block:NotReblog}
  1871. {block:Rebloggedfrom}
  1872. {block:Reblogs}
  1873. <div class="reblogs">
  1874. <div class="userlink source-head">
  1875. <a href="{Permalink}" target="_blank"><img src="{PortraitURL-64}" alt="{username}'s avatar"></a>
  1876. <a href="{permalink}" target="_blank" {block:isdeactivated}class="deactive"{/block:isdeactivated}>{username}</a>
  1877. </div>
  1878. <div class="reblog-content">
  1879. {Body}
  1880. </div>
  1881. </div>
  1882. {/block:Reblogs}
  1883. {/block:RebloggedFrom}
  1884. </div><!-- caption -->
  1885.  
  1886. </div><!-- post wrap ends -->
  1887.  
  1888. {block:Date}<!-- BOTTOM POST INFO --->
  1889. <div class="bottompostinfo">
  1890. <a title="like" class="like-button" href="#">{LikeButton} <span class="actual-button"><i class="ti ti-heart-filled"></i></span></a>
  1891. <a title="reblog" class="reblog-btn" href="{ReblogURL}" target="_blank"><i class="ti ti-refresh"></i></a>
  1892. </div>{/block:Date} <!-- bottom post info ends -->
  1893.  
  1894. <!--- TAGS --->
  1895. <div class="tags">
  1896. {block:Tags}<a href="{TagURL}"><span>#</span>{Tag}</a>{/block:Tags}
  1897. </div>
  1898.  
  1899. </div><!-- article-wrap -->
  1900.  
  1901. <!--- PERMALINK PAGE --->
  1902. {block:PermalinkPage}{block:Date}
  1903. <div class="permalinkpage">
  1904. <div class="permalink-info">
  1905. {block:NotReblog}
  1906. <li><i class="ti ti-map-pin"></i><span>original post by <a href="{PostAuthorURL}">{PostAuthorName}</a></span></li>
  1907. {/block:NotReblog}
  1908. {block:RebloggedFrom}
  1909. <li><i class="ti ti-map-pin"></i><span>originally posted by <a href="{ReblogRootURL}">{ReblogRootName}</a></span></li>
  1910. <li><i class="ti ti-refresh"></i><span>reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a></span></li>
  1911. {/block:RebloggedFrom}
  1912. <li><i class="ti ti-calendar-heart"></i><span class="date"><a href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}">{DayofWeek}, {Month} {DayofMonth}{DayofMonthSuffix} {Year}</a> at <b>{12Hour}:{Minutes}{AMPM}</b></span></li>
  1913. <li><i class="ti ti-notes"></i><span><b>{NoteCountWithLabel}</b></span></li>
  1914. </div>
  1915. {block:NoteCount}{block:PostNotes}<!-- post notes -->
  1916. <div class="postnotes">
  1917. {PostNotes-64}
  1918. </div>{/block:PostNotes}{/block:NoteCount}
  1919. </div>
  1920. {/block:Date}{/block:PermalinkPage}
  1921.  
  1922. </article><!--- POSTS END --->
  1923. {/block:Posts}
  1924.  
  1925. {block:Pagination}
  1926. <article class="pagination"><!-- PAGINATION -->
  1927. {block:PreviousPage}
  1928. <a class="pg-prev" href="{PreviousPage}"><i class="ti ti-caret-left"></i><span>back</span></a>
  1929. {/block:PreviousPage}
  1930. <a class="pg-prev" id="nobtn" {block:PreviousPage}style="display:none;"{/block:PreviousPage}><i class="ti ti-caret-left"></i><span>back</span></a>
  1931.  
  1932. <div class="paginationtitle"><b>{CurrentPage}</b> of {TotalPages}</div>
  1933.  
  1934. <a class="pg-next" id="nobtn" {block:NextPage}style="display:none;"{/block:NextPage}><i class="ti ti-caret-right"></i></a>
  1935. {block:NextPage}
  1936. <a class="pg-next" href="{NextPage}"><span>next</span><i class="ti ti-caret-right"></i></a>
  1937. {/block:NextPage}
  1938. </article><!-- pagination ends -->
  1939. {/block:Pagination}
  1940.  
  1941. </div><!-- section wrap -->
  1942.  
  1943. </section>
  1944.  
  1945. <!-- FIXED CREDIT: DO NOT TOUCH -->
  1946. <a class="credit" href="//phantomcodes.tumblr.com" title="custom theme by sage"><i class="ti ti-ghost-2"></i></a>
  1947.  
  1948. </main>
  1949. </body>
  1950.  
  1951. <script>
  1952.  
  1953. /// photoset
  1954. $(document).ready(function(){
  1955. $('.photo-slideshow').pxuPhotoset({
  1956. lightbox: true,
  1957. rounded: 'corners',
  1958. gutter: '4px',
  1959. borderRadius: 'var(--Corners)',
  1960. photoset: '.photo-slideshow',
  1961. photoWrap: '.photo-data',
  1962. photo: '.pxu-photo'
  1963. });
  1964. });
  1965.  
  1966. // tooltips
  1967. tippy('[title]', {
  1968. theme: 'custom',
  1969. arrow: false,
  1970. followCursor: true,
  1971. delay: 100,
  1972. placement: 'top',
  1973. offset: "0, 10",
  1974. zIndex: 9999999999,
  1975. maxWidth: 400,
  1976.  
  1977. content(reference) {
  1978. const title = reference.getAttribute('title');
  1979. reference.removeAttribute('title');
  1980. return title;
  1981. },
  1982. });
  1983.  
  1984. // videos
  1985. $(document).ready(function() {
  1986. flexibleFrames($(".video")); // $(".video") is the class selector passed in the argument
  1987. });
  1988.  
  1989. // toggle tags
  1990. $(document).ready(function(){
  1991. $('.clicktags').hide();
  1992. $('.clicktagsbutton').click(function() {
  1993. $(this).closest('article').find('.clicktags').slideToggle(0);
  1994. $(this).toggleClass('tags-click');
  1995. return false;
  1996. });
  1997. });
  1998.  
  1999. // notes shortener
  2000. var $container = $('article');
  2001. $container.find('.notecount').each(function(){
  2002. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  2003. if (n > 999) {
  2004. n = Math.floor(n / 100) / 10;
  2005. $(this).text(n + 'k notes');
  2006. }
  2007. });
  2008.  
  2009. // first userlink
  2010. $(document).ready(function(){
  2011. $('article').find('.userlink:first').addClass("first");
  2012. });
  2013.  
  2014. // tumblr controls
  2015. $(document).ready(function(){
  2016. $('a#controlsbutton').click(function(){
  2017. $('body').toggleClass('controls-click');
  2018. });
  2019. });
  2020.  
  2021. // sidebar popup
  2022. $(document).ready(function(){
  2023. $('a#sidebarbutton').click(function(){
  2024. $('body').toggleClass('sidebar-click');
  2025. $('a#sidebarbutton i').toggleClass("ti-layout-grid-remove");
  2026. });
  2027. });
  2028.  
  2029. // nav popup
  2030. $(document).ready(function(){
  2031. $('a#navbutton').click(function(){
  2032. $('body').toggleClass('nav-click');
  2033. });
  2034. });
  2035.  
  2036. // searchbar
  2037. $(document).ready(function(){
  2038. $('.search').submit(function(event){
  2039. var value = $('input:first').val();
  2040. location.replace('http://{Name}.tumblr.com/search/' + value);
  2041. });
  2042. });
  2043.  
  2044. // scroll to top
  2045. $(document).ready(function(){
  2046. $('a#totop').click(function(){
  2047. $('html, body').animate({scrollTop : 0},800);
  2048. return false;
  2049. });
  2050. });
  2051.  
  2052. var mybutton = document.getElementById("totop");
  2053. window.onscroll = function() {scrollFunction()};
  2054.  
  2055. function scrollFunction() {
  2056. if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
  2057. mybutton.style.display = "flex";
  2058. } else {
  2059. mybutton.style.display = "none";
  2060. }
  2061. }
  2062.  
  2063. // day/night mode
  2064. const toggle = document.getElementById("theme-toggle");
  2065.  
  2066. toggle.onclick = function () {
  2067. // add class to html and make transition snappy
  2068. document.documentElement.classList.add("theme-transition");
  2069. // alright lets retrive the info from data-theme
  2070. let currentTheme = document.documentElement.getAttribute("data-theme");
  2071. // if it's dark already, let's go into the light
  2072. let targetTheme = "light";
  2073. // but if it is light let's toggle dark mode
  2074. if (currentTheme === "light") {
  2075. targetTheme = "dark";
  2076. }
  2077. // ok now that theme has been toggled, get rid of snappy transition
  2078. window.setTimeout(function () {
  2079. document.documentElement.classList.remove("theme-transition");
  2080. }, 50);
  2081. // we're going to save our theme preference now
  2082. document.documentElement.setAttribute("data-theme", targetTheme);
  2083. localStorage.setItem("theme", targetTheme);
  2084. };
  2085.  
  2086. // remove empty p tags
  2087. for (const p of document.querySelectorAll('p')) {
  2088. if (p.innerHTML.trim() === '') {
  2089. p.remove()
  2090. }
  2091. }
  2092.  
  2093. </script>
  2094. </html>
Advertisement
Add Comment
Please, Sign In to add comment