nicolas-sage

theme 36: juniper

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