nicolas-sage

theme 23: sunrise

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