API tools faq
paste
themesbydoori

Corruption WIP

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