nicolas-sage

skeleton wip

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