nicolas-sage

theme 41: havana

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