nicolas-sage

phantom theme (old)

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