nicolas-sage

theme 42: willow

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