nicolas-sage

theme 40: jasmine

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