nicolas-sage

theme 06: amethyst (revamp)

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