nicolas-sage

theme 39: wisteria

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