nicolas-sage

custom theme 09

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