API tools faq
paste
themesbydoori

sheathemes

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