nicolas-sage

theme 31: laura (novid)

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