API tools faq
paste
themesbydoori

Earl WIP

themesbydoori
Nov 21st, 2024 (edited)
94
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 74.01 KB | None | 0 0
raw download clone embed print report
  1. <!----------------------------------------------------
  2.  
  3. Earl by @sheathemes
  4.  
  5. Credits
  6.  
  7. - NPF base code: https://github.com/cornetespoir/npf-theme-base/blob/main/reverse-compatible-template.html
  8. - Jquery free NPF base code: https://github.com/flipsewtf/Tumblr-basecode
  9. - Time ago plugin: https://bychloethemes.tumblr.com/plugins/timeago
  10. - Jquery free version: https://github.com/flipsewtf/TimeAgo
  11. - Custom audio plugin: https://annasthms.tumblr.com/more/js/customaudio
  12. - Tippy.js: https://atomiks.github.io/tippyjs/
  13. - Font icons: https://tabler.io/
  14. - Sidebar images: https://unsplash.com/
  15.  
  16. Full credits: https://sheathemes.tumblr.com/credits
  17.  
  18. ----------------------------------------------------->
  19.  
  20. <!DOCTYPE html>
  21. <html lang="en" data-theme="light">
  22. <head>
  23.  
  24. <title>{title}{block:PermalinkPage}{block:PostSummary}: {PostSummary}{/block:PostSummary}{/block:PermalinkPage} {block:TagPage}/ #{Tag}{/block:TagPage} {block:SearchPage}| search: {SearchQuery}{/block:SearchPage}</title>
  25.  
  26. <link rel="shortcut icon" href="{Favicon}"/>
  27. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  28. {block:Description}
  29. <meta name="description" content="{MetaDescription}"/>
  30. {/block:Description}
  31.  
  32. {NewPostStyles}
  33.  
  34. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  35.  
  36. <script> // where the dark/light mode plugin retrieves setting info
  37. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  38. if (storedTheme) {
  39. document.documentElement.setAttribute("data-theme", storedTheme);
  40. }
  41. </script>
  42.  
  43. {block:Options}
  44. <meta name="image:header image" content=""/>
  45. <meta name="image:header image dark mode" content=""/>
  46. <meta name="image:Sidebar image" content=""/>
  47. <meta name="image:Sidebar image dark mode" content=""/>
  48.  
  49. <!------------------- light mode ------------------>
  50. <meta name="color:Accent" content="#f1c216"/>
  51. <meta name="color:Accent Text" content="#000000"/>
  52. <meta name="color:Text" content="#3d3d3d"/>
  53. <meta name="color:Link" content="#000000"/>
  54. <meta name="color:Link Hover" content="#f1c216"/>
  55. <meta name="color:Background" content="#f4f4f4"/>
  56. <meta name="color:Post Background" content="#ffffff"/>
  57. <meta name="color:Borders" content="#e1e1e1"/>
  58. <meta name="color:Post Accent" content="#fafafa"/>
  59. <meta name="color:Post Accent Text" content="#000000"/>
  60.  
  61. <meta name="color:&#x25C6;&#x3A;&#x2A;&#x3A;&#x25C7;&#x3A;&#x2A;&#x3A;&#x25C6;&#x3A;&#x2A;&#x3A;&#x25C7;&#x3A;&#x2A;&#x3A;&#x25C6;">
  62.  
  63. <!------------------- night mode ------------------>
  64. <meta name="color:Dark mode Accent" content="#ffd700"/>
  65. <meta name="color:Dark mode Accent Text" content="#000000"/>
  66. <meta name="color:Dark mode Text" content="#e0e0e0"/>
  67. <meta name="color:Dark mode Link" content="#ffffff"/>
  68. <meta name="color:Dark mode Link Hover" content="#ffd700"/>
  69. <meta name="color:Dark mode Background" content="#0f1626"/>
  70. <meta name="color:Dark mode Post Background" content="#1e2436"/>
  71. <meta name="color:Dark mode Borders" content="#374357"/>
  72. <meta name="color:Dark mode Post Accent" content="#363c4e"/>
  73. <meta name="color:Dark mode Post Accent Text" content="#e1e1e1"/>
  74.  
  75. <meta name="select:Font size" content="1.1rem" title="1.1rem (11px)"/>
  76. <meta name="select:Font size" content="1.2rem" title="1.2rem (12px)"/>
  77. <meta name="select:Font size" content="1.3rem" title="1.3rem (13px)"/>
  78. <meta name="select:Font size" content="1.4rem" title="1.4rem (14px)"/>
  79. <meta name="select:Font size" content="1.5rem" title="1.5rem (15px)"/>
  80. <meta name="select:Font size" content="1.6rem" title="1.6rem (16px)"/>
  81. <meta name="select:Font size" content="1.7rem" title="1.7rem (17px)"/>
  82. <meta name="select:Font size" content="1.8rem" title="1.8rem (18px)"/>
  83.  
  84. <meta name="select:Post width" content="350px"/>
  85. <meta name="select:Post width" content="400px"/>
  86. <meta name="select:Post width" content="450px"/>
  87. <meta name="select:Post width" content="500px"/>
  88. <meta name="select:Post width" content="540px"/>
  89.  
  90. <meta name="select:Photoset gutter" content="1px" title="1px"/>
  91. <meta name="select:Photoset gutter" content="2px" title="2px"/>
  92. <meta name="select:Photoset gutter" content="3px" title="3px"/>
  93. <meta name="select:Photoset gutter" content="4px" title="4px"/>
  94.  
  95. <meta name="select:Display tags" content="tags-always" title="always">
  96. <meta name="select:Display tags" content="tags-upon-toggle" title="upon toggle">
  97.  
  98. <meta name="if:header image" content="" />
  99. <meta name="if:sidebar image" content="" />
  100. <meta name="if:post shadows" content="" />
  101. <meta name="if:post outer border" content="" />
  102. <meta name="if:searchbar" content="" />
  103.  
  104. <meta name="text:sidebar title" content="The Skyfall"/>
  105. <meta name="text:Body font" content="Inter"/>
  106. <meta name="text:link one title" content="link 1"/>
  107. <meta name="text:link one" content="/"/>
  108. <meta name="text:link two title" content="link 2"/>
  109. <meta name="text:link two" content="/"/>
  110. <meta name="text:link three title" content="link 3"/>
  111. <meta name="text:link three" content="/"/>
  112. <meta name="text:link four title" content="link 4"/>
  113. <meta name="text:link four" content="/"/>
  114. <meta name="text:link five title" content="link 5"/>
  115. <meta name="text:link five" content="/"/>
  116. <meta name="text:link six title" content="link 6"/>
  117. <meta name="text:link six" content="/"/>
  118. {/block:Options}
  119.  
  120. <link rel="stylesheet" href="https://unpkg.com/[email protected]/shadows.min.css"/>
  121. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css" />
  122.  
  123. <!-- Google font -->
  124. <link rel="preconnect" href="https://fonts.googleapis.com">
  125. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  126. <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={text:Body font}:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap">
  127.  
  128. <!--✻✻✻✻✻✻ npf audio player by @glenthemes ✻✻✻✻✻✻-->
  129. <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  130. <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  131. <script>
  132. tumblr_npf_audio({
  133. emptyTitleText: "Untitled track",
  134. emptyArtistText: "Untitled artist",
  135. emptyAlbumText: "Untitled album",
  136.  
  137. titleLabel: "Track:",
  138. artistLabel: "Artist:",
  139. albumLabel: "Album:"
  140. });
  141. </script>
  142. <style edit-npf-audio-player>
  143. .npf-audio-wrapper {
  144. --NPF-Audio-Buttons-Size: 2.4rem;
  145. --NPF-Audio-Buttons-Color: rgb(var(--post-accent-text));
  146. --NPF-Audio-Buttons-Spacing: 2.3rem;
  147.  
  148. --NPF-Audio-Image-Size: 150px;
  149. --NPF-Audio-Image-Spacing: 0px;
  150. }
  151.  
  152. .npf-audio-background {
  153. background-color: rgb(var(--post-accent));
  154. padding: var(--gap3);
  155. }
  156.  
  157. .npf-audio-title-label,
  158. .npf-audio-artist-label,
  159. .npf-audio-album-label {
  160. font-weight: bold;
  161. }
  162.  
  163. .npf-audio-title,
  164. .npf-audio-artist,
  165. .npf-audio-album {
  166. color: rgb(var(--post-accent-text));
  167. }
  168.  
  169. .npf-audio-details {
  170. display: grid;
  171. gap: 1rem;
  172. }
  173.  
  174. figcaption.audio-caption,
  175. figcaption.audio-caption + audio[controls]{
  176. display:none!important;
  177. }
  178.  
  179. </style>
  180.  
  181. <style>
  182. :root {
  183. --font1: '{text:Body font}', sans-serif;
  184. --font-size: {select:Font size};
  185. --line-height: 1.6;
  186. --post-width: calc( {select:Post width} + 2px);
  187. --sb-width: 350px;
  188. --sb-icon: 100px;
  189. --gutter: {select:Photoset gutter};
  190.  
  191. --gap1: 1.2rem;
  192. --gap2: 1.5rem;
  193. --gap3: 2.5rem;
  194. --gap4: 3.5rem;
  195.  
  196. --Post-Columns: 2;
  197. --gap-top-bottom: 12rem;
  198. --gap-post-margin: 10rem;
  199. --text-margin: 1.8rem;
  200. --photo-corners: 0;
  201.  
  202. --round1: 0.5rem;
  203. --round2: 0.7rem;
  204. --round3: 1rem;
  205. --circle: 100%;
  206. }
  207. :root, html[data-theme='light'] {
  208. --light-on: block;
  209. --light-off: none;
  210.  
  211. --color-accent: {RGBcolor:Accent};
  212. --color-accent-text:{RGBcolor:Accent Text};
  213. --borders: {RGBcolor:Borders};
  214. --post-accent: {RGBcolor:Post Accent};
  215. --post-accent-text: {RGBcolor:Post Accent text};
  216. --color-text: {RGBcolor:Text};
  217. --color-link: {RGBcolor:Link};
  218. --color-link-hover: {RGBcolor:Link Hover};
  219. --main-background: {RGBcolor:Background};
  220. --post-background: {RGBcolor:Post Background};
  221. --color-like:{RGBcolor:permalink like};
  222. --color-reblog:{RGBcolor:permalink reblog};
  223. }
  224. html[data-theme='dark'] {
  225. --light-on: none;
  226. --light-off: block;
  227.  
  228. --color-accent: {RGBcolor:Dark mode Accent};
  229. --color-accent-text: {RGBcolor:Dark mode Accent Text};
  230. --borders: {RGBcolor:Dark mode Borders};
  231. --post-accent: {RGBcolor:Dark mode Post Accent};
  232. --post-accent-text: {RGBcolor:Dark mode Post Accent text};
  233. --color-text: {RGBcolor:Dark mode Text};
  234. --color-link: {RGBcolor:Dark mode Link};
  235. --color-link-hover: {RGBcolor:Dark mode Link Hover};
  236. --main-background: {RGBcolor:Dark mode Background};
  237. --post-background: {RGBcolor:Dark mode Post Background};
  238. --color-like:{RGBcolor:permalink like dark};
  239. --color-reblog:{RGBcolor:permalink reblog dark};
  240. }
  241.  
  242. /* dark/light mode snappy transition */
  243. html.theme-transition,
  244. html.theme-transition *,
  245. html.theme-transition *:before,
  246. html.theme-transition *:after {
  247. transition: 0.0s !important;
  248. transition-delay: 0 !important;
  249. }
  250. /* ------------------------------------- css resets (Joshua Comeau) */
  251. *,*::before,*::after {
  252. -webkit-font-smoothing: antialiased;
  253. text-rendering: optimizeLegibility;
  254. -moz-osx-font-smoothing: grayscale;
  255. box-sizing: border-box;
  256. }
  257. * {
  258. margin: 0;
  259. scrollbar-width: thin; /* firefox scrollbar */
  260. scrollbar-color: rgb(var(--color-accent)) rgb(var(--main-background)); /* firefox scrollbar */
  261. }
  262.  
  263. html {
  264. height: 100%;
  265. font-size: 62.5%;
  266. scrollbar-width: thin;
  267. }
  268. button,
  269. textarea,
  270. select {
  271. font: inherit;
  272. }
  273. button {
  274. outline: none;
  275. border: 0;
  276. background: transparent;
  277. padding: 0;
  278. display: inherit;
  279. cursor: pointer;
  280. color: inherit;
  281. }
  282. input{
  283. font: inherit;
  284. border: none;
  285. outline: 0;
  286. padding: 0;
  287. background-color: transparent;
  288. color: rgb(var(--color-text));
  289. }
  290. p,h1,h2,h3,h4,h5,h6 {
  291. overflow-wrap: break-word;
  292. }
  293. .tmblr-iframe-pushdown {
  294. padding-top: 0!important;
  295. }
  296. .iframe-controls--phone-mobile {
  297. display: none!important;
  298. }
  299. /* ------------------------------------- selection */
  300. ::-moz-selection {
  301. background-color: rgb(var(--color-accent));
  302. color:rgb(var(--color-text));
  303. }
  304. ::selection {
  305. background-color: rgb(var(--color-accent));
  306. color:rgb(var(--color-text));
  307. }
  308. /* ------------------------------------- scrollbar (not firefrox) */
  309. ::-webkit-scrollbar {
  310. width: 8px;
  311. background-color: rgb(var(--main-background));
  312. }
  313. ::-webkit-scrollbar-thumb {
  314. background: rgb(var(--color-accent));
  315. border-radius: var(--round1);
  316. }
  317. ::-webkit-scrollbar-track {
  318. background-color: rgb(var(--main-background));
  319. }
  320. /* ------------------------------------- tooltips */
  321. .tippy-box[data-theme~='custom'] {
  322. font-size: var(--font-size);
  323. font-weight: 400;
  324. text-align:center;
  325. padding: 0;
  326. color: rgb(var(--color-accent-text));
  327. border: 0px solid rgb(var(--borders));
  328. border-radius: var(--round1);
  329. background-color: rgb(var(--color-accent));
  330. text-transform: lowercase;
  331. margin: 1.5rem;
  332. z-index: 9999999;
  333. }
  334. /* ------------------------------------- tumblr lightbox */
  335. .vignette, #vignette {
  336. opacity:0;
  337. }
  338. .lightbox-image, #tumblr_lightbox img {
  339. box-shadow:none !important;
  340. border-radius:0 !important;
  341. max-width:none;
  342. }
  343. .tmblr-lightbox, #tumblr_lightbox {
  344. background-color: rgb(var(--main-background),.90)!important;
  345. }
  346. .tmblr-iframe--gdpr-banner,
  347. .tmblr-iframe--app-cta-button,
  348. .gdpr-banner {
  349. display: none !important;
  350. }
  351. /* ------------------------------------- general */
  352. body {
  353. font-family: var(--font1);
  354. font-size: var(--font-size);
  355. color: rgb(var(--color-text));
  356. background-color: rgb(var(--main-background));
  357. height: 100%;
  358. -webkit-font-smoothing: antialiased;
  359. text-rendering: optimizeLegibility;
  360. overflow: hidden;
  361. line-height: 1;
  362. font-weight: 400;
  363. overflow-x: hidden;
  364. overflow-y: scroll;
  365. }
  366. a {
  367. color:rgb(var(--color-link));
  368. text-decoration: none;
  369. transition: all 0.2s ease;
  370. }
  371. a:hover {
  372. color: rgb(var(--color-link-hover));
  373. transition: all 0.2s ease;
  374. }
  375.  
  376. /* These are shorthands(?) classes I use on divs etc, so
  377. I don't have to repeat myself in the CSS */
  378. .flex {
  379. display: flex;
  380. }
  381. .grid {
  382. display: grid;
  383. }
  384. .centered {
  385. align-items: center;
  386. justify-content: center;
  387. }
  388. .align-center {
  389. align-items: center;
  390. }
  391. .justify-center {
  392. justify-content: center;
  393. }
  394. .between {
  395. justify-content: space-between;
  396. }
  397. .wrap {
  398. flex-wrap: wrap;
  399. }
  400. /* gap shorthands for grid or flex */
  401. .gap1 {
  402. gap: var(--gap1);
  403. }
  404. .gap2 {
  405. gap: var(--gap2);
  406. }
  407. .gap3 {
  408. gap: var(--gap3);
  409. }
  410. .gap4 {
  411. gap: var(--gap4);
  412. }
  413.  
  414. /* ------------------------------------- dark/light toggles*/
  415.  
  416. .light-on {
  417. display: var(--light-on);
  418. }
  419. .light-off {
  420. display: var(--light-off);
  421. }
  422.  
  423. /* ------------------------------------- containers */
  424.  
  425. .page-container {
  426. display: flex;
  427. flex-direction: column;
  428. min-height: 100dvh;
  429. justify-content: space-between;
  430. }
  431.  
  432. main {
  433. display: grid;
  434. grid-template-areas:
  435. "lb head head"
  436. "lb post bsb";
  437. {block:AskPage}
  438. max-width: initial;
  439. grid-template-areas: "lb post bsb";
  440. {/block:AskPage}
  441. gap: 5rem;
  442. justify-content: flex-start;
  443. justify-items: center;
  444. flex: 1;
  445. }
  446.  
  447. /* ------------------------------------- footer */
  448.  
  449. .footer-floor {
  450. color: rgb(var(--color-text));
  451. margin-top: var(--gap-top-bottom);
  452. text-align:center;
  453. padding: var(--text-margin);
  454. text-transform: lowercase;
  455. font-size: 1.2rem;
  456. {block:ifpostouterborder}
  457. border-top: 1px solid rgb(var(--borders));
  458. {/block:ifpostouterborder}
  459. {block:ifpostshadows}
  460. box-shadow: var(--shadow-2);
  461. {/block:ifpostshadows}
  462. }
  463.  
  464. /* ------------------------------------- header */
  465.  
  466. .header {
  467. grid-area: head;
  468. margin-top: calc(var(--gap-top-bottom) - 7rem);
  469. width: 100%;
  470. height: 350px;
  471. background-color: rgb(var(--color-accent));
  472. overflow: hidden;
  473. {block:ifpostouterborder}
  474. border: 1px solid rgb(var(--borders));
  475. {/block:ifpostouterborder}
  476. {block:ifpostshadows}
  477. box-shadow: var(--shadow-2);
  478. {/block:ifpostshadows}
  479. {block:ifnotheaderimage}
  480. display: none;
  481. {/block:ifnotheaderimage}
  482. {block:PermalinkPage}
  483. display: none;
  484. {/block:PermalinkPage}
  485. }
  486.  
  487. .header img {
  488. width: 100%;
  489. height: 350px;
  490. object-fit: cover;
  491. }
  492.  
  493. /* ------------------------------------- leftbar */
  494.  
  495. .left-bar {
  496. grid-area: lb;
  497. width: 87px;
  498. height: 100vh;
  499. position: sticky;
  500. inset: 0 auto auto 0;
  501. padding: 2rem 2.5rem;
  502. z-index: 9;
  503. background-color: rgb(var(--post-background));
  504. {block:ifpostouterborder}
  505. border-right: 1px solid rgb(var(--borders));
  506. {/block:ifpostouterborder}
  507. {block:ifpostshadows}
  508. box-shadow: var(--shadow-2);
  509. {/block:ifpostshadows}
  510. transition: width .5s;
  511. }
  512. .lb-inner {
  513. height: 100%;
  514. display: flex;
  515. flex-direction: column;
  516. justify-content: space-between;
  517. overflow: hidden;
  518. }
  519.  
  520. .blog-title img {
  521. width: 35px;
  522. border-radius: 50%;
  523. }
  524.  
  525. :is(.blog-title, .theme-toggle, .custom-nav-link) {
  526. display: grid;
  527. grid-template-columns: repeat(2, max-content);
  528. align-items: center;
  529. gap: 2.5rem;
  530. color: rgb(var(--color-link));
  531. transition: .5s;
  532. }
  533.  
  534. :is(.blog-title span, .theme-toggle span, .custom-nav-link span) {
  535. font-weight: 600;
  536. visibility: hidden;
  537. opacity: 0;
  538. transition: .5s;
  539. }
  540.  
  541. :is(.blog-title i, .theme-toggle i, .custom-nav-link i) {
  542. font-size: 2.5rem;
  543. padding: .5rem;
  544. border-radius: var(--round1);
  545. color: rgb(var(--color-link));
  546. transition: .5s;
  547. }
  548.  
  549. :is(.blog-title i:hover, .theme-toggle i:hover, .custom-nav-link i:hover) {
  550. background-color: rgb(var(--color-accent));
  551. color: rgb(var(--color-accent-text));
  552. border-radius: var(--round1);
  553. }
  554.  
  555. .open {
  556. width: calc(80px + 212px);
  557. }
  558.  
  559. .open :is(.blog-title:hover, .theme-toggle:hover, .custom-nav-link:hover) {
  560. color: rgb(var(--color-link-hover));
  561. }
  562.  
  563. .open :is(.blog-title span, .theme-toggle span, .custom-nav-link span) {
  564. visibility: visible;
  565. opacity: 1;
  566. }
  567.  
  568. .open :is(.blog-title i:hover, .theme-toggle i:hover, .custom-nav-link i:hover) {
  569. background-color: transparent;
  570. color: rgb(var(--color-link-hover));
  571. }
  572.  
  573. .custom-nav-list {
  574. padding: 0;
  575. display: grid;
  576. row-gap: calc(var(--gap4) + 2rem);
  577. }
  578.  
  579. /* ------------------------------------- sidebar */
  580.  
  581. .sb-big {
  582. width: var(--sb-width);
  583. grid-area: bsb;
  584. justify-self: flex-end;
  585. align-self: flex-start;
  586. position: sticky;
  587. top: 5rem;
  588. overflow: hidden;
  589. {block:ifpostouterborder}
  590. border: 1px solid rgb(var(--borders));
  591. {/block:ifpostouterborder}
  592. {block:ifpostshadows}
  593. box-shadow: var(--shadow-2);
  594. {/block:ifpostshadows}
  595. }
  596.  
  597. .sb-inner {
  598. justify-items: center;
  599. }
  600. .sb-container {
  601. gap: var(--gap2);
  602. background-color: rgb(var(--post-background));
  603. padding: var(--text-margin);
  604. }
  605.  
  606. .sidebar-title {
  607. display: inline-flex;
  608. align-items: center;
  609. justify-content: center;
  610. font-weight: 600;
  611. font-size: 1.8rem;
  612. }
  613.  
  614. .search-field {
  615. display: flex;
  616. align-items: center;
  617. gap: var(--gap1);
  618. background-color: rgb(var(--post-accent));
  619. border: 1px solid rgb(var(--borders));
  620. padding: 1rem 1.5rem;
  621. border-radius: 2rem;
  622. }
  623.  
  624. .search-field input {
  625. width: 100%;
  626. }
  627.  
  628. .search-field svg {
  629. width: 20px;
  630. height: 20px;
  631. stroke: rgba(var(--color-text), 0.5);
  632. }
  633.  
  634. .search-field input::placeholder, .search-field svg {
  635. color: rgba(var(--color-text), 0.5);
  636. }
  637. .search-field input:focus::placeholder {
  638. color: transparent;
  639. }
  640.  
  641. .sb-image img {
  642. width: 100%;
  643. height: auto;
  644. }
  645.  
  646. .description-content {
  647. text-align: center;
  648. }
  649.  
  650. .tumblr-btns {
  651. display: flex;
  652. justify-content: center;
  653. align-items: center;
  654. gap: var(--gap4);
  655. background-color: rgb(var(--color-accent));
  656. padding: 1rem .5rem;
  657. width: 100%;
  658. }
  659.  
  660. .tumblr-btns a svg {
  661. stroke: rgb(var(--color-accent-text));
  662. }
  663.  
  664. .tumblr-btns a svg:hover {
  665. strole: rgb(var(--color-accent-text));
  666. }
  667.  
  668. /* ------------------------------------- pagination */
  669.  
  670. nav.pagi a[class*="page"] {
  671. color: rgb(var(--color-text));
  672. cursor: default;
  673. padding: 0.8rem;
  674. opacity: 0.3;
  675. font-weight: 500;
  676. }
  677.  
  678. nav.pagi a.has_page {
  679. cursor: pointer;
  680. opacity: 1;
  681. }
  682.  
  683. nav.pagi a.has_page:hover {
  684. color: rgb(var(--color-accent));
  685. }
  686.  
  687. .total-pages {
  688. font-size: .8em;
  689. font-weight: 500;
  690. }
  691.  
  692. /* ------------------------------------- sections */
  693.  
  694. .tag-page-heading {
  695. margin-bottom: var(--gap4);
  696. font-weight: 700;
  697. display: inline-flex;
  698. align-items: center;
  699. column-gap: .8rem;
  700. }
  701.  
  702. .tag-page-heading span {
  703. font-weight: normal;
  704. }
  705.  
  706. .tag-page-heading i {
  707. padding: .5rem;
  708. background-color: rgb(var(--color-accent));
  709. color: rgb(var(--color-accent-text));
  710. border-radius: var(--round1);
  711. }
  712.  
  713. section.content {
  714. grid-area: post;
  715. width: var(--post-width);
  716. {block:AskPage}
  717. margin-top: 5rem;
  718. {/block:AskPage}
  719. }
  720.  
  721. article, .permalink-container, .notes-container {
  722. width: 100%;
  723. background-color: rgb(var(--post-background));
  724. {block:AskPage}
  725. overflow: hidden;
  726. {/block:AskPage}
  727. {block:ifpostouterborder}
  728. border: 1px solid rgb(var(--borders));
  729. {/block:ifpostouterborder}
  730. {block:ifpostshadows}
  731. box-shadow: var(--shadow-2);
  732. {/block:ifpostshadows}
  733. {block:IndexPage}
  734. margin-bottom: var(--gap-post-margin);
  735. {/block:IndexPage}
  736. {block:PermalinkPage}
  737. margin-bottom: var(--gap-post-margin);
  738. {/block:PermalinkPage}
  739. }
  740.  
  741. .top-info {
  742. padding: var(--gap2);
  743. background-color: rgba(var(--post-background), .8);
  744. border-bottom: 1px solid rgb(var(--borders));
  745. position: sticky;
  746. top: 0;
  747. z-index: 20;
  748. }
  749.  
  750. .reblog-info-image img {
  751. width: 45px;
  752. border-radius: var(--round2);
  753. }
  754.  
  755. .reblog-info-container {
  756. display: grid;
  757. gap: .7rem;
  758. }
  759.  
  760. .reblog-from {
  761. display: flex;
  762. align-items: center;
  763. gap: .5rem;
  764. }
  765.  
  766. .reblog-from a {
  767. font-weight: 500;
  768. font-size: .85em;
  769. }
  770.  
  771. .reblog-from i {
  772. font-size: .8em;
  773. }
  774.  
  775. .time-info {
  776. font-size: .78em;
  777. }
  778.  
  779. .posted i {
  780. margin-right: .5rem;
  781. font-size: 1.2rem;
  782. }
  783.  
  784. article ul li::marker, article ol li::marker {
  785. color: rgb(var(--color-accent));
  786. }
  787. .reblog-content p a, .original-post p a {
  788. font-weight: 500;
  789. }
  790.  
  791. /* the post container - only the post content */
  792. .post-content {
  793. }
  794.  
  795. :is(article h1, article h2, article h3, article p, article ul, article ol, article blockquote, .notes-container blockqupte, article .question, ol.notes, .sb-about p, .updates-container, .little-sidebar, .sb-description) {
  796. line-height: var(--line-height);
  797. }
  798.  
  799. /* ------------------------------------- captions and others */
  800.  
  801. article figcaption.audio-caption, /* <-- npf audio wrapper */
  802. article h1,
  803. article h2,
  804. article h3,
  805. article ul,
  806. article ol,
  807. article pre,
  808. article blockquote,
  809. article .caption p,
  810. article .replies p,
  811. article .question p, .notes-container blockquote {
  812. margin: var(--text-margin);
  813. }
  814. article ul,
  815. article ol {
  816. padding-left: var(--text-margin);
  817. }
  818. article h1, .poll-post .poll-question {
  819. font-size: 1.5em;
  820. font-weight: 700;
  821. }
  822. article h2 {
  823. font-size: 1.3em;
  824. font-weight: 700;
  825. }
  826. article h3 {
  827. font-size: 1.1em;
  828. font-weight: 700;
  829. }
  830. /* user original */
  831. .reblog-header {
  832. margin: var(--text-margin);
  833. }
  834. /* user reblogs */
  835. .reblog-header:is(:not(.original)) {
  836. margin: 0 0 var(--gap2) 0;
  837. padding: var(--text-margin) var(--text-margin) 0 var(--text-margin);
  838. }
  839. .reblog-header img {
  840. max-width: 2.5rem;
  841. height: auto;
  842. border-radius: var(--circle);
  843. }
  844. .reblog-header .user {
  845. color: rgb(var(--color-link));
  846. font-weight: 600;
  847. }
  848. .reblog-header a.user:hover {
  849. color: rgb(var(--color-accent));
  850. }
  851. span.deactivated:after {
  852. content:'deactivated';
  853. opacity:0;
  854. transition: all 0.2s ease;
  855. margin-left: 10px;
  856. }
  857. .reblog-header:hover span.deactivated:after {
  858. opacity:0.7;
  859. }
  860. p:empty {
  861. display: none;
  862. }
  863.  
  864. /* ------------------------------------- npf photoset stuff. */
  865.  
  866. figure.tmblr-full:is(:not(:last-of-type)) {
  867. margin-bottom: var(--gutter);
  868. }
  869. figure:is(:not(:last-of-type)) {
  870. margin-bottom: var(--gutter);
  871. }
  872. article img {
  873. display: block;
  874. }
  875. article iframe,
  876. article img {
  877. max-width: 100%;
  878. height: auto;
  879. }
  880. .post-content div.npf_row {
  881. margin-bottom: calc(var(--gutter) - 4px);
  882. }
  883. .post-content div.npf_row:last-child {
  884. margin-bottom: 0;
  885. }
  886. .post-content div.npf_row .npf_col {
  887. margin-right: calc(var(--gutter) - 4px);
  888. }
  889. .post-content div.npf_row .npf_col:last-child {
  890. margin-right: 0;
  891. }
  892. .npf_row:only-of-type,
  893. .npf-photos,
  894. .more_photoset,
  895. .legacy-photo img,
  896. .photoset {
  897. border-radius: var(--photo-corners);
  898. overflow:hidden;
  899. margin: auto;
  900. }
  901. .npf-photos:has(+figure) {
  902. border-radius: var(--photo-corners) var(--photo-corners) 0 0;
  903. max-width: fit-content;
  904. }
  905. .npf-photos + figure {
  906. overflow: hidden;
  907. border-radius: 0 0 var(--photo-corners) var(--photo-corners);
  908. margin: var(--gutter) auto auto;
  909. max-width: fit-content;
  910. }
  911.  
  912. /* ------------------------------------- legacy photoset stuff. */
  913.  
  914. .photo-row {
  915. padding: calc(var(--gutter) / 2) 0;
  916. display:flex;
  917. }
  918.  
  919. .photo-row:first-child {
  920. padding-top:0;
  921. }
  922.  
  923. .photo-row:last-child {
  924. padding-bottom:0;
  925. }
  926.  
  927. .legacy-photoset-inner {
  928. cursor:pointer;
  929. padding: 0 calc(var(--gutter) / 2);
  930. flex-grow:1;
  931. }
  932.  
  933. .legacy-photoset-inner:first-child {
  934. padding-left:0;
  935. }
  936.  
  937. .legacy-photoset-inner:last-child {
  938. padding-right:0;
  939. }
  940.  
  941. .image {
  942. width:100%;
  943. height:100%;
  944. display:block;
  945. object-fit:cover;
  946. }
  947.  
  948. .photo-row-1 .legacy-photoset-inner {
  949. width:100%;
  950. }
  951.  
  952. .photo-row-2 .legacy-photoset-inner {
  953. width:50%;
  954. }
  955.  
  956. .photo-row-3 .legacy-photoset-inner {
  957. width:33.3333333%;
  958. }
  959.  
  960. .photo-single {
  961. cursor: pointer;
  962. }
  963.  
  964. /* ------------ blockquotes, quote posts, legacy quotes */
  965.  
  966. article blockquote, .notes-container blockquote {
  967. border-left: 2px solid rgb(var(--color-accent));
  968. padding-left: var(--text-margin);
  969. margin-inline: 2.8rem;
  970. }
  971.  
  972. article blockquote p {
  973. margin: 0!important;
  974. }
  975.  
  976. /* ------------ styling different stuff */
  977. small, sup, sub, big, p.npf_quote {
  978. font-size: inherit;
  979. font-family: inherit;
  980. vertical-align: inherit;
  981. }
  982.  
  983. p.npf_quirky {
  984. line-height: inherit;
  985. font-size: 1.6em;
  986. }
  987.  
  988. pre {
  989. white-space: initial;
  990. margin: 0;
  991. }
  992.  
  993. code {
  994. line-height: inherit !important;
  995. background: transparent;
  996. font-size: inherit !important;
  997. word-wrap: break-word;
  998. }
  999.  
  1000. /* ------------------------------------- post footer */
  1001.  
  1002. footer.info {
  1003. border-top: 1px solid rgb(var(--borders));
  1004. padding: var(--text-margin);
  1005. }
  1006.  
  1007. .info-inner a {
  1008. color: rgb(var(--color-text));
  1009. }
  1010.  
  1011. .info-inner a:hover, .toggle-tags:hover {
  1012. color: rgb(var(--color-accent));
  1013. }
  1014.  
  1015. .info-icon {
  1016. display: inline-flex;
  1017. font-size: 1.5em;
  1018. }
  1019.  
  1020. .info-square {
  1021. color: rgb(var(--color-accent));
  1022. font-size: 1rem;
  1023. }
  1024.  
  1025. .interact {
  1026. gap: 0.8rem;
  1027. }
  1028.  
  1029. .interact i, .info-icon i {
  1030. font-size: 2rem;
  1031. background-color: rgb(var(--color-accent));
  1032. color: rgb(var(--color-accent-text));
  1033. padding: .3rem;
  1034. border-radius: var(--round1);
  1035. }
  1036.  
  1037. .interact a {
  1038. display: inline-flex;
  1039. }
  1040.  
  1041. /* like */
  1042.  
  1043. a.custom-like-container {
  1044. position: relative;
  1045. }
  1046.  
  1047. a.custom-like-container .like_button {
  1048. position: absolute;
  1049. top: 0;
  1050. left: 0;
  1051. right: 0;
  1052. bottom: 0;
  1053. width: 100%;
  1054. height: 100%;
  1055. opacity: 0;
  1056. }
  1057.  
  1058. a.custom-like-container .like_button iframe {
  1059. width: 100%!important;
  1060. height: 100%!important;
  1061. }
  1062.  
  1063. a.custom-like-container .liked + .custom-like-icon {
  1064. color: rgb(var(--color-accent))!important;
  1065. }
  1066.  
  1067. /* tags */
  1068.  
  1069. .toggle-tags {
  1070. cursor: pointer;
  1071. transition: all 0.2s ease;
  1072. display: inline-flex;
  1073. }
  1074. .toggle-tags:hover {
  1075. color: rgb(var(--color-accent));
  1076. }
  1077.  
  1078. .toggle-tags.tags-always {
  1079. display:none;
  1080. }
  1081.  
  1082. .tags-container.tags-upon-toggle {
  1083. max-height: 0;
  1084. overflow: hidden;
  1085. transition: max-height 0.6s ease;
  1086. }
  1087. .tags {
  1088. align-items: flex-end;
  1089. margin-top: var(--gap2);
  1090. gap: var(--gap1);
  1091. {block:PermalinkPage}
  1092. gap: .8rem;
  1093. {/block:PermalinkPage}
  1094. }
  1095.  
  1096. .tags a {
  1097. font-size: .83em;
  1098. {block:PermalinkPage}
  1099. font-size: inherit;
  1100. {/block:PermalinkPage}
  1101. }
  1102.  
  1103. /* ------------------------------------- permalink page */
  1104.  
  1105. .permalink-grid {
  1106. display: grid;
  1107. grid-template-columns: repeat(2, 1fr);
  1108. gap: var(--gap2);
  1109. }
  1110.  
  1111. .permalink-parent-avatar img, .source-avatar img {
  1112. width: 30px;
  1113. border-radius: var(--circle);
  1114. }
  1115.  
  1116. .time-ago-container {
  1117. font-weight: 700;
  1118. margin-bottom: var(--gap3);
  1119. display: flex;
  1120. align-items: center;
  1121. }
  1122.  
  1123. .time-ago-container i {
  1124. font-size: 2.5rem;
  1125. margin-right: 0.8rem;
  1126. }
  1127.  
  1128. /* ------------------------------------- notes */
  1129.  
  1130. .permalink-container, .notes-container {
  1131. padding: var(--text-margin);
  1132. }
  1133. .permalink-container {
  1134. {block:AskPage}display: none;{/block:AskPage}
  1135. }
  1136. .notes-container {
  1137. margin-bottom: 0;
  1138. }
  1139.  
  1140. .permalink-container .tags-container {
  1141. margin-top: var(--gap3);
  1142. }
  1143. span.note-counter {
  1144. display: block;
  1145. font-weight: 600;
  1146. font-size: 2rem;
  1147. margin-bottom: var(--gap3);
  1148. }
  1149. ol.notes {
  1150. display: flex;
  1151. gap: 2rem;
  1152. flex-direction: column;
  1153. padding: 0;
  1154. }
  1155. ol.notes li {
  1156. display: grid;
  1157. grid-template-columns: max-content 1fr;
  1158. padding-block: .8rem;
  1159. padding-right: 2.0rem;
  1160. align-items: center;
  1161. gap: var(--gap2);
  1162. position: relative;
  1163. }
  1164. li.note.more_notes_link_container {
  1165. grid-template-columns: 1fr;
  1166. }
  1167. a.avatar_frame {
  1168. display: inline-flex;
  1169. align-items: center;
  1170. }
  1171. ol.notes li img.avatar {
  1172. max-width: 2.2em;
  1173. height: auto;
  1174. border-radius: var(--circle);
  1175. border: 1px solid rgb(var(--borders));
  1176. padding: 0.3rem;
  1177. }
  1178. a.more_notes_link {
  1179. color: rgb(var(--color-text));
  1180. display: block;
  1181. font-weight: 500;
  1182. }
  1183. a.more_notes_link:hover {
  1184. color: rgb(var(--color-accent));
  1185. }
  1186. .notes-container blockquote {
  1187. grid-column: 1 / 3;
  1188. grid-row: 2;
  1189. }
  1190.  
  1191. /* ------------------------------------- POST-TYPE: poll */
  1192.  
  1193. .poll-post a.poll-row {
  1194. color: rgb(var(--post-accent-text));
  1195. border: 1px solid rgb(var(--borders));
  1196. line-height: inherit !important;
  1197. font-size: var(--font-size);
  1198. border-radius: var(--round1);
  1199. padding: 8px var(--gap1);
  1200. font-weight: 600;
  1201. margin: var(--text-margin);
  1202. background-color: rgb(var(--post-accent));
  1203. width: auto!important;
  1204. text-align: center;
  1205. min-height: auto;
  1206. }
  1207. .poll-post a.poll-row:hover {
  1208. color: rgb(var(--color-accent))!important;
  1209. background-color: transparent!important;
  1210. }
  1211. a.poll-row p {
  1212. margin: 0!important;
  1213. }
  1214. .poll-post .poll-see-results {
  1215. margin-top: 0;
  1216. margin-bottom: var(--text-margin);
  1217. }
  1218. /* ------------------------------------- POST-TYPE: quote */
  1219.  
  1220. p.npf_quote {
  1221. border-left: 1px solid rgb(var(--borders));
  1222. padding-left: var(--text-margin);
  1223. }
  1224. /* ------------------------------------- POST-TYPE: ask*/
  1225.  
  1226. .ask-container {
  1227. border-bottom: 1px solid rgb(var(--borders));
  1228. overflow: hidden;
  1229. }
  1230. .asker-wrap {
  1231. margin: var(--text-margin);
  1232. position: relative;
  1233. }
  1234. .asker-icon {
  1235. position: absolute;
  1236. left: 3.2rem;
  1237. top: 1.5rem;
  1238. }
  1239. .asker-icon i {
  1240. padding: 0.3rem;
  1241. background-color: rgb(var(--color-accent));
  1242. color: rgb(var(--color-accent-text));
  1243. border-radius: var(--circle);
  1244. box-shadow: var(--shadow-2);
  1245. }
  1246. .asker-wrap img {
  1247. width: 30px;
  1248. height: 30px;
  1249. border-radius: var(--circle);
  1250. display: inline-flex;
  1251. }
  1252. .ask-user-info {
  1253. gap: 0.8rem;
  1254. flex-direction: column;
  1255. }
  1256. .ask-user-info span:first-child {
  1257. font-weight: 700;
  1258. text-transform: lowercase;
  1259. }
  1260. .ask-user-info a.asker,
  1261. .ask-user-info a.answerer {
  1262. color: rgb(var(--color-text));
  1263. }
  1264. .ask-user-info a.asker:hover,
  1265. .ask-user-info a.answerer:hover {
  1266. color: rgb(var(--color-accent));
  1267. }
  1268.  
  1269. .question {
  1270. margin: var(--text-margin);
  1271. border: 1px solid rgb(var(--borders));
  1272. background-color: rgb(var(--post-accent));
  1273. padding: var(--text-margin);
  1274. border-radius: var(--round3);
  1275. }
  1276.  
  1277. .reply {
  1278. background-color: transparent;
  1279. color: rgb(var(--color-text));
  1280. border: 1px solid rgb(var(--borders));
  1281. }
  1282.  
  1283. .question p {
  1284. margin-right: 0!important;
  1285. margin-left: 0!important;
  1286. }
  1287.  
  1288. .question p:first-of-type {
  1289. margin-top: 0;
  1290. }
  1291.  
  1292. .question p:last-of-type {
  1293. margin-bottom: 0;
  1294. }
  1295.  
  1296. .question .npf_inst {
  1297. max-width: 100%;
  1298. margin: 0;
  1299. }
  1300.  
  1301. :where(.question, .replies, .rb-answer) img {
  1302. width: auto!important;
  1303. max-width: 100%;
  1304. border-radius: var(--photo-corners);
  1305. }
  1306.  
  1307. .replies {
  1308. margin-top: var(--text-margin);
  1309. }
  1310.  
  1311. .rb-answer {
  1312. margin-bottom: -1px;
  1313. }
  1314.  
  1315. /* ------------------------------------- POST-TYPE: chat */
  1316.  
  1317. p.npf_chat span.label {
  1318. font-weight: 600;
  1319. }
  1320.  
  1321. p.npf_chat {
  1322. font-family: inherit!important;
  1323. }
  1324. /* ------------------------------------- video /audio responsiveness */
  1325.  
  1326. article iframe:not(iframe.bandcamp_audio_player,.spotify_audio_player, iframe.soundcloud_audio_player, iframe.tumblr_audio_player) {
  1327. max-width: 100%;
  1328. aspect-ratio: 16/9;
  1329. height: auto;
  1330. }
  1331.  
  1332. iframe.soundcloud_audio_player,
  1333. .tumblr_video_container {
  1334. width: 100%!important;
  1335. height: auto!important;
  1336. }
  1337.  
  1338. figure iframe.spotify_audio_player,
  1339. iframe.spotify_audio_player {
  1340. max-height: 90px;
  1341. width: 100%;
  1342. }
  1343.  
  1344. article iframe[src*='soundcloud'] {
  1345. max-height: 130px;
  1346. width: 100%;
  1347. }
  1348.  
  1349. figure iframe.bandcamp_audio_player {
  1350. max-height: 120px;
  1351. width: 100%;
  1352. }
  1353.  
  1354. iframe.tumblr_audio_player {
  1355. max-height: 85px;
  1356. width: 100%;
  1357. }
  1358.  
  1359. /* ------------------------------------- POST TYPE: audio */
  1360.  
  1361. .audio-caption {
  1362. display: flex;
  1363. flex-direction: column!important;
  1364. align-items: center;
  1365. gap: var(--gap4);
  1366. padding: var(--text-margin);
  1367. }
  1368.  
  1369. .audio_player {
  1370. display: flex;
  1371. align-items: center;
  1372. }
  1373.  
  1374. .tmblr-full>.audio-caption .audio-details {
  1375. padding: 0;
  1376. align-items: center!important;
  1377. }
  1378.  
  1379. .tmblr-full>.audio-caption .album-cover {
  1380. width: 120px;
  1381. height: 120px;
  1382. border-radius: var(--round1);
  1383. }
  1384.  
  1385. .custom_audio_buttons svg {
  1386. width: 1.5em;
  1387. height: 1.5em;
  1388. cursor: pointer;
  1389. stroke: rgb(var(--color-link));
  1390. fill: rgb(var(--color-link));
  1391. }
  1392.  
  1393. .custom_audio_error_icon svg {
  1394. stroke: red;
  1395. }
  1396.  
  1397. .custom_audio_duration {
  1398. display: inline;
  1399. }
  1400.  
  1401. .album-content {
  1402. display: grid;
  1403. row-gap: var(--gap2);
  1404. flex: 1;
  1405. width: 80%;
  1406. padding: 1.5rem;
  1407. background-color: rgb(var(--post-accent));
  1408. border: 1px solid rgb(var(--borders));
  1409. border-radius: var(--round1);
  1410. }
  1411.  
  1412. .audio-time {
  1413. display: flex;
  1414. column-gap: var(--text-margin);
  1415. align-items: center;
  1416. padding: 0 var(--gap1);
  1417. justify-content: space-between;
  1418. flex: 1;
  1419. }
  1420.  
  1421. .audio_player .custom_audio_seekbar {
  1422. width: 100%;
  1423. height: 0.5em;
  1424. border: 1px solid rgb(var(--borders));
  1425. border-radius: var(--round2);
  1426. overflow: hidden;
  1427. }
  1428.  
  1429. .artist i {
  1430. margin-right: .5rem;
  1431. font-size: 1.4em;
  1432. }
  1433.  
  1434. .tmblr-audio-meta .title h3 {
  1435. margin-top: 0;
  1436. margin-inline: 0;
  1437. margin-bottom: .5rem;
  1438. font-size: 1.7rem;
  1439. }
  1440.  
  1441. .audio_player .custom_audio_seekbar_progress {
  1442. width: 0;
  1443. height: 100%;
  1444. background: rgb(var(--color-accent));
  1445. }
  1446.  
  1447. .audio_player .custom_audio_time_left {
  1448. order: 2;
  1449. }
  1450.  
  1451. .custom_audio_time_left::before {
  1452. content: "-";
  1453. }
  1454.  
  1455. /* ------------------------------------- POST TYPE: link */
  1456.  
  1457. div.npf-link-block {
  1458. align-items: flex-start;
  1459. border: 1px solid rgb(var(--borders));
  1460. background-color: rgb(var(--post-accent));
  1461. color: rgb(var(--post-accent-text));
  1462. border-radius: var(--round2);
  1463. display: flex;
  1464. justify-content: center;
  1465. margin: var(--text-margin);
  1466. overflow: hidden;
  1467. flex-direction: column;
  1468. }
  1469. div.npf-link-block .poster {
  1470. -ms-flex-align: center;
  1471. align-items: center;
  1472. background-position: 50%;
  1473. background-repeat: no-repeat;
  1474. background-size: cover;
  1475. background-clip: content-box;
  1476. border-bottom: 1px solid rgb(var(--main-background));
  1477. display: -ms-flexbox;
  1478. display: flex;
  1479. height: 250px;
  1480. -ms-flex-pack: center;
  1481. justify-content: center;
  1482. position: relative;
  1483. }
  1484. div.npf-link-block .title {
  1485. font-size: 1.5em;
  1486. line-height: var(--line-height);
  1487. max-height: 136px;
  1488. overflow: hidden;
  1489. overflow-wrap: anywhere;
  1490. text-overflow: ellipsis;
  1491. font-weight: 500;
  1492. padding: var(--gap2) var(--gap2) 0;
  1493. }
  1494. div.npf-link-block .poster .title {
  1495. color: #fff;
  1496. font-weight: 400;
  1497. padding: var(--gap3);
  1498. position: absolute;
  1499. text-align: center;
  1500. }
  1501. div.npf-link-block .bottom {
  1502. color: inherit;
  1503. line-height: var(--line-height);
  1504. padding: var(--gap2);
  1505. }
  1506. div.npf-link-block .bottom .description {
  1507. color: inherit;
  1508. font-size: inherit;
  1509. line-height: inherit;
  1510. margin: 0;
  1511. max-height: 80px;
  1512. overflow: hidden;
  1513. overflow-wrap: anywhere;
  1514. text-overflow: ellipsis;
  1515. }
  1516. div.npf-link-block .bottom .site-name {
  1517. color: rgb(var(--color-link));
  1518. font-size: inherit;
  1519. font-weight: 400;
  1520. line-height: var(--line-height);
  1521. margin-top: 10px;
  1522. opacity: 1;
  1523. text-transform: uppercase;
  1524. }
  1525.  
  1526. /* ------------------------------------- corners */
  1527.  
  1528. .top-corner {
  1529. flex-direction: column;
  1530. position: fixed;
  1531. right: 2.3rem;
  1532. top: 1.8rem;
  1533. z-index: 99;
  1534. }
  1535. .controls {
  1536. display: inline-flex;
  1537. }
  1538. .left-icon i {
  1539. padding: .5rem;
  1540. aspect-ratio: 1;
  1541. background-color: rgb(var(--post-background));
  1542. color: rgb(var(--color-text));
  1543. {block:ifpostouterborder}
  1544. border: 1px solid rgb(var(--borders));
  1545. {/block:ifpostouterborder}
  1546. {block:ifpostshadows}
  1547. box-shadow: var(--shadow-2);
  1548. {/block:ifpostshadows}
  1549. }
  1550. .scroll-to-top {
  1551. {block:ifpostouterborder}
  1552. border: 1px solid rgb(var(--borders));
  1553. {/block:ifpostouterborder}
  1554. {block:ifpostshadows}
  1555. box-shadow: var(--shadow-2);
  1556. {/block:ifpostshadows}
  1557. }
  1558. .left-icon {
  1559. font-size: 1.5em;
  1560. }
  1561. /* tumblr controls stuff */
  1562. iframe.tmblr-iframe, .tmblr-iframe {
  1563. z-index: 99!important;
  1564. opacity: 0;
  1565. visibility: hidden;
  1566. top: 1.2rem;
  1567. right: 8rem!important;
  1568. transform: scale(0.8);
  1569. transform-origin: 100% 0;
  1570. transition: all 0.3s ease;
  1571. }
  1572. .tmblr-iframe.active {
  1573. opacity: 1;
  1574. visibility: visible;
  1575. }
  1576.  
  1577. /* scroll to top stuff */
  1578.  
  1579. button.scroll-to-top {
  1580. display:inline-flex;
  1581. bottom: var(--gap2);
  1582. right: 2.3rem;
  1583. position: fixed;
  1584. }
  1585. button.scroll-to-top {
  1586. color: rgb(var(--color-text));
  1587. cursor: default;
  1588. visibility: hidden;
  1589. opacity: 0;
  1590. transition: .4s;
  1591. }
  1592. button.scroll-to-top.visible {
  1593. cursor: pointer;
  1594. color: rgb(var(--color-text));
  1595. visibility: visible;
  1596. opacity: 1;
  1597. }
  1598.  
  1599. /* ------------------------------------------------- responsive */
  1600.  
  1601. @media only screen and (max-width: calc({select:Post width} + 540px)) {
  1602. :root {
  1603. --sb-width: var(--post-width);
  1604. }
  1605.  
  1606. main {
  1607. grid-template-areas: "bsb" "post";
  1608. justify-content: center;
  1609. margin-top: calc(var(--gap-top-bottom) - var(--gap3));
  1610. }
  1611.  
  1612. .header {
  1613. display: none;
  1614. }
  1615.  
  1616. .sb-big {
  1617. position: static;
  1618. }
  1619.  
  1620. .controls:nth-child(1) {
  1621. display: none;
  1622. }
  1623.  
  1624. .tmblr-iframe--app-cta-button {
  1625. display: none!important;
  1626. }
  1627.  
  1628. section.content {
  1629. margin-top: 0;
  1630. }
  1631.  
  1632. .left-bar {
  1633. position: fixed;
  1634. width: calc(80px + 212px);
  1635. left: -100%;
  1636. top: 0;
  1637. transition: left .5s;
  1638. box-shadow: var(--shadow-6);
  1639. }
  1640.  
  1641. .npf-audio-wrapper {
  1642. --NPF-Audio-Image-Size: 90px;
  1643. }
  1644.  
  1645. .tmblr-full>.audio-caption .album-cover {
  1646. flex: none;
  1647. width: 90px;
  1648. height: 90px;
  1649. }
  1650.  
  1651. .open {
  1652. left: 0;
  1653. }
  1654. }
  1655.  
  1656. @media only screen and (max-width: calc({select:Post width} + 50px)) {
  1657. :root {
  1658. --post-width: 85vw;
  1659. --sb-width: 85vw
  1660. }
  1661.  
  1662. main {
  1663. width: 100vw;
  1664. }
  1665.  
  1666. .left-bar {
  1667. width: 75vw;
  1668. }
  1669. }
  1670.  
  1671. {CustomCSS}
  1672. </style>
  1673.  
  1674. </head>
  1675. <body>
  1676.  
  1677. <div class="top-corner flex gap1 align-center">
  1678. <button class="controls left-icon" title="tumblr controls" type="button" aria-label="open tumblr controls">
  1679. <i class="ti ti-settings"></i>
  1680. </button>
  1681.  
  1682. <button class="controls left-icon" title="menu" type="button" aria-label="open menu" id="open-menu">
  1683. <i class="ti ti-menu-2"></i>
  1684. </button>
  1685. </div>
  1686.  
  1687. <div class="page-container">
  1688.  
  1689. <main>
  1690. <!-- left sidebar -->
  1691. <aside class="left-bar" id="menu">
  1692. <div class="lb-inner">
  1693. <div class="title-container">
  1694. <a href="/"class="blog-title">
  1695. <img src="{PortraitURL-64}" alt="icon">
  1696. <span class="title-content">{Title}</span>
  1697. </a>
  1698. </div>
  1699.  
  1700. <ul class="custom-nav-list">
  1701. {block:iflinkone}
  1702. <a href="{text:link one}" class="custom-nav-link">
  1703. <i class="ti ti-star nav-icon"></i>
  1704. <span class="nav-text">{text:link one title}</span>
  1705. </a>
  1706. {/block:iflinkone}
  1707.  
  1708. {block:iflinktwo}
  1709. <a href="{text:link two}" class="custom-nav-link">
  1710. <i class="ti ti-apple nav-icon"></i>
  1711. <span class="nav-text">{text:link two title}</span>
  1712. </a>
  1713. {/block:iflinktwo}
  1714.  
  1715. {block:iflinkthree}
  1716. <a href="{text:link three}" class="custom-nav-link">
  1717. <i class="ti ti-user nav-icon"></i>
  1718. <span class="nav-text">{text:link three title}</span>
  1719. </a>
  1720. {/block:iflinkthree}
  1721.  
  1722. {block:iflinkfour}
  1723. <a href="{text:link four}" class="custom-nav-link">
  1724. <i class="ti ti-book nav-icon"></i>
  1725. <span class="nav-text">{text:link four title}</span>
  1726. </a>
  1727. {/block:iflinkfour}
  1728.  
  1729. {block:iflinkfive}
  1730. <a href="{text:link five}" class="custom-nav-link">
  1731. <i class="ti ti-lollipop nav-icon"></i>
  1732. <span class="nav-text">{text:link five title}</span>
  1733. </a>
  1734. {/block:iflinkfive}
  1735.  
  1736. {block:iflinksix}
  1737. <a href="{text:link six}" class="custom-nav-link">
  1738. <i class="ti ti-briefcase-2 nav-icon"></i>
  1739. <span class="nav-text">{text:link six title}</span>
  1740. </a>
  1741. {/block:iflinksix}
  1742. </ul>
  1743.  
  1744. <button class="theme-toggle" type="button" aria-label="toggle dark or light mode">
  1745. <i class="ti ti-sun light-on"></i>
  1746. <span class="theme-toggle-text light-on">light mode</span>
  1747.  
  1748. <i class="ti ti-moon light-off"></i>
  1749. <span class="theme-toggle-text light-off">night mode</span>
  1750. </button>
  1751. </div>
  1752. </aside>
  1753.  
  1754. <!-- header -->
  1755.  
  1756. <header class="header">
  1757. <img src="{image:header image}" alt="header image" class="light-on">
  1758. <img src="{image:header image dark mode}" alt="header image" class="light-off">
  1759. </header>
  1760.  
  1761. <!-- right sidebar -->
  1762.  
  1763. <aside class="sb-big">
  1764. <div class="sb-inner grid">
  1765. {block:IfSidebarImage}
  1766. <div class="sb-image">
  1767. <img src="{image:sidebar image}" class="light-on">
  1768. <img src="{image:sidebar image dark mode}" class="light-off">
  1769. </div>
  1770. {/block:IfSidebarImage}
  1771. <div class="sb-container grid">
  1772. <div class="sidebar-title">{text:sidebar title}</div>
  1773. <div class="description-content">
  1774. <div class="sb-description">{Description}</div>
  1775. </div>
  1776. {block:ifsearchbar}
  1777. <form action="/search" method="get" class="search">
  1778. <div class="search-field">
  1779. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-search"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
  1780. <input type="text" placeholder="search blog" autocomplete="off" name="q" value="{SearchQuery}"/>
  1781. </div>
  1782. </form>
  1783. {/block:ifsearchbar}
  1784. </div>
  1785.  
  1786. <div class="tumblr-btns">
  1787. <a href="/" title="home">
  1788. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-home"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
  1789. </a>
  1790. {block:AskEnabled}
  1791. <a href="/ask" title="ask">
  1792. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-mail"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /><path d="M3 7l9 6l9 -6" /></svg>
  1793. </a>
  1794. {/block:AskEnabled}
  1795. <a href="/archive" title="archive">
  1796. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-layout-dashboard"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 4h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1" /><path d="M5 16h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1" /><path d="M15 12h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1" /><path d="M15 4h4a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1" /></svg>
  1797. </a>
  1798. <a href="https://sheathemes.tumblr.com" title="theme by sheathemes" target="_blank">
  1799. <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-copyright"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M14 9.75a3.016 3.016 0 0 0 -4.163 .173a2.993 2.993 0 0 0 0 4.154a3.016 3.016 0 0 0 4.163 .173" /></svg>
  1800. </a>
  1801. </div>
  1802. </div>
  1803. </aside>
  1804.  
  1805. <section class="content">
  1806.  
  1807. {block:TagPage}
  1808. <div class="tag-page-heading">
  1809. <i class="ph ph-tag"></i> Posts tagged: <span>{Tag}</span>
  1810. </div>
  1811. {/block:TagPage}
  1812.  
  1813. {block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
  1814.  
  1815. <!-- post article -->
  1816. <article id="post-{PostID}" class="{posttype}-post posts">
  1817.  
  1818. {block:IndexPage}
  1819. <div class="top-info flex between align-center">
  1820. <div class="reblog-container flex gap1 align-center">
  1821. <div class="reblog-info-image">
  1822. {block:RebloggedFrom}
  1823. <img src="{ReblogParentPortraitURL-48}">
  1824. {/block:RebloggedFrom}
  1825. {block:NotReblog}
  1826. <img src="{PortraitURL-40}">
  1827. {/block:NotReblog}
  1828. </div>
  1829. <div class="reblog-info-container">
  1830. <div class="reblog-from">
  1831. {block:RebloggedFrom}
  1832. <a href="{ReblogParentURL}" class="reblog-root">{ReblogParentName}</a>
  1833. <i class="ti ti-repeat"></i>
  1834. <a href="{ReblogRootURL}" class="reblog-root">{ReblogRootName}</a>
  1835. {/block:RebloggedFrom}
  1836. {block:NotReblog}
  1837. <a href="{Permalink}" class="reblog-root">{Name}</a>
  1838. <i class="ti ti-repeat"></i>
  1839. <a href="{Permalink}" class="reblog-root">{Name}</a>
  1840. {/block:NotReblog}
  1841. </div>
  1842. <div class="time-info">
  1843. <span class="posted"><i class="ti ti-corner-down-right"></i>posted</span>
  1844. <a class="timeago" href="{Permalink}" title="{TimeAgo}">{Timestamp}</a>
  1845. </div>
  1846. </div>
  1847. </div>
  1848. {block:PinnedPostLabel}
  1849. <div class="pinned" aria-label="pinned post" title="pinned post" aria-label="pinned post">
  1850. <span class="info-icon">
  1851. <i class="ti ti-pinned"></i>
  1852. </span>
  1853. </div>
  1854.  
  1855. {/block:PinnedPostLabel}
  1856. </div>
  1857. {/block:IndexPage}
  1858.  
  1859. {block:ContentSource}
  1860. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1861. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1862. {/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1863. {/block:ContentSource}
  1864. <!-- {block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1865. {/block:NoRebloggedFrom} -->
  1866.  
  1867. <!-- post content -->
  1868. <div class="post-content">
  1869.  
  1870. <!-- legacy single photo -->
  1871. {block:Photo}
  1872. <a class="legacy-photo photo-single" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-500}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false"><img src="{PhotoURL-HighRes}"></a>
  1873. {/block:Photo}
  1874.  
  1875. <!-- legacy photoset -->
  1876. {block:Photoset}
  1877. <div class="photoset" data-layout="{PhotosetLayout}">
  1878. {block:Photos}
  1879. <div class="legacy-photoset-inner"
  1880. data-width="{PhotoWidth-HighRes}"
  1881. data-height="{PhotoHeight-HighRes}"
  1882. data-lowres="{PhotoURL-500}"
  1883. data-highres="{PhotoURL-HighRes}">
  1884. <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" class="image"/>
  1885. </div>
  1886. {/block:Photos}
  1887. </div>
  1888. {/block:Photoset}
  1889.  
  1890. <!-- panorama -->
  1891. {block:Panorama}
  1892. <div class="legacy-photo"><img src="{photourl-panorama}" alt="{photoalt}"></div>
  1893. {/block:Panorama}
  1894.  
  1895. <!-- legacy quote (styled as npf) -->
  1896. {block:Quote}
  1897. <div class="caption">
  1898. <p class="npf_quote">{Quote}</p>
  1899.  
  1900. {block:Source}
  1901. <p class="source">-{Source}</p>
  1902. {/block:Source}
  1903. </div>
  1904. {/block:Quote}
  1905.  
  1906. <!-- legacy chat (styled as npf) -->
  1907. {block:Chat}
  1908. <div class="caption">
  1909. {block:Lines}
  1910. <p class="npf_chat">
  1911. {block:Label}
  1912. <span class="label">{Label}</span>
  1913. {/block:Label}
  1914. {Line}
  1915. </p>
  1916. {/block:Lines}
  1917. </div>
  1918. {/block:Chat}
  1919.  
  1920. <!-- legacy link (styled as npf) -->
  1921. {block:link}
  1922. <div class="npf-link-block {block:Thumbnail}has-poster"{/block:Thumbnail}>
  1923. <a {Target} href="{URL}" class="link">
  1924. <div {block:Thumbnail}class="poster" style="background:url({Thumbnail-HighRes}); background-position: 50%; background-repeat: no-repeat; background-size: cover; background-clip: content-box;"{/block:Thumbnail}>
  1925. <div class="title">{Name}</div>
  1926. </div>
  1927. <div class="bottom">
  1928. {block:Excerpt}<div class="description">{Excerpt}</div>{/block:Excerpt}
  1929. {block:Host}<div class="site-name">{Host}</div>{/block:Host}
  1930. </div>
  1931. </a>
  1932. </div>
  1933. {/block:link}
  1934.  
  1935. <!-- legacy video -->
  1936. {block:Video}
  1937. <div class="video">
  1938. {Video-700}
  1939. </div>
  1940. {/block:Video}
  1941.  
  1942. <!-- legacy audio styled as npf audio -->
  1943. {block:Audio}
  1944. <div class="tmblr-full">
  1945. {/block:AudioPlayer}
  1946. <div class="audio-caption">
  1947.  
  1948. <div class="album-art">
  1949. {block:AlbumArt}
  1950. <img class="album-cover" src="{AlbumArtURL}" alt="image">
  1951. {/block:AlbumArt}
  1952. </div>
  1953.  
  1954. <div class="album-content">
  1955. <div class="album-details">
  1956. <span class="tmblr-audio-meta audio-details">
  1957. {block:TrackName}
  1958. <span class="tmblr-audio-meta title"><h3>{TrackName}</h3></span>
  1959. {/block:TrackName}
  1960.  
  1961. {block:Artist}
  1962. <span class="tmblr-audio-meta artist">{Artist}</span>
  1963. {/block:Artist}
  1964. </span>
  1965. </div>
  1966. <div class="audio_player">
  1967. <span class="custom_audio_buttons"></span>
  1968. <div class="audio-time">
  1969. <span class="custom_audio_current_time"></span>
  1970. <span class="custom_audio_time_left"></span>
  1971. <div class="custom_audio_seekbar"></div>
  1972. </div>
  1973. </div>
  1974. </div>
  1975. </div>
  1976. {AudioPlayer}
  1977. {/block:AudioPlayer}
  1978. </div>
  1979. {/block:Audio}
  1980.  
  1981. <!-- ask -->
  1982. {block:Answer}
  1983. <div class="ask-container">
  1984. <div class="asker-wrap flex gap2 align-center">
  1985. <img src="{AskerPortraitURL-64}"/>
  1986. <div class="ask-user-info flex">
  1987. <span>{Asker}</span>
  1988. </div>
  1989. </div>
  1990.  
  1991. <div class="question">
  1992. {Question}
  1993. </div>
  1994. </div>
  1995.  
  1996. {block:NotReblog}
  1997. <div class="replies">{Answer}</div>
  1998. {/block:NotReblog}
  1999.  
  2000. {block:Answerer}
  2001. <div class="ask-container rb-answer">
  2002. <div class="asker-wrap flex gap1 align-center">
  2003. <img src="{AnswererPortraitURL-64}"/>
  2004. <div class="ask-user-info flex">
  2005. <span>{Answerer}</span>
  2006. </div>
  2007. </div>
  2008.  
  2009. <div class="question reply">
  2010. {Answer}
  2011. </div>
  2012. </div>
  2013. {/block:Answerer}
  2014. {/block:Answer}
  2015.  
  2016. <!-- caption -->
  2017. <div class="caption {block:notreblog} original-post {/block:notreblog}">
  2018. {block:Text}
  2019. {block:Title}<h2>{Title}</h2>{/block:Title}
  2020. {/block:Text}
  2021.  
  2022. {block:Link}
  2023. {block:Description}
  2024. {block:NotReblog}{Description}{/block:NotReblog}
  2025. {/block:Description}
  2026. {/block:Link}
  2027.  
  2028. {block:notreblog}
  2029. {block:caption}{Caption}{/block:caption}
  2030. {block:Text}<div class="reblog-content original">{Body}</div>{/block:Text}
  2031.  
  2032. {/block:notreblog}
  2033.  
  2034. {block:Rebloggedfrom}
  2035. {block:Reblogs}
  2036. <!-- display:none; below hides the double comments that sometimes appear in old pre-2014 reblogged quote posts -->
  2037. <div class="reblogs" {block:Quote}style="display:none;"{/block:Quote}>
  2038. <div class="reblog-header {block:IsOriginalEntry}original{/block:IsOriginalEntry} flex align-center gap1">
  2039. <img src="{PortraitURL-64}" alt="{username}'s avatar">
  2040. {block:IsActive}
  2041. <a class="user flex align-center" target="_blank" href="{Permalink}">{Username}</a>
  2042. {/block:IsActive}
  2043. {block:IsDeactivated}
  2044. <span class="user flex align-center deactivated" aria-label="user deactivated">{Username}</span>
  2045. {/block:IsDeactivated}
  2046. </div>
  2047.  
  2048. <div class="reblog-content">
  2049. {Body}
  2050. </div>
  2051. </div>
  2052. {/block:Reblogs}
  2053. {/block:RebloggedFrom}
  2054. </div>
  2055.  
  2056. </div><!-- post-content end -->
  2057.  
  2058. {block:Date}{block:IndexPage}
  2059. <footer class="info">
  2060.  
  2061. <div class="info-inner flex gap2 align-center between">
  2062.  
  2063. <div class="numbers flex gap1 align-center">
  2064. <a class="notecount" href="{Permalink}">{NoteCountWithLabel}</a>
  2065. </div>
  2066.  
  2067. <div class="interact flex align-center">
  2068. {block:HasTags}
  2069. {block:IndexPage}
  2070. <div class="toggle-tags {select:Display tags}" aria-label="show tags" title="show tags">
  2071. <span class="info-icon">
  2072. <i class="ti ti-tag"></i>
  2073. </span>
  2074. </div>
  2075. {/block:IndexPage}
  2076. {/block:HasTags}
  2077. <a class="custom-like-container" href="#" aria-label="like post" title="like">
  2078. {LikeButton}
  2079. <span class="custom-like-icon info-icon">
  2080. <i class="ti ti-heart"></i>
  2081. </span>
  2082. </a>
  2083. <a class="rb" href="{ReblogURL}" target="_blank" aria-label="replog post" title="reblog">
  2084. <span class="info-icon">
  2085. <i class="ti ti-refresh"></i>
  2086. </span>
  2087. </a>
  2088. </div>
  2089.  
  2090. </div>
  2091.  
  2092. {block:HasTags}
  2093. <div class="tags-container {block:IndexPage}{select:Display tags}{/block:IndexPage}">
  2094. <div class="tags flex gap1 wrap">
  2095. {block:Tags}
  2096. <a href="{TagURL}">#{Tag}</a>
  2097. {/block:Tags}
  2098. </div>
  2099. </div>
  2100. {/block:HasTags}
  2101.  
  2102. </footer>
  2103. {/block:IndexPage}{/block:Date}
  2104.  
  2105. </article>
  2106.  
  2107. <!-- permalink page -->
  2108. {block:PermalinkPage}
  2109. <div class="permalink-container">
  2110.  
  2111. <div class="time-ago-container">
  2112. <i class="ti ti-calendar"></i>Posted {TimeAgo} on {Month} {DayOfMonth}, {Year} at {12Hour}:{Minutes} {CapitalAmPm}
  2113. </div>
  2114.  
  2115. <div class="permalink-grid">
  2116.  
  2117. <div class="reblogged-from-container flex align-center gap2">
  2118. {block:RebloggedFrom}
  2119. <div class="permalink-parent-avatar">
  2120. <img src="{ReblogParentPortraitURL-96}" alt="reblog parent">
  2121. </div>
  2122. <div class="reblog-parent">
  2123. <span class="reblogged-from"><b>Via:</b></span>
  2124. <a href="{ReblogParentURL}">{ReblogParentName}</a>
  2125. </div>
  2126. {/block:RebloggedFrom}
  2127. </div>
  2128.  
  2129. <div class="source-container flex align-center gap2">
  2130. {block:RebloggedFrom}
  2131. <div class="source-avatar">
  2132. <img src="{ReblogRootPortraitURL-96}" alt="reblog parent">
  2133. </div>
  2134. <div class="reblog-parent">
  2135. <span class="reblogged-from"><b>Source:</b></span>
  2136. <a href="{ReblogRootURL}">{ReblogRootName}</a>
  2137. </div>
  2138. {/block:RebloggedFrom}
  2139. </div>
  2140. </div>
  2141. {block:HasTags}
  2142. <div class="tags-container">
  2143. <div class="tags flex wrap">
  2144. <b>Tags:</b>
  2145. {block:Tags}<a href="{TagURL}">#{Tag}</a>{/block:Tags}
  2146. </div>
  2147. </div>
  2148. {/block:HasTags}
  2149. </div>
  2150.  
  2151. {block:PostNotes}
  2152. <div class="notes-container">
  2153. <span class="note-counter">{NoteCountWithLabel}</span>
  2154. <div class="note-count">{PostNotes-64}</div>
  2155. </div>
  2156. {/block:PostNotes}
  2157. {/block:PermalinkPage}
  2158.  
  2159. {/block:Posts}
  2160.  
  2161. {block:Pagination}
  2162. <nav class="pagi flex gap3 align-center between" aria-label="Pagination">
  2163. <a {block:PreviousPage} href="{PreviousPage}" title="prev page"{/block:PreviousPage} class="{block:PreviousPage}has_{/block:PreviousPage}page">prev</a>
  2164. <p class="total-pages">{CurrentPage} / {TotalPages}</p>
  2165. <a {block:NextPage} href="{NextPage}" title="next page"{/block:NextPage} class="{block:NextPage}has_{/block:NextPage}page">next</a>
  2166. </nav>
  2167. {/block:Pagination}
  2168.  
  2169. <section class="footer-floor">
  2170. Theme by <a target="_blank" href="https://sheathemes.tumblr.com/">Sheathemes</a> - Powered by <a target="_blank" href="https://www.tumblr.com/">Tumblr</a>.
  2171. </section>
  2172.  
  2173. </section>
  2174. </main>
  2175.  
  2176. </div> <!-- end .paige-container -->
  2177.  
  2178. <button class="scroll-to-top left-icon" title="scroll to top" type="button" aria-label="click scroll to top">
  2179. <i class="ti ti-circle-arrow-up"></i>
  2180. </button>
  2181.  
  2182. <!-- PHOTOSET: legacy -->
  2183. <script src="https://static.tumblr.com/diajl5m/y39s6mwvr/legacy-photoset.js"></script>
  2184. <!-- TOOLTIP: tippy.js -->
  2185. <script src="https://unpkg.com/@popperjs/core@2"></script>
  2186. <script src="https://unpkg.com/tippy.js@6"></script>
  2187. <!-- ICONS: phosphor/feather -->
  2188. <script src="https://unpkg.com/@phosphor-icons/web"></script>
  2189. <script src="https://unpkg.com/feather-icons"></script>
  2190. <!-- AUDIO: customaudio.js by @annasthms -->
  2191. <script src="https://cdn.jsdelivr.net/gh/annasthms/customaudio@latest/customaudio.min.js"></script>
  2192. <!-- TIME AGO: timeago.js by bychloethemes (JS only version mdified by @mournstera) -->
  2193. <script src="https://static.tumblr.com/uh2chis/Ed0s9c62w/timeago.min.js"></script>
  2194.  
  2195. <script>
  2196. document.addEventListener("DOMContentLoaded", function () {
  2197.  
  2198. // ------------------- toggle tumblr controls
  2199. const control = document.querySelector(".controls");
  2200.  
  2201. control.addEventListener("click", function () {
  2202. document.querySelector(".tmblr-iframe").classList.toggle("active");
  2203. document.querySelector(".spin").classList.toggle("active");
  2204. });
  2205.  
  2206. // ------------------- scroll to top button
  2207. const html = document.documentElement;
  2208. const scrollElement = document.querySelector(".scroll-to-top");
  2209.  
  2210. document.addEventListener("scroll", function () {
  2211. if (html.scrollTop > 70) {
  2212. scrollElement.classList.add("visible");
  2213. } else {
  2214. scrollElement.classList.remove("visible");
  2215. }
  2216. });
  2217.  
  2218. scrollElement.addEventListener("click", function () {
  2219. html.scrollTo({ top: 0, behavior: "smooth" });
  2220. });
  2221.  
  2222. // ------------------- customaudio.js script by annasthms @ tumblr
  2223. customAudio({
  2224. post: ".posts",
  2225. wrappers: {
  2226. audio: ".custom_audio_wrapper",
  2227. buttons: ".custom_audio_buttons",
  2228. },
  2229. default: false,
  2230. pauseAll: true,
  2231. playButton: "<i data-feather='play'></i>",
  2232. pauseButton: "<i data-feather='pause'></i>",
  2233. errorIcon: "<i data-feather='x'></i>",
  2234. hideInfoIfError: true,
  2235. callAfterLoad: () => {
  2236. feather.replace();
  2237. }
  2238. });
  2239.  
  2240. // ------------------- shorten note count by @mournstera
  2241. const noteCounts = document.querySelectorAll(".notecount");
  2242.  
  2243. noteCounts.forEach(function (noteCountElement) {
  2244. let noteCount = parseInt(noteCountElement.textContent.replace(/,/g, "").split(" ")[0], 10);
  2245.  
  2246. if (noteCount >= 1000000) {
  2247. noteCountElement.textContent = `${(noteCount / 1000000).toFixed(2)}m notes`;
  2248. } else if (noteCount >= 1000) {
  2249. noteCountElement.textContent = `${(noteCount / 1000).toFixed(1)}k notes`;
  2250. }
  2251. });
  2252.  
  2253. // ------------------- time ago
  2254. const elements = document.querySelectorAll('.timeago');
  2255.  
  2256. timeAgo(elements, {
  2257. time: 'short',
  2258. spaces: true,
  2259. words: false,
  2260. prefix: '',
  2261. suffix: 'ago'
  2262. });
  2263.  
  2264. {block:IndexPage}
  2265. // ------------------- toggle tags
  2266. const toggleTagsElements = document.querySelectorAll(".toggle-tags");
  2267.  
  2268. toggleTagsElements.forEach(function (element) {
  2269. element.addEventListener("click", function (event) {
  2270. const article = this.closest("article");
  2271. if (!article) return;
  2272.  
  2273. const tagsContainer = article.querySelector(".tags-container");
  2274. if (!tagsContainer) return;
  2275.  
  2276. const maxHeight = tagsContainer.scrollHeight + "px";
  2277. const isOpen = tagsContainer.style.maxHeight === maxHeight;
  2278.  
  2279. tagsContainer.style.maxHeight = isOpen ? "0" : maxHeight;
  2280. this.classList.toggle("active");
  2281. event.preventDefault();
  2282. });
  2283. });
  2284. {/block:IndexPage}
  2285.  
  2286. // ------------------- toggle menu
  2287. const menu = document.getElementById('menu');
  2288. const menuBtn = document.getElementById('open-menu');
  2289. const menuBtnIcon = menuBtn.querySelector('i');
  2290.  
  2291. menuBtn.addEventListener('click', () => {
  2292. menu.classList.toggle('open');
  2293. const menuOpen = menu.classList.contains('open');
  2294.  
  2295. if(menuOpen) {
  2296. menuBtnIcon.setAttribute("class", "ti ti-x");
  2297. } else {
  2298. menuBtnIcon.setAttribute("class", "ti ti-menu-2");
  2299. }
  2300. });
  2301.  
  2302. });
  2303.  
  2304. // ------------------- tooltip
  2305. const commonOptions = {
  2306. theme: "custom",
  2307. arrow: false,
  2308. followCursor: true,
  2309. placement: "top",
  2310. touch: "hold",
  2311. };
  2312.  
  2313. tippy("[title]", {
  2314. ...commonOptions,
  2315. content(reference) {
  2316. const title = reference.getAttribute("title");
  2317. reference.removeAttribute("title");
  2318. return title;
  2319. },
  2320. });
  2321.  
  2322. // ------------------- toggle dark/light by @mournstera
  2323. const modeButtons = document.querySelectorAll(".theme-toggle");
  2324.  
  2325. modeButtons.forEach((btn) => {
  2326. const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  2327. const initialTooltipText = storedTheme === "dark" ? "Toggle light mode" : "Toggle dark mode"; // change tooltip here..
  2328. tippy(btn, {
  2329. ...commonOptions,
  2330. content: initialTooltipText,
  2331. });
  2332.  
  2333. btn.addEventListener("click", function () {
  2334. const currentTheme = document.documentElement.getAttribute("data-theme");
  2335. const targetTheme = currentTheme === "light" ? "dark" : "light";
  2336.  
  2337. const tooltipText = targetTheme === "dark" ? "Toggle light mode" : "Toggle dark mode"; // ..change tooltip here.
  2338. btn._tippy.setContent(tooltipText);
  2339.  
  2340. document.documentElement.classList.add("theme-transition");
  2341. document.documentElement.setAttribute("data-theme", targetTheme);
  2342. localStorage.setItem("theme", targetTheme);
  2343.  
  2344. setTimeout(function () {
  2345. document.documentElement.classList.remove("theme-transition");
  2346. }, 50);
  2347. });
  2348. });
  2349.  
  2350. // ------------------- remove empty p tags
  2351. for (const p of document.querySelectorAll('p')) {
  2352. if (p.innerHTML.trim() === '') {
  2353. p.remove()
  2354. }
  2355. }
  2356. // ------------------- NPF posts - reverse-compatible-template.html by @egg.design
  2357. // create posts array
  2358. let posts = []
  2359. {block:Posts}
  2360. posts.push({ npf: JSON.parse({JSNPF}), id: {JSPostId}})
  2361. {/block:Posts}
  2362.  
  2363. //function for updating post types
  2364. function updateTypes(type, article) {
  2365. article.classList.remove('text-post')
  2366. article.classList.add(`${ type }-post`, 'npf-post')
  2367. }
  2368.  
  2369. // loop through array to get each post
  2370. for (const post of posts) {
  2371. let npf = post.npf
  2372. let article = document.getElementById(`post-${post.id}`)
  2373. // select captions that have something in them
  2374. let caption = article.querySelector('.caption:is(:not(:empty))')
  2375. if (caption != null && article.classList.contains('text-post')) {
  2376. // if content exists
  2377. if (npf.trail.length || npf.content.length) {
  2378. // assign various post types based on NPF data
  2379. switch (npf.trail[0]?.content[0]?.type ?? npf.content[0].type) {
  2380. case 'image':
  2381. updateTypes('photos', article)
  2382. if (article.querySelector('.npf_row') == null) {
  2383. caption.prepend(article.querySelector('figure'))
  2384. }
  2385. break
  2386. case 'video':
  2387. updateTypes('video', article)
  2388. let video = article.querySelector('figure')
  2389. caption.prepend(video)
  2390. break
  2391. case 'link':
  2392. updateTypes('link', article)
  2393. case 'audio':
  2394. updateTypes('audio', article)
  2395. break
  2396. case 'quote':
  2397. updateTypes('quote', article)
  2398. }
  2399.  
  2400. // if there are photos
  2401. if (article.classList.contains('photos-post')) {
  2402. let photoset = document.createElement('div')
  2403. photoset.classList.add('npf-photos')
  2404. caption.prepend(photoset)
  2405. // find where a photoset would be split up by another content block
  2406. let photoBreak = article.querySelector('.reblog-content p, .reblog-content h1, .reblog-content h2, .reblog-content blockquote')
  2407. let elements = []
  2408. if (photoBreak) {
  2409. let prevElement = photoBreak.parentNode.firstElementChild
  2410. while (prevElement !== photoBreak) {
  2411. elements.push(prevElement)
  2412. prevElement = prevElement.nextElementSibling
  2413. }
  2414. }
  2415. // if there is nothing that breaks up the photoset, select all rows
  2416. else {
  2417. elements = article.querySelectorAll('.npf_row')
  2418. }
  2419. // move each row to the top
  2420. for (const el of elements) {
  2421. photoset.append(el)
  2422. }
  2423. if (article.querySelectorAll('.npf_row').length > 1) {
  2424. updateTypes('photoset', article)
  2425. }
  2426. else {
  2427. updateTypes('photo', article)
  2428. }
  2429. }
  2430.  
  2431. // clean up any potential stray reblog headers
  2432. let reblogHeader = article.querySelector('.reblog-header')
  2433. let reblogContent = article.querySelector('.reblog-content')
  2434. if (reblogHeader?.nextElementSibling === reblogContent && reblogContent?.childElementCount === 0) {
  2435. reblogHeader.remove()
  2436. reblogContent.remove()
  2437. }
  2438. }
  2439. }
  2440. }
  2441.  
  2442. // wrap npf photoset in div that's not the first photoset
  2443. const content = document.querySelectorAll(".reblog-content");
  2444. let sections = []; // initialize empty array it'll be useful later !
  2445. let temp_array = []; // will also be useful
  2446.  
  2447. // We will re-create all the div "reblog-content".
  2448. function removeAndReplace(content_div) {
  2449. content_div.replaceChildren();
  2450. let idx = 0;
  2451.  
  2452. for (const array_containing_the_arrays_of_child_nodes of sections) {
  2453. const div = document.createElement("div");
  2454. array_containing_the_arrays_of_child_nodes[0].classList.contains("npf_row") ? ++idx : null;
  2455. for (const child_nodes_array of array_containing_the_arrays_of_child_nodes) {
  2456. if (!child_nodes_array.classList.contains("npf_row")) {
  2457. content_div.appendChild(child_nodes_array);
  2458. } else {
  2459. div.appendChild(child_nodes_array);
  2460. }
  2461. }
  2462. div.classList.add(`more_photoset`);
  2463. div.children.length <= 0 ? null : content_div.appendChild(div);
  2464. }
  2465. sections = [];
  2466. }
  2467.  
  2468. function y() {
  2469. content.forEach((content) => {
  2470. const content_children = content.children;
  2471. for (let i = 0; i < content_children.length; ++i) {
  2472. const children = content_children[i];
  2473. if (!children.classList.contains("npf_row")) {
  2474. temp_array.length >= 1 ? sections.push(temp_array, [children]) : sections.push([children]);
  2475. temp_array = [];
  2476. } else {
  2477. temp_array.push(children);
  2478. if (content_children[content_children.length - 1] === children) {
  2479. sections.push(temp_array);
  2480. temp_array = [];
  2481. }
  2482. }
  2483. }
  2484. removeAndReplace(content);
  2485. });
  2486. }
  2487.  
  2488. y();
  2489. </script>
  2490. </body>
  2491. </html>
  2492.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!