nicolas-sage

theme 37: poppy

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