nicolas-sage

theme 34: meadow

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