API tools faq
paste
themesbydoori

Nullify WIP

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