nicolas-sage

custom theme 08

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