nicolas-sage

phantomcodes theme 2024

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