nicolas-sage

theme 31: laura

Aug 1st, 2024 (edited)
215
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 76.86 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. | |__| |__| | LAURA THEME BY SAGE / PHANTOMCODES
  19. | | https://phantomcodes.tumblr.com
  20. | _ _ _ |
  21. |_| |_| |_| |_|
  22.  
  23.  
  24.  
  25. CREDITS:
  26. - phosphor icons / phosphoricons.com
  27. - tabler icons / https://tabler-icons.io/
  28. - tippy.js tooltips / https://atomiks.github.io/tippyjs/
  29. - bunny fonts / https://fonts.bunny.net/
  30. - npf base code by eggdesign / https://egg.design/post/714907681362771968/npf-based-template
  31. - pxu photosets by pixel union with modifications by bychloethemes / https://bychloethemes.tumblr.com/post/155956945114/modified-pxu-photoset-script-modified-by
  32. - responsive videos by nouvae / https://nouvae.tumblr.com/post/176815415055/tutorial-responsive-tumblr-videos-and-external
  33. - time ago plugin by chloethemes / https://bychloethemes.tumblr.com/plugins/timeago
  34. - notes shortener by shythemes / https://shythemes.tumblr.com/post/156021137818/hello-i-was-wondering-if-you-knew-how-to-shorten
  35. - day/night mode tutorial by eggdesign / https://egg.design/post/186889223257/day-night-mode-tutorial-after-featuring-a
  36. - dark mode guide by 22mm / https://22mm.tumblr.com/post/673476677544837120/a-dark-mode-guide-with-css-variables-and-js-this
  37. - npf audio player by @glenthemes / https://glenthemes.tumblr.com/post/722160746171072512/npf-audio-player
  38. - copy link to post tutorial by glenthemes / https://glenthemes.tumblr.com/post/173993578944/copy-link-to-post-button-tutorial
  39. - hide tutorial by lmthemes / https://lmthemes.tumblr.com/post/30046967698/tutorial-05-hide-stuff-tutorial-in-this
  40.  
  41. ---->
  42.  
  43. <!-- STYLESHEETS -->
  44.  
  45. <!---- PHOTOSET ---->
  46. <link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  47. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  48. <script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></script>
  49.  
  50. <!----- BUNNY FONTS ---->
  51. <link href="https://fonts.bunny.net/css?family={text:body font}:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" /><link href="https://fonts.bunny.net/css?family={text:title font}:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" />
  52.  
  53. <!---- ICONS ---->
  54. <script src="https://unpkg.com/phosphor-icons"></script>
  55. <script src="https://unpkg.com/[email protected]"></script>
  56. <script src="//pull.cappuccicons.com/cpf.js"></script>
  57. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/tabler-icons.min.css">
  58.  
  59.  
  60. <!---- TOOLTIPS ---->
  61. <script src="https://unpkg.com/popper.js@1"></script>
  62. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  63.  
  64. <!--- FLICKITY --->
  65. <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
  66.  
  67. <!---- VIDEOS ---->
  68. <script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/flexibleFrames.min.js"></script>
  69.  
  70. <!---- COPY LINK ---->
  71. <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
  72. <script>
  73. $(document).ready(function(){
  74. var clipboard = new ClipboardJS("#copybutton");
  75. });
  76. </script>
  77.  
  78. <!---- TIME AGO ----->
  79. <script type="text/javascript" src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
  80. <script type="text/javascript">
  81. $(document).ready(function() {
  82. $(".time-ago").timeAgo({
  83. time: "short",
  84. spaces: true,
  85. words: false,
  86. prefix: "",
  87. suffix: "ago",
  88. });
  89. });
  90. </script>
  91.  
  92. <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  93.  
  94. <!---- VARIABLES ---->
  95.  
  96. <meta name="image:Sidebar" content="" />
  97.  
  98. <meta name="color:Background" content="#ddd" />
  99. <meta name="color:Sidebar" content="#d7d7d7" />
  100. <meta name="color:Posts" content="#eee" />
  101. <meta name="color:Borders" content="#ccc" />
  102. <meta name="color:Title" content="#333" />
  103. <meta name="color:Text" content="#555" />
  104. <meta name="color:Accent One" content="#508567"/>
  105. <meta name="color:Accent Two" content="#70a487"/>
  106.  
  107. <meta name="color:Night Background" content="#222" />
  108. <meta name="color:Night Sidebar" content="#272727" />
  109. <meta name="color:Night Posts" content="#333" />
  110. <meta name="color:Night Borders" content="#444" />
  111. <meta name="color:Night Title" content="#fff" />
  112. <meta name="color:Night Text" content="#ddd" />
  113. <meta name="color:Night Accent One" content="#92f0bb"/>
  114. <meta name="color:Night Accent Two" content="#bff0da"/>
  115.  
  116. <meta name="select:Corners" content="15px" title="more round"/>
  117. <meta name="select:Corners" content="10px" title="round"/>
  118. <meta name="select:Corners" content="5px" title="slightly round"/>
  119. <meta name="select:Corners" content="0px" title="sharp"/>
  120.  
  121. <meta name="select:Tags" content="tags" title="default"/>
  122. <meta name="select:Tags" content="clicktags" title="on click"/>
  123.  
  124. <meta name="if:Explore" content="1"/>
  125. <meta name="if:Updates" content="1"/>
  126. <meta name="if:Sidebar Stats" content="1"/>
  127.  
  128. <meta name="text:Body Font" content="Nunito"/>
  129. <meta name="text:Title Font" content="Montserrat"/>
  130. <meta name="text:Font Size" content="15"/>
  131. <meta name="text:Blog Title" content="custom title"/>
  132. <meta name="text:Blog Name" content="your url here"/>
  133. <meta name="text:Custom Description" content="custom description"/>
  134.  
  135. <meta name="text:Sidebar Link 1" content="/"/>
  136. <meta name="text:Sidebar Link 1 Name" content="link one"/>
  137. <meta name="text:Sidebar Link 1 Icon" content="planet"/>
  138. <meta name="text:Sidebar Link 2" content="/"/>
  139. <meta name="text:Sidebar Link 2 Name" content="link two"/>
  140. <meta name="text:Sidebar Link 2 Icon" content="comet"/>
  141. <meta name="text:Sidebar Link 3" content="/"/>
  142. <meta name="text:Sidebar Link 3 Name" content="link three"/>
  143. <meta name="text:Sidebar Link 3 Icon" content="cloud"/>
  144. <meta name="text:Sidebar Link 4" content="/"/>
  145. <meta name="text:Sidebar Link 4 Name" content="link four"/>
  146. <meta name="text:Sidebar Link 4 Icon" content="plant"/>
  147.  
  148. <meta name="text:Explore Link 1" content="/"/>
  149. <meta name="text:Explore Link 1 Name" content="explore link one"/>
  150. <meta name="text:Explore Link 2" content="/"/>
  151. <meta name="text:Explore Link 2 Name" content="explore link two"/>
  152. <meta name="text:Explore Link 3" content="/"/>
  153. <meta name="text:Explore Link 3 Name" content="explore link three"/>
  154. <meta name="text:Explore Link 4" content=""/>
  155. <meta name="text:Explore Link 4 Name" content=""/>
  156. <meta name="text:Explore Link 5" content=""/>
  157. <meta name="text:Explore Link 5 Name" content=""/>
  158. <meta name="text:Explore Link 6" content=""/>
  159. <meta name="text:Explore Link 6 Name" content=""/>
  160.  
  161. <meta name="text:Update 1" content="watching"/>
  162. <meta name="text:Update Icon 1" content="device-tv-old"/>
  163. <meta name="text:Update 2" content="listening to"/>
  164. <meta name="text:Update Icon 2" content="headphones"/>
  165. <meta name="text:Update 3" content="reading"/>
  166. <meta name="text:Update Icon 3" content="book"/>
  167. <meta name="text:Update 4" content="playing"/>
  168. <meta name="text:Update Icon 4" content="device-gamepad-2"/>
  169. <meta name="text:Update 5" content="working on"/>
  170. <meta name="text:Update Icon 5" content="briefcase"/>
  171. <meta name="text:Update 6" content=""/>
  172. <meta name="text:Update Icon 6" content=""/>
  173.  
  174. <meta name="text:Sidebar Stat 1" content="name"/>
  175. <meta name="text:Sidebar Stat Icon 1" content="writing-sign"/>
  176. <meta name="text:Sidebar Stat 2" content="pronouns"/>
  177. <meta name="text:Sidebar Stat Icon 2" content="sparkles"/>
  178. <meta name="text:Sidebar Stat 3" content="age"/>
  179. <meta name="text:Sidebar Stat Icon 3" content="cake"/>
  180. <meta name="text:Sidebar Stat 4" content="zodiac"/>
  181. <meta name="text:Sidebar Stat Icon 4" content="sun"/>
  182.  
  183. <!--- day/night --->
  184. <script>
  185. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  186. if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
  187. </script>
  188.  
  189. <!------- CSS -------->
  190. <style>
  191.  
  192. /* theme options - common */
  193. :root {
  194. --Spacing: 1rem;
  195. --Corners:{select:Corners}
  196. }
  197.  
  198. /* theme options - day/night */
  199. :root, html[data-theme='light'] {
  200. --LightOn: flex;
  201. --LightOff: none;
  202. --ColorBackground: {color:background};
  203. --ColorSidebar: {color:sidebar};
  204. --ColorPosts: {color:posts};
  205. --ColorBorders: {color:borders};
  206. --ColorTitle: {color:title};
  207. --ColorText: {color:text};
  208. --ColorAccentOne: {color:accent one};
  209. --ColorAccentTwo: {color:accent two};
  210. --ColorOpacity: rgba(255,255,255,.1);
  211. --ColorReverseOpacity: rgba(0,0,0,.1);
  212. }
  213. html[data-theme='dark'] {
  214. --LightOn: none;
  215. --LightOff: flex;
  216. --ColorBackground: {color:night background};
  217. --ColorSidebar: {color:night sidebar};
  218. --ColorPosts: {color:night posts};
  219. --ColorBorders: {color:night borders};
  220. --ColorTitle: {color:night title};
  221. --ColorText: {color:night text};
  222. --ColorAccentOne: {color:night accent one};
  223. --ColorAccentTwo: {color:night accent two};
  224. --ColorOpacity: rgba(0,0,0,.1);
  225. --ColorReverseOpacity: rgba(255,255,255,.1);
  226. }
  227. html.theme-transition,
  228. html.theme-transition *,
  229. html.theme-transition *:before,
  230. html.theme-transition *:after {
  231. transition: 0s !important;
  232. transition-delay: 0 !important;
  233. }
  234.  
  235. .light-on{
  236. display: var(--LightOn);
  237. }
  238. .light-off{
  239. display: var(--LightOff);
  240. }
  241.  
  242. /*--- TOOLTIPS ---*/
  243.  
  244. .tippy-tooltip.custom-theme {
  245. font-size:.95em;
  246. font-weight:500;
  247. color:var(--ColorPosts);
  248. text-transform:lowercase;
  249. text-align:center;
  250. background:var(--ColorAccentOne);
  251. border-radius:5px;
  252. box-shadow:2px 2px 2px rgba(0,0,0,.1);
  253. }
  254. /* Right placement tooltip arrow (arrow will be on left side of tooltip) */
  255. .tippy-popper[x-placement^=right] .tippy-tooltip.custom-theme .tippy-arrow {
  256. border-right: 7px solid var(--ColorAccentOne); /* your color here */
  257. }
  258.  
  259. /* Left placement tooltip arrow (arrow will be on right side of tooltip) */
  260. .tippy-popper[x-placement^=left] .tippy-tooltip.custom-theme .tippy-arrow {
  261. border-left: 7px solid var(--ColorAccentOne); /* your color here */
  262. }
  263.  
  264. /* Top placement tooltip arrow (arrow will be on bottom side of tooltip) */
  265. .tippy-popper[x-placement^=top] .tippy-tooltip.custom-theme .tippy-arrow {
  266. border-top: 7px solid var(--ColorAccentOne); /* your color here */
  267. }
  268.  
  269. /* Bottom placement tooltip arrow (arrow will be on top side of tooltip) */
  270. .tippy-popper[x-placement^=bottom] .tippy-tooltip.custom-theme .tippy-arrow {
  271. border-bottom: 7px solid var(--ColorAccentOne); /* your color here */
  272. }
  273.  
  274. /*--- SCROLLBAR ---*/
  275. ::-webkit-scrollbar {
  276. width:5px;
  277. height:5px;
  278. background:var(--ColorBackground);
  279. }
  280.  
  281. ::-webkit-scrollbar-track {
  282. background:var(--ColorBackground);
  283. border-radius: 5px;
  284. }
  285.  
  286. ::-webkit-scrollbar-thumb {
  287. background:linear-gradient(to top, var(--ColorAccentOne), var(--ColorAccentTwo));
  288. border-radius: 5px;
  289. }
  290.  
  291. /*--- TEXT SELECTION ---*/
  292. ::-moz-selection { /* Code for Firefox */
  293. color:var(--ColorPosts);
  294. background:var(--ColorAccentOne);
  295. }
  296.  
  297. ::selection {
  298. color:var(--ColorPosts);
  299. background:var(--ColorAccentOne);
  300. }
  301.  
  302. * {box-sizing:border-box;}
  303.  
  304. body {
  305. font-family:'{text:body font}', sans-serif;
  306. font-size:{text:font size}px;
  307. color:var(--ColorText);
  308. line-height:140%;
  309. word-wrap:break-word;
  310. letter-spacing:.04em;
  311. margin:0;
  312. background-color:var(--ColorBackground);
  313. }
  314. body {
  315. opacity:1;
  316. transition:.75s opacity;
  317. }
  318.  
  319. body.fade-out {
  320. opacity:0;
  321. transition:none;
  322. }
  323. html {background-color:var(--ColorBackground);}
  324.  
  325. a {
  326. color:var(--ColorAccentOne);
  327. text-decoration: none;
  328. -webkit-transition: all 0.4s;
  329. -moz-transition: all 0.4s;
  330. -ms-transition: all 0.4s;
  331. -o-transition: all 0.4s;
  332. transition: all 0.4s;
  333. }
  334.  
  335. a:hover {
  336. color:var(--ColorAccentTwo);
  337. -webkit-transition: all 0.4s;
  338. -moz-transition: all 0.4s;
  339. -ms-transition: all 0.4s;
  340. -o-transition: all 0.4s;
  341. transition: all 0.4s;
  342. }
  343.  
  344. blockquote {
  345. border-left:1.5px solid var(--ColorBorders);
  346. padding-left:.75em;
  347. margin-left:1em;
  348. }
  349. blockquote p {padding: 0!important;}
  350.  
  351. ul {list-style-type:circle;}
  352. ol {list-style-type: decimal-leading-zero;}
  353. li::marker {color:var(--ColorAccentOne)}
  354.  
  355. small {font-size:.95em;}
  356. big {font-size:1.1em;}
  357.  
  358. h1 {font-size:1.35em; margin:0; color:var(--ColorTitle); display:inline-block;}
  359. h1 a {color:var(--ColorTitle);}
  360. h1 a:hover {color:var(--ColorAccent);}
  361. h2 {font-size:1.25em; color:var(--ColorTitle); letter-spacing:.1em;}
  362. h3 {font-size:1.15em; color:var(--ColorTitle);}
  363. h4 {font-size:1.1em; color:var(--ColorTitle);}
  364. h5 {font-size:1.05em; color:var(--ColorTitle);}
  365. h1, h1 a, h2, h3, h4, h5 {font-family:'{text:title font}', sans-serif;}
  366.  
  367. button {font-size:1em;}
  368.  
  369. hr {
  370. height:1px;
  371. border:none;
  372. box-shadow:none;
  373. background:var(--ColorBorders);
  374. }
  375.  
  376. pre {
  377. word-wrap:break-word!important;
  378. white-space:pre-wrap;
  379. }
  380.  
  381. b, strong {
  382. color:var(--ColorTitle);
  383. font-weight:800;
  384. }
  385.  
  386. b a:hover {
  387. color:var(--ColorAccentTwo);
  388. -webkit-transition: all 0.4s;
  389. -moz-transition: all 0.4s;
  390. -ms-transition: all 0.4s;
  391. -o-transition: all 0.4s;
  392. transition: all 0.4s;
  393. }
  394.  
  395. /* common link effects */
  396. .sidebar-desc a, .updates-wrap a, .aanswer a {
  397. display:inline-block;
  398. position:relative;
  399. }
  400. .sidebar-desc a:after, .updates-wrap a:after, .aanswer a:after {
  401. content: '';
  402. position:absolute;
  403. bottom:0;
  404. left:0;
  405. width:100%;
  406. height:2px;
  407. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  408. border-radius:5px;
  409. transform:scaleX(0);
  410. transform-origin:center;
  411. transition: transform 0.3s ease-out;
  412. }
  413. .sidebar-desc a:hover:after, .updates-wrap a:hover:after, .aanswer a:hover:after {
  414. transform: scaleX(1);
  415. transform-origin:center;
  416. }
  417.  
  418. .flex {
  419. display: flex;
  420. flex-wrap: wrap;
  421. }
  422.  
  423. .centered {
  424. align-items: center;
  425. justify-content: center;
  426. }
  427.  
  428. .align-center {
  429. align-items: center;
  430. }
  431.  
  432. .justify-center {
  433. justify-content: center;
  434. }
  435.  
  436. .sr-text {
  437. border: 0;
  438. clip: rect(1px, 1px, 1px, 1px);
  439. clip-path: inset(50%);
  440. height: 1px;
  441. margin: -1px;
  442. overflow: hidden;
  443. padding: 0;
  444. position: absolute;
  445. width: 1px;
  446. word-wrap: normal !important;
  447. }
  448.  
  449. /*--- MINIBAR / HEADER ---*/
  450.  
  451. header {
  452. position:fixed;
  453. top:0;
  454. left:0;
  455. bottom:0;
  456. width:45px;
  457. height:100%;
  458. display:flex;
  459. flex-direction:column;
  460. justify-content:space-between;
  461. align-items:center;
  462. background:var(--ColorPosts);
  463. box-shadow:2px 0px 5px rgba(0,0,0,.1);
  464. z-index:9999;
  465. }
  466.  
  467. .minibartop {
  468. position:relative;
  469. width:100%;
  470. display:flex;
  471. flex-direction:column;
  472. align-items:center;
  473. justify-content:flex-start;
  474. }
  475. .topicon {
  476. width:100%;
  477. padding:.5rem;
  478. display:flex;
  479. justify-content:center;
  480. align-items:center;
  481. }
  482. .topicon a {
  483. display:flex;
  484. justify-content:center;
  485. align-items:center;
  486. padding:1.5px;
  487. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  488. border-radius:100%;
  489. }
  490. .topicon a:hover {transform:scale(.975);}
  491. .topicon a img {
  492. width:34px;
  493. height:34px;
  494. padding:1.5px;
  495. background:var(--ColorPosts);
  496. border-radius:100%;
  497. }
  498. .minibartop a.minilink {
  499. position:relative;
  500. width:100%;
  501. padding:1rem;
  502. display:flex;
  503. justify-content:center;
  504. align-items:center;
  505. }
  506. .minibartop a.minilink:after {
  507. content:'';
  508. position:absolute;
  509. right:0;
  510. width:2px;
  511. height:50%;
  512. opacity:0;
  513. background:var(--ColorAccentOne);
  514. border-radius:var(--Corners);
  515. z-index:9999;
  516. -webkit-transition: all 0.4s;
  517. -moz-transition: all 0.4s;
  518. -ms-transition: all 0.4s;
  519. -o-transition: all 0.4s;
  520. transition: all 0.4s;
  521. }
  522. .minibartop a.minilink:hover:after {opacity:1;}
  523. .minibartop a.minilink i {
  524. font-size:1.3em;
  525. color:var(--ColorTitle);
  526. -webkit-transition: all 0.4s;
  527. -moz-transition: all 0.4s;
  528. -ms-transition: all 0.4s;
  529. -o-transition: all 0.4s;
  530. transition: all 0.4s;
  531. }
  532. .minibartop a.minilink:hover i {color:var(--ColorAccentOne);}
  533.  
  534.  
  535. /* explore button */
  536. .explorewrap {
  537. width:100%;
  538. position:relative;
  539. display:flex;
  540. justify-content:center;
  541. align-items:flex-start;
  542. }
  543. a#explorebutton {cursor:help;}
  544. body.explore-click a#explorebutton:after {opacity:1;}
  545.  
  546. /* explore tab */
  547. .explore {
  548. position:absolute;
  549. bottom:.5rem;
  550. left:calc(100% + .5rem);
  551. width:225px;
  552. display:none;
  553. flex-direction:column;
  554. background:var(--ColorPosts);
  555. border-radius:var(--Corners);
  556. box-shadow:2px 2px 2px rgba(0,0,0,.1);
  557. z-index:99999;
  558. }
  559. body.explore-click .explore {display:flex;}
  560. .explore-title {
  561. width:100%;
  562. display:flex;
  563. justify-content:space-between;
  564. align-items:center;
  565. padding:.5em;
  566. border-bottom:1px solid var(--ColorBorders);
  567. }
  568. .explore-title b {
  569. font-size:.85em;
  570. font-weight:normal;
  571. text-transform:uppercase;
  572. letter-spacing:.05em;
  573. }
  574. .explore-title i {font-size:1.05em; color:var(--ColorTitle);}
  575. .explore-wrap {
  576. width:100%;
  577. display:flex;
  578. flex-direction:column;
  579. gap:.5em;
  580. padding:.5em;
  581. }
  582.  
  583. .explore-wrap a {
  584. width:100%;
  585. display:flex;
  586. justify-content:flex-start;
  587. align-items:flex-start;
  588. gap:.25em;
  589. }
  590. .explore-wrap a span {
  591. font-size:.95em;
  592. color:var(--ColorText);
  593. -webkit-transition: all 0.4s;
  594. -moz-transition: all 0.4s;
  595. -ms-transition: all 0.4s;
  596. -o-transition: all 0.4s;
  597. transition: all 0.4s;
  598. }
  599. .explore-wrap a:hover span {color:var(--ColorAccentOne);}
  600.  
  601. .explore-wrap a i {
  602. font-size:1.2em;
  603. margin-top:.075em;
  604. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  605. -webkit-background-clip:text;
  606. -webkit-text-fill-color:transparent;
  607. }
  608.  
  609. /* updates button */
  610. .updateswrap {
  611. width:100%;
  612. position:relative;
  613. display:flex;
  614. justify-content:center;
  615. align-items:flex-start;
  616. }
  617. a#updatesbutton {cursor:help;}
  618. body.updates-click a#updatesbutton:after {opacity:1;}
  619. a#updatesbutton:hover i {
  620. -webkit-animation-duration: 1s;
  621. animation-duration: 1s;
  622. -webkit-animation-fill-mode: both;
  623. animation-fill-mode: both;
  624. -webkit-animation-timing-function: ease-in-out;
  625. animation-timing-function: ease-in-out;
  626. animation-iteration-count:1;
  627. -webkit-animation-iteration-count:1;
  628. animation-name: wiggle;
  629. -moz-animation-name: wiggle;
  630. }
  631.  
  632. @keyframes wiggle {
  633. 0% {
  634. -webkit-transform: translateX(0px);
  635. -ms-transform: translateX(0px);
  636. transform: translateX(0px)
  637. }
  638. 15% {
  639. -webkit-transform: translateX(0px);
  640. -ms-transform: translateX(0px);
  641. transform: translateX(0px)
  642. }
  643. 30% {
  644. -webkit-transform: rotate(10deg);
  645. -ms-transform: translateX(10deg);
  646. transform: translateX(10deg)
  647. }
  648. 45% {
  649. -webkit-transform: rotate(-10deg);
  650. -ms-transform: rotate(-10deg);
  651. transform: rotate(-10deg)
  652. }
  653. 60% {
  654. -webkit-transform: rotate(10deg);
  655. -ms-transform: rotate(10deg);
  656. transform: rotate(10deg)
  657. }
  658. 75% {
  659. -webkit-transform: rotate(-10deg);
  660. -ms-transform: rotate(-10deg);
  661. transform: rotate(-10deg)
  662. }
  663. 85% {
  664. -webkit-transform: rotate(10deg);
  665. -ms-transform: rotate(10deg);
  666. transform: rotate(10deg)
  667. }
  668. 100% {
  669. -webkit-transform: translateX(0px);
  670. -ms-transform: translateX(0px);
  671. transform: translateX(0px)
  672. }
  673. }
  674.  
  675. /* updates tab */
  676. .updates {
  677. position:absolute;
  678. top:.5rem;
  679. left:calc(100% + .5rem);
  680. width:225px;
  681. display:none;
  682. flex-direction:column;
  683. background:var(--ColorPosts);
  684. border-radius:var(--Corners);
  685. box-shadow:2px 2px 2px rgba(0,0,0,.1);
  686. z-index:99999;
  687. }
  688. body.updates-click .updates {display:flex;}
  689. .updates-title {
  690. width:100%;
  691. display:flex;
  692. justify-content:space-between;
  693. align-items:center;
  694. padding:.5em;
  695. border-bottom:1px solid var(--ColorBorders);
  696. }
  697. .updates-title b {
  698. font-size:.85em;
  699. font-weight:normal;
  700. text-transform:uppercase;
  701. letter-spacing:.05em;
  702. }
  703. .updates-title i {font-size:1.05em; color:var(--ColorTitle);}
  704. .updates-wrap {
  705. width:100%;
  706. display:flex;
  707. flex-direction:column;
  708. gap:.5em;
  709. padding:.5em;
  710. }
  711.  
  712. .updates-wrap li {
  713. width:100%;
  714. display:flex;
  715. justify-content:flex-start;
  716. align-items:flex-start;
  717. gap:.5em;
  718. }
  719. .updates-wrap span {font-size:.9em;}
  720.  
  721. .updates-wrap li i {
  722. font-size:1.2em;
  723. margin-top:.075em;
  724. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  725. -webkit-background-clip:text;
  726. -webkit-text-fill-color:transparent;
  727. }
  728.  
  729. .minibarlow {
  730. position:relative;
  731. width:100%;
  732. display:flex;
  733. flex-direction:column;
  734. justify-content:flex-start;
  735. align-items:center;
  736. }
  737. .minibarlow a.minilink {
  738. position:relative;
  739. width:100%;
  740. padding:1rem;
  741. display:flex;
  742. justify-content:center;
  743. align-items:center;
  744. }
  745. .minibarlow a.minilink:first-of-type {padding-bottom:.75rem;}
  746. .minibarlow a.minilink:last-of-type {padding-top:.75rem;}
  747. .minibarlow a.minilink:after {
  748. content:'';
  749. position:absolute;
  750. right:0;
  751. width:2px;
  752. height:50%;
  753. opacity:0;
  754. background:var(--ColorAccentTwo);
  755. border-radius:var(--Corners);
  756. z-index:9999;
  757. -webkit-transition: all 0.4s;
  758. -moz-transition: all 0.4s;
  759. -ms-transition: all 0.4s;
  760. -o-transition: all 0.4s;
  761. transition: all 0.4s;
  762. }
  763. .minibarlow a.minilink:hover:after {opacity:1;}
  764. .minibarlow a.minilink i {
  765. font-size:1.5em;
  766. color:var(--ColorTitle);
  767. -webkit-transition: all 0.4s;
  768. -moz-transition: all 0.4s;
  769. -ms-transition: all 0.4s;
  770. -o-transition: all 0.4s;
  771. transition: all 0.4s;
  772. }
  773. .minibarlow a.minilink:hover i {color:var(--ColorAccentTwo);}
  774.  
  775. /* SCROLL TO TOP */
  776. a#totop {
  777. display:none;
  778. justify-content:center;
  779. align-items:center;
  780. cursor:help;
  781. }
  782. a#totop i {
  783. -webkit-transition: all 0.4s;
  784. -moz-transition: all 0.4s;
  785. -ms-transition: all 0.4s;
  786. -o-transition: all 0.4s;
  787. transition: all 0.4s;
  788. }
  789. a#totop:hover i {
  790. -webkit-animation-duration: 2.5s;
  791. animation-duration: 2.5s;
  792. -webkit-animation-fill-mode: both;
  793. animation-fill-mode: both;
  794. -webkit-animation-timing-function: ease-in-out;
  795. animation-timing-function: ease-in-out;
  796. animation-iteration-count:1;
  797. -webkit-animation-iteration-count:1;
  798. animation-name:totop;
  799. -moz-animation-name:totop;
  800. }
  801.  
  802. @keyframes totop {
  803. 0% {
  804. -webkit-transform: translateY(0px);
  805. -ms-transform: translateY(0px);
  806. transform: translateY(0px)
  807. }
  808. 10% {
  809. -webkit-transform: translateY(-3px);
  810. -ms-transform: translateY(-3px);
  811. transform: translateY(-3px)
  812. }
  813. 20% {
  814. -webkit-transform: translateY(0px);
  815. -ms-transform: translateY(0px);
  816. transform: translateY(0px)
  817. }
  818. 30% {
  819. -webkit-transform: translateY(-3px);
  820. -ms-transform: translateY(-3px);
  821. transform: translateY(-3px)
  822. }
  823. 40% {
  824. -webkit-transform: translateY(0px);
  825. -ms-transform: translateY(0px);
  826. transform: translateY(0px)
  827. }
  828. 50% {
  829. -webkit-transform: translateY(0px);
  830. -ms-transform: translateY(0px);
  831. transform: translateY(0px)
  832. }
  833. 60% {
  834. -webkit-transform: translateY(0px);
  835. -ms-transform: translateY(0px);
  836. transform: translateY(0px)
  837. }
  838. 70% {
  839. -webkit-transform: translateY(-3px);
  840. -ms-transform: translateY(-3px);
  841. transform: translateY(-3px)
  842. }
  843. 80% {
  844. -webkit-transform: translateY(0px);
  845. -ms-transform: translateY(0px);
  846. transform: translateY(0px)
  847. }
  848. 90% {
  849. -webkit-transform: translateY(-3px);
  850. -ms-transform: translateY(-3px);
  851. transform: translateY(-3px)
  852. }
  853. 100% {
  854. -webkit-transform: translateY(0px);
  855. -ms-transform: translateY(0px);
  856. transform: translateY(0px)
  857. }
  858. }
  859.  
  860. /*--- CREDIT: DO NOT TOUCH ---*/
  861. a#credit {}
  862. a#credit i {}
  863. a#credit:hover i {
  864. -webkit-animation-duration: 2s;
  865. animation-duration: 2s;
  866. -webkit-animation-fill-mode: both;
  867. animation-fill-mode: both;
  868. -webkit-animation-timing-function: ease-in-out;
  869. animation-timing-function: ease-in-out;
  870. animation-iteration-count:infinite;
  871. -webkit-animation-iteration-count:infinite;
  872. animation-name: bounce;
  873. -moz-animation-name: bounce;
  874. }
  875.  
  876. @keyframes bounce {
  877. 0% {
  878. -webkit-transform: translateY(0px);
  879. -ms-transform: translateY(0px);
  880. transform: translateY(0px)
  881. }
  882. 25% {
  883. -webkit-transform: translateY(-3px);
  884. -ms-transform: translateY(-3px);
  885. transform: translateY(-3px)
  886. }
  887. 50% {
  888. -webkit-transform: translateY(0px);
  889. -ms-transform: translateY(0px);
  890. transform: translateY(0px)
  891. }
  892. 75% {
  893. -webkit-transform: translateY(-3px);
  894. -ms-transform: translateY(-3px);
  895. transform: translateY(-3px)
  896. }
  897. 100% {
  898. -webkit-transform: translateY(0px);
  899. -ms-transform: translateY(0px);
  900. transform: translateY(0px)
  901. }
  902. }
  903.  
  904. /*--- LEFT SIDEBAR ---*/
  905. #leftsidebar {
  906. position:fixed;
  907. top:0;
  908. right:0;
  909. width:400px;
  910. height:100%;
  911. padding:4rem 2rem 1rem 2rem;
  912. display:flex;
  913. flex-direction:column;
  914. justify-content:flex-start;
  915. align-items:center;
  916. gap:1rem;
  917. background:var(--ColorSidebar);
  918. border-left:1px solid var(--ColorBorders);
  919. transition:ease-in-out .55s;
  920. z-index:999;
  921. }
  922.  
  923. .sidebar-top {
  924. position:relative;
  925. width:100%;
  926. display:flex;
  927. flex-direction:column;
  928. background:var(--ColorPosts);
  929. border-radius:var(--Corners);
  930. box-shadow:2px 2px 2px rgba(0,0,0,.1);
  931. }
  932.  
  933. .sidebar-img {
  934. position:relative;
  935. width:100%;
  936. height:125px;
  937. {block:ifSidebarImage}
  938. height:350px;
  939. {/block:ifSidebarImage}
  940. display:flex;
  941. justify-content:center;
  942. align-items:center;
  943. background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo));
  944. border-radius:var(--Corners) var(--Corners) 0 0;
  945. }
  946. .sidebar-img img {width:100%; height:350px; object-fit:cover; border-radius:var(--Corners) var(--Corners) 0 0;}
  947.  
  948. .sidebar-icon {
  949. position:absolute;
  950. top:calc(100% - 2rem - 2px);
  951. left:.75rem;
  952. display:flex;
  953. justify-content:center;
  954. align-items:center;
  955. padding:4px;
  956. background:var(--ColorPosts);
  957. border-radius:100%;
  958. }
  959. .sidebar-icon img {
  960. width:4rem;
  961. height:4rem;
  962. border-radius:100%;
  963. }
  964.  
  965. a.sidebar-title {
  966. width:100%;
  967. margin-top:2rem;
  968. padding:.75rem;
  969. display:flex;
  970. flex-direction:column;
  971. justify-content:center;
  972. align-items:flex-start;
  973. }
  974. a.sidebar-title b {
  975. font-size:1.1em;
  976. color:var(--ColorTitle);
  977. -webkit-transition: all 0.4s;
  978. -moz-transition: all 0.4s;
  979. -ms-transition: all 0.4s;
  980. -o-transition: all 0.4s;
  981. transition: all 0.4s;
  982. }
  983. a.sidebar-title:hover b {color:var(--ColorAccentOne);}
  984. a.sidebar-title span {color:var(--ColorText);}
  985.  
  986. .sidebar-desc {
  987. width:100%;
  988. padding:0 .75rem .75rem .75rem;
  989. text-align:left;
  990. {block:ifSidebarStats}
  991. border-bottom:1px solid var(--ColorBorders);}
  992. {/block:ifSidebarStats}
  993. }
  994. .sidebar-desc p {margin-bottom:0; padding-bottom:0;}
  995.  
  996. .sidebar-stats {
  997. width:100%;
  998. padding:.5rem;
  999. display:flex;
  1000. justify-content:space-evenly;
  1001. align-items:center;
  1002. flex-wrap:wrap;
  1003. gap:.5rem;
  1004. }
  1005. .sidebar-stats li {
  1006. display:flex;
  1007. justify-content:flex-start;
  1008. align-items:center;
  1009. gap:.25em;
  1010. }
  1011. .sidebar-stats li i {
  1012. font-size:1.2em;
  1013. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1014. -webkit-background-clip:text;
  1015. -webkit-text-fill-color:transparent;
  1016. }
  1017. .sidebar-stats li b {font-weight:normal; color:var(--ColorText);}
  1018.  
  1019. /*-- search bar --*/
  1020. .searchbar {
  1021. width:100%;
  1022. padding:.75rem;
  1023. background:var(--ColorPosts);
  1024. border-radius:var(--Corners);
  1025. box-shadow:2px 2px 2px rgba(0,0,0,.1);
  1026. }
  1027. .search {
  1028. width:100%;
  1029. display:flex;
  1030. justify-content:flex-start;
  1031. align-items:center;
  1032. gap:.35em;
  1033. }
  1034. .search i {
  1035. font-size:1.2em;
  1036. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1037. -webkit-background-clip:text;
  1038. -webkit-text-fill-color:transparent;
  1039. }
  1040. .search .query {
  1041. border: 0;
  1042. outline: 0;
  1043. font-family:'{text:body font}', sans-serif;
  1044. font-size:1em;
  1045. width:100%;
  1046. color:var(--ColorText);
  1047. letter-spacing:.04em;
  1048. background:transparent;
  1049. }
  1050. ::-webkit-input-placeholder {color: inherit; opacity:.75;}
  1051. :-moz-placeholder {color: inherit; opacity:.75;}
  1052. ::-moz-placeholder {color: inherit; opacity:.75;}
  1053. :-ms-input-placeholder {color: inherit; opacity:.75;}
  1054.  
  1055. input:focus::-webkit-input-placeholder {color: transparent; text-shadow:none;}
  1056. input:focus:-moz-placeholder {color: transparent; text-shadow:none;}
  1057. input:focus::-moz-placeholder {color: transparent; text-shadow:none;}
  1058. input:focus:-ms-input-placeholder { color: transparent; text-shadow:none;}
  1059.  
  1060. /*--- FIXED BUTTONS ---*/
  1061. .fixedbuttons {
  1062. position:fixed;
  1063. top:.5em;
  1064. right:.5em;
  1065. display:flex;
  1066. justify-content:flex-end;
  1067. align-items:center;
  1068. gap:.5em;
  1069. z-index:9999999;
  1070. }
  1071. .fixedbuttons a {
  1072. display:flex;
  1073. justify-content:center;
  1074. align-items:center;
  1075. padding:.5em;
  1076. background:var(--ColorPosts);
  1077. border-radius:var(--Corners);
  1078. box-shadow:2px 2px 2px rgba(0,0,0,.1);
  1079. }
  1080. .fixedbuttons a:hover {box-shadow:none; transform:scale(.975);}
  1081. .fixedbuttons i {
  1082. -webkit-transition: all 0.4s;
  1083. -moz-transition: all 0.4s;
  1084. -ms-transition: all 0.4s;
  1085. -o-transition: all 0.4s;
  1086. transition: all 0.4s;
  1087. }
  1088.  
  1089. /* sidebar button */
  1090. a#sidebarbutton {display:none; cursor:help;}
  1091. a#sidebarbutton i {
  1092. font-size:1.3em;
  1093. color:var(--ColorTitle);
  1094. -webkit-transition: all 0.4s;
  1095. -moz-transition: all 0.4s;
  1096. -ms-transition: all 0.4s;
  1097. -o-transition: all 0.4s;
  1098. transition: all 0.4s;
  1099. }
  1100. a#sidebarbutton:hover i {color:var(--ColorAccentOne);}
  1101.  
  1102. /* DAY/NIGHT */
  1103. button#theme-toggle {
  1104. position:relative;
  1105. outline:none;
  1106. border:none;
  1107. padding:.5em;
  1108. background:var(--ColorPosts);
  1109. border-radius:var(--Corners);
  1110. box-shadow:2px 2px 2px rgba(0,0,0,.1);
  1111. display:flex;
  1112. justify-content:center;
  1113. align-items:center;
  1114. cursor:help;
  1115. }
  1116. button#theme-toggle:hover {box-shadow:none; transform:scale(.975);}
  1117.  
  1118. button#theme-toggle span {
  1119. justify-content:center;
  1120. align-items:center;
  1121. -webkit-transition: all 0.4s;
  1122. -moz-transition: all 0.4s;
  1123. -ms-transition: all 0.4s;
  1124. -o-transition: all 0.4s;
  1125. transition: all 0.4s;
  1126. }
  1127.  
  1128. button#theme-toggle i {
  1129. font-size:1.3em;
  1130. color:var(--ColorTitle);
  1131. -webkit-transition: all 0.4s;
  1132. -moz-transition: all 0.4s;
  1133. -ms-transition: all 0.4s;
  1134. -o-transition: all 0.4s;
  1135. transition: all 0.4s;
  1136. }
  1137. button#theme-toggle:hover i {
  1138. color:var(--ColorAccentOne);
  1139. -webkit-transition: all 0.4s;
  1140. -moz-transition: all 0.4s;
  1141. -ms-transition: all 0.4s;
  1142. -o-transition: all 0.4s;
  1143. transition: all 0.4s;
  1144. -webkit-animation-duration: .75s;
  1145. animation-duration: .75s;
  1146. -webkit-animation-fill-mode: both;
  1147. animation-fill-mode: both;
  1148. -webkit-animation-timing-function: ease-in-out;
  1149. animation-timing-function: ease-in-out;
  1150. animation-iteration-count:1;
  1151. -webkit-animation-iteration-count:1;
  1152. animation-name:daynight;
  1153. -moz-animation-name:daynight;
  1154. }
  1155.  
  1156. @keyframes daynight {
  1157. 50% {
  1158. -webkit-transform: scaleX(-1);
  1159. -ms-transform: scaleX(-1);
  1160. transform: scaleX(-1);
  1161. }
  1162. }
  1163.  
  1164. /* TUMBLR CONTROLS */
  1165. a#controlsbutton {cursor:help;}
  1166. a#controlsbutton {display:flex; justify-content:center; align-items:center;}
  1167. a#controlsbutton i {
  1168. font-size:1.3em;
  1169. color:var(--ColorTitle);
  1170. -webkit-transition: all 0.4s;
  1171. -moz-transition: all 0.4s;
  1172. -ms-transition: all 0.4s;
  1173. -o-transition: all 0.4s;
  1174. transition: all 0.4s;
  1175. }
  1176. a#controlsbutton:hover i {
  1177. color:var(--ColorAccentOne);
  1178. -webkit-animation-duration: 1.5s;
  1179. animation-duration: 1.5s;
  1180. -webkit-animation-fill-mode: both;
  1181. animation-fill-mode: both;
  1182. -webkit-animation-timing-function: ease-in-out;
  1183. animation-timing-function: ease-in-out;
  1184. animation-iteration-count:1;
  1185. -webkit-animation-iteration-count:1;
  1186. animation-name:tumblrcontrols;
  1187. -moz-animation-name:tumblrcontrols;
  1188. }
  1189. body.controls-click a#controlsbutton i {color:var(--ColorAccentOne);}
  1190.  
  1191. @keyframes tumblrcontrols {
  1192. 45% {
  1193. -webkit-transform: rotate(180deg);
  1194. -ms-transform: rotate(180deg);
  1195. transform: rotate(180deg);
  1196. }
  1197. 55% {
  1198. -webkit-transform: rotate(180deg);
  1199. -ms-transform: rotate(180deg);
  1200. transform: rotate(180deg);
  1201. }
  1202. 100% {
  1203. -webkit-transform: rotate(360deg);
  1204. -ms-transform: rotate(360deg);
  1205. transform: rotate(360deg);
  1206. }
  1207. }
  1208.  
  1209. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  1210. transform:scale(.75);
  1211. margin-right:6rem;
  1212. opacity:0;
  1213. visibility:hidden;
  1214. z-index:999999999!important;
  1215. }
  1216.  
  1217. body.controls-click iframe.tmblr-iframe {
  1218. opacity:1.0;
  1219. visibility:visible;
  1220. -webkit-transition: all 0.5s;
  1221. -moz-transition: all 0.5s;
  1222. -ms-transition: all 0.5s;
  1223. -o-transition: all 0.5s;
  1224. transition: all 0.5s;
  1225. }
  1226.  
  1227. #ask_form {margin-bottom:0; border-radius: 0 0 var(--Corners) var(--Corners);}
  1228.  
  1229. main {
  1230. width:calc(100% - 1rem);
  1231. margin:auto;
  1232. display:flex;
  1233. justify-content:center;
  1234. }
  1235. section {margin-left:calc(3.25rem + 45px); margin-right:400px; width:100%; transition:ease-in-out .55s;}
  1236.  
  1237. article {
  1238. position:relative;
  1239. width:100%;
  1240. max-width:calc(540px + 2rem);
  1241. margin:calc(var(--Spacing) * 4) auto;
  1242. }
  1243. article:first-of-type {margin-top:4rem;}
  1244.  
  1245. .article-wrap {
  1246. position:relative;
  1247. width:100%;
  1248. background:var(--ColorPosts);
  1249. border-radius:var(--Corners);
  1250. box-shadow:2px 2px 2px rgba(0,0,0,.1);
  1251. }
  1252.  
  1253. .post-wrap {width:100%;}
  1254.  
  1255. /*--- FLOATING INFO ---*/
  1256. .floating {
  1257. position:absolute;
  1258. top:0;
  1259. right:calc(100% + .75rem);
  1260. width:2.5rem;
  1261. height:100%;
  1262. z-index:99;
  1263. }
  1264. .sticky-float {
  1265. position:sticky;
  1266. top:.5rem;
  1267. width:100%;
  1268. display:flex;
  1269. flex-direction:column;
  1270. align-items:center;
  1271. gap:.75em;
  1272. }
  1273.  
  1274. a.reblog-btn, a.like-button, a.pinned-post {
  1275. display:flex;
  1276. justify-content:center;
  1277. align-items:center;
  1278. padding:.5em;
  1279. background:var(--ColorPosts);
  1280. border-radius:var(--Corners);
  1281. box-shadow:2px 2px 2px rgba(0,0,0,.1);
  1282. }
  1283. a.reblog-btn:hover, a.like-button:hover, a.pinned-post:hover {box-shadow:none; transform:scale(.975);}
  1284. a.reblog-btn i, a.pinned-post i {
  1285. font-size:1.4em;
  1286. color:var(--ColorTitle);
  1287. -webkit-transition: all 0.4s;
  1288. -moz-transition: all 0.4s;
  1289. -ms-transition: all 0.4s;
  1290. -o-transition: all 0.4s;
  1291. transition: all 0.4s;
  1292. }
  1293. a.reblog-btn:hover i, a.pinned-post:hover i {color:var(--ColorAccentOne);}
  1294.  
  1295. a.like-button i {
  1296. font-size:1.3em;
  1297. color:transparent;
  1298. -webkit-text-stroke-width:1.75px;
  1299. -webkit-text-stroke-color:var(--ColorTitle);
  1300. -webkit-transition: all 0.4s;
  1301. -moz-transition: all 0.4s;
  1302. -ms-transition: all 0.4s;
  1303. -o-transition: all 0.4s;
  1304. transition: all 0.4s;
  1305. }
  1306. a.like-button:hover i {-webkit-text-stroke-color:var(--ColorAccentOne);}
  1307.  
  1308. .sticky-float span {
  1309. display:flex;
  1310. justify-content:center;
  1311. align-items:center;
  1312. -webkit-transition: all 0.4s;
  1313. -moz-transition: all 0.4s;
  1314. -ms-transition: all 0.4s;
  1315. -o-transition: all 0.4s;
  1316. transition: all 0.4s;
  1317. }
  1318. .like-button {
  1319. position:relative;
  1320. display:inline-block;
  1321. }
  1322. .like-button .like_button iframe {
  1323. position:absolute;
  1324. top:0;
  1325. left:0;
  1326. bottom:0;
  1327. right:0;
  1328. z-index:2;
  1329. opacity:0;
  1330. }
  1331. .like_button iframe {width:100%!important; height:100%!important;}
  1332. .like-button .liked + .actual-button i {
  1333. -webkit-text-stroke-color:transparent;
  1334. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1335. -webkit-background-clip:text;
  1336. -webkit-text-fill-color:transparent;
  1337. }
  1338.  
  1339. /*-- TOP POST INFO --*/
  1340. .topinfo {
  1341. position:relative;
  1342. padding:1rem;
  1343. display:flex;
  1344. justify-content:space-between;
  1345. align-items:center;
  1346. gap:1rem;
  1347. border-bottom:1px solid var(--ColorBorders);
  1348. }
  1349. .topinfoleft {
  1350. display:flex;
  1351. justify-content:flex-start;
  1352. align-items:center;
  1353. gap:.5rem;
  1354. }
  1355. .til-name {
  1356. display:flex;
  1357. justify-content:flex-start;
  1358. align-items:center;
  1359. gap:.5rem;
  1360. }
  1361. .til-top {
  1362. display:flex;
  1363. flex-direction:column;
  1364. gap:.15rem;
  1365. }
  1366. .til-img {
  1367. padding:1.5px;
  1368. background:linear-gradient(to top right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1369. border-radius:100%;
  1370. }
  1371. .til-img img {
  1372. width:2.75rem;
  1373. height:2.75rem;
  1374. padding:1.5px;
  1375. background:var(--ColorBackground);
  1376. border-radius:100%;
  1377. -webkit-transition: all 0.4s;
  1378. -moz-transition: all 0.4s;
  1379. -ms-transition: all 0.4s;
  1380. -o-transition: all 0.4s;
  1381. transition: all 0.4s;
  1382. }
  1383. .til-top a {
  1384. font-size:1.025em;
  1385. font-weight:bold;
  1386. color:var(--ColorTitle);
  1387. -webkit-transition: all 0.4s;
  1388. -moz-transition: all 0.4s;
  1389. -ms-transition: all 0.4s;
  1390. -o-transition: all 0.4s;
  1391. transition: all 0.4s;
  1392. }
  1393. .til-top a:hover {color:var(--ColorAccentOne);}
  1394.  
  1395. .til-low {
  1396. margin-top:-.15rem;
  1397. display:flex;
  1398. justify-content:flex-start;
  1399. align-items:center;
  1400. gap:.25em;
  1401. }
  1402. .til-low i {
  1403. font-size:1em;
  1404. margin-top:.1rem;
  1405. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1406. -webkit-background-clip:text;
  1407. -webkit-text-fill-color:transparent;
  1408. }
  1409. .til-low a.rbvia {
  1410. font-size:.975em;
  1411. font-weight:normal;
  1412. color:var(--ColorText);
  1413. }
  1414. .til-low a.rbvia:hover {color:var(--ColorAccentOne);}
  1415. .til-low b {font-size:.975em; font-weight:normal; color:var(--ColorText);}
  1416.  
  1417. .topinforight {
  1418. position:relative;
  1419. display:flex;
  1420. justify-content:center;
  1421. align-items:center;
  1422. }
  1423. .topinforight a {
  1424. display:flex;
  1425. justify-content:center;
  1426. align-items:center;
  1427. }
  1428. .topinforight i {
  1429. font-size:1.4em;
  1430. color:var(--ColorTitle);
  1431. -webkit-transition: all 0.4s;
  1432. -moz-transition: all 0.4s;
  1433. -ms-transition: all 0.4s;
  1434. -o-transition: all 0.4s;
  1435. transition: all 0.4s;
  1436. }
  1437. .topinforight a:hover i {color:var(--ColorAccentOne);}
  1438. a.morebutton {cursor:help;}
  1439. a.morebutton.more-click {transform:rotate(90deg);}
  1440.  
  1441. .moreinfo {
  1442. position:absolute;
  1443. top:.75rem;
  1444. right:100%;
  1445. width:150px;
  1446. display:none;
  1447. flex-direction:column;
  1448. overflow:hidden;
  1449. background:var(--ColorPosts);
  1450. border:1px solid var(--ColorBorders);
  1451. border-radius:var(--Corners);
  1452. box-shadow:-2px 2px 2px rgba(0,0,0,.1);
  1453. z-index:99;
  1454. }
  1455. .moreinfo a {
  1456. width:100%;
  1457. font-size:.875em;
  1458. font-weight:normal;
  1459. color:var(--ColorText);
  1460. text-transform:uppercase;
  1461. padding:.5rem;
  1462. text-align:center;
  1463. border-bottom:1px solid var(--ColorBorders);
  1464. }
  1465. .moreinfo a:last-of-type {border-bottom:none;}
  1466. .moreinfo a:hover {color:var(--ColorPosts); background:var(--ColorAccentOne);}
  1467. a#copybutton {cursor:help;}
  1468.  
  1469. /*--- POST STUFF ---*/
  1470.  
  1471. article .caption p {
  1472. padding:.5rem 1rem .5rem 1rem;
  1473. margin:0;
  1474. }
  1475. .caption p {margin-top:0; margin-bottom:0;}
  1476.  
  1477. .reblog-content {
  1478. padding-bottom:0;
  1479. }
  1480.  
  1481. .caption:last-child p,
  1482. .reblog-content p:last-of-type {
  1483. padding-bottom: var(--Spacing);
  1484. }
  1485.  
  1486. .reblog-header {
  1487. padding:0;
  1488. margin:1rem;
  1489. }
  1490. .reblog-header img {
  1491. width:1.5em;
  1492. height:1.5em;
  1493. margin-right:.5em;
  1494. border-radius:100%;
  1495. }
  1496. .reblog-header a {color:var(--ColorTitle);}
  1497. .reblog-header a:hover {color:var(--ColorAccentTwo);}
  1498.  
  1499. p:empty {
  1500. display:none;
  1501. }
  1502.  
  1503. article .quote,
  1504. article .source {
  1505. padding:var(--Spacing);
  1506. }
  1507.  
  1508. article h1 {
  1509. margin:0;
  1510. padding:1rem;
  1511. font-family:'{text:title font}', sans-serif;
  1512. font-size:1.3rem;
  1513. color:var(--ColorTitle);
  1514. }
  1515. article h2 {
  1516. margin:0;
  1517. padding:1rem;
  1518. }
  1519.  
  1520. article img {display: block;}
  1521. article iframe,
  1522. article img {max-width: 100%;}
  1523.  
  1524. /*--- TAG / DAY PAGES ---*/
  1525. article.tdpage {
  1526. max-width:calc(540px + 2rem);
  1527. width:100%;
  1528. display:flex;
  1529. justify-content:flex-start;
  1530. align-items:center;
  1531. gap:.5em;
  1532. padding:1rem;
  1533. background:var(--ColorPosts);
  1534. border-radius:var(--Corners);
  1535. box-shadow:0 2px 8px -2px rgba(0,0,0,.1);
  1536. }
  1537.  
  1538. .tdpage-text {text-transform:lowercase;}
  1539. .tdpage-text b {}
  1540. .tdpage-text span {font-weight:500; color:var(--ColorTitle);}
  1541.  
  1542. .tdpage-icon {
  1543. display:flex;
  1544. justify-content:flex-end;
  1545. align-items:center;
  1546. }
  1547.  
  1548. .tdpage-icon i {
  1549. font-size:1.4em;
  1550. color:var(--ColorPosts);
  1551. text-shadow:0 1px rgba(0,0,0,.1);
  1552. padding:.3em;
  1553. background:var(--ColorAccentOne);
  1554. border-radius:100%;
  1555. }
  1556.  
  1557. /*-- poll posts --*/
  1558. .poll-post {
  1559. padding:1rem;
  1560. }
  1561. .poll-post p {padding-top:.5rem!important; padding-bottom:.5rem!important;}
  1562. .poll-post .poll-question {
  1563. font-size:1.2rem!important;
  1564. color:var(--ColorTitle);
  1565. padding:0!important;
  1566. margin:0!important;
  1567. }
  1568. .poll-post a.poll-row {}
  1569. .poll-post a.poll-row:hover {}
  1570. .poll-post .poll-see-results {
  1571. font-weight:bold;
  1572. text-transform:uppercase;
  1573. color:var(--ColorTitle)!important;
  1574. }
  1575.  
  1576. /*-- quote posts --*/
  1577. .quote {color:var(--ColorTitle)!important;}
  1578. .source {color:var(--ColorTitle)!important;}
  1579.  
  1580. /*-- link posts --*/
  1581. .npf-link-block, .linkpost {
  1582. color:var(--ColorPosts);
  1583. background:var(--ColorAccentOne);
  1584. margin:0!important;
  1585. border:none!important;
  1586. border-radius:0!important;
  1587. }
  1588. .npf-link-block a, .linkpost a {color:var(--ColorPosts); text-shadow:0 1px rgba(0,0,0,.1);}
  1589.  
  1590. /*-- answer posts --*/
  1591. .answer-post .caption:last-of-type {padding-top:0!important; padding-bottom:0!important;}
  1592. article .question {padding:1rem 1rem .5rem 1rem;}
  1593. .qheader {
  1594. display:flex;
  1595. justify-content:flex-start;
  1596. align-items:center;
  1597. gap:.5em;
  1598. }
  1599. .qheader li {list-style-type:none;}
  1600. .qheader li a {color:var(--ColorTitle);}
  1601. .qheader li a:hover {color:var(--ColorAccentTwo);}
  1602. .qheader .qicon {
  1603. display:flex;
  1604. justify-content:center;
  1605. align-items:center;
  1606. padding:1.5px;
  1607. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1608. border-radius:100%;
  1609. }
  1610. .qheader .qicon img {
  1611. width:1.5rem;
  1612. height:1.5rem;
  1613. padding:1px;
  1614. background:var(--ColorPosts);
  1615. border-radius:100%;
  1616. }
  1617. .qcont {
  1618. position:relative;
  1619. margin-top:1em;
  1620. padding:.5em 1em .5em 1em;
  1621. background:var(--ColorBackground);
  1622. border-radius:15px;
  1623. }
  1624. .qcont:after {
  1625. content:'';
  1626. position:absolute;
  1627. top:-.625em;
  1628. left:2.5em;
  1629. width:1.25em;
  1630. height:1.25em;
  1631. transform:rotate(45deg);
  1632. background:var(--ColorBackground);
  1633. }
  1634.  
  1635. article .replies, article .answer {
  1636. padding:.5rem 1rem 1rem 1rem;
  1637. }
  1638. .answerheader {
  1639. display:flex;
  1640. justify-content:flex-start;
  1641. align-items:center;
  1642. gap:.5em;
  1643. }
  1644. .answerheader li {list-style-type:none;}
  1645. .answerheader li a {color:var(--ColorTitle);}
  1646. .answerheader li a:hover {color:var(--ColorAccentTwo);}
  1647. .answerheader .aicon {
  1648. display:flex;
  1649. justify-content:center;
  1650. align-items:center;
  1651. padding:1.5px;
  1652. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1653. border-radius:100%;
  1654. }
  1655. .answerheader .aicon img {
  1656. width:1.5rem;
  1657. height:1.5rem;
  1658. padding:1px;
  1659. background:var(--ColorPosts);
  1660. border-radius:100%;
  1661. }
  1662. .answerheader a {color:var(--ColorTitle);}
  1663. .answerheader a:hover {color:var(--ColorAccentTwo);}
  1664. .answercont {}
  1665.  
  1666. /*--- AUDIO POSTS ---*/
  1667. .audiopost {}
  1668.  
  1669. .spotify_audio_player,
  1670. article iframe[src*='soundcloud'] {
  1671. max-height: calc(170px + var(--Spacing));
  1672. border: 0;
  1673. padding: var(--Spacing);
  1674. padding-bottom: 0;
  1675. }
  1676.  
  1677. /*--- CHAT POSTS ---*/
  1678. .chat li {
  1679. list-style-type:none;
  1680. padding:.5em;
  1681. }
  1682. .chat li:nth-of-type(odd) {background:var(--ColorAccentOne);}
  1683. .chat li:nth-of-type(even) {background:var(--ColorBackground);}
  1684. .chat li:nth-of-type(odd) b, .chat li:nth-of-type(odd) span {color:var(--ColorPosts);}
  1685.  
  1686. /*-- BOTTOM POST INFO --*/
  1687. .bottompostinfo {
  1688. display:flex;
  1689. justify-content:space-between;
  1690. align-items:center;
  1691. gap:1em;
  1692. padding:1rem;
  1693. border-top:1px solid var(--ColorBorders);
  1694. }
  1695.  
  1696. .bottominfoleft {
  1697. display:flex;
  1698. justify-content:flex-start;
  1699. align-items:center;
  1700. gap:.5em;
  1701. }
  1702. .bottominfoleft a {
  1703. display:flex;
  1704. justify-content:center;
  1705. align-items:center;
  1706. gap:.25em;
  1707. }
  1708. .bottominfoleft a i {
  1709. font-size:1.2em;
  1710. color:var(--ColorText);
  1711. -webkit-transition: all 0.4s;
  1712. -moz-transition: all 0.4s;
  1713. -ms-transition: all 0.4s;
  1714. -o-transition: all 0.4s;
  1715. transition: all 0.4s;
  1716. }
  1717. .bottominfoleft a:hover i {color:var(--ColorAccentOne);}
  1718. .bottominfoleft a span {
  1719. font-size:.9em;
  1720. font-weight:normal;
  1721. color:var(--ColorText);
  1722. text-transform:uppercase;
  1723. -webkit-transition: all 0.4s;
  1724. -moz-transition: all 0.4s;
  1725. -ms-transition: all 0.4s;
  1726. -o-transition: all 0.4s;
  1727. transition: all 0.4s;
  1728. }
  1729. .bottominfoleft a:hover span {color:var(--ColorAccentOne);}
  1730.  
  1731. a.tagsbutton, b.tagsbutton {display:none;}
  1732. a.clicktagsbutton {cursor:help;}
  1733. a.clicktagsbutton.tags-click i, a.clicktagsbutton.tags-click span {color:var(--ColorAccentOne);}
  1734.  
  1735. .bottominfoleft b {
  1736. font-size:.75em;
  1737. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1738. -webkit-background-clip:text;
  1739. -webkit-text-fill-color:transparent;
  1740. }
  1741.  
  1742. .bottominforight {
  1743. display:flex;
  1744. justify-content:flex-end;
  1745. align-items:center;
  1746. gap:.5em;
  1747. }
  1748. .bottominforight a {
  1749. display:flex;
  1750. justify-content:center;
  1751. align-items:center;
  1752. }
  1753.  
  1754. a.time-ago {
  1755. font-size:.9em;
  1756. font-weight:normal;
  1757. color:var(--ColorText);
  1758. text-transform:uppercase;
  1759. }
  1760. a.time-ago:hover {color:var(--ColorAccentOne);}
  1761.  
  1762. /*--- TAGS ---*/
  1763. .tags, .clicktags {
  1764. padding:.5em;
  1765. display:flex;
  1766. justify-content:flex-start;
  1767. align-items:center;
  1768. flex-wrap:wrap;
  1769. gap:.5em;
  1770. }
  1771. .tags span, .clicktags span {
  1772. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo));
  1773. -webkit-background-clip:text;
  1774. -webkit-text-fill-color:transparent;
  1775. }
  1776. .tags a, .clicktags a {color:var(--ColorText);}
  1777. .tags a:nth-of-type(odd):hover, .clicktags a:nth-of-type(odd):hover {color:var(--ColorAccentOne);}
  1778. .tags a:nth-of-type(even):hover, .clicktags a:nth-of-type(even):hover {color:var(--ColorAccentTwo);}
  1779.  
  1780. /*--- PERMALINK PAGE ---*/
  1781. .permalinkpage {
  1782. margin-top:1rem;
  1783. background:var(--ColorPosts);
  1784. border-radius:var(--Corners);
  1785. box-shadow:2px 2px 2px rgba(0,0,0,.1);
  1786. }
  1787.  
  1788. .permalink-info {
  1789. width:100%;
  1790. padding:1rem;
  1791. display:flex;
  1792. flex-direction:column;
  1793. justify-content:flex-start;
  1794. align-items:flex-start;
  1795. gap:1rem;
  1796. }
  1797. .permalink-info a {
  1798. display:flex;
  1799. justify-content:flex-start;
  1800. align-items:center;
  1801. gap:.5rem;
  1802. text-transform:lowercase;
  1803. }
  1804. .permalink-info a i {
  1805. font-size:1.2em;
  1806. color:var(--ColorTitle);
  1807. }
  1808. .permalink-info a span {color:var(--ColorText);}
  1809. .permalink-info a b {font-weight:600}
  1810.  
  1811. /* post notes */
  1812. .postnotes {width:100%; padding:1rem; border-top:1px solid var(--ColorBorders);}
  1813. ol.notes {
  1814. max-width: 100%;
  1815. margin:0;
  1816. padding:0;
  1817. }
  1818.  
  1819. .more_notes_link {
  1820. width:100%!important;
  1821. }
  1822. a.more_notes_link {
  1823. font-size:.925em;
  1824. font-weight:normal;
  1825. color:var(--ColorTitle);
  1826. letter-spacing:.075em;
  1827. text-transform:uppercase!important;
  1828. }
  1829. a.more_notes_link:hover {color:var(--ColorAccentOne);}
  1830.  
  1831. ol.notes li.note blockquote {
  1832. display:none;
  1833. }
  1834.  
  1835. ol.notes li.note {
  1836. padding:.5rem .75rem .5rem 0;
  1837. list-style-type:none;
  1838. display:flex;
  1839. align-items:center;
  1840. gap:.25rem;
  1841. font-size:.975em;
  1842. }
  1843. ol.notes li.note:first-of-type {border-top:none;}
  1844. ol.notes li.note a {text-transform:lowercase;}
  1845.  
  1846. ol.notes li.note img.avatar {
  1847. width:1.75em!important;
  1848. height:1.75em!important;
  1849. display:flex;
  1850. align-items:center;
  1851. margin-right:.25rem!important;
  1852. padding:2px;
  1853. background:var(--ColorAccentOne);
  1854. border-radius:100%;
  1855. }
  1856.  
  1857. ol.notes li.note.reblog::after {
  1858. content:'\ec37';
  1859. color:var(--ColorAccentOne);
  1860. }
  1861.  
  1862. ol.notes li.note.like::after {
  1863. content:'\eb04';
  1864. color:var(--ColorAccentTwo);
  1865. }
  1866.  
  1867. ol.notes li.note.reply::after {
  1868. content:'\e9d7';
  1869. color:var(--ColorAccentTwo);
  1870. }
  1871. ol.notes li.note.reply span {
  1872. width:calc(100% - 3rem);
  1873. color:var(--ColorText);
  1874. white-space:nowrap;
  1875. overflow:hidden;
  1876. text-overflow:ellipsis;
  1877. }
  1878. ol.notes li.note.reply span.action {
  1879. color:var(--ColorText);
  1880. }
  1881.  
  1882. ol.notes li.note.original_post::after {
  1883. content:'\eb68';
  1884. color:var(--ColorTitle);
  1885. }
  1886. ol.notes li.note.original_post {
  1887. font-weight:bold;
  1888. color:var(--ColorTitle);
  1889. }
  1890.  
  1891. 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 {
  1892. position:relative;
  1893. }
  1894. 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;}
  1895. 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 {
  1896. position:absolute;
  1897. right:0;
  1898. font-family:'cappuccicons';
  1899. }
  1900.  
  1901. /*--- PAGINATION ---*/
  1902. .pagination {
  1903. margin-bottom:1rem;
  1904. display:flex;
  1905. justify-content:space-between;
  1906. align-items:center;
  1907. gap:.5em;
  1908. padding:1rem;
  1909. background:var(--ColorPosts);
  1910. border-radius:var(--Corners);
  1911. box-shadow:2px 2px 2px rgba(0,0,0,.1);
  1912. }
  1913. .pagination span {font-size:.875em; letter-spacing:.075em; text-transform:uppercase; cursor:default;}
  1914. .pagination-btns {
  1915. display:flex;
  1916. justify-content:flex-start;
  1917. align-items:center;
  1918. gap:.5rem;
  1919. }
  1920.  
  1921. a.pg-prev, a.pg-next {
  1922. display:flex;
  1923. justify-content:center;
  1924. align-items:center;
  1925. }
  1926. a.pg-prev:hover, a.pg-next:hover {transform:scale(1.1);}
  1927. a.pg-prev i, a.pg-next i {
  1928. font-size:1.6em;
  1929. color:var(--ColorTitle);
  1930. -webkit-transition: all 0.4s;
  1931. -moz-transition: all 0.4s;
  1932. -ms-transition: all 0.4s;
  1933. -o-transition: all 0.4s;
  1934. transition: all 0.4s;
  1935. }
  1936. a.pg-prev:hover i {color:var(--ColorAccentOne);}
  1937. a.pg-next:hover i {color:var(--ColorAccentTwo);}
  1938.  
  1939. a#nobtn {opacity:.45; cursor:not-allowed;}
  1940. a#nobtn:hover {transform:none;}
  1941.  
  1942. /*--- RESPONSIVENESS ---*/
  1943. @media only screen and (max-width: 1100px) {
  1944. #leftsidebar {right:-401px;}
  1945. body.sidebar-click #leftsidebar {right:0; z-index:999;}
  1946.  
  1947. a#sidebarbutton {display:flex;}
  1948. a#sidebarbutton:after {opacity:0;}
  1949. a#sidebarbutton:hover:after {opacity:1;}
  1950. a#sidebarbutton i {transform:rotateY(180deg);}
  1951. body.sidebar-click a#sidebarbutton:after {opacity:1;}
  1952. body.sidebar-click a#sidebarbutton i {transform:rotateY(0);}
  1953.  
  1954. section {margin-right:0;}
  1955. }
  1956.  
  1957. {CustomCSS}
  1958. </style>
  1959.  
  1960. <!--✻✻✻✻✻✻ UN-BLUE POLLS by @glenthemes ✻✻✻✻✻✻-->
  1961. <link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
  1962. <style>
  1963. .poll-post {
  1964. --Poll-Question-Font-Size:1.2em;
  1965.  
  1966. --Poll-Option-Background-Color:var(--ColorBackground);
  1967. --Poll-Option-Corner-Rounding:var(--Corners);
  1968. --Poll-Option-Border-Size:1px;
  1969. --Poll-Option-Border-Color:var(--ColorBackground);
  1970. --Poll-Option-Padding:.25rem;
  1971. --Poll-Option-Font-Size:1em;
  1972. --Poll-Option-Spacing:.25rem;
  1973. --Poll-Option-Text-Color:var(--ColorText);
  1974.  
  1975. --Poll-Option-HOVER-Border-Color:var(--ColorAccentOne);
  1976. --Poll-Option-HOVER-Background-Color:var(--ColorAccentOne);
  1977. --Poll-Option-HOVER-Text-Color:var(--ColorPosts);
  1978. --Poll-Option-HOVER-Speed:0.4s;
  1979. }
  1980. </style>
  1981.  
  1982. </head>
  1983.  
  1984. <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">
  1985.  
  1986. <!--✻✻✻✻✻✻ npf audio player by @glenthemes ✻✻✻✻✻✻-->
  1987. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  1988. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  1989. <script>
  1990. tumblr_npf_audio({
  1991. emptyTitleText: "untitled track",
  1992. emptyArtistText: "untitled artist",
  1993. emptyAlbumText: "untitle album",
  1994.  
  1995. titleLabel: "track:",
  1996. artistLabel: "artist:",
  1997. albumLabel: "album:"
  1998. });
  1999. </script>
  2000. <style edit-npf-audio-player>
  2001. figcaption.audio-caption,
  2002. figcaption.audio-caption + audio[controls]{
  2003. display:none!important;
  2004. }
  2005. .npf-audio-wrapper {
  2006. --NPF-Audio-Buttons-Size: 1.4rem;
  2007. --NPF-Audio-Buttons-Color:var(--ColorPosts); /* color of play & pause buttons */
  2008. --NPF-Audio-Buttons-Spacing: 1.3rem; /* space between buttons and song info */
  2009. --NPF-Audio-Image-Size:85px;
  2010. --NPF-Audio-Image-Spacing:0px; /* gap between player info and cover image */
  2011. }
  2012.  
  2013. .npf-audio-background {
  2014. background:linear-gradient(to right, var(--ColorAccentOne), var(--ColorAccentTwo)); /* background color of player (optional) */
  2015. padding:1.5rem;
  2016. }
  2017.  
  2018. .npf-audio-title-label,
  2019. .npf-audio-artist-label,
  2020. .npf-audio-album-label {
  2021. font-weight:bold;
  2022. }
  2023.  
  2024. .npf-audio-title,
  2025. .npf-audio-artist,
  2026. .npf-audio-album {
  2027. color:var(--ColorPosts); /* color of audio text (optional) */
  2028. }
  2029. </style>
  2030.  
  2031. <!-- main container -->
  2032. <main>
  2033.  
  2034. <!-- MINIBAR / HEADER --->
  2035. <header>
  2036. <div class="minibartop">
  2037. <div class="topicon"><a target="_blank" href="//tumblr.com/follow/{Name}" title="follow @{Name}"><img src="{PortraitURL-128}"></a></div>
  2038. <a class="minilink" href="/" title="home"><i class="ti ti-home"></i></a>
  2039. <a class="minilink" href="/ask" title="ask"><i class="ti ti-message-circle"></i></a>
  2040. <a class="minilink" href="/archive" title="archive"><i class="ti ti-archive"></i></a>
  2041. {block:ifSidebarLink1}<a class="minilink" title="{text:Sidebar Link 1 Name}" href="{text:Sidebar Link 1}"><i class="ti ti-{text:Sidebar Link 1 Icon}"></i></a>{/block:ifSidebarLink1}
  2042. {block:ifSidebarLink2}<a class="minilink" title="{text:Sidebar Link 2 Name}" href="{text:Sidebar Link 2}"><i class="ti ti-{text:Sidebar Link 2 Icon}"></i></a>{/block:ifSidebarLink2}
  2043. {block:ifSidebarLink3}<a class="minilink" title="{text:Sidebar Link 3 Name}" href="{text:Sidebar Link 3}"><i class="ti ti-{text:Sidebar Link 3 Icon}"></i></a>{/block:ifSidebarLink3}
  2044. {block:ifSidebarLink4}<a class="minilink" title="{text:Sidebar Link 4 Name}" href="{text:Sidebar Link 4}"><i class="ti ti-{text:Sidebar Link 4 Icon}"></i></a>{/block:ifSidebarLink4}
  2045. <!-- explore tab -->
  2046. {block:ifExplore}<div class="explorewrap">
  2047. <a class="minilink" title="explore" id="explorebutton"><i class="ti ti-map-share"></i></a>
  2048. <div class="explore">
  2049. <div class="explore-title"><b>explore</b><i class="ti ti-map"></i></div>
  2050. <div class="explore-wrap">
  2051. <a href="{text:Explore Link 1}"><i class="ti ti-link"></i><span>{text:Explore Link 1 Name}</span></a>
  2052. {block:ifExploreLink2}<a href="{text:Explore Link 2}"><i class="ti ti-link"></i><span>{text:Explore Link 2 Name}</span></a>{/block:ifExploreLink2}
  2053. {block:ifExploreLink3}<a href="{text:Explore Link 3}"><i class="ti ti-link"></i><span>{text:Explore Link 3 Name}</span></a>{/block:ifExploreLink3}
  2054. {block:ifExploreLink4}<a href="{text:Explore Link 4}"><i class="ti ti-link"></i><span>{text:Explore Link 4 Name}</span></a>{/block:ifExploreLink4}
  2055. {block:ifExploreLink5}<a href="{text:Explore Link 5}"><i class="ti ti-link"></i><span>{text:Explore Link 5 Name}</span></a>{/block:ifExploreLink5}
  2056. {block:ifExploreLink6}<a href="{text:Explore Link 6}"><i class="ti ti-link"></i><span>{text:Explore Link 6 Name}</span></a>{/block:ifExploreLink6}
  2057. </div>
  2058. </div>
  2059. </div>{/block:ifExplore}<!-- explore wrap -->
  2060. <!-- updates tab -->
  2061. {block:ifUpdates}<div class="updateswrap">
  2062. <a class="minilink" title="updates" id="updatesbutton"><i class="ti ti-bell"></i></a>
  2063. <div class="updates">
  2064. <div class="updates-title"><b>updates</b><i class="ti ti-bell-ringing"></i></div>
  2065. <div class="updates-wrap">
  2066. {block:ifUpdate1}<li><i class="ti ti-{text:Update Icon 1}"></i><span>{text:Update 1}</span></li>{/block:ifUpdate1}
  2067. {block:ifUpdate2}<li><i class="ti ti-{text:Update Icon 2}"></i><span>{text:Update 2}</span></li>{/block:ifUpdate2}
  2068. {block:ifUpdate3}<li><i class="ti ti-{text:Update Icon 3}"></i><span>{text:Update 3}</span></li>{/block:ifUpdate3}
  2069. {block:ifUpdate4}<li><i class="ti ti-{text:Update Icon 4}"></i><span>{text:Update 4}</span></li>{/block:ifUpdate4}
  2070. {block:ifUpdate5}<li><i class="ti ti-{text:Update Icon 5}"></i><span>{text:Update 5}</span></li>{/block:ifUpdate5}
  2071. {block:ifUpdate6}<li><i class="ti ti-{text:Update Icon 6}"></i><span>{text:Update 6}</span></li>{/block:ifUpdate6}
  2072. </div>
  2073. </div>
  2074. </div>{/block:ifUpdates}<!-- updates wrap -->
  2075. </div>
  2076. <div class="minibarlow">
  2077. <a id="totop" class="minilink" title="back to top" href="#top" target="_self"><i class="ti ti-arrow-narrow-up"></i></a>
  2078. <!--- CREDIT: DO NOT TOUCH --->
  2079. <a title="laura theme by sage" id="credit" class="minilink" href="//phantomcodes.tumblr.com"><i class="ti ti-ghost-2"></i></a>
  2080. </div>
  2081. </header>
  2082.  
  2083. <!--- FIXED BUTTONS --->
  2084. <div class="fixedbuttons">
  2085. <a id="sidebarbutton" title="toggle sidebar"><i class="ti ti-arrow-bar-to-right"></i></a>
  2086. <!-- day/night -->
  2087. <button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
  2088. <span class="light-on" title="turn off the lights"><i class="ti ti-moon"></i></span>
  2089. <span class="light-off" title="turn on the lights"><i class="ti ti-sun-high"></i></span>
  2090. </button>
  2091. <a title="toggle controls" id="controlsbutton"><i class="ti ti-settings"></i></a>
  2092. </div>
  2093.  
  2094. <!--- LEFT SIDEBAR --->
  2095. <div id="leftsidebar">
  2096. <div class="sidebar-top">
  2097. <div class="sidebar-img">
  2098. {block:ifSidebarImage}<img src="{image:Sidebar}">{/block:ifSidebarImage}
  2099. <div class="sidebar-icon"><img src="{PortraitURL-128}"></div>
  2100. </div>
  2101. <a class="sidebar-title" href="/">
  2102. <b>{text:Blog Title}</b>
  2103. <span>@{Name}</span>
  2104. </a>
  2105. <div class="sidebar-desc">{text:Custom Description}</div>
  2106. <!-- sidebar stats -->
  2107. {block:ifSidebarStats}<div class="sidebar-stats">
  2108. {block:ifSidebarStat1}<li><i class="ti ti-{text:Sidebar Stat Icon 1}"></i><b>{text:Sidebar Stat 1}</b></li>{/block:ifSidebarStat1}
  2109. {block:ifSidebarStat2}<li><i class="ti ti-{text:Sidebar Stat Icon 2}"></i><b>{text:Sidebar Stat 2}</b></li>{/block:ifSidebarStat2}
  2110. {block:ifSidebarStat3}<li><i class="ti ti-{text:Sidebar Stat Icon 3}"></i><b>{text:Sidebar Stat 3}</b></li>{/block:ifSidebarStat3}
  2111. {block:ifSidebarStat4}<li><i class="ti ti-{text:Sidebar Stat Icon 4}"></i><b>{text:Sidebar Stat 4}</b></li>{/block:ifSidebarStat4}
  2112. </div>{/block:ifSidebarStats}
  2113. </div>
  2114. <div class="searchbar"><!-- search bar -->
  2115. <form class="search" action="javascript:return false">
  2116. <i class="ti ti-search"></i>
  2117. <input type="text" class="query" placeholder="search {Name} . . .">
  2118. </form>
  2119. </div>
  2120. </div><!-- left sidebar ends -->
  2121.  
  2122. <!-- posts -->
  2123. <section>
  2124.  
  2125. <!--- TAG AND DAY PAGES --->
  2126. {block:TagPage}
  2127. <article class="tdpage">
  2128. <div class="tdpage-icon"><i class="ti ti-tag-starred"></i></div>
  2129. <div class="tdpage-text">showing <b>{tagresultcount}</b> posts tagged <span>#{Tag}</span></div>
  2130. </article>
  2131. {/block:TagPage}
  2132.  
  2133. {block:DayPage}
  2134. <article class="tdpage">
  2135. <div class="tdpage-icon"><i class="ti ti-calendar"></i></div>
  2136. <div class="tdpage-text">showing posts made on <span>{Month} {DayOfMonth}{DayofMonthSuffix}, {Year}</span></div>
  2137. </article>
  2138. {/block:DayPage}
  2139.  
  2140. {block:Posts}
  2141. <article id="post-{PostID}" class="{posttype}-post posts">
  2142. <div class="article-wrap">
  2143.  
  2144. {block:Date}<div class="floating"><!-- floating info -->
  2145. <div class="sticky-float">
  2146. {block:PinnedPostLabel}<a title="pinned" class="pinned-post" href="{Permalink}"><i class="ti ti-pin"></i></a>{/block:PinnedPostLabel}
  2147. <a title="reblog" class="reblog-btn" href="{ReblogURL}" target="_blank"><i class="ti ti-repeat"></i></a>
  2148. <a title="like" class="like-button" href="#">{LikeButton} <span class="actual-button"><i class="ti ti-heart-filled"></i></span></a>
  2149. </div>
  2150. </div>
  2151.  
  2152. <div class="topinfo"><!-- top post info -->
  2153. <div class="topinfoleft">
  2154. {block:NotReblog}
  2155. <div class="til-name">
  2156. <div class="til-img"><img src="{PortraitURL-128}"></div>
  2157. <div class="til-top">
  2158. <a href="{Permalink}">{text:Blog Name}</a>
  2159. <div class="til-low"><i class="ti ti-map-pin"></i><b>original post</b></div>
  2160. </div>
  2161. </div>
  2162. {/block:NotReblog}
  2163. {block:RebloggedFrom}
  2164. <div class="til-name">
  2165. <div class="til-img"><img src="{ReblogRootPortraitURL-128}"></div>
  2166. <div class="til-top">
  2167. <a target="_blank" href="{ReblogRootURL}">{ReblogRootName}</a>
  2168. <div class="til-low"><i class="ti ti-repeat"></i><a title="reblogged from" class="rbvia" href="{ReblogParentURL}">{ReblogParentName}</a></div>
  2169. </div>
  2170. </div>
  2171. {/block:RebloggedFrom}
  2172. </div>
  2173. <div class="topinforight">
  2174. <a title="more info" class="morebutton"><i class="ti ti-dots-vertical"></i></a>
  2175. <div class="moreinfo">
  2176. <a href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}">{ShortMonth} {DayofMonth}{DayofMonthSuffix} {Year}</a>
  2177. <a href="{Permalink}">permalink</a>
  2178. <a id="copybutton" data-clipboard-text="{Permalink}">copy link</a>
  2179. </div>
  2180. </div>
  2181. </div><!-- top post info ends -->
  2182. {/block:Date}
  2183. <div class="post-wrap">
  2184. {block:Photo}
  2185. <div class="legacy-photo"><img src="{PhotoURL-HighRes}" alt="{photoalt}" class="photos"></div>
  2186. {/block:Photo}
  2187.  
  2188. {block:Photoset}
  2189. <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>
  2190. {/block:Photoset}
  2191.  
  2192. {block:Panorama}
  2193. <div class="legacy-photo"><img src="{photourl-panorama}" alt="{photoalt}"></div>
  2194. {/block:Panorama}
  2195.  
  2196. {block:Quote}<!-- quote posts -->
  2197. <div class="quote">
  2198. "{Quote}"
  2199. </div>
  2200. <div class="source">
  2201. -{Source}
  2202. </div>
  2203. {/block:Quote}
  2204.  
  2205. {block:Chat}<!-- chat posts -->
  2206. <div class="chat">
  2207. {block:Lines}
  2208. <li>
  2209. {block:Label}<b>{Label}</b>{/block:Label}
  2210. <span>{Line}</span>
  2211. </li>
  2212. {/block:Lines}
  2213. </div>
  2214. {/block:Chat}
  2215.  
  2216. {block:Link}<!-- link posts -->
  2217. <div class="linkpost">
  2218. <a href="{URL}" target="_blank">
  2219. {Name}
  2220. </a>
  2221. </div>
  2222. {/block:Link}
  2223. {block:Video}<!-- video posts -->
  2224. {Video-500}
  2225. {/block:Video}
  2226. {block:Audio}<!-- audio posts -->
  2227. <div class="audiopost">
  2228. {audioembed}
  2229. </div>
  2230. {/block:Audio}
  2231. {block:Answer}<!-- answer posts -->
  2232. <div class="answer-post">
  2233. <div class="question">
  2234. <div class="qheader"><div class="qicon"><img src="{AskerPortraitURL-128}"></div><li><b>{Asker}</b> sent:</li></div>
  2235. <div class="qcont">{Question}</div>
  2236. </div>
  2237. {block:Answerer}
  2238. <div class="answer">
  2239. <div class="answerheader"><div class="aicon"><img src="{AnswererPortraitURL-128}"></div><li><b>{Answerer}</b> answered:</li></div>
  2240. <div class="answercont">{Answer}</div>
  2241. </div>
  2242. {/block:Answerer}
  2243. {block:NotReblog}
  2244. <div class="answer">
  2245. <div class="answerheader"><div class="aicon"><img src="{PortraitURL-128}"></div><li><b><a href="/">{text:Blog Name}</a></b> answered:</li></div>
  2246. <div class="answercont">{Replies}</div>
  2247. </div>
  2248. {/block:NotReblog}
  2249. </div>{/block:Answer}
  2250. <!-- text posts -->
  2251. <div class="caption {block:notreblog} original-post {/block:notreblog}">
  2252. {block:Text}
  2253. {block:Title}<h2>{Title}</h2>{/block:Title}
  2254. {/block:Text}
  2255. {block:notreblog}
  2256. {block:caption}{Caption}{/block:caption}
  2257. {block:Text}{body}{/block:Text}
  2258. {/block:notreblog}
  2259. {block:Rebloggedfrom}
  2260. {block:Reblogs}
  2261. <div class="reblogs">
  2262. <div class="reblog-header {block:IsOriginalEntry}original{/block:IsOriginalEntry} flex align-center">
  2263. <a href="{permalink}" target="_blank"><img src="{PortraitURL-64}" alt="{username}'s avatar"></a>
  2264. <a href="{permalink}" target="_blank" {block:isdeactivated}class="inactive"{/block:isdeactivated}>
  2265. {username}
  2266. </a>
  2267. </div>
  2268. <div class="reblog-content">
  2269. {Body}
  2270. </div>
  2271. </div>
  2272. {/block:Reblogs}
  2273. {/block:RebloggedFrom}
  2274. </div>
  2275. </div><!--- post wrap --->
  2276. {block:Date}<!-- BOTTOM POST INFO --->
  2277. <div class="bottompostinfo">
  2278. <div class="bottominfoleft">
  2279. <!-- tagsbutton -->
  2280. {block:HasTags}<a class="{select:tags}button"><i class="ti ti-tag"></i><span>tags</span></a>{/block:HasTags}
  2281. {block:HasTags}{block:NoteCount}<b class="{select:tags}button">•</b>{/block:NoteCount}{/block:HasTags}
  2282. {block:NoteCount}<a class="notecount" href="{Permalink}"><span>{NoteCountWithLabel}</span></a>{/block:NoteCount}
  2283. </div>
  2284. <div class="bottominforight">
  2285. <a class="time-ago" href="{Permalink}">{TimeStamp}</a>
  2286. </div>
  2287. </div>
  2288. {/block:Date}
  2289. </div><!-- bottom post info ends -->
  2290. <!--- TAGS --->
  2291. {block:HasTags}
  2292. <div class="{select:Tags}">
  2293. {block:Tags}<a href="{TagURL}"><span>#</span>{Tag}</a>{/block:Tags}
  2294. </div>
  2295. {/block:HasTags}
  2296. </div><!-- article-wrap -->
  2297.  
  2298.  
  2299. <!--- PERMALINK PAGE --->
  2300. {block:PermalinkPage}{block:Date}<div class="permalinkpage">
  2301. <div class="permalink-info">
  2302. {block:NotReblog}
  2303. <a href="/"><i class="ti ti-map-pin"></i><span>original post by <b>{text:Blog Name}</b></span></a>
  2304. {/block:NotReblog}
  2305. {block:RebloggedFrom}
  2306. <a href="{ReblogRootURL}"><i class="ti ti-map-pin"></i><span>originally posted by <b>{ReblogRootName}</b></span></a>
  2307. <a href="{ReblogParentURL}"><i class="ti ti-refresh"></i><span>reblogged from <b>{ReblogParentName}</b></span></a>
  2308. {/block:RebloggedFrom}
  2309. <a><i class="ti ti-calendar-heart"></i><span class="date">{Month} {DayofMonth}{DayofMonthSuffix} {Year} with {NoteCountWithLabel}</span></a>
  2310. </div>
  2311. {block:NoteCount}{block:PostNotes}<!-- post notes -->
  2312. <div class="postnotes">
  2313. {PostNotes-64}
  2314. </div>{/block:PostNotes}{/block:NoteCount}
  2315. </div>{/block:Date}{/block:PermalinkPage}
  2316.  
  2317. </article><!--- POSTS END --->
  2318. {/block:Posts}
  2319.  
  2320. {block:Pagination}<article class="pagination"><!-- PAGINATION -->
  2321. <div class="pagination-btns">{block:PreviousPage}
  2322. <a title="previous page" class="pg-prev" href="{PreviousPage}"><i class="ti ti-arrow-narrow-left"></i></a>
  2323. {/block:PreviousPage}
  2324. <a class="pg-prev" id="nobtn" {block:PreviousPage}style="display:none;"{/block:PreviousPage}><i class="ti ti-arrow-narrow-left"></i></a>
  2325. <a class="pg-next" id="nobtn" {block:NextPage}style="display:none;"{/block:NextPage}><i class="ti ti-arrow-narrow-right"></i></a>
  2326. {block:NextPage}
  2327. <a title="next page" class="pg-next" href="{NextPage}"><i class="ti ti-arrow-narrow-right"></i></a>
  2328. {/block:NextPage}</div>
  2329. <span>page <b>{CurrentPage}</b> of {TotalPages}</span>
  2330. </article>{/block:Pagination}
  2331.  
  2332. </section>
  2333. </main>
  2334. </body>
  2335.  
  2336. <script>
  2337.  
  2338. /// photoset
  2339. $(document).ready(function(){
  2340. $('.photo-slideshow').pxuPhotoset({
  2341. lightbox: true,
  2342. rounded: '',
  2343. gutter: '4px',
  2344. borderRadius: '',
  2345. photoset: '.photo-slideshow',
  2346. photoWrap: '.photo-data',
  2347. photo: '.pxu-photo'
  2348. });
  2349. });
  2350.  
  2351. // tooltips
  2352. tippy('[title]', {
  2353. theme: 'custom',
  2354. arrow: true,
  2355. followCursor: true,
  2356. delay: 100,
  2357. placement: 'top',
  2358. offset: "0, 20",
  2359. zIndex: 9999999999,
  2360. maxWidth: 400,
  2361.  
  2362. content(reference) {
  2363. const title = reference.getAttribute('title');
  2364. reference.removeAttribute('title');
  2365. return title;
  2366. },
  2367. });
  2368.  
  2369. // notes
  2370. $('article').find('.notecount').each(function(){
  2371. var n = $(this).html().split(' ')[0].replace(/,/g, '');
  2372. if (n > 999 & n < 999999) {
  2373. n = Math.floor(n / 100) / 10;
  2374. $(this).text(n + 'k notes');
  2375. }
  2376. if (n > 999999) {
  2377. n = Math.floor(n / 10000) / 100;
  2378. $(this).text(n + 'm notes');
  2379. }
  2380. });
  2381.  
  2382. // videos
  2383. $(document).ready(function() {
  2384. flexibleFrames($(".video")); // $(".video") is the class selector passed in the argument
  2385. });
  2386.  
  2387. // toggle tags
  2388. $(document).ready(function(){
  2389. $('.clicktags').hide();
  2390. $('.clicktagsbutton').click(function() {
  2391. $(this).closest('article').find('.clicktags').slideToggle(0);
  2392. $(this).toggleClass('tags-click');
  2393. return false;
  2394. });
  2395. });
  2396.  
  2397. // more info popup
  2398. $(document).ready(function(){
  2399. $('.moreinfo').hide();
  2400. $('.morebutton').click(function() {
  2401. $('morebutton').toggleClass('more-click');
  2402. $(this).closest('article').find('.moreinfo').slideToggle(0);
  2403. $(this).toggleClass('more-click');
  2404. return false;
  2405. });
  2406. });
  2407.  
  2408. // tumblr controls
  2409. $(document).ready(function(){
  2410. $('a#controlsbutton').click(function(){
  2411. $('body').toggleClass('controls-click');
  2412. });
  2413. });
  2414.  
  2415. // explore tab
  2416. $(document).ready(function(){
  2417. $('a#explorebutton').click(function(){
  2418. $('body').toggleClass('explore-click');
  2419. });
  2420. });
  2421.  
  2422. // updates tab
  2423. $(document).ready(function(){
  2424. $('a#updatesbutton').click(function(){
  2425. $('body').toggleClass('updates-click');
  2426. });
  2427. });
  2428.  
  2429. // sidebar popup
  2430. $(document).ready(function(){
  2431. $('a#sidebarbutton').click(function(){
  2432. $('body').toggleClass('sidebar-click');
  2433. });
  2434. });
  2435.  
  2436. // searchbar
  2437. $(document).ready(function(){
  2438. $('a#searchbutton').click(function(){
  2439. $('body').toggleClass('search-click');
  2440. });
  2441. });
  2442. $(document).ready(function(){
  2443. $('.search').submit(function(event){
  2444. var value = $('input:first').val();
  2445. location.replace('http://{Name}.tumblr.com/search/' + value);
  2446. });
  2447. });
  2448.  
  2449. // scroll to top
  2450. $(document).ready(function(){
  2451. $('a#totop').click(function(){
  2452. $('html, body').animate({scrollTop : 0},800);
  2453. return false;
  2454. });
  2455. });
  2456.  
  2457. var mybutton = document.getElementById("totop");
  2458. window.onscroll = function() {scrollFunction()};
  2459.  
  2460. function scrollFunction() {
  2461. if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
  2462. mybutton.style.display = "flex";
  2463. } else {
  2464. mybutton.style.display = "none";
  2465. }
  2466. }
  2467.  
  2468. // day/night mode
  2469. const toggle = document.getElementById("theme-toggle");
  2470.  
  2471. toggle.onclick = function () {
  2472. // add class to html and make transition snappy
  2473. document.documentElement.classList.add("theme-transition");
  2474. // alright lets retrive the info from data-theme
  2475. let currentTheme = document.documentElement.getAttribute("data-theme");
  2476. // if it's dark already, let's go into the light
  2477. let targetTheme = "light";
  2478. // but if it is light let's toggle dark mode
  2479. if (currentTheme === "light") {
  2480. targetTheme = "dark";
  2481. }
  2482. // ok now that theme has been toggled, get rid of snappy transition
  2483. window.setTimeout(function () {
  2484. document.documentElement.classList.remove("theme-transition");
  2485. }, 50);
  2486. // we're going to save our theme preference now
  2487. document.documentElement.setAttribute("data-theme", targetTheme);
  2488. localStorage.setItem("theme", targetTheme);
  2489. };
  2490.  
  2491. // remove empty p tags
  2492. for (const p of document.querySelectorAll('p')) {
  2493. if (p.innerHTML.trim() === '') {
  2494. p.remove()
  2495. }
  2496. }
  2497. // create posts array
  2498. let posts = []
  2499. {block:Posts}
  2500. posts.push({ npf: JSON.parse({JSNPF}), id: {JSPostId}})
  2501. {/block:Posts}
  2502.  
  2503. //function for updating post types
  2504. function updateTypes(type, article) {
  2505. article.classList.remove('text-post')
  2506. article.classList.add(`${ type }-post`, 'npf-post')
  2507. }
  2508.  
  2509. // loop through array to get each post
  2510. for (const post of posts) {
  2511. let npf = post.npf
  2512. let article = document.getElementById(`post-${post.id}`)
  2513. // select captions that have something in them
  2514. let caption = article.querySelector('.caption:is(:not(:empty))')
  2515. if (caption != null && article.classList.contains('text-post')) {
  2516. // if content exists
  2517. if (npf.trail.length || npf.content.length) {
  2518. // assign various post types based on NPF data
  2519. switch (npf.trail[0]?.content[0]?.type ?? npf.content[0].type) {
  2520. case 'image':
  2521. updateTypes('photos', article)
  2522. if (article.querySelector('.npf_row') == null) {
  2523. caption.prepend(article.querySelector('figure'))
  2524. }
  2525. break
  2526. case 'video':
  2527. updateTypes('video', article)
  2528. let video = article.querySelector('figure')
  2529. caption.prepend(video)
  2530. break
  2531. case 'link':
  2532. updateTypes('link', article)
  2533. case 'audio':
  2534. updateTypes('audio', article)
  2535. break
  2536. case 'quote':
  2537. updateTypes('quote', article)
  2538. }
  2539.  
  2540. // if there are photos
  2541. if (article.classList.contains('photos-post')) {
  2542. let photoset = document.createElement('div')
  2543. photoset.classList.add('npf-photos')
  2544. caption.prepend(photoset)
  2545. // find where a photoset would be split up by another content block
  2546. let photoBreak = article.querySelector('.reblog-content p, .reblog-content h1, .reblog-content h2')
  2547. let elements = []
  2548. if (photoBreak) {
  2549. let prevElement = photoBreak.parentNode.firstElementChild
  2550. while (prevElement !== photoBreak) {
  2551. elements.push(prevElement)
  2552. prevElement = prevElement.nextElementSibling
  2553. }
  2554. }
  2555. // if there is nothing that breaks up the photoset, select all rows
  2556. else {
  2557. elements = article.querySelectorAll('.npf_row')
  2558. }
  2559. // move each row to the top
  2560. for (const el of elements) {
  2561. photoset.append(el)
  2562. }
  2563. if (article.querySelectorAll('.npf_row').length > 1) {
  2564. updateTypes('photoset', article)
  2565. }
  2566. else {
  2567. updateTypes('photo', article)
  2568. }
  2569. }
  2570.  
  2571. // clean up any potential stray reblog headers
  2572. let reblogHeader = article.querySelector('.reblog-header')
  2573. let reblogContent = article.querySelector('.reblog-content')
  2574. if (reblogHeader?.nextElementSibling === reblogContent && reblogContent?.childElementCount === 0) {
  2575. reblogHeader.remove()
  2576. reblogContent.remove()
  2577. }
  2578. }
  2579. }
  2580. }
  2581.  
  2582. </script>
  2583. </html>
Advertisement
Add Comment
Please, Sign In to add comment