nicolas-sage

theme 33: ruellia

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