nicolas-sage

pumpkin save

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