nicolas-sage

theme 42: raye

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