API tools faq
paste
nicolas-sage

theme 19: tweety

nicolas-sage
Feb 12th, 2026
71
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 99.11 KB | None | 0 0
raw download clone embed print report
  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. | |__| |__| | TWEETY 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. <!--- JQUERY --->
  44. <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  45.  
  46. <!---- PHOTOSET ---->
  47. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  48. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  49.  
  50. <!--
  51. NPF images fix v3.0 by @glenthemes [2021]
  52. 💌 git.io/JRBt7
  53. --->
  54. <script src="//npf-images-v3.github.io/script.js"></script>
  55. <link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
  56. <style tmblr-npf>
  57. :root {
  58. --NPF-Caption-Spacing:1em;
  59. --NPF-Image-Spacing:4px;
  60. }
  61. </style>
  62.  
  63. <!----- BUNNY FONTS ---->
  64. <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" />
  65.  
  66. <!---- ICONS ---->
  67. <script src="https://unpkg.com/phosphor-icons"></script>
  68. <script src="https://unpkg.com/[email protected]"></script>
  69. <script src="//pull.cappuccicons.com/cpf.js"></script>
  70. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css">
  71.  
  72. <!---- TOOLTIPS ---->
  73. <script src="https://unpkg.com/popper.js@1"></script>
  74. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  75.  
  76. <!---- VIDEOS ---->
  77. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  78.  
  79. <!---- COPY LINK ---->
  80. <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
  81. <script>
  82. $(document).ready(function(){
  83. var clipboard = new ClipboardJS("#copybutton");
  84. });
  85. </script>
  86.  
  87. <!---- TIME AGO ----->
  88. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  89. <script type="text/javascript">
  90. $(document).ready(function() {
  91. $(".time-ago").timeAgo({
  92. time: "short",
  93. spaces: true,
  94. words: false,
  95. prefix: "",
  96. suffix: "",
  97. });
  98. });
  99. </script>
  100.  
  101. <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  102.  
  103. <!---- VARIABLES ---->
  104.  
  105. <meta name="image:Header" content="" />
  106. <meta name="image:Profile" content="" />
  107.  
  108. <meta name="color:Background" content="#f2f2f2" />
  109. <meta name="color:Sidebar" content="#fafafa" />
  110. <meta name="color:Posts" content="#fff" />
  111. <meta name="color:Borders" content="#ddd" />
  112. <meta name="color:Title" content="#333" />
  113. <meta name="color:Text" content="#555" />
  114. <meta name="color:Link" content="#4685b3" />
  115. <meta name="color:Accent" content="#2d71a2" />
  116. <meta name="color:Gradient One" content="#6389a5"/>
  117. <meta name="color:Gradient Two" content="#93c0e2"/>
  118. <meta name="color:Gradient Text" content="#fff"/>
  119. <meta name="color:Gradient Accent" content="#def1ff"/>
  120.  
  121. <meta name="color:Night Background" content="#222" />
  122. <meta name="color:Night Sidebar" content="#2f2f2f" />
  123. <meta name="color:Night Posts" content="#333" />
  124. <meta name="color:Night Borders" content="#444" />
  125. <meta name="color:Night Title" content="#eee" />
  126. <meta name="color:Night Text" content="#ccc" />
  127. <meta name="color:Night Link" content="#b2d1e4" />
  128. <meta name="color:Night Accent" content="#c5e9ff" />
  129. <meta name="color:Night Gradient One" content="#7098b1"/>
  130. <meta name="color:Night Gradient Two" content="#99bbd0"/>
  131. <meta name="color:Night Gradient Text" content="#fff"/>
  132. <meta name="color:Night Gradient Accent" content="#dff3ff"/>
  133.  
  134. <meta name="select:Corners" content="10px" title="round"/>
  135. <meta name="select:Corners" content="5px" title="slightly round"/>
  136. <meta name="select:Corners" content="0px" title="sharp"/>
  137.  
  138. <meta name="select:Glow" content="0 0 10px" title="on"/>
  139. <meta name="select:Glow" content="0 0 0" title="off"/>
  140.  
  141. <meta name="select:Tags" content="tags" title="default"/>
  142. <meta name="select:Tags" content="clicktags" title="on click"/>
  143.  
  144. <meta name="if:Music Player" content="1"/>
  145. <meta name="if:Right Sidebar" content="1"/>
  146. <meta name="if:Featured" content="1"/>
  147. <meta name="if:Blogs" content="1"/>
  148. <meta name="if:Updates" content="1"/>
  149.  
  150. <meta name="text:Body Font" content="Nunito"/>
  151. <meta name="text:Title Font" content="Montserrat"/>
  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 Image" content=""/>
  158. <meta name="text:Song Name" content="song name"/>
  159. <meta name="text:Song Artist" content="song artist"/>
  160.  
  161. <meta name="text:Header Stat 1" content="location"/>
  162. <meta name="text:Header Stat Icon 1" content="map-pin"/>
  163. <meta name="text:Header Stat 2" content="born"/>
  164. <meta name="text:Header Stat Icon 2" content="ballon"/>
  165. <meta name="text:Header Stat 3" content="joined"/>
  166. <meta name="text:Header Stat Icon 3" content="calendar-event"/>
  167.  
  168. <meta name="text:Sidebar Link 1" content="explore"/>
  169. <meta name="text:Sidebar Link 1 URL" content="/"/>
  170. <meta name="text:Sidebar Link 1 Icon" content="hash"/>
  171. <meta name="text:Sidebar Link 2" content="notifications"/>
  172. <meta name="text:Sidebar Link 2 URL" content="/"/>
  173. <meta name="text:Sidebar Link 2 Icon" content="bell"/>
  174. <meta name="text:Sidebar Link 3" content="messages"/>
  175. <meta name="text:Sidebar Link 3 URL" content="/"/>
  176. <meta name="text:Sidebar Link 3 Icon" content="mail"/>
  177. <meta name="text:Sidebar Link 4" content="bookmarks"/>
  178. <meta name="text:Sidebar Link 4 URL" content="/"/>
  179. <meta name="text:Sidebar Link 4 Icon" content="bookmark"/>
  180. <meta name="text:Sidebar Link 5" content="lists"/>
  181. <meta name="text:Sidebar Link 5 URL" content="/"/>
  182. <meta name="text:Sidebar Link 5 Icon" content="notes"/>
  183. <meta name="text:Sidebar Link 6" content="profile"/>
  184. <meta name="text:Sidebar Link 6 URL" content="/"/>
  185. <meta name="text:Sidebar Link 6 Icon" content="user"/>
  186. <meta name="text:Sidebar Link 7" content="more"/>
  187. <meta name="text:Sidebar Link 7 URL" content="/"/>
  188. <meta name="text:Sidebar Link 7 Icon" content="dots"/>
  189.  
  190. <meta name="text:Featured Link 1" content="/"/>
  191. <meta name="text:Featured IMG 1" content=""/>
  192. <meta name="text:Featured Link 2" content="/"/>
  193. <meta name="text:Featured IMG 2" content=""/>
  194. <meta name="text:Featured Link 3" content="/"/>
  195. <meta name="text:Featured IMG 3" content=""/>
  196. <meta name="text:Featured Link 4" content="/"/>
  197. <meta name="text:Featured IMG 4" content=""/>
  198.  
  199. <meta name="text:Blog 1" content=""/>
  200. <meta name="text:Blog 2" content=""/>
  201. <meta name="text:Blog 3" content=""/>
  202.  
  203. <meta name="text:Update Title 1" content="watching"/>
  204. <meta name="text:Update Text 1" content="tv show or movie"/>
  205. <meta name="text:Update Title 2" content="listening to"/>
  206. <meta name="text:Update Text 2" content="album or song"/>
  207. <meta name="text:Update Title 3" content="reading"/>
  208. <meta name="text:Update Text 3" content="book or comic"/>
  209. <meta name="text:Update Title 4" content="working on"/>
  210. <meta name="text:Update Text 4" content="this twitter theme"/>
  211.  
  212. <!--- day/night --->
  213. <script>
  214. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  215. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
  216. </script>
  217.  
  218. <!------- CSS -------->
  219. <style>
  220. :root, html[data-theme='light'] {
  221. --LightOn: flex;
  222. --LightOff: none;
  223. --ColorBackground: {color:background};
  224. --ColorSidebar: {color:sidebar};
  225. --ColorPosts: {color:posts};
  226. --ColorBorders: {color:borders};
  227. --ColorTitle: {color:title};
  228. --ColorText: {color:text};
  229. --ColorLink: {color:link};
  230. --ColorAccent: {color:accent};
  231. --ColorGradientOne: {color:gradient one};
  232. --ColorGradientTwo: {color:gradient two};
  233. --ColorGradientText: {color:gradient text};
  234. --ColorGradientAccent: {color:gradient accent};
  235. --ColorOpacity: rgba(0,0,0,.1);
  236. --ColorReverseOpacity: rgba(255,255,255,.1);
  237. }
  238. html[data-theme='dark'] {
  239. --LightOn: none;
  240. --LightOff: flex;
  241. --ColorBackground: {color:night background};
  242. --ColorSidebar: {color:night sidebar};
  243. --ColorPosts: {color:night posts};
  244. --ColorBorders: {color:night borders};
  245. --ColorTitle: {color:night title};
  246. --ColorText: {color:night text};
  247. --ColorLink: {color:night link};
  248. --ColorAccent: {color:night accent};
  249. --ColorGradientOne: {color:night gradient one};
  250. --ColorGradientTwo: {color:night gradient two};
  251. --ColorGradientText: {color:night gradient text};
  252. --ColorGradientAccent: {color:night gradient accent};
  253. --ColorOpacity: rgba(255,255,255,.1);
  254. --ColorReverseOpacity: rgba(0,0,0,.1);
  255. }
  256. html.theme-transition,
  257. html.theme-transition *,
  258. html.theme-transition *:before,
  259. html.theme-transition *:after {
  260. transition: 0s !important;
  261. transition-delay: 0 !important;
  262. }
  263.  
  264. .light-on{
  265. display: var(--LightOn);
  266. }
  267. .light-off{
  268. display: var(--LightOff);
  269. }
  270.  
  271. /*--- TOOLTIPS ---*/
  272.  
  273. .tippy-tooltip.custom-theme {
  274. font-family:'{text:title font}', sans-serif;
  275. font-size:.9em;
  276. color:var(--ColorPosts);
  277. text-transform:lowercase;
  278. text-align:center;
  279. letter-spacing:.1em;
  280. background:var(--ColorAccent);
  281. border-radius:{select:Corners};
  282. box-shadow:4px 4px 8px rgba(0,0,0,.1);
  283. margin-bottom:.5em;
  284. }
  285.  
  286. /*--- SCROLLBAR ---*/
  287. ::-webkit-scrollbar {
  288. width:5px;
  289. height:5px;
  290. background:var(--ColorBackground);
  291. }
  292.  
  293. ::-webkit-scrollbar-track {
  294. background:var(--ColorBackground);
  295. border-radius: 5px;
  296. }
  297.  
  298. ::-webkit-scrollbar-thumb {
  299. background:linear-gradient(to top, var(--ColorGradientOne), var(--ColorGradientTwo));
  300. border-radius: 5px;
  301. }
  302.  
  303. /*--- TEXT SELECTION ---*/
  304. ::-moz-selection { /* Code for Firefox */
  305. color:var(--ColorPosts);
  306. background:var(--ColorAccent);
  307. }
  308.  
  309. ::selection {
  310. color:var(--ColorPosts);
  311. background:var(--ColorAccent);
  312. }
  313.  
  314. /*--- COMMON ---*/
  315.  
  316. body {
  317. font-family:'{text:body font}', sans-serif;
  318. font-size:{text:font size}px;
  319. color:var(--ColorText);
  320. background-color: var(--ColorBackground);
  321. line-height:140%;
  322. word-wrap:break-word;
  323. letter-spacing:.04em;
  324. margin:0;
  325. }
  326. body {
  327. opacity:1;
  328. transition:.75s opacity;
  329. }
  330.  
  331. body.fade-out {
  332. opacity:0;
  333. transition:none;
  334. }
  335. html {background-color:var(--ColorBackground);}
  336.  
  337. a {
  338. color:var(--ColorLink);
  339. text-decoration: none;
  340. -webkit-transition: all 0.4s;
  341. -moz-transition: all 0.4s;
  342. -ms-transition: all 0.4s;
  343. -o-transition: all 0.4s;
  344. transition: all 0.4s;
  345. }
  346.  
  347. a:hover {
  348. color:var(--ColorAccent);
  349. -webkit-transition: all 0.4s;
  350. -moz-transition: all 0.4s;
  351. -ms-transition: all 0.4s;
  352. -o-transition: all 0.4s;
  353. transition: all 0.4s;
  354. }
  355.  
  356. /* LINK EFFECTS */
  357. #hua {
  358. display:inline-block;
  359. position:relative;
  360. }
  361.  
  362. #hua:after {
  363. content: '';
  364. position:absolute;
  365. width:100%;
  366. height:2px;
  367. bottom:0;
  368. left:0;
  369. background-color:var(--ColorLink);
  370. transform:scaleX(0);
  371. transform-origin:center;
  372. transition: transform 0.25s ease-out;
  373. }
  374.  
  375. #hua:hover:after {
  376. transform: scaleX(1);
  377. transform-origin:center;
  378. }
  379.  
  380. .description a, a.read_more, .sub-text a, .subdates a {
  381. display:inline-block;
  382. position:relative;
  383. border-bottom:2px solid var(--ColorBorders);
  384. }
  385.  
  386. .description a:after, a.read_more:after, .sub-text a:after, .subdates a:after {
  387. content: '';
  388. position:absolute;
  389. width:100%;
  390. transform:scaleX(0);
  391. height:2px;
  392. bottom:-2px;
  393. left:0;
  394. background-color:var(--ColorLink);
  395. transform-origin:center;
  396. transition: transform 0.3s ease-out;
  397. }
  398.  
  399. .description a:hover:after, a.read_more:hover:after, .sub-text a:hover:after, .subdates a:hover:after {
  400. transform: scaleX(1);
  401. transform-origin:center;
  402. }
  403.  
  404. blockquote {
  405. border-left:1px solid var(--ColorBorders);
  406. padding-left:.75em;
  407. margin-left:1em;
  408. }
  409.  
  410. ul {list-style-type:circle;}
  411. ol {list-style-type: decimal-leading-zero;}
  412. li::marker {color:var(--ColorAccent)}
  413.  
  414. small {font-size:.95em;}
  415. big {font-size:1.1em;}
  416.  
  417. hr {
  418. height:1px;
  419. border:none;
  420. box-shadow:none;
  421. background:var(--ColorBorders);
  422. }
  423.  
  424. pre {
  425. word-wrap:break-word!important;
  426. white-space:pre-wrap;
  427. }
  428.  
  429. b, strong {
  430. color:var(--ColorTitle);
  431. font-weight:800;
  432. }
  433.  
  434. b a:hover {
  435. color:var(--ColorAccent);
  436. -webkit-transition: all 0.4s;
  437. -moz-transition: all 0.4s;
  438. -ms-transition: all 0.4s;
  439. -o-transition: all 0.4s;
  440. transition: all 0.4s;
  441. }
  442.  
  443. button {font-size:1em;}
  444.  
  445. h1 {font-size:1.35em; letter-spacing:.1em; padding-top:0; margin:0 0 .5em 0; color:var(--ColorTitle); display:inline-block;}
  446. h1 a {color:var(--ColorTitle);}
  447. h1 a:hover {color:var(--ColorAccent);}
  448. h2 {font-size:1.25em; color:var(--ColorTitle); letter-spacing:.1em;}
  449. h3 {font-size:1.15em;}
  450. h4 {font-size:1.1em;}
  451. h5 {font-size:1.05em;}
  452. h1, h1 a, h2 {font-family:'{text:title font}', sans-serif;}
  453.  
  454. /*--- CONTAINERS ---*/
  455.  
  456. main {
  457. width:100%;
  458. display:flex;
  459. justify-content:center;
  460. }
  461.  
  462. section {
  463. position:relative;
  464. width:calc(540px + 4em);
  465. display:flex;
  466. flex-direction:column;
  467. align-items:center;
  468. background:var(--ColorPosts);
  469. }
  470.  
  471. article {
  472. width:calc(100% - 6em);
  473. position:relative;
  474. margin:auto;
  475. padding:1em 3em 1em 3em;
  476. border-bottom:1px solid var(--ColorBorders);
  477. }
  478.  
  479. .post-wrap {
  480. position:relative;
  481. width:100%;
  482. display:flex;
  483. flex-direction:column;
  484. gap:1em;
  485. }
  486.  
  487. /*---- LEFT SECTION ---*/
  488. .sidebar.left {
  489. width:300px;
  490. display:flex;
  491. flex-direction:column;
  492. align-items:flex-end;
  493. }
  494.  
  495. .sl-top {
  496. position:fixed;
  497. top:0;
  498. width:calc(300px - 4em);
  499. display:flex;
  500. flex-direction:column;
  501. gap:1em;
  502. padding:.75em 2em 1em 2em;
  503. }
  504.  
  505. .sl-icons {
  506. width:100%;
  507. display:flex;
  508. justify-content:space-evenly;
  509. align-items:center;
  510. gap:1em;
  511. }
  512.  
  513. /*--- CREDIT: DO NOT TOUCH ---*/
  514. a.sl-credit {
  515. position:relative;
  516. display:flex;
  517. justify-content:center;
  518. align-items:center;
  519. padding:.5em;
  520. border-radius:100%;
  521. }
  522. a.sl-credit:after {
  523. content:'';
  524. position:absolute;
  525. width:100%;
  526. height:100%;
  527. opacity:0;
  528. background:var(--ColorAccent);
  529. border-radius:100%;
  530. z-index:-1;
  531. -webkit-transition: all 0.4s;
  532. -moz-transition: all 0.4s;
  533. -ms-transition: all 0.4s;
  534. -o-transition: all 0.4s;
  535. transition: all 0.4s;
  536. }
  537. a.sl-credit:hover:after {opacity:.35;}
  538.  
  539. a.sl-credit i {
  540. font-size:1.5em;
  541. color:var(--ColorTitle);
  542. -webkit-transition: all 0.4s;
  543. -moz-transition: all 0.4s;
  544. -ms-transition: all 0.4s;
  545. -o-transition: all 0.4s;
  546. transition: all 0.4s;
  547. }
  548.  
  549. a.sl-credit:hover i {
  550. color:var(--ColorAccent);
  551. text-shadow:{select:glow};
  552. -webkit-transition: all 0.4s;
  553. -moz-transition: all 0.4s;
  554. -ms-transition: all 0.4s;
  555. -o-transition: all 0.4s;
  556. transition: all 0.4s;
  557. -webkit-animation-duration: 2s;
  558. animation-duration: 2s;
  559. -webkit-animation-fill-mode: both;
  560. animation-fill-mode: both;
  561. -webkit-animation-timing-function: ease-in-out;
  562. animation-timing-function: ease-in-out;
  563. animation-iteration-count:infinite;
  564. -webkit-animation-iteration-count:infinite;
  565. animation-name: bounce;
  566. -moz-animation-name: bounce;
  567. }
  568.  
  569. @keyframes bounce {
  570. 0% {
  571. -webkit-transform: translateY(0px);
  572. -ms-transform: translateY(0px);
  573. transform: translateY(0px)
  574. }
  575. 25% {
  576. -webkit-transform: translateY(-3px);
  577. -ms-transform: translateY(-3px);
  578. transform: translateY(-3px)
  579. }
  580. 50% {
  581. -webkit-transform: translateY(0px);
  582. -ms-transform: translateY(0px);
  583. transform: translateY(0px)
  584. }
  585. 75% {
  586. -webkit-transform: translateY(-3px);
  587. -ms-transform: translateY(-3px);
  588. transform: translateY(-3px)
  589. }
  590. 100% {
  591. -webkit-transform: translateY(0px);
  592. -ms-transform: translateY(0px);
  593. transform: translateY(0px)
  594. }
  595. }
  596.  
  597. a.sidebarbutton {
  598. position:relative;
  599. display:none;
  600. justify-content:center;
  601. align-items:center;
  602. padding:.5em;
  603. border-radius:100%;
  604. cursor:help;
  605. }
  606. a.sidebarbutton:after {
  607. content:'';
  608. position:absolute;
  609. width:100%;
  610. height:100%;
  611. opacity:0;
  612. background:var(--ColorAccent);
  613. border-radius:100%;
  614. z-index:-1;
  615. -webkit-transition: all 0.4s;
  616. -moz-transition: all 0.4s;
  617. -ms-transition: all 0.4s;
  618. -o-transition: all 0.4s;
  619. transition: all 0.4s;
  620. }
  621. a.sidebarbutton:hover:after {opacity:.35;}
  622.  
  623. a.sidebarbutton i {
  624. font-size:1.5em;
  625. color:var(--ColorTitle);
  626. -webkit-transition: all 0.4s;
  627. -moz-transition: all 0.4s;
  628. -ms-transition: all 0.4s;
  629. -o-transition: all 0.4s;
  630. transition: all 0.4s;
  631. }
  632.  
  633. a.sidebarbutton:hover i {
  634. color:var(--ColorAccent);
  635. text-shadow:{select:glow};
  636. }
  637. body.sidebar-click a.sidebarbutton i {color:var(--ColorAccent);}
  638.  
  639. .slnav {
  640. width:100%;
  641. display:flex;
  642. flex-direction:column;
  643. gap:.5em;
  644. }
  645. .slnav a {
  646. position:relative;
  647. width:fit-content;
  648. display:flex;
  649. justify-content:flex-start;
  650. align-items:center;
  651. gap:1em;
  652. padding:.5em 1em .5em 1em;
  653. border-radius:30px;
  654. z-index:2;
  655. }
  656. .slnav a:after {
  657. content:'';
  658. position:absolute;
  659. top:0;
  660. left:0;
  661. width:100%;
  662. height:100%;
  663. opacity:0;
  664. background:var(--ColorAccent);
  665. border-radius:30px;
  666. z-index:-1;
  667. -webkit-transition: all 0.4s;
  668. -moz-transition: all 0.4s;
  669. -ms-transition: all 0.4s;
  670. -o-transition: all 0.4s;
  671. transition: all 0.4s;
  672. }
  673. .slnav a:hover:after {opacity:.35;}
  674. .slnav a i {
  675. font-size:1.5em;
  676. color:var(--ColorTitle);
  677. -webkit-transition: all 0.4s;
  678. -moz-transition: all 0.4s;
  679. -ms-transition: all 0.4s;
  680. -o-transition: all 0.4s;
  681. transition: all 0.4s;
  682. }
  683. .slnav a:hover i {color:var(--ColorAccent); text-shadow:{select:Glow};}
  684. .slnav a b {
  685. font-family:'{text:title font}', sans-serif;
  686. font-size:1.1em;
  687. font-weight:normal;
  688. text-align:left;
  689. }
  690. .slnav a:hover b {color:var(--ColorAccent);}
  691.  
  692. /* sidebar left music player */
  693. .sl-low {
  694. position:fixed;
  695. bottom:.5em;
  696. width:calc(300px - 4em);
  697. display:flex;
  698. justify-content:space-between;
  699. align-items:center;
  700. gap:.5em;
  701. padding:1em 2em 1em 2em;
  702. }
  703.  
  704. /* music player */
  705. .music-container {
  706. width:calc(100% - 2em);
  707. display:flex;
  708. justify-content:space-between;
  709. align-items:center;
  710. gap:1em;
  711. padding:1em;
  712. background:var(--ColorPosts);
  713. border-radius:{select:Corners};
  714. overflow:hidden;
  715. }
  716.  
  717. .audio-info {
  718. display:flex;
  719. justify-content:center;
  720. align-items:center;
  721. gap:.5em;
  722. }
  723.  
  724. .audio-img {
  725. display:flex;
  726. justify-content:center;
  727. align-items:center;
  728. }
  729. .audio-img img {
  730. width:2.15em;
  731. height:2.15em;
  732. object-fit:cover;
  733. padding:2px;
  734. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  735. border-radius:100%;
  736. animation:rotate 5s linear infinite;
  737. animation-play-state:paused;
  738. }
  739.  
  740. .music-container.play .audio-img img {
  741. animation-play-state:running;
  742. }
  743.  
  744. @keyframes rotate {
  745. from {
  746. transform:rotate(0deg);
  747. }
  748. to {
  749. transform:rotate(360deg);
  750. }
  751. }
  752.  
  753. .audio-title {
  754. font-family:'{text:title font}', sans-serif;
  755. display:flex;
  756. flex-direction:column;
  757. line-height:120%;
  758. }
  759. .audio-title b {
  760. font-size:.9em;
  761. font-weight:600;
  762. color:var(--ColorTitle);
  763. }
  764. .audio-title span {font-size:.8em;}
  765.  
  766. .play-button {
  767. display:flex;
  768. justify-content:center;
  769. align-items:center;
  770. }
  771.  
  772. .action-btn-big {
  773. position:relative;
  774. font-size:1.4em;
  775. color:var(--ColorTitle);
  776. display:flex;
  777. justify-content:center;
  778. align-items:center;
  779. padding:.35em;
  780. background:transparent;
  781. border:none;
  782. cursor:pointer;
  783. z-index:2;
  784. -webkit-transition: all 0.4s;
  785. -moz-transition: all 0.4s;
  786. -ms-transition: all 0.4s;
  787. -o-transition: all 0.4s;
  788. transition: all 0.4s;
  789. }
  790. .action-btn-big:after {
  791. content:'';
  792. position:absolute;
  793. top:0;
  794. left:0;
  795. width:100%;
  796. height:100%;
  797. opacity:0;
  798. background:var(--ColorAccent);
  799. border-radius:30px;
  800. z-index:-1;
  801. -webkit-transition: all 0.4s;
  802. -moz-transition: all 0.4s;
  803. -ms-transition: all 0.4s;
  804. -o-transition: all 0.4s;
  805. transition: all 0.4s;
  806. }
  807. .action-btn-big:hover:after {opacity:.35;}
  808. .action-btn-big:hover {
  809. color:var(--ColorAccent);
  810. text-shadow:{select:Glow};
  811. -webkit-transition: all 0.4s;
  812. -moz-transition: all 0.4s;
  813. -ms-transition: all 0.4s;
  814. -o-transition: all 0.4s;
  815. transition: all 0.4s;
  816. }
  817. .music-container.play .action-btn-big {
  818. color:var(--ColorAccent);
  819. text-shadow:{select:Glow};
  820. }
  821.  
  822. .action-btn:focus {outline:0;}
  823.  
  824. /*---- RIGHT SECTION ---*/
  825. .sidebar.right {
  826. width:300px;
  827. display:flex;
  828. flex-direction:column;
  829. align-items:flex-start;
  830. }
  831.  
  832. .sr-top {
  833. position:fixed;
  834. top:0;
  835. width:calc(325px - 4em);
  836. display:flex;
  837. flex-direction:column;
  838. gap:1em;
  839. padding:.75em 2em 1em 2em;
  840. }
  841.  
  842. /* SEARCH BAR */
  843. #search {
  844. width:calc(100% - 2em);
  845. display:flex;
  846. justify-content:flex-start;
  847. align-items:center;
  848. gap:.5em;
  849. padding:.5em 1em .5em 1em;
  850. background:var(--ColorSidebar);
  851. border-radius:30px;
  852. }
  853.  
  854. #search i {
  855. font-size:1.3em;
  856. color:var(--ColorText);
  857. -webkit-transition: all 0.4s;
  858. -moz-transition: all 0.4s;
  859. -ms-transition: all 0.4s;
  860. -o-transition: all 0.4s;
  861. transition: all 0.4s;
  862. }
  863. #search:hover i {
  864. transform:scale(1.1);
  865. color:var(--ColorTitle);
  866. -webkit-transition: all 0.4s;
  867. -moz-transition: all 0.4s;
  868. -ms-transition: all 0.4s;
  869. -o-transition: all 0.4s;
  870. transition: all 0.4s;
  871. }
  872.  
  873. .search {width:100%;}
  874.  
  875. .search .query {
  876. border: 0;
  877. outline: 0;
  878. font-family:'{text:title font}', sans-serif;
  879. font-size:.9em;
  880. width:100%;
  881. color:var(--ColorTitle);
  882. letter-spacing:.075em;
  883. background:transparent;
  884. }
  885.  
  886. ::-webkit-input-placeholder {color: inherit; opacity:.85;}
  887. :-moz-placeholder {color: inherit; opacity:.85;}
  888. ::-moz-placeholder {color: inherit; opacity:.85;}
  889. :-ms-input-placeholder {color: inherit; opacity:.85;}
  890.  
  891. input:focus::-webkit-input-placeholder {color: transparent;}
  892. input:focus:-moz-placeholder {color: transparent;}
  893. input:focus::-moz-placeholder {color: transparent;}
  894. input:focus:-ms-input-placeholder { color: transparent;}
  895.  
  896. /* featured posts */
  897. .sr-featured {
  898. width:100%;
  899. display:flex;
  900. flex-wrap:wrap;
  901. }
  902. .sr-featured a {
  903. position:relative;
  904. width:50%;
  905. display:flex;
  906. justify-content:center;
  907. align-items:center;
  908. }
  909. .sr-featured img {
  910. width:100%;
  911. height:100px;
  912. object-fit:cover;
  913. -webkit-transition: all 0.4s;
  914. -moz-transition: all 0.4s;
  915. -ms-transition: all 0.4s;
  916. -o-transition: all 0.4s;
  917. transition: all 0.4s;
  918. }
  919. .sr-featured a:first-of-type img, .sr-featured a:first-of-type:after {border-radius:{select:Corners} 0 0 0;}
  920. .sr-featured a:nth-of-type(2) img, .sr-featured a:nth-of-type(2):after {border-radius:0 {select:Corners} 0 0;}
  921. .sr-featured a:nth-of-type(3) img, .sr-featured a:nth-of-type(3):after {border-radius:0 0 0 {select:Corners};}
  922. .sr-featured a:last-of-type img, .sr-featured a:last-of-type:after {border-radius:0 0 {select:Corners} 0;}
  923.  
  924. .sr-featured a:after {
  925. content:'';
  926. position:absolute;
  927. top:0;
  928. left:0;
  929. width:100%;
  930. height:100%;
  931. opacity:0;
  932. background:var(--ColorAccent);
  933. -webkit-transition: all 0.4s;
  934. -moz-transition: all 0.4s;
  935. -ms-transition: all 0.4s;
  936. -o-transition: all 0.4s;
  937. transition: all 0.4s;
  938. }
  939. .sr-featured a:hover:after {opacity:.35;}
  940.  
  941. /* sidebar blogs */
  942. .sr-blogs {
  943. width:100%;
  944. display:flex;
  945. flex-direction:column;
  946. background:var(--ColorSidebar);
  947. border-radius:{select:Corners};
  948. }
  949.  
  950. .sr-title {
  951. width:calc(100% - 2em);
  952. font-family:'{text:title font}', sans-serif;
  953. font-size:1.1em;
  954. font-weight:600;
  955. color:var(--ColorTitle);
  956. padding:.5em 1em .5em 1em;
  957. border-bottom:1px solid var(--ColorBorders);
  958. }
  959.  
  960. .srblogs {
  961. display:flex;
  962. flex-direction:column;
  963. }
  964. .srblogs li {
  965. width:calc(100% - 2em);
  966. display:flex;
  967. justify-content:space-between;
  968. align-items:center;
  969. gap:.5em;
  970. padding:.5em 1em .5em 1em;
  971. }
  972. .srblogs a.srb-link {
  973. display:flex;
  974. justify-content:flex-start;
  975. align-items:center;
  976. gap:.5em;
  977. }
  978. .srblogs img {
  979. width:1.5em;
  980. height:1.5em;
  981. padding:2px;
  982. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  983. border-radius:100%;
  984. -webkit-transition: all 0.4s;
  985. -moz-transition: all 0.4s;
  986. -ms-transition: all 0.4s;
  987. -o-transition: all 0.4s;
  988. transition: all 0.4s;
  989. }
  990. .srblogs a.srb-link:hover img {transform:rotate(15deg);}
  991. .srblogs b {
  992. font-family:'{text:title font}', sans-serif;
  993. font-size:.9em;
  994. font-weight:normal;
  995. max-width:125px;
  996. white-space:nowrap;
  997. overflow:hidden;
  998. text-overflow:ellipsis;
  999. -webkit-transition: all 0.4s;
  1000. -moz-transition: all 0.4s;
  1001. -ms-transition: all 0.4s;
  1002. -o-transition: all 0.4s;
  1003. transition: all 0.4s;
  1004. }
  1005. .srblogs a.srb-link:hover b {color:var(--ColorAccent);}
  1006.  
  1007. a.srb-follow {
  1008. position:relative;
  1009. font-family:'{text:title font}', sans-serif;
  1010. font-size:.85em;
  1011. color:var(--ColorText);
  1012. padding:.25em .75em .25em .75em;
  1013. background:var(--ColorBackground);
  1014. border-radius:30px;
  1015. z-index:2;
  1016. }
  1017. a.srb-follow:hover {color:var(--ColorAccent); text-shadow:{select:Glow}; background:transparent;}
  1018. a.srb-follow:after {
  1019. content:'';
  1020. position:absolute;
  1021. top:0;
  1022. left:0;
  1023. width:100%;
  1024. height:100%;
  1025. opacity:0;
  1026. background:var(--ColorAccent);
  1027. border-radius:30px;
  1028. z-index:-1;
  1029. -webkit-transition: all 0.4s;
  1030. -moz-transition: all 0.4s;
  1031. -ms-transition: all 0.4s;
  1032. -o-transition: all 0.4s;
  1033. transition: all 0.4s;
  1034. }
  1035. a.srb-follow:hover:after {opacity:.35;}
  1036.  
  1037. /* sidebar updates */
  1038. .sr-updates {
  1039. width:100%;
  1040. display:flex;
  1041. flex-direction:column;
  1042. background:var(--ColorSidebar);
  1043. border-radius:{select:Corners};
  1044. }
  1045. .sr-updates li {
  1046. width:calc(100% - 2em);
  1047. display:flex;
  1048. flex-direction:column;
  1049. padding:.5em 1em .5em 1em;
  1050. }
  1051. .sr-updates b {
  1052. font-family:'{text:title font}', sans-serif;
  1053. font-weight:600;
  1054. font-size:.95em;
  1055. }
  1056. .sr-updates span {
  1057. font-size:.9em;
  1058. }
  1059.  
  1060. /* DAY/NIGHT */
  1061. button#theme-toggle {
  1062. outline:none;
  1063. border:none;
  1064. padding:0;
  1065. background:transparent;
  1066. display:flex;
  1067. justify-content:center;
  1068. align-items:center;
  1069. }
  1070.  
  1071. button#theme-toggle span {
  1072. position:relative;
  1073. justify-content:center;
  1074. align-items:center;
  1075. padding:.5em;
  1076. border-radius:100%;
  1077. cursor:help;
  1078. -webkit-transition: all 0.4s;
  1079. -moz-transition: all 0.4s;
  1080. -ms-transition: all 0.4s;
  1081. -o-transition: all 0.4s;
  1082. transition: all 0.4s;
  1083. }
  1084. button#theme-toggle span:after {
  1085. content:'';
  1086. position:absolute;
  1087. width:100%;
  1088. height:100%;
  1089. opacity:0;
  1090. background:var(--ColorAccent);
  1091. border-radius:100%;
  1092. z-index:-1;
  1093. -webkit-transition: all 0.4s;
  1094. -moz-transition: all 0.4s;
  1095. -ms-transition: all 0.4s;
  1096. -o-transition: all 0.4s;
  1097. transition: all 0.4s;
  1098. }
  1099. button#theme-toggle span:hover:after {opacity:.35;}
  1100.  
  1101. button#theme-toggle i {
  1102. font-size:1.5em;
  1103. color:var(--ColorTitle);
  1104. -webkit-transition: all 0.4s;
  1105. -moz-transition: all 0.4s;
  1106. -ms-transition: all 0.4s;
  1107. -o-transition: all 0.4s;
  1108. transition: all 0.4s;
  1109. }
  1110. button#theme-toggle span:hover i {
  1111. color:var(--ColorAccent);
  1112. text-shadow:{select:glow};
  1113. -webkit-transition: all 0.4s;
  1114. -moz-transition: all 0.4s;
  1115. -ms-transition: all 0.4s;
  1116. -o-transition: all 0.4s;
  1117. transition: all 0.4s;
  1118. -webkit-animation-duration: .75s;
  1119. animation-duration: .75s;
  1120. -webkit-animation-fill-mode: both;
  1121. animation-fill-mode: both;
  1122. -webkit-animation-timing-function: ease-in-out;
  1123. animation-timing-function: ease-in-out;
  1124. animation-iteration-count:1;
  1125. -webkit-animation-iteration-count:1;
  1126. animation-name:daynight;
  1127. -moz-animation-name:daynight;
  1128. }
  1129.  
  1130. @keyframes daynight {
  1131. 50% {
  1132. -webkit-transform: scaleX(-1);
  1133. -ms-transform: scaleX(-1);
  1134. transform: scaleX(-1);
  1135. }
  1136. }
  1137.  
  1138. /* SCROLL TO TOP */
  1139. a#totop {
  1140. position:relative;
  1141. display:flex;
  1142. justify-content:center;
  1143. align-items:center;
  1144. padding:.5em;
  1145. border-radius:100%;
  1146. cursor:help;
  1147. }
  1148. a#totop:after {
  1149. content:'';
  1150. position:absolute;
  1151. width:100%;
  1152. height:100%;
  1153. opacity:0;
  1154. background:var(--ColorAccent);
  1155. border-radius:100%;
  1156. z-index:-1;
  1157. -webkit-transition: all 0.4s;
  1158. -moz-transition: all 0.4s;
  1159. -ms-transition: all 0.4s;
  1160. -o-transition: all 0.4s;
  1161. transition: all 0.4s;
  1162. }
  1163. a#totop:hover:after {opacity:.35;}
  1164.  
  1165. #totop i {
  1166. font-size:1.5em;
  1167. color:var(--ColorTitle);
  1168. -webkit-transition: all 0.4s;
  1169. -moz-transition: all 0.4s;
  1170. -ms-transition: all 0.4s;
  1171. -o-transition: all 0.4s;
  1172. transition: all 0.4s;
  1173. }
  1174.  
  1175. a#totop:hover i {
  1176. color:var(--ColorAccent);
  1177. text-shadow:{select:glow};
  1178. -webkit-transition: all 0.4s;
  1179. -moz-transition: all 0.4s;
  1180. -ms-transition: all 0.4s;
  1181. -o-transition: all 0.4s;
  1182. transition: all 0.4s;
  1183. -webkit-animation-duration: 2.5s;
  1184. animation-duration: 2.5s;
  1185. -webkit-animation-fill-mode: both;
  1186. animation-fill-mode: both;
  1187. -webkit-animation-timing-function: ease-in-out;
  1188. animation-timing-function: ease-in-out;
  1189. animation-iteration-count:1;
  1190. -webkit-animation-iteration-count:1;
  1191. animation-name:totop;
  1192. -moz-animation-name:totop;
  1193. }
  1194.  
  1195. @keyframes totop {
  1196. 0% {
  1197. -webkit-transform: translateY(0px);
  1198. -ms-transform: translateY(0px);
  1199. transform: translateY(0px)
  1200. }
  1201. 10% {
  1202. -webkit-transform: translateY(-3px);
  1203. -ms-transform: translateY(-3px);
  1204. transform: translateY(-3px)
  1205. }
  1206. 20% {
  1207. -webkit-transform: translateY(0px);
  1208. -ms-transform: translateY(0px);
  1209. transform: translateY(0px)
  1210. }
  1211. 30% {
  1212. -webkit-transform: translateY(-3px);
  1213. -ms-transform: translateY(-3px);
  1214. transform: translateY(-3px)
  1215. }
  1216. 40% {
  1217. -webkit-transform: translateY(0px);
  1218. -ms-transform: translateY(0px);
  1219. transform: translateY(0px)
  1220. }
  1221. 50% {
  1222. -webkit-transform: translateY(0px);
  1223. -ms-transform: translateY(0px);
  1224. transform: translateY(0px)
  1225. }
  1226. 60% {
  1227. -webkit-transform: translateY(0px);
  1228. -ms-transform: translateY(0px);
  1229. transform: translateY(0px)
  1230. }
  1231. 70% {
  1232. -webkit-transform: translateY(-3px);
  1233. -ms-transform: translateY(-3px);
  1234. transform: translateY(-3px)
  1235. }
  1236. 80% {
  1237. -webkit-transform: translateY(0px);
  1238. -ms-transform: translateY(0px);
  1239. transform: translateY(0px)
  1240. }
  1241. 90% {
  1242. -webkit-transform: translateY(-3px);
  1243. -ms-transform: translateY(-3px);
  1244. transform: translateY(-3px)
  1245. }
  1246. 100% {
  1247. -webkit-transform: translateY(0px);
  1248. -ms-transform: translateY(0px);
  1249. transform: translateY(0px)
  1250. }
  1251. }
  1252.  
  1253. /* TUMBLR CONTROLS */
  1254. a#controlsbutton {
  1255. position:relative;
  1256. padding:.5em;
  1257. display:flex;
  1258. justify-content:center;
  1259. align-items:center;
  1260. cursor:help;
  1261. }
  1262. a#controlsbutton:after {
  1263. content:'';
  1264. position:absolute;
  1265. width:100%;
  1266. height:100%;
  1267. opacity:0;
  1268. background:var(--ColorAccent);
  1269. border-radius:100%;
  1270. z-index:-1;
  1271. -webkit-transition: all 0.4s;
  1272. -moz-transition: all 0.4s;
  1273. -ms-transition: all 0.4s;
  1274. -o-transition: all 0.4s;
  1275. transition: all 0.4s;
  1276. }
  1277. a#controlsbutton:hover:after {opacity:.35;}
  1278.  
  1279. #controlsbutton i {
  1280. font-size:1.5em;
  1281. color:var(--ColorTitle);
  1282. -webkit-transition: all 0.4s;
  1283. -moz-transition: all 0.4s;
  1284. -ms-transition: all 0.4s;
  1285. -o-transition: all 0.4s;
  1286. transition: all 0.4s;
  1287. }
  1288. #controlsbutton:hover i {
  1289. color:var(--ColorAccent);
  1290. text-shadow:{select:glow};
  1291. -webkit-transition: all 0.4s;
  1292. -moz-transition: all 0.4s;
  1293. -ms-transition: all 0.4s;
  1294. -o-transition: all 0.4s;
  1295. transition: all 0.4s;
  1296. -webkit-animation-duration: 1.5s;
  1297. animation-duration: 1.5s;
  1298. -webkit-animation-fill-mode: both;
  1299. animation-fill-mode: both;
  1300. -webkit-animation-timing-function: ease-in-out;
  1301. animation-timing-function: ease-in-out;
  1302. animation-iteration-count:1;
  1303. -webkit-animation-iteration-count:1;
  1304. animation-name:tumblrcontrols;
  1305. -moz-animation-name:tumblrcontrols;
  1306. }
  1307.  
  1308. @keyframes tumblrcontrols {
  1309. 45% {
  1310. -webkit-transform: rotate(180deg);
  1311. -ms-transform: rotate(180deg);
  1312. transform: rotate(180deg);
  1313. }
  1314. 55% {
  1315. -webkit-transform: rotate(180deg);
  1316. -ms-transform: rotate(180deg);
  1317. transform: rotate(180deg);
  1318. }
  1319. 100% {
  1320. -webkit-transform: rotate(360deg);
  1321. -ms-transform: rotate(360deg);
  1322. transform: rotate(360deg);
  1323. }
  1324. }
  1325.  
  1326. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  1327. z-index:999999999!important;
  1328. margin-top:40px;
  1329. margin-right:-2em;
  1330. transform:scale(.75);
  1331. opacity:0;
  1332. visibility:hidden;
  1333. }
  1334.  
  1335. body.controlsclick iframe.tmblr-iframe {
  1336. opacity:1.0;
  1337. visibility:visible;
  1338. -webkit-transition: all 0.5s;
  1339. -moz-transition: all 0.5s;
  1340. -ms-transition: all 0.5s;
  1341. -o-transition: all 0.5s;
  1342. transition: all 0.5s;
  1343. }
  1344.  
  1345. body.controlsclick #controlsbutton i {
  1346. color:var(--ColorAccent);
  1347. }
  1348.  
  1349. /*---- HEADER ----*/
  1350. header {
  1351. position:relative;
  1352. margin-top:60px;
  1353. width:calc(540px + 4em);
  1354. display:flex;
  1355. flex-direction:column;
  1356. background:var(--ColorPosts);
  1357. }
  1358.  
  1359. .headerfixed {
  1360. position:fixed;
  1361. top:0;
  1362. width:calc(540px + 2em);
  1363. height:60px;
  1364. padding:0 1em 0 1em;
  1365. display:flex;
  1366. justify-content:space-between;
  1367. align-items:center;
  1368. gap:1em;
  1369. backdrop-filter: blur(6px);
  1370. border-bottom:1px solid var(--ColorBorders);
  1371. z-index:9999;
  1372. }
  1373. .headerfixed:after {
  1374. content:'';
  1375. position:absolute;
  1376. left:0;
  1377. top:0;
  1378. width:calc(540px + 4em);
  1379. height:60px;
  1380. opacity:.95;
  1381. background:var(--ColorSidebar);
  1382. z-index:-1;
  1383. }
  1384.  
  1385. .hf-left {
  1386. position:fixed;
  1387. left:1em;
  1388. display:flex;
  1389. justify-content:flex-start;
  1390. align-items:center;
  1391. gap:.5em;
  1392. }
  1393. .hf-left img {
  1394. width:38px;
  1395. height:38px;
  1396. border-radius:100%;
  1397. padding:2px;
  1398. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1399. }
  1400. .hf-left a.title {
  1401. font-family:'{text:title font}', sans-serif;
  1402. font-size:1.1em;
  1403. font-weight:bold;
  1404. color:var(--ColorTitle);
  1405. }
  1406. a.title:hover {color:var(--ColorAccent);}
  1407.  
  1408. /* headerbox sticky / top content */
  1409. .headerbox-top {
  1410. width:fit-content;
  1411. height:60px;
  1412. padding:0 1em 0 1em;
  1413. display:flex;
  1414. justify-content:flex-end;
  1415. align-items:center;
  1416. gap:.5em;
  1417. z-index:9999;
  1418. }
  1419. .headerbox-top a {
  1420. display:flex;
  1421. justify-content:center;
  1422. align-items:center;
  1423. }
  1424. .headerbox-top i {
  1425. position:relative;
  1426. font-size:1.5em;
  1427. color:var(--ColorTitle);
  1428. padding:.3em;
  1429. background:transparent;
  1430. border-radius:100%;
  1431. border:1px solid var(--ColorBorders);
  1432. -webkit-transition: all 0.4s;
  1433. -moz-transition: all 0.4s;
  1434. -ms-transition: all 0.4s;
  1435. -o-transition: all 0.4s;
  1436. transition: all 0.4s;
  1437. }
  1438. .headerbox-top a:hover i {
  1439. color:var(--ColorAccent);
  1440. text-shadow:{select:Glow};
  1441. border:1px solid transparent;
  1442. }
  1443. .headerbox-top b {
  1444. position:relative;
  1445. font-family:'{text:title font}', sans-serif;
  1446. font-weight:600;
  1447. color:var(--ColorTitle);
  1448. padding:.45em 1em .45em 1em;
  1449. background:transparent;
  1450. border:1px solid var(--ColorBorders);
  1451. border-radius:50px;
  1452. -webkit-transition: all 0.4s;
  1453. -moz-transition: all 0.4s;
  1454. -ms-transition: all 0.4s;
  1455. -o-transition: all 0.4s;
  1456. transition: all 0.4s;
  1457. }
  1458. .headerbox-top a:hover b {color:var(--ColorAccent); border:1px solid transparent; text-shadow:{select:Glow};}
  1459. .headerbox-top a b:after, .headerbox-top a i:after {
  1460. content:'';
  1461. position:absolute;
  1462. left:0;
  1463. top:0;
  1464. width:100%;
  1465. height:100%;
  1466. opacity:0;
  1467. background:var(--ColorAccent);
  1468. border-radius:50px;
  1469. border:1px solid var(--ColorAccent);
  1470. -webkit-transition: all 0.4s;
  1471. -moz-transition: all 0.4s;
  1472. -ms-transition: all 0.4s;
  1473. -o-transition: all 0.4s;
  1474. transition: all 0.4s;
  1475.  
  1476. }
  1477. .headerbox-top a:hover b:after, .headerbox-top a:hover i:after {opacity:.25;}
  1478.  
  1479. /* scrolling header starts */
  1480.  
  1481. /* header banner */
  1482. .header-banner {
  1483. position:relative;
  1484. width:100%;
  1485. height:310px;
  1486. display:flex;
  1487. flex-direction:column;
  1488. align-items:flex-end;
  1489. }
  1490. .bannerimg {
  1491. position:relative;
  1492. width:100%;
  1493. height:250px;
  1494. }
  1495. .bannerimg img {
  1496. width:100%;
  1497. height:250px;
  1498. object-fit:cover;
  1499. }
  1500. .nobanner {
  1501. {block:ifHeaderImage}
  1502. display:none;
  1503. {/block:ifHeaderImage}
  1504. width:100%;
  1505. height:250px;
  1506. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1507. }
  1508.  
  1509. #side-img {
  1510. position:absolute;
  1511. bottom:calc(-50px - 2px);
  1512. left:1em;
  1513. display:flex;
  1514. justify-content:center;
  1515. align-items:center;
  1516. }
  1517. #side-img img {
  1518. width:100px;
  1519. height:100px;
  1520. object-fit:cover;
  1521. padding:4px;
  1522. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1523. border-radius:100%;
  1524. }
  1525. {block:ifProfileImage}
  1526. #side-img img.porticon {display:none;}
  1527. {/block:ifProfileImage}
  1528.  
  1529. /* headerbox middle content */
  1530. .headerbox-mid {
  1531. width:calc(100% - 2em);
  1532. padding:1em;
  1533. display:flex;
  1534. flex-direction:column;
  1535. gap:1em;
  1536. }
  1537.  
  1538. .headerbox-title {
  1539. display:flex;
  1540. flex-direction:column;
  1541. align-items:flex-start;
  1542. line-height:130%;
  1543. }
  1544. .headerbox-title a {
  1545. font-family:'{text:title font}', sans-serif;
  1546. font-size:1.1em;
  1547. font-weight:bold;
  1548. color:var(--ColorTitle);
  1549. }
  1550. .headerbox-title a:hover {color:var(--ColorAccent);}
  1551. .headerbox-title b {
  1552. font-family:'{text:title font}', sans-serif;
  1553. font-size:.9em;
  1554. font-weight:normal;
  1555. color:var(--ColorText);
  1556. }
  1557.  
  1558. .description {
  1559. width:100%;
  1560. text-align:left;
  1561. }
  1562. .description p {margin-bottom:0; padding-bottom:0; margin-top:.5em;}
  1563.  
  1564. .headerstats {
  1565. margin-top:.5em;
  1566. display:flex;
  1567. justify-content:flex-start;
  1568. align-items:center;
  1569. gap:1em;
  1570. }
  1571. .headerstats li {
  1572. display:flex;
  1573. justify-content:flex-start;
  1574. align-items:center;
  1575. gap:.25em;
  1576. opacity:.8;
  1577. }
  1578. .headerstats i {
  1579. font-size:1.3em;
  1580. color:var(--ColorText);
  1581. }
  1582. .headerstats b {
  1583. font-weight:normal;
  1584. color:var(--ColorText);
  1585. }
  1586.  
  1587. /*---- sticky navigation ----*/
  1588. nav {
  1589. width:100%;
  1590. display:flex;
  1591. justify-content:space-between;
  1592. align-items:center;
  1593. backdrop-filter: blur(6px);
  1594. }
  1595. nav:after {
  1596. content:'';
  1597. position:absolute;
  1598. left:0;
  1599. top:0;
  1600. width:100%;
  1601. height:100%;
  1602. opacity:.9;
  1603. background:var(--ColorPosts);
  1604. border-bottom:1px solid var(--ColorBorders);
  1605. z-index:-1;
  1606. }
  1607.  
  1608. nav a {
  1609. position:relative;
  1610. width:calc(25% - 2em);
  1611. height:calc(100% - 2em);
  1612. padding:1em;
  1613. display:flex;
  1614. justify-content:center;
  1615. align-items:center;
  1616. z-index:2;
  1617. }
  1618. nav a.navselect:after {
  1619. content:'';
  1620. position:absolute;
  1621. bottom:0;
  1622. width:calc(100% - 4em);
  1623. height:3px;
  1624. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1625. border-radius:5px;
  1626. transform: scaleX(0);
  1627. transform-origin:center;
  1628. transition: transform 0.3s ease-out;
  1629. }
  1630. nav a.navselect:after {
  1631. transform: scaleX(1);
  1632. transform-origin:center;
  1633. }
  1634. nav a:before {
  1635. content:'';
  1636. position:absolute;
  1637. width:100%;
  1638. height:100%;
  1639. opacity:0;
  1640. background:var(--ColorAccent);
  1641. z-index:-1;
  1642. -webkit-transition: all 0.4s;
  1643. -moz-transition: all 0.4s;
  1644. -ms-transition: all 0.4s;
  1645. -o-transition: all 0.4s;
  1646. transition: all 0.4s;
  1647. }
  1648. nav a:hover:before {opacity:.35;}
  1649.  
  1650. nav b {
  1651. font-family:'{text:title font}', sans-serif;
  1652. font-weight:normal;
  1653. font-size:.95em;
  1654. color:var(--ColorText);
  1655. letter-spacing:.1em;
  1656. text-align:center;
  1657. -webkit-transition: all 0.4s;
  1658. -moz-transition: all 0.4s;
  1659. -ms-transition: all 0.4s;
  1660. -o-transition: all 0.4s;
  1661. transition: all 0.4s;
  1662. }
  1663. nav a.navselect b {color:var(--ColorTitle);}
  1664. nav a:hover b {color:var(--ColorAccent); text-shadow:{select:Glow};}
  1665.  
  1666. /*--- TOP POST INFO ---*/
  1667. .topinfo {
  1668. position:sticky;
  1669. top:60px;
  1670. width:calc(540px - 2em);
  1671. display:flex;
  1672. justify-content:space-between;
  1673. align-items:center;
  1674. gap:1em;
  1675. padding:2em 1em 1em 1em;
  1676. backdrop-filter:blur(6px);
  1677. z-index:999;
  1678. }
  1679. .topinfo:after {
  1680. content:'';
  1681. position:absolute;
  1682. left:0;
  1683. top:0;
  1684. width:100%;
  1685. height:100%;
  1686. opacity:.9;
  1687. background:var(--ColorPosts);
  1688. z-index:-1;
  1689. }
  1690.  
  1691. a.topinfo-img {
  1692. position:absolute;
  1693. left:-2.5em;
  1694. top:2em;
  1695. width:34px;
  1696. height:34px;
  1697. padding:2px;
  1698. display:flex;
  1699. justify-content:center;
  1700. align-items:center;
  1701. border-radius:100%;
  1702. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  1703. }
  1704. a.topinfo-img img {
  1705. width:34px;
  1706. height:34px;
  1707. border-radius:100%;
  1708. -webkit-transition: all 0.4s;
  1709. -moz-transition: all 0.4s;
  1710. -ms-transition: all 0.4s;
  1711. -o-transition: all 0.4s;
  1712. transition: all 0.4s;
  1713. }
  1714. a.topinfo-img:hover img {
  1715. transform:scale(.95) rotate(15deg);
  1716. }
  1717.  
  1718. .rbvia, .pinned {
  1719. position:absolute;
  1720. top:.5em;
  1721. left:-.75em;
  1722. display:flex;
  1723. justify-content:center;
  1724. align-items:center;
  1725. gap:.5em;
  1726. }
  1727. .rbvia.ifpinned {display:none;}
  1728. .rbvia i, .pinned i {
  1729. font-size:1em;
  1730. color:var(--ColorText);
  1731. }
  1732. .pinned i {font-size:1.2em;}
  1733. .rbvia a, .pinned a {
  1734. color:var(--ColorText);
  1735. }
  1736. .rbvia a:hover, .pinned a:hover {color:var(--ColorAccent);}
  1737.  
  1738. .topinfo-name {
  1739. display:flex;
  1740. justify-content:flex-start;
  1741. align-items:center;
  1742. gap:.75em;
  1743. }
  1744.  
  1745. .topinfo-name a {
  1746. display:flex;
  1747. justify-content:flex-start;
  1748. align-items:center;
  1749. gap:.35em;
  1750. }
  1751.  
  1752. .topinfo-name b {
  1753. font-family:'{text:title font}', sans-serif;
  1754. font-weight:600;
  1755. color:var(--ColorTitle);
  1756. max-width:175px;
  1757. white-space:nowrap;
  1758. overflow:hidden;
  1759. text-overflow:ellipsis;
  1760. -webkit-transition: all 0.4s;
  1761. -moz-transition: all 0.4s;
  1762. -ms-transition: all 0.4s;
  1763. -o-transition: all 0.4s;
  1764. transition: all 0.4s;
  1765. }
  1766. .topinfo-name a:hover b {color:var(--ColorAccent);}
  1767.  
  1768. .topinfo-name i {
  1769. font-family:'{text:title font}', sans-serif;
  1770. font-style:normal;
  1771. font-size:.9em;
  1772. color:var(--ColorText);
  1773. -webkit-transition: all 0.4s;
  1774. -moz-transition: all 0.4s;
  1775. -ms-transition: all 0.4s;
  1776. -o-transition: all 0.4s;
  1777. transition: all 0.4s;
  1778. }
  1779. .topinfo-name a:hover i {color:var(--ColorTitle);}
  1780.  
  1781. .topinfo-date a {
  1782. font-family:'{text:title font}', sans-serif;
  1783. font-size:.9em;
  1784. color:var(--ColorText);
  1785. }
  1786. .topinfo-date a:hover {color:var(--ColorAccent);}
  1787.  
  1788. /* top info right */
  1789. .topinfo-buttons {
  1790. display:flex;
  1791. justify-content:flex-end;
  1792. align-items:center;
  1793. }
  1794.  
  1795. /* top post info dropdown */
  1796. a.tir-button {
  1797. display:flex;
  1798. justify-content:center;
  1799. align-items:center;
  1800. cursor:help;
  1801. }
  1802. a.tir-button i {
  1803. position:relative;
  1804. font-size:1.4em;
  1805. color:var(--ColorText);
  1806. padding:.3em;
  1807. border-radius:100%;
  1808. z-index:2;
  1809. -webkit-transition: all 0.4s;
  1810. -moz-transition: all 0.4s;
  1811. -ms-transition: all 0.4s;
  1812. -o-transition: all 0.4s;
  1813. transition: all 0.4s;
  1814. }
  1815. a.tir-button i:after {
  1816. content:'';
  1817. position:absolute;
  1818. top:0;
  1819. left:0;
  1820. width:100%;
  1821. height:100%;
  1822. opacity:0;
  1823. background:var(--ColorAccent);
  1824. border-radius:100%;
  1825. z-index:-1;
  1826. -webkit-transition: all 0.4s;
  1827. -moz-transition: all 0.4s;
  1828. -ms-transition: all 0.4s;
  1829. -o-transition: all 0.4s;
  1830. transition: all 0.4s;
  1831. }
  1832. a.tir-button:hover i:after {opacity:.35;}
  1833. a.tir-button:hover i {color:var(--ColorAccent); text-shadow:{select:Glow};}
  1834. a.tir-button.tir-click i {
  1835. color:var(--ColorAccent);
  1836. transform:rotate(90deg);
  1837. }
  1838.  
  1839. .tir-drop {
  1840. position:absolute;
  1841. top:calc(100% - .5em);
  1842. width:225px;
  1843. display:flex;
  1844. flex-direction:column;
  1845. align-items:flex-start;
  1846. background:var(--ColorPosts);
  1847. border-radius:{select:Corners};
  1848. box-shadow:2px 2px 10px var(--ColorOpacity);
  1849. overflow:hidden;
  1850. z-index:9999!important;
  1851. }
  1852.  
  1853. .tir-drop a {
  1854. position:relative;
  1855. width:calc(100% - 2em);
  1856. display:flex;
  1857. justify-content:flex-start;
  1858. align-items:center;
  1859. gap:.5em;
  1860. padding:.5em 1em .5em 1em;
  1861. }
  1862. .tir-drop a:after {
  1863. content:'';
  1864. position:absolute;
  1865. left:0;
  1866. top:0;
  1867. width:100%;
  1868. height:100%;
  1869. opacity:0;
  1870. background:var(--ColorAccent);
  1871. z-index:-1;
  1872. -webkit-transition: all 0.4s;
  1873. -moz-transition: all 0.4s;
  1874. -ms-transition: all 0.4s;
  1875. -o-transition: all 0.4s;
  1876. transition: all 0.4s;
  1877. }
  1878. .tir-drop a:hover:after {opacity:.35;}
  1879.  
  1880. .tir-drop a:last-of-type {border-bottom:none; border-radius:0 0 {select:Corners} {select:Corners};}
  1881.  
  1882. .tir-drop a i {
  1883. font-size:1.1em;
  1884. color:var(--ColorText);
  1885. -webkit-transition: all 0.4s;
  1886. -moz-transition: all 0.4s;
  1887. -ms-transition: all 0.4s;
  1888. -o-transition: all 0.4s;
  1889. transition: all 0.4s;
  1890. }
  1891. .tir-drop a:hover i {
  1892. color:var(--ColorAccent);
  1893. text-shadow:{select:Glow};
  1894. -webkit-transition: all 0.4s;
  1895. -moz-transition: all 0.4s;
  1896. -ms-transition: all 0.4s;
  1897. -o-transition: all 0.4s;
  1898. transition: all 0.4s;
  1899. }
  1900.  
  1901. .tir-drop b {
  1902. font-family:'{text:title font}', sans-serif;
  1903. font-size:.9em;
  1904. font-weight:normal;
  1905. color:var(--ColorText);
  1906. text-transform:lowercase;
  1907. width:100%;
  1908. -webkit-transition: all 0.4s;
  1909. -moz-transition: all 0.4s;
  1910. -ms-transition: all 0.4s;
  1911. -o-transition: all 0.4s;
  1912. transition: all 0.4s;
  1913. }
  1914. .tir-drop a:hover b {
  1915. color:var(--ColorAccent);
  1916. -webkit-transition: all 0.4s;
  1917. -moz-transition: all 0.4s;
  1918. -ms-transition: all 0.4s;
  1919. -o-transition: all 0.4s;
  1920. transition: all 0.4s;
  1921. }
  1922.  
  1923. .like-button {
  1924. position: relative;
  1925. display: inline-block;
  1926. }
  1927.  
  1928. .like-button .like_button iframe {
  1929. position: absolute;
  1930. top: 0;
  1931. left: 0;
  1932. bottom: 0;
  1933. right: 0;
  1934. z-index: 2;
  1935. opacity: 0;
  1936. }
  1937.  
  1938. .like_button iframe {width: 100% !important; height: 100% !important;}
  1939. .like-button .liked + .actual-button i {
  1940. color:var(--ColorAccent);
  1941. text-shadow:{select:Glow};
  1942. }
  1943.  
  1944. /*--- POSTS ----*/
  1945.  
  1946. .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%;}
  1947.  
  1948. article img {display:block; margin:auto; max-width:100%;}
  1949.  
  1950. .caption {
  1951. padding:1em;
  1952. border:1px solid var(--ColorBorders);
  1953. border-radius:{select:Corners};
  1954. }
  1955. #ask_form {}
  1956. p:first-of-type {margin:0;}
  1957. p:last-of-type {margin-bottom:0;}
  1958.  
  1959. .caption a {
  1960. position:relative;
  1961. border-bottom:2px solid var(--ColorBorders);
  1962. }
  1963.  
  1964. .caption a:hover {border-bottom:2px solid var(--ColorLink);}
  1965.  
  1966. .userlink {
  1967. display:inline-block;
  1968. margin-bottom:1em;
  1969. }
  1970. .userlink a {
  1971. display:flex;
  1972. justify-content:flex-start;
  1973. align-items:center;
  1974. gap:.5em;
  1975. border-bottom:0;
  1976. }
  1977. .userlink a:hover {border-bottom:0;}
  1978. .usericon img {
  1979. width:1.5em;
  1980. height:1.5em;
  1981. padding:2px;
  1982. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));;
  1983. border-radius:100%;
  1984. -webkit-transition: all 0.4s;
  1985. -moz-transition: all 0.4s;
  1986. -ms-transition: all 0.4s;
  1987. -o-transition: all 0.4s;
  1988. transition: all 0.4s;
  1989. }
  1990. .userlink a:hover .usericon img {
  1991. transform:scale(1.05) rotate(-15deg);
  1992. -webkit-transition: all 0.4s;
  1993. -moz-transition: all 0.4s;
  1994. -ms-transition: all 0.4s;
  1995. -o-transition: all 0.4s;
  1996. transition: all 0.4s;
  1997. }
  1998. .username {
  1999. font-weight:600;
  2000. font-size:.95em;
  2001. color:var(--ColorTitle);
  2002. letter-spacing:.1em;
  2003. -webkit-transition: all 0.4s;
  2004. -moz-transition: all 0.4s;
  2005. -ms-transition: all 0.4s;
  2006. -o-transition: all 0.4s;
  2007. transition: all 0.4s;
  2008. }
  2009. .userlink a:hover .username {
  2010. color:var(--ColorAccent);
  2011. -webkit-transition: all 0.4s;
  2012. -moz-transition: all 0.4s;
  2013. -ms-transition: all 0.4s;
  2014. -o-transition: all 0.4s;
  2015. transition: all 0.4s;
  2016. }
  2017.  
  2018. .userlink.deactive .username {
  2019. opacity:.75;
  2020. }
  2021.  
  2022. a.read_more {
  2023. text-transform:uppercase;
  2024. letter-spacing:1px;
  2025. font-weight:bold;
  2026. color: var(--ColorTitle);
  2027. }
  2028. a.read_more:hover {color:var(--ColorAccent);}
  2029.  
  2030. /*--- PHOTO POSTS ----*/
  2031.  
  2032. .photopost img {width:100%;}
  2033. .photopost img:first-of-type {border-radius:{select:Corners} {select:Corners} 0 0;}
  2034. .photopost img:last-of-type {border-radius:0 0 {select:Corners} {select:Corners};}
  2035.  
  2036. .vignette, #vignette {opacity:0;}
  2037. .tmblr-lightbox, #tumblr_lightbox {
  2038. backdrop-filter: blur(2px);
  2039. background-color:rgba(0,0,0,.2) !important;
  2040. z-index:9999999;
  2041. }
  2042. .lightbox-image, #tumblr_lightbox img {
  2043. box-shadow: none !important;
  2044. }
  2045. #tumblr_lightbox_caption, .lightbox-caption {
  2046. color: #fff !important;
  2047. font-family: inherit;
  2048. margin-top: 1em !important;
  2049. z-index:9999999;
  2050. }
  2051.  
  2052. /*--- LINK POSTS ---*/
  2053.  
  2054. .linkpost {
  2055. }
  2056.  
  2057. .link {
  2058. position:relative;
  2059. display:flex;
  2060. align-items:center;
  2061. justify-content:center;
  2062. gap:1em;
  2063. padding:1em;
  2064. background:var(--ColorSidebar);
  2065. border:1px solid var(--ColorBorders);
  2066. border-radius:{select:Corners};
  2067. z-index:2;
  2068. -webkit-transition: all 0.4s;
  2069. -moz-transition: all 0.4s;
  2070. -ms-transition: all 0.4s;
  2071. -o-transition: all 0.4s;
  2072. transition: all 0.4s;
  2073. }
  2074. .link:hover {border:1px solid transparent;}
  2075. .link:after {
  2076. content:'';
  2077. position:absolute;
  2078. top:0;
  2079. left:0;
  2080. width:100%;
  2081. height:100%;
  2082. opacity:0;
  2083. background:var(--ColorAccent);
  2084. border-radius:{select:Corners};
  2085. z-index:-1;
  2086. -webkit-transition: all 0.4s;
  2087. -moz-transition: all 0.4s;
  2088. -ms-transition: all 0.4s;
  2089. -o-transition: all 0.4s;
  2090. transition: all 0.4s;
  2091. }
  2092. .link:hover:after {opacity:.35;}
  2093.  
  2094. .linkicon i {
  2095. font-size:1.6em;
  2096. color:var(--ColorTitle);
  2097. -webkit-transition: all 0.4s;
  2098. -moz-transition: all 0.4s;
  2099. -ms-transition: all 0.4s;
  2100. -o-transition: all 0.4s;
  2101. transition: all 0.4s;
  2102. }
  2103. .link:hover .linkicon i {
  2104. color:var(--ColorAccent);
  2105. text-shadow:{select:Glow};
  2106. -webkit-transition: all 0.4s;
  2107. -moz-transition: all 0.4s;
  2108. -ms-transition: all 0.4s;
  2109. -o-transition: all 0.4s;
  2110. transition: all 0.4s;
  2111. }
  2112.  
  2113. .linktitle {
  2114. display:flex;
  2115. flex-direction:column;
  2116. }
  2117.  
  2118. .linktitle b {
  2119. font-family:'{text:title font}', sans-serif;
  2120. font-size:1.1em;
  2121. color:var(--ColorTitle);
  2122. -webkit-transition: all 0.4s;
  2123. -moz-transition: all 0.4s;
  2124. -ms-transition: all 0.4s;
  2125. -o-transition: all 0.4s;
  2126. transition: all 0.4s;
  2127. }
  2128. .link:hover .linktitle b {
  2129. color:var(--ColorAccent);
  2130. }
  2131.  
  2132. .linktitle span {
  2133. font-size:.9em;
  2134. color:var(--ColorText);
  2135. -webkit-transition: all 0.4s;
  2136. -moz-transition: all 0.4s;
  2137. -ms-transition: all 0.4s;
  2138. -o-transition: all 0.4s;
  2139. transition: all 0.4s;
  2140. }
  2141. .link:hover .linktitle span {
  2142. color:var(--ColorAccent);
  2143. }
  2144.  
  2145. /*--- AUDIO POSTS ---*/
  2146.  
  2147. .audiopost {
  2148. width:calc(100% - 2em - 2px);
  2149. display:flex;
  2150. justify-content:space-between;
  2151. align-items:center;
  2152. padding:1em;
  2153. background:var(--ColorSidebar);
  2154. border:1px solid var(--ColorBorders);
  2155. border-radius:{select:Corners};
  2156. }
  2157.  
  2158. .audiopost iframe {
  2159. width:100%;
  2160. }
  2161.  
  2162. .audiowrap {
  2163. display:flex;
  2164. justify-content:flex-start;
  2165. align-items:center;
  2166. gap:.5em;
  2167. }
  2168.  
  2169. .albumart {
  2170. width:80px;
  2171. display:flex;
  2172. justify-content:center;
  2173. align-items:center;
  2174. padding:4px;
  2175. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  2176. border-radius:100%;
  2177. }
  2178.  
  2179. .albumart img {
  2180. width:80px;
  2181. height:80px;
  2182. border-radius:100%;
  2183. }
  2184.  
  2185. .audiotitle {
  2186. display:flex;
  2187. flex-direction:column;
  2188. align-items:flex-start;
  2189. }
  2190.  
  2191. .audiotitle b {
  2192. font-family:'{text:title font}', sans-serif;
  2193. font-size:.95em;
  2194. letter-spacing:.1em;
  2195. }
  2196.  
  2197. .audiotitle span {
  2198. font-family:'{text:title font}', sans-serif;
  2199. font-size:.9em;
  2200. }
  2201.  
  2202. .audioplaybg {
  2203. display:flex;
  2204. justify-content:center;
  2205. align-items:center;
  2206. padding:2px;
  2207. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  2208. border-radius:100%;
  2209. }
  2210.  
  2211. .audioplay {
  2212. width:30px;
  2213. height:30px;
  2214. overflow:hidden;
  2215. position:relative;
  2216. padding:8px 8px 5px 5px;
  2217. background:#f2f2f2;
  2218. border-radius:100%;
  2219. z-index:1;
  2220. }
  2221.  
  2222. /*--- QUOTE POSTS ----*/
  2223.  
  2224. .quotepost {
  2225. background:var(--ColorSidebar);
  2226. border:1px solid var(--ColorBorders);
  2227. border-radius:{select:Corners};
  2228. }
  2229.  
  2230. .quotewrap {
  2231. font-family:'{text:title font}', sans-serif;
  2232. color:var(--ColorGradientText);
  2233. font-size:1.1em;
  2234. letter-spacing:.1em;
  2235. font-weight:600;
  2236. text-align:center;
  2237. width:calc(100% - 2em);
  2238. padding:1em;
  2239. background:linear-gradient(to right, var(--ColorGradientOne), var(--ColorGradientTwo));
  2240. border-radius:{select:Corners} {select:Corners} 0 0;
  2241. }
  2242.  
  2243. .source {
  2244. font-family:'{text:title font}', sans-serif;
  2245. font-size:.95em;
  2246. color:var(--ColorTitle);
  2247. text-align:center;
  2248. letter-spacing:.075em;
  2249. padding:1em;
  2250. }
  2251.  
  2252. /*--- ANSWER POSTS ---*/
  2253.  
  2254. .askwrap {
  2255. }
  2256.  
  2257. .qasker {
  2258. display:flex;
  2259. justify-content:flex-end;
  2260. align-items:center;
  2261. gap:.5em;
  2262. padding:1em;
  2263. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  2264. border-top:1px solid var(--ColorBorders);
  2265. border-left:1px solid var(--ColorBorders);
  2266. border-right:1px solid var(--ColorBorders);
  2267. border-radius:{select:Corners} {select:Corners} 0 0;
  2268. }
  2269.  
  2270. .qaskicon {
  2271. width:2em;
  2272. height:2em;
  2273. padding:2px;
  2274. border-radius:100%;
  2275. background:var(--ColorGradientAccent);
  2276. }
  2277.  
  2278. .qaskicon img {
  2279. width:2em;
  2280. height:2em;
  2281. border-radius:100%;
  2282. }
  2283.  
  2284. .qasker .qaskerstart {
  2285. display:flex;
  2286. flex-direction:column;
  2287. align-items:flex-end;
  2288. text-align:right;
  2289. line-height:120%;
  2290. }
  2291.  
  2292. .qaskerstart b {
  2293. font-family:'{text:title font}', sans-serif;
  2294. font-size:.95em;
  2295. color:var(--ColorGradientText);
  2296. text-transform:lowercase;
  2297. letter-spacing:.05em;
  2298. font-weight:600;
  2299. }
  2300.  
  2301. .qaskerstart a {
  2302. font-family:'{text:title font}', sans-serif;
  2303. }
  2304.  
  2305. .qaskerstart span {
  2306. font-size:.9em;
  2307. color:var(--ColorGradientAccent);
  2308. }
  2309.  
  2310. .qquestion {
  2311. position:relative;
  2312. padding:1em;
  2313. text-align:right;
  2314. background:var(--ColorSidebar);
  2315. border-left:1px solid var(--ColorBorders);
  2316. border-bottom:1px solid var(--ColorBorders);
  2317. border-right:1px solid var(--ColorBorders);
  2318. border-radius:0 0 {select:Corners} {select:Corners};
  2319. }
  2320. .qquestion:after {
  2321. content:'';
  2322. position:absolute;
  2323. top:0;
  2324. left:0;
  2325. width:100%;
  2326. height:2px;
  2327. background:var(--ColorSidebar);
  2328. }
  2329. .qquestion .blurb {
  2330. position:absolute;
  2331. top:-.5em;
  2332. right:1.5em;
  2333. transform:rotate(45deg);
  2334. width:1em;
  2335. height:1em;
  2336. border-top:2px solid var(--ColorSidebar);
  2337. border-left:2px solid var(--ColorSidebar);
  2338. background:var(--ColorSidebar);
  2339. z-index:2;
  2340. }
  2341.  
  2342. /* answer styling */
  2343. .answerwrap {
  2344. }
  2345.  
  2346. .aanswerer {
  2347. display:flex;
  2348. justify-content:flex-start;
  2349. align-items:center;
  2350. gap:.5em;
  2351. padding:1em;
  2352. background:linear-gradient(to top right, var(--ColorGradientOne), var(--ColorGradientTwo));
  2353. border-top:1px solid var(--ColorBorders);
  2354. border-left:1px solid var(--ColorBorders);
  2355. border-right:1px solid var(--ColorBorders);
  2356. border-radius:{select:Corners} {select:Corners} 0 0;
  2357. }
  2358.  
  2359. .aanswerer .ausericon {
  2360. width:2em;
  2361. height:2em;
  2362. display:flex;
  2363. justify-content:center;
  2364. align-items:center;
  2365. padding:2px;
  2366. border-radius:100%;
  2367. background:var(--ColorGradientAccent);
  2368. }
  2369.  
  2370. .aanswerer .ausericon img {
  2371. width:2em;
  2372. height:2em;
  2373. border-radius:100%;
  2374. }
  2375.  
  2376. .aanswerer .aanswererstart {
  2377. display:flex;
  2378. flex-direction:column;
  2379. align-items:flex-start;
  2380. text-align:right;
  2381. line-height:120%;
  2382. }
  2383.  
  2384. .aanswererstart a {
  2385. font-family:'{text:title font}', sans-serif;
  2386. font-size:.95em;
  2387. color:var(--ColorGradientText);
  2388. text-transform:lowercase;
  2389. letter-spacing:.05em;
  2390. font-weight:600;
  2391. }
  2392.  
  2393. .aanswererstart span {
  2394. font-size:.9em;
  2395. color:var(--ColorGradientAccent);
  2396. }
  2397.  
  2398. .aanswer {
  2399. position:relative;
  2400. padding:1em;
  2401. background:var(--ColorSidebar);
  2402. border-bottom:1px solid var(--ColorBorders);
  2403. border-left:1px solid var(--ColorBorders);
  2404. border-right:1px solid var(--ColorBorders);
  2405. border-radius:0 0 {select:Corners} {select:Corners};
  2406. }
  2407. .aanswer:after {
  2408. content:'';
  2409. position:absolute;
  2410. top:0;
  2411. left:0;
  2412. width:100%;
  2413. height:2px;
  2414. background:var(--ColorSidebar);
  2415. }
  2416. .aanswer .blurb {
  2417. position:absolute;
  2418. top:-.5em;
  2419. left:1.5em;
  2420. transform:rotate(45deg);
  2421. width:1em;
  2422. height:1em;
  2423. border-top:2px solid var(--ColorSidebar);
  2424. border-left:2px solid var(--ColorSidebar);
  2425. background:var(--ColorSidebar);
  2426. z-index:2;
  2427. }
  2428.  
  2429. .qquestion a, .aanswer a {
  2430. display:inline-block;
  2431. position:relative;
  2432. }
  2433.  
  2434. .qquestion a:after, .aanswer a:after {
  2435. content: '';
  2436. position:absolute;
  2437. width:100%;
  2438. transform:scaleX(0);
  2439. height:2px;
  2440. bottom:-2px;
  2441. left:0;
  2442. background:var(--ColorAccent);
  2443. transform-origin:center;
  2444. transition: transform 0.3s ease-out;
  2445. }
  2446.  
  2447. .qquestion a:hover:after, .aanswer a:hover:after {
  2448. transform: scaleX(1);
  2449. transform-origin:center;
  2450. }
  2451.  
  2452. /*--- CHAT POSTS ---*/
  2453.  
  2454. .chat {
  2455. margin:0;
  2456. padding:0;
  2457. }
  2458.  
  2459. .chatter {
  2460. font-family:'{text:title font}', sans-serif;
  2461. color:var(--ColorTitle);
  2462. font-weight:600;
  2463. letter-spacing:.1em;
  2464. margin-bottom:.75em;
  2465. }
  2466. .chatter:nth-of-type(even) {text-align:right;}
  2467.  
  2468. .chat li {
  2469. position:relative;
  2470. list-style:none;
  2471. width:calc(100% - 2em - 2px);
  2472. margin-bottom:1em;
  2473. padding:1em;
  2474. background:var(--ColorSidebar);
  2475. border:1px solid var(--ColorBorders);
  2476. border-radius:{select:Corners};
  2477. }
  2478. .chat li .blurb {
  2479. position:absolute;
  2480. top:-.5em;
  2481. transform:rotate(45deg);
  2482. width:calc(1em - 2px);
  2483. height:calc(1em - 2px);
  2484. background:var(--ColorSidebar);
  2485. border-top:1px solid var(--ColorBorders);
  2486. border-left:1px solid var(--ColorBorders);
  2487. }
  2488.  
  2489. .chat li:nth-of-type(even) {text-align:right;}
  2490. .chat li:nth-of-type(even) .blurb {right:1em;}
  2491.  
  2492. /*--- BOTTOM POST INFO ---*/
  2493.  
  2494. .bottom-wrap {
  2495. width:calc(100% - 2em);
  2496. padding:1em;
  2497. display:flex;
  2498. flex-direction:column;
  2499. gap:1em;
  2500. }
  2501.  
  2502. .bottominfo {
  2503. width:100%;
  2504. display:flex;
  2505. justify-content:space-between;
  2506. align-items:center;
  2507. gap:1em;
  2508. }
  2509.  
  2510. .bottominfo a, span.actual-button {
  2511. display:flex;
  2512. justify-content:flex-start;
  2513. align-items:center;
  2514. gap:.5em;
  2515. }
  2516. .bottominfo i {
  2517. position:relative;
  2518. font-size:1.25em;
  2519. color:var(--ColorTitle);
  2520. padding:.35em;
  2521. border-radius:100%;
  2522. z-index:2;
  2523. -webkit-transition: all 0.4s;
  2524. -moz-transition: all 0.4s;
  2525. -ms-transition: all 0.4s;
  2526. -o-transition: all 0.4s;
  2527. transition: all 0.4s;
  2528. }
  2529. .bottominfo i#justicon {font-size:1.3em; padding:.4em;}
  2530. .bottominfo a.notecount i {margin-bottom:.1em;}
  2531. .bottominfo i:after {
  2532. content:'';
  2533. position:absolute;
  2534. top:0;
  2535. left:0;
  2536. width:100%;
  2537. height:100%;
  2538. opacity:0;
  2539. background:var(--ColorAccent);
  2540. border-radius:100%;
  2541. z-index:-1;
  2542. -webkit-transition: all 0.4s;
  2543. -moz-transition: all 0.4s;
  2544. -ms-transition: all 0.4s;
  2545. -o-transition: all 0.4s;
  2546. transition: all 0.4s;
  2547. }
  2548. .bottominfo a:hover i:after {opacity:.35;}
  2549.  
  2550. .bottominfo a:hover i {
  2551. color:var(--ColorAccent);
  2552. text-shadow:{select:glow};
  2553. }
  2554. .bottominfo b {
  2555. font-family:'{text:title font}', sans-serif;
  2556. font-size:.95em;
  2557. font-weight:normal;
  2558. -webkit-transition: all 0.4s;
  2559. -moz-transition: all 0.4s;
  2560. -ms-transition: all 0.4s;
  2561. -o-transition: all 0.4s;
  2562. transition: all 0.4s;
  2563. }
  2564. .bottominfo a:hover b {color:var(--ColorAccent);}
  2565.  
  2566. .likebtn {
  2567. position:relative;
  2568. display:inline-block;
  2569. }
  2570.  
  2571. .likebtn .like_button iframe {
  2572. position:absolute;
  2573. top:0;
  2574. left:0;
  2575. bottom:0;
  2576. right:0;
  2577. z-index:2;
  2578. opacity:0;
  2579. }
  2580.  
  2581. .like_button iframe {width:100%!important; height:100%!important;}
  2582. .likebtn .liked + .actual-button i {
  2583. color:var(--ColorAccent);
  2584. text-shadow:{select:glow};
  2585. }
  2586. .likebtn .liked + .actual-button i:after {opacity:.35;}
  2587. .likebtn .liked + .actual-button span:after {content:'d';}
  2588.  
  2589. a.clicktagsbutton.tags-click i {
  2590. color:var(--ColorAccent);
  2591. text-shadow:{select:glow};
  2592. }
  2593. a.clicktagsbutton.tags-click i:after {opacity:.35;}
  2594. #copybutton {cursor:help;}
  2595.  
  2596. /*--- TAGS ---*/
  2597.  
  2598. .tags, .clicktags {
  2599. position:relative;
  2600. width:100%;
  2601. display:flex;
  2602. justify-content:flex-start;
  2603. align-items:center;
  2604. flex-wrap:wrap;
  2605. gap:.75em;
  2606. }
  2607.  
  2608. a.tagsbutton {display:none;}
  2609. a.clicktagsbutton {cursor:help;}
  2610.  
  2611. .tags a, .clicktags a {
  2612. position:relative;
  2613. font-size:.95em;
  2614. color:var(--ColorText);
  2615. padding:.3em 1em .3em 1em;
  2616. background:var(--ColorSidebar);
  2617. border:1px solid var(--ColorBorders);
  2618. border-radius:{select:Corners};
  2619. z-index:2;
  2620. }
  2621. .tags a:after, .clicktags a:after {
  2622. content:'';
  2623. position:absolute;
  2624. top:0;
  2625. left:0;
  2626. width:100%;
  2627. height:100%;
  2628. opacity:0;
  2629. background:var(--ColorAccent);
  2630. border-radius:{select:Corners};
  2631. z-index:-1;
  2632. -webkit-transition: all 0.4s;
  2633. -moz-transition: all 0.4s;
  2634. -ms-transition: all 0.4s;
  2635. -o-transition: all 0.4s;
  2636. transition: all 0.4s;
  2637. }
  2638. .tags a:hover:after, .clicktags a:hover:after {opacity:.35;}
  2639.  
  2640. .tags a:hover, .clicktags a:hover {
  2641. color:var(--ColorAccent);
  2642. background:transparent;
  2643. border:1px solid transparent;
  2644. }
  2645.  
  2646. /*- PAGINATION -*/
  2647. .pagination {
  2648. display:flex;
  2649. justify-content:center;
  2650. align-items:center;
  2651. gap:1em;
  2652. padding:1.5em;
  2653. border-bottom:0;
  2654. }
  2655.  
  2656. .pagination span {
  2657. font-family:'{text:title font}', sans-serif;
  2658. font-size:.9em;
  2659. text-align:center;
  2660. }
  2661.  
  2662. .pagination a {
  2663. display:flex;
  2664. justify-content:center;
  2665. align-items:center;
  2666. }
  2667.  
  2668. .pagination a i {
  2669. position:relative;
  2670. font-size:1.5em;
  2671. color:var(--ColorTitle);
  2672. padding:.2em;
  2673. z-index:2;
  2674. -webkit-transition: all 0.4s;
  2675. -moz-transition: all 0.4s;
  2676. -ms-transition: all 0.4s;
  2677. -o-transition: all 0.4s;
  2678. transition: all 0.4s;
  2679. }
  2680. .pagination a i:after {
  2681. content:'';
  2682. position:absolute;
  2683. top:0;
  2684. left:0;
  2685. width:100%;
  2686. height:100%;
  2687. opacity:0;
  2688. background:var(--ColorAccent);
  2689. border-radius:100%;
  2690. z-index:-1;
  2691. -webkit-transition: all 0.4s;
  2692. -moz-transition: all 0.4s;
  2693. -ms-transition: all 0.4s;
  2694. -o-transition: all 0.4s;
  2695. transition: all 0.4s;
  2696. }
  2697.  
  2698. .pagination a:hover i {color:var(--ColorAccent); text-shadow:{select:glow};}
  2699. .pagination a:hover i:after {opacity:.35;}
  2700.  
  2701. /*--- POST NOTES ---*/
  2702.  
  2703. .notes-wrap {
  2704. width:100%;
  2705. margin-top:1em;
  2706. border-bottom:1px solid var(--ColorBorders);
  2707. }
  2708.  
  2709. .notes-title {
  2710. position:sticky;
  2711. top:60px;
  2712. width:calc(100% - 4em);
  2713. padding:1em 2em 1em 2em;
  2714. display:flex;
  2715. justify-content:space-between;
  2716. align-items:center;
  2717. gap:1em;
  2718. backdrop-filter:blur(6px);
  2719. z-index:999;
  2720. }
  2721. .notes-title:after {
  2722. content:'';
  2723. position:absolute;
  2724. left:0;
  2725. top:0;
  2726. width:100%;
  2727. height:100%;
  2728. opacity:.9;
  2729. background:var(--ColorPosts);
  2730. z-index:-1;
  2731. }
  2732.  
  2733. .notes-title span {
  2734. font-family:'{text:title font}', sans-serif;
  2735. font-size:.95em;
  2736. font-weight:600;
  2737. color:var(--ColorTitle);
  2738. text-align:center;
  2739. letter-spacing:.075em;
  2740. }
  2741. .notes-title i {
  2742. font-size:1.3em;
  2743. color:var(--ColorTitle);
  2744. }
  2745.  
  2746. .notes-container {
  2747. position:relative;
  2748. width:calc(100% - 4em);
  2749. padding:1em 2em 1em 2em;
  2750. }
  2751.  
  2752. ol.notes {
  2753. max-width: 100%;
  2754. margin:0;
  2755. padding:0;
  2756. }
  2757.  
  2758. .more_notes_link {
  2759. width:100%;
  2760. }
  2761. a.more_notes_link {
  2762. font-weight:bold;
  2763. letter-spacing: 0.1em;
  2764. }
  2765. a.more_notes_link::after {
  2766. content:'\eb98';
  2767. color:var(--ColorText);
  2768. }
  2769. a.more_notes_link::before {
  2770. content:'\eb98';
  2771. color:var(--ColorText);
  2772. position:absolute;
  2773. left:0;
  2774. font-family:'cappuccicons';
  2775. }
  2776.  
  2777. ol.notes li.note blockquote {
  2778. display:none;
  2779. }
  2780.  
  2781. ol.notes li.note {
  2782. font-size:.9em;
  2783. list-style-type:none;
  2784. padding:.5em 1em .5em 0;
  2785. display:flex;
  2786. align-items:center;
  2787. gap:.5em;
  2788. }
  2789. ol.notes li.note:first-of-type {border-top:none;}
  2790. ol.notes li.note a {text-transform:uppercase;}
  2791.  
  2792. ol.notes li.note img.avatar {
  2793. width:1.5em;
  2794. height:1.5em;
  2795. padding:2px;
  2796. background:var(--ColorAccent);
  2797. border-radius:100%;
  2798. }
  2799.  
  2800. ol.notes li.note.reblog::after {
  2801. content:'\ec37';
  2802. color:#03cf35;
  2803. }
  2804.  
  2805. ol.notes li.note.like::after {
  2806. content:'\eb04';
  2807. color:#fe492f;
  2808. }
  2809.  
  2810. ol.notes li.note.reply::after {
  2811. content:'\e9d7';
  2812. color:#00b8ff;
  2813. }
  2814. ol.notes li.note.reply span {
  2815. color:#00b8ff;
  2816. }
  2817. ol.notes li.note.reply span.action {
  2818. color:var(--ColorText);
  2819. }
  2820.  
  2821. ol.notes li.note.original_post::after {
  2822. content:'\eb68';
  2823. color:var(--ColorTitle);
  2824. }
  2825. ol.notes li.note.original_post {
  2826. font-weight:bold;
  2827. color:var(--ColorTitle);
  2828. }
  2829.  
  2830. 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 {
  2831. position:relative;
  2832. }
  2833. 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;}
  2834. 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 {
  2835. position:absolute;
  2836. right:0;
  2837. font-family:'cappuccicons';
  2838. }
  2839.  
  2840. /*--- TAG / DAY PAGES ---*/
  2841.  
  2842. article.tdpage {
  2843. display:flex;
  2844. justify-content:flex-start;
  2845. align-items:center;
  2846. gap:1em;
  2847. }
  2848.  
  2849. .tdpage span {
  2850. font-family:'{text:title font}', sans-serif;
  2851. font-size:.9em;
  2852. text-transform:lowercase;
  2853. }
  2854. .tdpage span b {font-weight:600;}
  2855.  
  2856. .tdpage i {
  2857. position:relative;
  2858. font-size:1.3em;
  2859. color:var(--ColorAccent);
  2860. text-shadow:{select:Glow};
  2861. padding:.35em;
  2862. }
  2863. .tdpage i:after {
  2864. content:'';
  2865. position:absolute;
  2866. top:0;
  2867. left:0;
  2868. width:100%;
  2869. height:100%;
  2870. opacity:.35;
  2871. background:var(--ColorAccent);
  2872. border-radius:100%;
  2873. }
  2874.  
  2875. /*--- RESPONSIVENESS ---*/
  2876. @media only screen and (max-width: 1200px) {
  2877. .sidebar.right {position:fixed; right:-100%; transition:.5s; z-index:9999;}
  2878. .sr-top {top:60px;}
  2879. body.sidebar-click .sidebar.right {right:1em;}
  2880. {block:ifRightSidebar}a.sidebarbutton {display:flex;}
  2881. .tmblr-iframe-compact .tmblr-iframe--unified-controls, a#controlsbutton {display:none;}{/block:ifRightSidebar}
  2882. .sl-low {background:var(--ColorBackground);}
  2883. }
  2884.  
  2885. @media only screen and (max-width: 900px) {
  2886. a.sidebarbutton {display:flex;}
  2887. .tmblr-iframe-compact .tmblr-iframe--unified-controls, a#controlsbutton {display:none;}
  2888. .sidebar.left, .sl-top {width:auto;}
  2889. .sl-icons {width:auto; flex-direction:column; justify-content:flex-start; gap:.5em!important;}
  2890. .slnav a {padding:.5em .5em .5em .5em; justify-content:center;}
  2891. .slnav b {display:none;}
  2892. .sl-low {position:fixed; left:-100%; bottom:0; transition:.5s; z-index:9999;}
  2893. body.sidebar-click .sl-low {left:0; padding:1em; border-radius:0 {select:Corners} 0 0;}
  2894. }
  2895.  
  2896. @media only screen and (max-width: 800px) {
  2897. section {width:90%;}
  2898. .sidebar.left {width:10%; align-items:center;}
  2899. .topinfo {width:100%;}
  2900.  
  2901. .sr-top {height:calc(100vh - 60px - 1.75em); overflow-y:auto; background:var(--ColorBackground);}
  2902.  
  2903. header {width:100%;}
  2904. .headerfixed, .headerfixed:after {width:100%;}
  2905. }
  2906.  
  2907. @media only screen and (max-width: 650px) {
  2908. section {width:100%; margin-bottom:50px;}
  2909. .sidebar.left {
  2910. position:fixed;
  2911. bottom:0;
  2912. left:0;
  2913. right:0;
  2914. width:100%;
  2915. height:50px;
  2916. flex-direction:row;
  2917. justify-content:center;
  2918. align-items:center;
  2919. background:var(--ColorBackground);
  2920. z-index:99999;
  2921. }
  2922. .sl-top {width:100%; position:relative; flex-direction:row; gap:0; padding:0;}
  2923. .sl-icons {width:100%; flex-direction:row; justify-content:space-evenly;}
  2924. .slnav {display:none;}
  2925.  
  2926. .header-banner {height:260px;}
  2927. .bannerimg, .bannerimg img, .nobanner {height:200px;}
  2928.  
  2929. .topinfo-name b {max-width:100px;}
  2930.  
  2931. .sr-top {height:calc(100vh - 110px - 1.75em);}
  2932. .sl-low {bottom:50px;}
  2933. }
  2934.  
  2935. @media only screen and (max-width: 450px) {
  2936. .topinfo-name b {display:none;}
  2937. }
  2938.  
  2939. {CustomCSS}
  2940. </style>
  2941. </head>
  2942.  
  2943. <body>
  2944. <script>
  2945. document.body.classList.add('fade-out');
  2946. window.addEventListener('DOMContentLoaded', () => {
  2947. document.body.classList.remove('fade-out');
  2948. });
  2949. </script>
  2950. <main><!--- MAIN CONTAINER --->
  2951.  
  2952. <!--- LEFT SECTION --->
  2953. <div class="sidebar left">
  2954. <div class="sl-top">
  2955. <div class="sl-icons">
  2956. <a class="sl-credit" title="tweety theme by sage" href="https://phantomcodes.tumblr.com"><i class="ti ti-ghost-2"></i></a>
  2957. <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  2958. <span class="light-on" title="turn off the lights"><i class="ti ti-moon"></i></span>
  2959. <span class="light-off" title="turn on the lights"><i class="ti ti-sun"></i></span>
  2960. </button>
  2961. <a id="totop" title="back to top" href="#top" target="_self"><i class="ti ti-arrow-up"></i></a>
  2962. <a title="toggle controls" id="controlsbutton"><i class="ti ti-settings"></i></a>
  2963. <a title="toggle popouts" class="sidebarbutton"><i class="ti ti-layout-sidebar-left-expand"></i></a>
  2964. </div>
  2965. <div class="slnav">
  2966. <a href="/"><i class="ti ti-home"></i><b>home</b></a>
  2967. {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}
  2968. {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}
  2969. {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}
  2970. {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}
  2971. {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}
  2972. {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}
  2973. {block:ifSidebarLink7}<a href="{text:Sidebar Link 7 URL}"><i class="ti ti-{text:Sidebar Link 7 Icon}"></i><b>{text:Sidebar Link 7}</b></a>{/block:ifSidebarLink7}
  2974. </div>
  2975. </div>
  2976. {block:ifMusicPlayer}<!-- music player -->
  2977. <div class="sl-low">
  2978. <div class="music-container" id="music-container">
  2979. <audio src="{text:Song URL}" id="audio"></audio>
  2980. <div class="audio-info">
  2981. <div class="audio-img"><img src="{text:Song Image}"></div>
  2982. <div class="audio-title">
  2983. <b>{text:Song Name}</b>
  2984. <span>{text:Song Artist}</span>
  2985. </div>
  2986. </div>
  2987. <div class="play-button">
  2988. <button id="play" class="action-btn action-btn-big"><i class="ti ti-player-play"></i></button>
  2989. </div>
  2990. </div>
  2991. {/block:ifMusicPlayer}
  2992. </div>
  2993. </div>
  2994.  
  2995. <section><!--- POSTS CONTAINER --->
  2996.  
  2997. <!-- HEADER --->
  2998. <header>
  2999. <div class="headerfixed">
  3000. <div class="hf-left">
  3001. <img src="{PortraitURL-128}">
  3002. <a class="title" href="/">{text:Blog Title}</a>
  3003. </div>
  3004. </div>
  3005. <div class="header-banner">
  3006. <div class="bannerimg">
  3007. <div class="nobanner"></div>
  3008. {block:ifHeaderImage}<img src="{image:Header}">{/block:ifHeaderImage}
  3009. <div id="side-img">{block:ifProfileImage}<img src="{image:Profile}">{/block:ifProfileImage}<img class="porticon" src="{PortraitURL-128}"></div>
  3010. </div>
  3011. <div class="headerbox-top">
  3012. <a title="home" href="/"><i class="ti ti-home"></i></a>
  3013. {block:AskEnabled}<a title="contact" href="/ask"><i class="ti ti-mail"></i></a>{/block:AskEnabled}
  3014. <a target="_blank" href="//tumblr.com/follow/{Name}"><b>follow</b></a>
  3015. </div>
  3016. </div>
  3017. <div class="headerbox-mid">
  3018. <div class="headerbox-title">
  3019. <a href="/">{Title}</a>
  3020. <b>@{Name}</b>
  3021. </div>
  3022. <div class="description">{text:Custom Description}</div>
  3023. <div class="headerstats">
  3024. {block:ifHeaderStat1}<li><i class="ti ti-{text:Header Stat Icon 1}"></i><b>{text:Header Stat 1}</b></li>{/block:ifHeaderStat1}
  3025. {block:ifHeaderStat2}<li><i class="ti ti-{text:Header Stat Icon 2}"></i><b>{text:Header Stat 2}</b></li>{/block:ifHeaderStat2}
  3026. {block:ifHeaderStat3}<li><i class="ti ti-{text:Header Stat Icon 3}"></i><b>{text:Header Stat 3}</b></li>{/block:ifHeaderStat3}
  3027. </div>
  3028. </div>
  3029. </header>
  3030.  
  3031. <!--- sticky navigation --->
  3032. <nav>
  3033. <a class="navselect" href="/"><b>posts</b></a>
  3034. <a href="/ask"><b>contact</b></a>
  3035. <a href="/archive"><b>archive</b></a>
  3036. <!---- CREDIT: DO NOT TOUCH ---->
  3037. <a class="navcredit" title="tweety theme by sage" href="//phantomcodes.tumblr.com"><b>credit</b></a>
  3038. </nav>
  3039.  
  3040. <!--- TAG AND DAY PAGES --->
  3041. {block:TagPage}
  3042. <article class="tdpage">
  3043. <i class="ti ti-badge"></i>
  3044. <span>showing <b>{tagresultcount}</b> posts tagged <b>#{Tag}</b></span>
  3045. </article>
  3046. {/block:TagPage}
  3047.  
  3048. {block:DayPage}
  3049. <article class="tdpage">
  3050. <i class="ti ti-calendar-event"></i>
  3051. <span>showing posts made <b>{Month} {DayOfMonth}{DayofMonthSuffix}, {Year}</b></span>
  3052. </article>
  3053. {/block:DayPage}
  3054.  
  3055. <!--- POSTS --->
  3056. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  3057.  
  3058. <article class="posts" id="{PostID}" post-type="{PostType}" {block:Date}style="padding-left:4em; width:calc(100% - 7em);"{/block:Date}>
  3059.  
  3060. <!--- TOP POST INFO --->
  3061. {block:Date}
  3062. <div class="topinfo">
  3063. {block:NotReblog}
  3064. <!-- absolute info -->
  3065. <a class="topinfo-img" href="/"><img src="{PortraitURL-128}"></a>
  3066. <div class="rbvia {block:PinnedPostLabel}ifpinned{/block:PinnedPostLabel}">
  3067. <i class="ti ti-map-pin"></i>
  3068. <a href="{Permalink}">original post</a>
  3069. </div>
  3070. {block:PinnedPostLabel}<div class="pinned"><i class="ti ti-pinned"></i><a title="pinned post" href="{Permalink}">pinned post</a></div>{/block:PinnedPostLabel}
  3071.  
  3072. <!-- name/title/date -->
  3073. <div class="topinfo-name">
  3074. <a href="{Permalink}">
  3075. <b>{text:Blog Title}</b>
  3076. <i>@{Name}</i>
  3077. </a>
  3078. <b>•</b>
  3079. <div class="topinfo-date"><a href="{Permalink}" class="time-ago">{Timestamp}</a></div>
  3080. </div>
  3081. {/block:NotReblog}
  3082.  
  3083. {block:RebloggedFrom}
  3084. <!-- absolute info -->
  3085. <a target="_blank" class="topinfo-img" href="//{ReblogRootName}.tumblr.com" title="visit blog"><img src="{ReblogRootPortraitURL-128}"></a>
  3086. <div class="rbvia {block:PinnedPostLabel}ifpinned{/block:PinnedPostLabel}">
  3087. <i class="ti ti-repeat"></i>
  3088. <a href="{ReblogParentURL}">via {ReblogParentName}</a>
  3089. </div>
  3090. {block:PinnedPostLabel}<div class="pinned"><i class="ti ti-pinned"></i><a title="pinned post" href="{Permalink}">pinned post</a></div>{/block:PinnedPostLabel}
  3091.  
  3092. <!-- name/title/date -->
  3093. <div class="topinfo-name">
  3094. <a target="_blank" href="{ReblogRootURL}">
  3095. <b>{ReblogRootTitle}</b>
  3096. <i>@{ReblogRootName}</i>
  3097. </a>
  3098. <b>•</b>
  3099. <div class="topinfo-date"><a href="{Permalink}" class="time-ago">{Timestamp}</a></div>
  3100. </div><!-- .topinfo-name -->
  3101. {/block:RebloggedFrom}
  3102.  
  3103. <!--- top info right --->
  3104. <div class="topinfo-buttons">
  3105. <!--- tir dropdown starts -->
  3106. <a title="toggle more info" class="tir-button"><i class="ti ti-dots"></i></a>
  3107. <div class="tir-drop">
  3108. <!-- date/day page link -->
  3109. <a title="view day page" href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}"><i class="ti ti-clock"></i><b>{Month} {DayofMonth}{DayofMonthSuffix}, {Year}</b></a>
  3110. <!--- copy button --->
  3111. <a id="copybutton" title="copy link to post" data-clipboard-text="{Permalink}"><i class="ti ti-copy"></i><b>copy post link</b></a>
  3112. <!-- original poster -->
  3113. {block:RebloggedFrom}<a target="_blank" title="@{ReblogRootName}" href="//tumblr.com/follow/{ReblogRootName}"><i class="ti ti-user-plus"></i><b>follow original poster</b></a>{/block:RebloggedFrom}
  3114. <!-- post types -->
  3115. {block:Text}<a title="view text posts" target="_blank" href="/archive/filter-by/text"><i class="ti ti-writing"></i><b>{PostType} post</b></a>{block:Text}
  3116. {block:Photo}<a title="view photo posts" target="_blank" href="/archive/filter-by/photo"><i class="ti ti-photo"></i><b>{PostType} post</b></a>{block:Photo}
  3117. {block:Photoset}<a title="view photo posts" target="_blank" href="/archive/filter-by/photo"><i class="ti ti-photo-plus"></i><b>{PostType} post</b></a>{block:Photoset}
  3118. {block:Video}<a title="view video posts" target="_blank" href="/archive/filter-by/video"><i class="ti ti-video"></i><b>{PostType} post</b></a>{block:Video}
  3119. {block:Link}<a title="view link posts" target="_blank" href="/archive/filter-by/link"><i class="ti ti-link"></i><b>{PostType} post</b></a>{block:Link}
  3120. {block:Audio}<a title="view audio posts" target="_blank" href="/archive/filter-by/audio"><i class="ti ti-music"></i><b>{PostType} post</b></a>{block:Audio}
  3121. {block:Quote}<a title="view quote posts" target="_blank" href="/archive/filter-by/quote"><i class="ti ti-quote"></i><b>{PostType} post</b></a>{block:Quote}
  3122. {block:Chat}<a title="view chat posts" target="_blank" href="/archive/filter-by/chat"><i class="ti ti-messages"></i><b>{PostType} post</b></a>{block:Chat}
  3123. {block:Answer}<a title="view ask posts" target="_blank" href="/archive/filter-by/ask"><i class="ti ti-message-circle"></i><b>{PostType} post</b></a>{block:Answer}
  3124. </div>
  3125. <!-- tir drop down ends -->
  3126. </div><!-- .topinfo-buttons -->
  3127. </div><!--.topinfo-->
  3128. </div><!--#topinfo-->
  3129. {/block:Date}
  3130.  
  3131. <div class="post-wrap" {block:Date}style="margin-left:1em;"{/block:Date}>
  3132.  
  3133. <!-- PHOTO POSTS -->
  3134. {block:Photo}
  3135. <div class="photopost">
  3136. <img src="{PhotoURL-highres}" al="{photoalt}" class="photos">
  3137. </div>
  3138. {block:Caption}
  3139. {block:NotReblog}
  3140. <div class="caption">{Caption}</div>
  3141. {/block:NotReblog}
  3142. {block:Rebloggedfrom}
  3143. {block:Reblogs}
  3144. <div class="caption">
  3145. <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
  3146. {Body}
  3147. </div>
  3148. {/block:Reblogs}
  3149. {/block:RebloggedFrom}
  3150. {/block:Caption}
  3151. {/block:Photo}
  3152.  
  3153. <!-- PHOTOSET POSTS -->
  3154. {block:Photoset}
  3155. <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>
  3156. {block:Caption}
  3157. {block:NotReblog}
  3158. <div class="caption">{Caption}</div>
  3159. {/block:NotReblog}
  3160. {block:Rebloggedfrom}
  3161. {block:Reblogs}
  3162. <div class="caption">
  3163. <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
  3164. {Body}
  3165. </div>
  3166. {/block:Reblogs}
  3167. {/block:RebloggedFrom}
  3168. {/block:Caption}
  3169. {/block:Photoset}
  3170.  
  3171. <!--- TEXT POSTS --->
  3172. {block:Text}
  3173. {block:Title}
  3174. <h1><a href="{Permalink}">{Title}</a></h1>
  3175. {/block:Title}
  3176. {block:NotReblog}
  3177. <div class="caption">{Body}</div>
  3178. {/block:NotReblog}
  3179. {block:Rebloggedfrom}
  3180. {block:Reblogs}
  3181. <div class="caption">
  3182. <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
  3183. {Body}
  3184. </div>
  3185. {/block:Reblogs}
  3186. {/block:RebloggedFrom}
  3187. {/block:Text}
  3188.  
  3189.  
  3190. <!-- VIDEO POSTS -->
  3191. {block:Video}
  3192. <div class="video">{Video-700}</div>
  3193. {block:Caption}
  3194. {block:NotReblog}
  3195. <div class="caption">{Caption}</div>
  3196. {/block:NotReblog}
  3197. {block:Rebloggedfrom}
  3198. {block:Reblogs}
  3199. <div class="caption">
  3200. <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
  3201. {Body}
  3202. </div>
  3203. {/block:Reblogs}
  3204. {/block:RebloggedFrom}
  3205. {/block:Caption}
  3206. {/block:Video}
  3207.  
  3208. <!--- CHAT POSTS --->
  3209. {block:Chat}
  3210. <ul class="chat">
  3211. {block:Lines}
  3212. {block:Label}<div class="chatter">{Label}</div>{/block:Label}
  3213. <li>{Line} <div class="blurb"></div></li>
  3214. {/block:Lines}
  3215. </ul>
  3216. {/block:Chat}
  3217.  
  3218. <!--- LINK POSTS --->
  3219. {block:Link}
  3220. <div class="linkpost">
  3221. <div class="linkblock">
  3222. <a href="{URL}" target="_blank">
  3223. <div class="link">
  3224. <div class="linkicon"><i class="ti ti-external-link"></i></div>
  3225. <div class="linktitle"><b>{Name}</b>
  3226. {block:Excerpt}<span>{Excerpt}</span>{/block:Excerpt}
  3227. </div>
  3228. </div>
  3229. </a>
  3230. </div>
  3231. </div>
  3232. {block:Description}
  3233. {block:NotReblog}
  3234. <div class="caption">{Description}</div>
  3235. {/block:NotReblog}
  3236. {/block:Description}
  3237. {block:RebloggedFrom}
  3238. {block:Reblogs}
  3239. <div class="caption">
  3240. <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
  3241. {Body}
  3242. </div>
  3243. {/block:Reblogs}
  3244. {/block:RebloggedFrom}
  3245. {/block:Link}
  3246.  
  3247. <!--- AUDIO POSTS --->
  3248. {block:Audio}
  3249. <div class="audiopost">
  3250. <div class="audiowrap">
  3251. <div class="albumart">{block:albumart}<img src="{AlbumArtURL}">{/block:albumart}</div>
  3252. <div class="audiotitle">
  3253. <b>{block:trackname}{Trackname}{/block:trackname}</b>
  3254. <span>{block:Artist}{Artist}{/block:Artist}</span>
  3255. </div><!-- audiotitle -->
  3256. </div><!-- audiowrap -->
  3257. <div class="audioplaybg"><div class="audioplay">{block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}</div></div>
  3258. </div>
  3259. {block:Caption}
  3260. {block:NotReblog}
  3261. <div class="caption">{Caption}</div>
  3262. {/block:NotReblog}
  3263. {block:RebloggedFrom}
  3264. {block:Reblogs}
  3265. <div class="caption">
  3266. <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
  3267. {Body}
  3268. </div>
  3269. {/block:Reblogs}
  3270. {/block:RebloggedFrom}
  3271. {/block:Caption}
  3272. {/block:Audio}
  3273.  
  3274. <!-- QUOTE POSTS -->
  3275. {block:Quote}
  3276. <div class="quotepost">
  3277. <div class="quotewrap">{Quote}</div>
  3278. <div class="source">{Source}</div>
  3279. </div>
  3280. {/block:Quote}
  3281.  
  3282. <!--- ANSWER POSTS --->
  3283. {block:Answer}
  3284. <div class="askwrap">
  3285. <div class="qasker">
  3286. <div class="qaskerstart">
  3287. <b>{Asker}</b>
  3288. <span>sent a message</span>
  3289. </div>
  3290. <div class="qaskicon"><img src="{AskerPortraitURL-64}"></div>
  3291. </div>
  3292. <div class="qquestion">
  3293. {Question}
  3294. <div class="blurb"></div>
  3295. </div>
  3296. </div>
  3297. {block:Answerer}
  3298. <div class="answerwrap">
  3299. <div class="aanswerer">
  3300. <div class="ausericon"><img src="{AnswererPortraitURL-64}"></div>
  3301. <div class="aanswererstart">
  3302. <b>{Answerer}</b>
  3303. <span>replied</span>
  3304. </div>
  3305. </div>
  3306. <div class="aanswer">
  3307. <div class="blurb"></div>
  3308. {Answer}</div>
  3309. </div>
  3310. {/block:Answerer}
  3311. {block:NotReblog}
  3312. <div class="answerwrap">
  3313. <div class="aanswerer">
  3314. <div class="ausericon"><img src="{PortraitURL-64}"></div>
  3315. <div class="aanswererstart">
  3316. <b><a href="/">{Name}</a></b>
  3317. <span>replied</span>
  3318. </div>
  3319. </div>
  3320. <div class="aanswer">
  3321. <div class="blurb"></div>
  3322. {Replies}</div>
  3323. </div>
  3324. {/block:NotReblog}
  3325. {block:RebloggedFrom}
  3326. {block:Reblogs}
  3327. <div class="caption">
  3328. <div class="userlink {block:IsDeactivated}deactive{/block:IsDeactivated}"><a {block:IsDeactivated}title="deactivated"{/block:IsDeactivated} href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div class="username">{Username}</div></a></div>
  3329. {Body}
  3330. </div>
  3331. {/block:Reblogs}
  3332. {/block:RebloggedFrom}
  3333. {/block:Answer}
  3334. </div>
  3335.  
  3336. </div><!-- post wrap ends -->
  3337.  
  3338. <div class="bottom-wrap"><!-- bottom post wrap starts -->
  3339.  
  3340. {block:Date}
  3341. <!--- BOTTOM POST INFO --->
  3342. <div class="bottominfo tagson{select:Tags}">
  3343. <a title="{NoteCountWithLabel}" class="notecount" href="{Permalink}"><i class="ti ti-message-circle-2"></i><b class="notecount">{NoteCountWithLabel}</b></a>
  3344. {block:HasTags}<a class="{select:tags}button" title="toggle tags"><i id="justicon" class="ti ti-tag"></i></a>{/block:HasTags}
  3345. <a title="reblog" href="{ReblogURL}" target="_blank"><i id="justicon" class="ti ti-repeat"></i></a>
  3346. <a title="like" class="likebtn" href="#">{LikeButton}<span class="actual-button"><i id="justicon" class="ti ti-heart"></i></span></a>
  3347. <a title="permalink" href="{Permalink}"><i id="justicon" class="ti ti-upload"></i></a>
  3348. </div><!-- .bottominfo -->
  3349. {/block:Date}
  3350.  
  3351. <!--- TAGS --->
  3352. {block:HasTags}
  3353. <div class="{select:Tags}">
  3354. {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
  3355. </div>
  3356. {/block:HasTags}
  3357.  
  3358. </div><!-- bottom post wrap ends -->
  3359.  
  3360. </article> <!-- POSTS END -->
  3361.  
  3362. <!--- POST NOTES --->
  3363. {block:PermalinkPage}{block:Date}
  3364. {block:NoteCount}{block:PostNotes}
  3365. <div class="notes-wrap">
  3366. <div class="notes-title"><span>{NoteCountWithLabel}</span><i class="ti ti-activity"></i></div>
  3367. <div class="notes-container">{PostNotes-64}</div>
  3368. </div>
  3369. {/block:PostNotes}{/block:NoteCount}
  3370. {/block:Date}{/block:PermalinkPage}
  3371. {/block:Posts}
  3372.  
  3373. <!--- PAGINATION --->
  3374. <article class="pagination">
  3375. {block:Pagination}{block:PreviousPage}
  3376. <a title="previous" href="{PreviousPage}"><i class="ti ti-chevron-left"></i></a>
  3377. {/block:PreviousPage}{/block:Pagination}
  3378. <span>page <b>{CurrentPage}</b> of {TotalPages}</span>
  3379. {block:Pagination}{block:NextPage}
  3380. <a title="next" href="{NextPage}"><i class="ti ti-chevron-right"></i></a>
  3381. {/block:NextPage}{/block:Pagination}
  3382. </article>
  3383.  
  3384. </section> <!-- POSTS CONTAINER ENDS -->
  3385.  
  3386. <!---- RIGHT SECTION ----->
  3387. {block:ifRightSidebar}
  3388. <div class="sidebar right">
  3389. <div class="sr-top">
  3390. <!--- SEARCH BAR --->
  3391. <div id="search">
  3392. <i class="ti ti-search"></i>
  3393. <form class="search" action="javascript:return false">
  3394. <input type="text" class="query" placeholder="search">
  3395. </form>
  3396. </div>
  3397. <!-- featured posts -->
  3398. {block:ifFeatured}<div class="sr-featured">
  3399. {block:ifFeaturedLink1}<a title="view post" href="{text:Featured Link 1}"><img src="{text:Featured IMG 1}"></a>{/block:ifFeaturedLink1}
  3400. {block:ifFeaturedLink2}<a title="view post" href="{text:Featured Link 2}"><img src="{text:Featured IMG 2}"></a>{/block:ifFeaturedLink2}
  3401. {block:ifFeaturedLink3}<a title="view post" href="{text:Featured Link 3}"><img src="{text:Featured IMG 3}"></a>{/block:ifFeaturedLink3}
  3402. {block:ifFeaturedLink4}<a title="view post" href="{text:Featured Link 4}"><img src="{text:Featured IMG 4}"></a>{/block:ifFeaturedLink4}
  3403. </div>{/block:ifFeatured}
  3404. <!-- sidebar blogs -->
  3405. {block:ifBlogs}<div class="sr-blogs">
  3406. <div class="sr-title">who to follow</div>
  3407. <div class="srblogs">
  3408. {block:ifBlog1}<li>
  3409. <a title="visit {text:Blog 1}" target="_blank" class="srb-link" href="//{text:Blog 1}.tumblr.com">
  3410. <img src="//api.tumblr.com/v2/blog/{text:Blog 1}.tumblr.com/avatar">
  3411. <b>{text:Blog 1}</b>
  3412. </a>
  3413. <a target="_blank" class="srb-follow" href="//tumblr.com/follow/{text:Blog 1}">follow</a>
  3414. </li>{/block:ifBlog1}
  3415. {block:ifBlog2}<li>
  3416. <a title="visit {text:Blog 2}" target="_blank" class="srb-link" href="//{text:Blog 2}.tumblr.com">
  3417. <img src="//api.tumblr.com/v2/blog/{text:Blog 2}.tumblr.com/avatar">
  3418. <b>{text:Blog 2}</b>
  3419. </a>
  3420. <a target="_blank" class="srb-follow" href="//tumblr.com/follow/{text:Blog 2}">follow</a>
  3421. </li>{/block:ifBlog2}
  3422. {block:ifBlog3}<li>
  3423. <a title="visit {text:Blog 3}" target="_blank" class="srb-link" href="//{text:Blog 3}.tumblr.com">
  3424. <img src="//api.tumblr.com/v2/blog/{text:Blog 3}.tumblr.com/avatar">
  3425. <b>{text:Blog 3}</b>
  3426. </a>
  3427. <a target="_blank" class="srb-follow" href="//tumblr.com/follow/{text:Blog 3}">follow</a>
  3428. </li>{/block:ifBlog3}
  3429. </div>
  3430. </div>{/block:ifBlogs}
  3431. <!-- sidebar updates -->
  3432. {block:ifUpdates}<div class="sr-updates">
  3433. <div class="sr-title">what's happening</div>
  3434. <li><b>{text:Update Title 1}</b><span>{text:Update Text 1}</span></li>
  3435. <li><b>{text:Update Title 2}</b><span>{text:Update Text 2}</span></li>
  3436. <li><b>{text:Update Title 3}</b><span>{text:Update Text 3}</span></li>
  3437. <li><b>{text:Update Title 4}</b><span>{text:Update Text 4}</span></li>
  3438. </div>{/block:ifUpdates}
  3439. </div>
  3440. </div>
  3441. {/block:ifRightSidebar}
  3442.  
  3443. </main> <!-- MAIN CONTAINER ENDS -->
  3444.  
  3445. <script>
  3446.  
  3447. // music player
  3448. {block:ifMusicPlayer}
  3449.  
  3450. const musicContainer = document.querySelector('.music-container');
  3451. const playBtn = document.querySelector('#play');
  3452. const audio = document.querySelector('#audio');
  3453. const title = document.querySelector('#title');
  3454. const cover = document.querySelector('#cover');
  3455.  
  3456. function playSong() {
  3457. musicContainer.classList.add('play');
  3458. playBtn.querySelector('#play i').classList.remove('ti-player-play');
  3459. playBtn.querySelector('#play i').classList.add('ti-player-pause');
  3460.  
  3461. audio.play();
  3462. }
  3463.  
  3464. function pauseSong() {
  3465. musicContainer.classList.remove('play')
  3466. playBtn.querySelector('#play i').classList.add('ti-player-play')
  3467. playBtn.querySelector('#play i').classList.remove('ti-player-pause')
  3468.  
  3469. audio.pause()
  3470. }
  3471.  
  3472. // event listeners
  3473. playBtn.addEventListener('click', () => {
  3474. const isPlaying = musicContainer.classList.contains('play');
  3475.  
  3476. if (isPlaying) {
  3477. pauseSong();
  3478. } else {
  3479. playSong();
  3480. }
  3481. });
  3482.  
  3483. document.getElementById("audio").loop = true;
  3484.  
  3485. {/block:ifMusicPlayer}
  3486.  
  3487. /// photoset
  3488. $(document).ready(function(){
  3489. $('.photo-slideshow').pxuPhotoset({
  3490. lightbox: true,
  3491. rounded: 'corners',
  3492. gutter: '4px',
  3493. borderRadius: '{select:Corners}',
  3494. photoset: '.photo-slideshow',
  3495. photoWrap: '.photo-data',
  3496. photo: '.pxu-photo'
  3497. });
  3498. });
  3499.  
  3500. // tooltips
  3501. tippy('[title]', {
  3502. theme: 'custom',
  3503. arrow: false,
  3504. followCursor: true,
  3505. delay: 100,
  3506. placement: 'bottom',
  3507. offset: "40, 10",
  3508. zIndex: 9999999999,
  3509. maxWidth: 400,
  3510.  
  3511. content(reference) {
  3512. const title = reference.getAttribute('title');
  3513. reference.removeAttribute('title');
  3514. return title;
  3515. },
  3516. });
  3517.  
  3518. // notes
  3519. $('article').find('.notecount').each(function(){
  3520. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  3521. if (n > 999) {
  3522. n = Math.floor(n / 100) / 10;
  3523. $(this).text(n + 'k');
  3524. }
  3525.  
  3526. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  3527. if (n < 999) {
  3528. $(this).text(n);
  3529. }
  3530. });
  3531.  
  3532. // videos
  3533. $(document).ready(function() {
  3534. flexibleFrames($(".video")); // $(".video") is the class selector passed in the argument
  3535. });
  3536.  
  3537. // searchbar
  3538. $(document).ready(function(){
  3539. $('.search').submit(function(event){
  3540. var value = $('input:first').val();
  3541. location.replace('http://{Name}.tumblr.com/search/' + value);
  3542. });
  3543. });
  3544.  
  3545. // scroll to top
  3546. $(document).ready(function(){
  3547. $('a#totop').click(function(){
  3548. $('html, body').animate({scrollTop : 0},800);
  3549. return false;
  3550. });
  3551. });
  3552.  
  3553. //updates tab
  3554. $(document).ready(function() {
  3555. $(".sub").hide();
  3556. $(".cthrough").click(function(event){
  3557. $(this).next(".sub").slideToggle(500);
  3558. event.preventDefault();
  3559. $(this).toggleClass('upside', 500);
  3560. });
  3561. });
  3562. // updates button
  3563. $(document).ready(function(){
  3564. $('a.cthrough i').click(function(){
  3565. $('body').toggleClass('updates-click');
  3566. });
  3567. });
  3568.  
  3569. // tir drop down
  3570. $(document).ready(function() {
  3571. $(".tir-drop").hide();
  3572. $("a.tir-button").click(function(event){
  3573. $(this).next(".tir-drop").slideToggle(500);
  3574. event.preventDefault();
  3575. $(this).toggleClass('upside', 500);
  3576. $(this).toggleClass('tir-click');
  3577. });
  3578. });
  3579.  
  3580. // toggle tags
  3581. $(document).ready(function(){
  3582. $('.clicktags').hide();
  3583. $('.clicktagsbutton').click(function() {
  3584. $(this).closest('article').find('.clicktags').slideToggle(500);
  3585. $(this).toggleClass('tags-click');
  3586. return false;
  3587. });
  3588. });
  3589.  
  3590. // tumblr controls
  3591. $(document).ready(function(){
  3592. $('#controlsbutton').click(function(){
  3593. $('body').toggleClass('controlsclick');
  3594. });
  3595. });
  3596.  
  3597. // sidebars popup
  3598. $(document).ready(function(){
  3599. $('a.sidebarbutton').click(function(){
  3600. $('body').toggleClass('sidebar-click');
  3601. });
  3602. });
  3603.  
  3604. // sticky headerbox buttons
  3605. $(window).scroll(function(e){
  3606. var $el = $('.headerbox-top');
  3607. var isPositionFixed = ($el.css('position') == 'fixed');
  3608. if ($(this).scrollTop() > 200 && !isPositionFixed){
  3609. $el.css({'position': 'fixed', 'top': '0px'});
  3610. }
  3611. if ($(this).scrollTop() < 200 && isPositionFixed){
  3612. $el.css({'position': 'static', 'top': '0px'});
  3613. }
  3614. });
  3615.  
  3616. // day/night mode
  3617. const toggle = document.getElementById("theme-toggle");
  3618.  
  3619. toggle.onclick = function () {
  3620. // add class to html and make transition snappy
  3621. document.documentElement.classList.add("theme-transition");
  3622. // alright lets retrive the info from data-theme
  3623. let currentTheme = document.documentElement.getAttribute("data-theme");
  3624. // if it's dark already, let's go into the light
  3625. let targetTheme = "light";
  3626. // but if it is light let's toggle dark mode
  3627. if (currentTheme === "light") {
  3628. targetTheme = "dark";
  3629. }
  3630. // ok now that theme has been toggled, get rid of snappy transition
  3631. window.setTimeout(function () {
  3632. document.documentElement.classList.remove("theme-transition");
  3633. }, 50);
  3634. // we're going to save our theme preference now
  3635. document.documentElement.setAttribute("data-theme", targetTheme);
  3636. localStorage.setItem("theme", targetTheme);
  3637. };
  3638.  
  3639. </script>
  3640.  
  3641.  
  3642. </body>
  3643. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!