nicolas-sage

theme 32: abelia

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