nicolas-sage

abelia personal save

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