nicolas-sage

theme 38: cove

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