nicolas-sage

theme 21: fauna

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