API tools faq
paste
Advertisement
southcodes

artsbyannz: theme

southcodes
Mar 4th, 2025
190
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 44.39 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.     book theme and pages coded by skye southcodes.tumblr.com for artsbyannz.tumblr.com
  4.    
  5.     - normalize css by https://github.com/necolas
  6.     - fonts:
  7.         google fonts
  8.         https://www.tunera.xyz/fonts/nyght-serif/
  9.     - like button & video resizing by @shythemes
  10.     - embed audio css and hide empty answers script by @gukthemes
  11.     - css photosets by https://annasthms.github.io/photosets/
  12.     - dark mode https://mournstera.tumblr.com/post/724742111455592448/a-dark-mode-guide-with-css-variables-and-js-this by https://mournstera.tumblr.com/    
  13.     - icons by https://phosphoricons.com/
  14.     - npf audio posts by https://glenthemes.tumblr.com/post/722160746171072512/npf-audio-player
  15.  
  16. -->
  17.  
  18. <!DOCTYPE html>
  19. <html lang="en" data-theme="light">
  20. <head>
  21.     <title>{title}</title>
  22.    
  23.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  24.  
  25.     <script>
  26.     const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
  27.     if (storedTheme) {
  28.         document.documentElement.setAttribute("data-theme", storedTheme);
  29.     }
  30.     </script>
  31.  
  32.     <link rel="shortcut icon" href="{favicon}">
  33.     <meta name="description" content="{MetaDescription}"/>
  34.  
  35.     <link rel="preconnect" href="https://fonts.googleapis.com">
  36.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  37.     <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
  38.  
  39.     <!-- normalize -->
  40.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  41.  
  42.     <!--  Photoset CSS -->
  43.     <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  44.    
  45.     <!--npf audio posts-->
  46.     <script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
  47.     <link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
  48.     <script>
  49.     tumblr_npf_audio({
  50.     emptyTitleText: "Untitled track",
  51.     emptyArtistText: "Untitled artist",
  52.     emptyAlbumText: "Untitled album",
  53.    
  54.     titleLabel: "Track:",
  55.     artistLabel: "Artist:",
  56.     albumLabel: "Album:"
  57.     });
  58.     </script>
  59.     <style edit-npf-audio-player>
  60.     .npf-audio-wrapper {
  61.         margin-bottom:1rem;
  62.         --NPF-Audio-Buttons-Size: 1.4rem;
  63.         --NPF-Audio-Buttons-Color: var(--background); /* color of play & pause buttons */
  64.         --NPF-Audio-Buttons-Spacing: 1.3rem; /* space between buttons and song info */
  65.        
  66.         --NPF-Audio-Image-Size: 85px;
  67.         --NPF-Audio-Image-Spacing: 0px; /* gap between player info and cover image */
  68.     }
  69.    
  70.     .npf-audio-background {
  71.         background-color:var(--accents); /* background color of player (optional) */
  72.         padding: 1.5rem;
  73.     }
  74.    
  75.     .npf-audio-title-label,
  76.     .npf-audio-artist-label,
  77.     .npf-audio-album-label {
  78.         font-weight: bold;
  79.     }
  80.    
  81.     .npf-audio-title,
  82.     .npf-audio-artist,
  83.     .npf-audio-album {
  84.         color: #333333; /* color of audio text (optional) */
  85.     }
  86.     </style>
  87.  
  88. <style>
  89.     /* colors for light mode */
  90. :root, html[data-theme='light'] {
  91.     --text: #333;
  92.     --background:white;
  93.     --titles:  #b88f80;
  94.     --links: #b88f80;
  95.     --links-hover: #9b6b59;
  96.     --icons: #b88f80;
  97.     --accents: #d1a990;
  98.     --alternating-background:#d3aa88;
  99.     --alternating-text:#f7f2ea;
  100.     --alternating-text-title:#806132;
  101.     --alternating-accents: #97613f;
  102.     --alternating-link: #8a6631;
  103.     --toggle-button-icon:rgb(218, 215, 215);
  104.     --toggle-button-background:rgb(51, 49, 49);
  105.     --light-on: block;
  106.     --light-off: none;
  107. }
  108.  
  109. /* colors for dark mode */
  110. :root, html[data-theme='dark'] {
  111.     --light-on: none;
  112.     --light-off: block;
  113.     --text: #b9b7b7;
  114.     --background:rgb(60, 60, 61);
  115.     --titles:  #b88f80;
  116.     --links: #b88f80;
  117.     --links-hover: #9b6b59;
  118.     --icons: #776660;
  119.     --accents: #795738;
  120.     --alternating-background:#917660;
  121.     --alternating-text:#d1d0ce;
  122.     --alternating-text-title:#523e21;
  123.     --alternating-accents: #915d3d;
  124.     --alternating-link: #5e431a;
  125.     --toggle-button-icon:rgb(218, 215, 215);
  126.     --toggle-button-background:rgb(51, 49, 49);
  127.     --light-on: none;
  128.     --light-off: block;
  129. }
  130.  
  131. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85);-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  132. .tmblr-iframe:hover {opacity:.8;}
  133.  
  134. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--accents);}
  135. ::-webkit-scrollbar {width:6px}
  136. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  137.  
  138. pre {font-family:consolas;
  139.   white-space: pre-wrap;       /* css-3 */
  140.   white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  141.   white-space: -pre-wrap;      /* Opera 4- */
  142.   white-space: -o-pre-wrap;    /* Opera 7 */
  143.   word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  144.  
  145. * {box-sizing: border-box;}
  146. body, figure{margin:0;padding:0;letter-spacing: .03rem;}
  147. html{font: 400 14px 'Quicksand', sans-serif;}
  148. body {font-size:1rem;color:var(--text);background:var(--background);}
  149. a {text-decoration: none;color:var(--links);word-break:break-word;}
  150. a:hover {color:var(--links-hover);}
  151. blockquote {margin:0;padding:0;}
  152. blockquote blockquote {border-left:1px solid var(--accents);padding:.2rem 0 .2rem .7rem;}
  153. img {max-width:100%;height: auto;display: block;margin: 0}
  154. hr {border:0;border-top:1px solid var(--accents);margin:0;}
  155. video {max-width:100%;}
  156. ul, li {list-style: none;margin: 0;padding: 0}
  157. pre {border-left:1px solid var(--accents); padding:3px 0 3px 1rem;}
  158. h1,h2 {font-family: nyght-regular-italic;font-style:italic;}
  159.  
  160. @font-face {
  161.   font-family: nygth-regular;
  162.   src: url(https://static.tumblr.com/p5i0ib5/i1sspt31d/nyghtserif-regular.ttf);
  163. }d
  164.  
  165. @font-face {
  166.   font-family: nygth-regular-italic;
  167.   src: url(https://static.tumblr.com/p5i0ib5/wGispt31j/nyghtserif-regularitalic.ttf);
  168. }
  169.  
  170. /* dark mode */
  171.  
  172. html.theme-transition,
  173. html.theme-transition *,
  174. html.theme-transition *:before,
  175. html.theme-transition *:after {
  176. transition: 0s !important;
  177. transition-delay: 0 !important;
  178. }
  179.  
  180. button.theme-toggle {
  181.     position: fixed;
  182.     inset:1.5rem auto auto 2rem;
  183.     padding: .5rem;
  184.     border: 0;
  185.     border-radius: 100%;
  186.     outline: none;
  187.     cursor: pointer;
  188.     font-size: 25px;
  189.     color: var(--text);
  190.     background: var(--toggle-button-background);
  191. }
  192. .theme-toggle .ph{color: var(--toggle-button-icon)}
  193. .light-on {display: var(--light-on);}
  194. .light-off {display: var(--light-off);}
  195.  
  196. /* container */
  197.  
  198. #container {
  199.   width: 100%;
  200.   margin: auto ;
  201. }
  202.  
  203. /* global navigation */
  204.  
  205. #global-navigation {
  206.     padding: 4.5rem 4rem 2.5rem;
  207.     text-align: center;
  208.     font-family: nygth-regular;
  209.     font-weight: 500;
  210.     font-size: 1.4rem;
  211.     letter-spacing: .08rem;
  212. }
  213.  
  214. #global-navigation ul li {
  215.     display: inline-block;
  216.     margin-right: 6rem;
  217.     text-transform: uppercase;
  218. }
  219.  
  220.  
  221. /* updates tab */
  222.  
  223. #updates-button {
  224.     border: 0;
  225.     padding: 0;
  226.     font: inherit;
  227.     cursor:pointer;
  228.     letter-spacing: inherit;
  229.     text-transform: uppercase;
  230.     color: var(--links);
  231.     outline: none;
  232.     background-color: transparent;
  233. }
  234.  
  235. #updates-button:hover {color: var(--links-hover);}
  236.  
  237. #updates-tab {
  238.     display: none;
  239.     position: absolute;
  240.     inset: 5.2rem auto auto 50%;    
  241.     -ms-transform: translate(-50%, -50%);
  242.     transform: translateX(-50%);
  243.     width: 90vw;
  244.     max-width: 20rem;
  245.     padding: 1.5rem;
  246.     border: 2px solid var(--accents);
  247.     border-radius: 4px;
  248.     font: 400 1.1rem 'quicksand', serif;
  249.     text-transform: none;
  250.     line-height: 140%;
  251.     background-color: var(--background);
  252. }
  253.  
  254. #updates-tab h4 {
  255.     margin-top: 1rem;
  256.     font: 500 1.7rem nygth-regular-italic;
  257.     letter-spacing: .1rem;
  258.     color:var(--titles);
  259. }
  260.  
  261. #updates-tab span {
  262.     padding: 0 .5rem;
  263.     box-shadow: inset 0 -7px var(--accents);
  264. }
  265.  
  266. #updates-tab hr {
  267.     width: .8rem;
  268.     height: .8rem;
  269.     margin: 2rem auto;
  270.     border: 0;
  271.     border-radius: 100%;
  272.     background-color: var(--accents);
  273. }
  274.  
  275. #updates-tab a {font-weight: 600;}
  276.  
  277. /* header */
  278.  
  279. #header {
  280.     margin-bottom: 16rem;
  281.     {block:AskPage}
  282.     margin-bottom:10rem;
  283.     {/block:AskPage}
  284.     {block:SubmitPage}
  285.     margin-bottom:10rem;
  286.     {/block:SubmitPage}
  287.     text-align: center;
  288.     font-family: nygth-regular;
  289. }
  290.  
  291. figure.header-image {
  292.     margin-bottom: 5rem;
  293. }
  294.  
  295. img.header-image {
  296.     width: 100%;
  297.     height: 100%;
  298. }
  299.  
  300. #blog-title {
  301.     margin-bottom: 3rem;
  302.     font-family: nygth-regular-italic;
  303.     font-size: 6rem;
  304.     font-weight: 400;
  305.     letter-spacing: .06em;
  306.     color: var(--titles);
  307. }
  308.  
  309. #blog-description {
  310.     max-width: 50rem;
  311.     margin:0 auto 4rem;
  312.     font-family: 'quicksand', serif;
  313.     font-size: 1.3rem;
  314.     line-height: 155%;
  315.     letter-spacing: .05rem;
  316. }
  317.  
  318. /* header links navigation */
  319.  
  320. #header-navigation {
  321.     margin-bottom: 3rem;
  322.     text-transform: uppercase;
  323.     font-size: 1.4rem;
  324.     letter-spacing: .04rem;
  325. }
  326.  
  327. #header-navigation ul {
  328.     display: flex;
  329.     flex-wrap: wrap;
  330.     justify-content:space-around;
  331.     max-width: 80%;
  332.     margin:auto  
  333. }
  334.  
  335. #header-navigation ul li{margin-bottom:2rem}
  336.  
  337. /* header social navigation */
  338.  
  339. #social-navigation ul li{
  340.     display: inline-block;
  341.     margin:1rem 3rem ;
  342. }
  343.  
  344. #social-navigation ul li a {color:var(--icons)}
  345.  
  346. #social-navigation ul li a:hover {color: var(--links-hover);}
  347.  
  348. #social-navigation i {font-size: 1.8rem;}
  349.  
  350. /* latest novels */
  351.  
  352. #latest-novels {
  353.     display: flex;
  354.     flex-wrap: wrap;
  355.     justify-content: space-around;
  356.     max-width: 70rem;
  357.     margin: 0 auto 16rem;
  358.     {block:AskPage}
  359.     display:none;
  360.     {/block:AskPage}
  361.     {block:SubmitPage}
  362.     display:none;
  363.     {/block:SubmitPage}
  364.     {block:PermalinkPage}
  365.     display:none;
  366.     {/block:PermalinkPage}
  367. }
  368.  
  369. .latest-novel-image {transition-duration: .5s;margin:1rem 0;}
  370.  
  371. figure.latest-novel-image {width: 28%;}
  372.  
  373. figure.latest-novel-image:hover img {filter: blur(2px);}
  374.  
  375. #latest-novels-link {
  376.     width: 100%;
  377.     margin-top: 3rem;
  378.     text-align: center;
  379.     font-family: nyght-regular;
  380.     font-size: 2rem;
  381. }
  382.  
  383. #latest-novels-link a{
  384.     box-shadow: inset 0 -10px var(--accents);
  385.     padding: 0 .7rem ;
  386. }
  387.  
  388. /* currently writing */
  389.  
  390. #currently-writing {
  391.     padding:6rem 2rem;  
  392.     background-color: var(--alternating-background);
  393.     color: var(--alternating-text);
  394.     {block:AskPage}
  395.     display:none;
  396.     {/block:AskPage}
  397.     {block:SubmitPage}
  398.     display:none;
  399.     {/block:SubmitPage}
  400.     {block:PermalinkPage}
  401.     display:none;
  402.     {/block:PermalinkPage}
  403. }
  404.  
  405. .writing-book-wrapper {
  406.     display: flex;
  407.     justify-content: space-between;
  408.     flex-wrap: wrap;
  409.     max-width: 75rem;
  410.     margin: auto;
  411. }
  412.  
  413. .currently-writing-book {
  414.     width: calc(50% - 6rem);
  415.     margin:5rem 0;
  416.     font-family: nygth-regular-italic;
  417.     font-weight: 400;
  418. }
  419.  
  420. .currently-writing-title {
  421.     margin:0 0 2rem;
  422.     font-weight: 400;
  423.     font-size: 5rem;
  424.     letter-spacing: .06rem;
  425.     color: var(--alternating-text-title);
  426. }
  427.  
  428. .currently-writing-summary {
  429.     font-family: 'quicksand', serif;
  430.     font-size: 1.2rem;
  431.     color:var(--alternating-text)
  432. }
  433.  
  434. .currently-writing-link {
  435.     margin-top: 4rem;
  436.     padding: 0 .7rem;
  437.     font-size: 2.3rem;
  438.     color: var(--alternating-link);
  439.     box-shadow: inset 0 -10px var(--alternating-accents);
  440. }
  441.  
  442. /* blog wrapper */
  443.  
  444. #blog-wrapper {
  445.     width:90vw;
  446.     max-width:540px;
  447.     margin:5rem auto;
  448.     {block:AskPage}
  449.     margin:0 auto 10rem;
  450.     {/block:AskPage}
  451.     {block:SubmitPage}
  452.     margin:0 auto 10rem;
  453.     {/block:SubmitPage}
  454. }
  455.  
  456. #pinned-post {
  457.     margin-bottom:2rem;
  458.     text-transform:uppercase;
  459.     font-weight:500;
  460. }
  461.  
  462. #pinned-post .fa-thumbtack {
  463.     color:var(--accents);
  464.     font-size:1.5rem;
  465.     transform:rotate(340deg);
  466.     margin-right:.5em;
  467. }
  468.  
  469. .posttitle {
  470.     font-family: nyght-regular-italic;
  471.     font-size:3.5rem;
  472.     font-style:italic;
  473.     margin:1.5rem 0;
  474. }
  475.  
  476. .posts {
  477.     max-width:540px;
  478.     margin:15rem 0;
  479.     {block:PermalinkPage}
  480.     margin:0 auto;
  481.     {/block:PermalinkPage}
  482.     word-break:break-word;
  483.     font-size:1.1rem;
  484. }
  485.  
  486. .posts:last-of-type {margin-bottom:5rem;}
  487.  
  488. .posts:hover .tags,.posts:hover .permalink {
  489.     opacity:1;    
  490.     transition-duration:.2s
  491. }
  492.  
  493. /*               posts              */
  494.  
  495. .npf_indented {
  496.     margin-left:1.5rem;
  497. }
  498.  
  499. /* audio posts*/
  500.  
  501. .npf-audio-play svg {
  502.     opacity:1;
  503. }
  504.  
  505. /* quotes */
  506.  
  507. .npf_quote {font-style:italic;}
  508.  
  509. .npf_quote:before {content:'"';}
  510.  
  511. .npf_quote:after {content:'"';}
  512.  
  513. .npf_quote ~ p{margin-left:1rem;}
  514.  
  515. .npf_quote ~ p:before:first-of-type {content:'— ';}
  516.  
  517. .quote {
  518.     font-size:1.2rem;
  519.     font-style:italic;
  520. }
  521.  
  522. .quote-source {
  523.     margin-top:1rem;    
  524. }
  525.  
  526. .quote-source:before {
  527.     content:"— ";
  528. }
  529.  
  530. /* photos*/
  531.  
  532. .photo {
  533.     display: block;
  534.     margin: 0 0 1rem;
  535.     width:var(--post-size);
  536. }
  537.  
  538. .npf_row {margin:0!important}
  539.  
  540. /*      photosets      */
  541.  
  542. [photoset-layout] {
  543.     margin:0 0 1rem;
  544.     grid-gap: 1px;
  545. }
  546.  
  547. [photoset-layout] *{margin:0;}
  548.  
  549. [photoset-layout] img {cursor:pointer}
  550.  
  551. /* audio */
  552.  
  553. .audio,.spotify_audio_player {height:80px;}
  554.  
  555. /* links */
  556.  
  557. .link-post {
  558.     padding:1.5rem 1rem;
  559.     border:1px solid var(--accents);
  560.     border-radius:3px;
  561.     margin-bottom:1rem;
  562. }
  563.  
  564. .link-name{
  565.     display:block;
  566.     font-size:1.5rem;
  567.     font-weight:600;
  568. }
  569.  
  570. .link-excerpt {
  571.     margin-top:1rem;
  572.     font-style:italic;
  573. }
  574.  
  575. /*  chat  */
  576.  
  577. .npf_chat,.chat-post {font-family:'quicksand'!important;}
  578.  
  579. .npf_chat {line-height:150%;}
  580.  
  581. .npf_chat b {margin-right:.5rem;}
  582.  
  583. .npf_chat b:nth-of-type(odd) {
  584.     color:var(--accents);
  585. }
  586.  
  587. /*  asks  */
  588.        
  589. .q{
  590.     background:var(--accents);
  591.     padding:.7rem;
  592.     border-radius:4px;
  593.     margin:1rem 0;
  594. }
  595.  
  596. .asker-img,.answerer-img {
  597.     border-radius:100%;
  598.     border:.5rem solid var(--accents);
  599.     display:inline-block;
  600.     vertical-align:middle;
  601.     margin-right:1rem;
  602. }
  603.  
  604. .answerer-img {
  605.     width:35px;
  606.     border:.3rem solid var(--accents);
  607. }
  608.  
  609. .asker-user,.answerer-user {
  610.     display:inline-block;
  611.     vertical-align:middle;
  612.     text-transform:uppercase;
  613.     font-weight:500;
  614. }
  615.  
  616. .answer {margin-top:2rem;}
  617.  
  618. /* captions */
  619.  
  620. .capt {margin-top:1rem;}
  621.  
  622. .capt ul,.capt ol {padding-left:3rem;}
  623.  
  624. .capt ol li::marker, .capt ul li::marker {color:var(--accents);}
  625.  
  626. .capt ol li{
  627.     list-style-type: decimal;
  628.     margin-bottom:.5rem;
  629. }
  630.  
  631. .capt ul li {
  632.     list-style-type: circle;
  633.     margin-bottom:.5rem;
  634. }
  635.  
  636. .capt .user:first-of-type {margin-top:0;}
  637.  
  638. .userd:after {
  639.     content:' (deactivated)';
  640.     color:#aaa;
  641.     font-size:.8rem;
  642.     margin-left:.5rem;
  643. }
  644.  
  645. .cimg {display:none}
  646.  
  647. .user {margin-top:1rem;}
  648.  
  649. /* permalink */
  650.  
  651. .permalink {
  652.     margin-top:1rem;
  653.     transition-duration:.2s;
  654.     opacity:0;
  655.     text-transform:uppercase;
  656. }
  657.  
  658. .noteco {float:left;}
  659.  
  660. .time {
  661.     float:left;
  662.     margin-right:2rem;
  663. }
  664.  
  665. .via {margin:4rem auto;}
  666.  
  667. .reblogged-from {margin-bottom:1rem;}
  668.  
  669. .reblogged-from span,.reblogged-source span {
  670.     border-bottom:2px solid var(--accents);
  671.     padding:0 .3rem .2rem;
  672.     font-weight:500;
  673. }
  674.  
  675. /* reblog and like controls*/
  676.  
  677. .controls {float:right;}
  678.  
  679. svg {width:12px;}
  680.  
  681. svg {
  682.     height:auto;
  683.     opacity:.5;
  684.     display:block;
  685.     overflow:visible;
  686. }
  687. .controls a {
  688.     position:relative;
  689.     display:inline-block;
  690.     overflow:hidden;
  691. }
  692. .controls .reblog {
  693.     opacity:.93;
  694.     margin-right:1rem;
  695. }
  696. .controls .like .liked + svg {
  697.     opacity:1;
  698. }
  699. .controls .like .liked + svg path {
  700.     fill:#ec5a5a;
  701. }
  702. .controls .like .like_button {
  703.     position:relative;
  704. }
  705. .controls .like .like_button iframe {
  706.     position:absolute;
  707.     top:0;
  708.     left:0;
  709.     bottom:0;
  710.     right:0;
  711.     z-index:2;
  712.     opacity:0;
  713. }
  714.  
  715. /* tags */
  716.  
  717. .tags {
  718.     opacity:0;
  719.     transition-duration:.2s;
  720.     margin-top:.7rem;
  721.     line-height:170%;
  722. }
  723.  
  724. .tags a{margin-right:1rem;}
  725.  
  726. /* notes */
  727.  
  728. .notes {padding:0;}
  729.  
  730. ol.notes {padding-left:1rem;}
  731.  
  732. .notes .notes-label {margin-bottom:2rem;}
  733.  
  734. .notes .notes-label span{
  735.     border-bottom:2px solid var(--accents);
  736.     padding:0 .3rem .2rem;
  737.     font-weight:500;
  738. }
  739.  
  740. .notes img {
  741.     display:none;
  742.     margin-right:.7rem;
  743.     vertical-align:middle;
  744.     border-radius:3px;
  745. }
  746.  
  747. .notes li {
  748.     margin-bottom:.7rem;
  749. }
  750.  
  751. /* pagination */
  752.  
  753. .pagination {
  754.     font-weight:600;
  755.     margin-bottom:10rem;
  756. }
  757.  
  758. .pagination .fa-solid{
  759.     font-size:1.2rem;
  760.     color:var(--icons)
  761. }
  762.  
  763. .pagination .fa-chevron-right{
  764.     margin-left:1.5rem;    
  765. }
  766.  
  767. .pagination .fa-chevron-left{
  768.     margin-right:1.5rem;    
  769. }
  770.  
  771. .back-page {
  772.     float:left;
  773. }
  774. .next-page {
  775.     float:right;
  776. }
  777.  
  778. /* submissions */
  779.  
  780. .submission-label{
  781.     margin-bottom:1rem;
  782.     text-transform:uppercase;
  783.     font-weight:600;
  784. }
  785.  
  786. /* polls */
  787.  
  788. .poll-post .poll-question {
  789.     margin:1rem 0;
  790. }
  791.  
  792. /* about the author */
  793.  
  794. #about-the-author {
  795.     padding:8rem 7rem;  
  796.     background-color: var(--alternating-background);
  797.     color: var(--alternating-text);
  798.     {block:AskPage}
  799.     display:none;
  800.     {/block:AskPage}
  801.     {block:SubmitPage}
  802.     display:none;
  803.     {/block:SubmitPage}
  804.     {block:PermalinkPage}
  805.     display:none;
  806.     {/block:PermalinkPage}
  807. }
  808.  
  809. #author-wrapper {
  810.     max-width: 65rem;
  811.     margin: auto;
  812. }
  813.  
  814. #author-name {
  815.     margin: 0 0 2rem 0;
  816.     font-family: nygth-regular-italic;
  817.     font-weight: 400;
  818.     font-size: 6rem;
  819.     color: var(--alternating-text-title);
  820.     letter-spacing: .4rem;
  821. }
  822.  
  823. figure.author-image {
  824.     display: inline-block;
  825.     vertical-align:middle;
  826.     margin-right: 3rem;
  827.     border: 1rem solid var(--background);
  828.     max-width: 100%;
  829. }
  830.  
  831. .author-image {
  832.     width: 15rem;
  833.     aspect-ratio: 1 / 1;
  834.     object-fit: cover;
  835.     border-radius: 100%;
  836. }
  837.  
  838. #author-description {
  839.     width: calc(100% - 19rem);
  840.     display: inline-block;
  841.     vertical-align:middle;
  842.     font-family: 'quicksand', serif;
  843.     font-size: 1.2rem;
  844.     color:var(--alternating-text)
  845. }
  846.  
  847. #author-socials{margin-top: 3rem;}
  848.  
  849. #author-socials ul li{
  850.     display: inline-block;
  851.     margin-right: 4rem;
  852.     font-size: 2.3rem;
  853. }
  854.  
  855. #author-socials ul li:last-of-type {margin-right: 0;}
  856.  
  857. #author-socials ul li a {color: var(--icons);}
  858.  
  859. #author-socials ul li a:hover {color: var(--links-hover);}
  860.    
  861. /* footer */
  862.  
  863. #footer-section {padding:0 7rem 0;}
  864.  
  865. /* footer updates */
  866.  
  867. #footer-updates {
  868.     display: flex;
  869.     justify-content: space-between;
  870.     flex-wrap: wrap;
  871.     margin: 8rem 0;
  872.     font-family:'quicksand', serif;
  873.     {block:PermalinkPage}
  874.     display:none;
  875.     {/block:PermalinkPage}
  876.     {block:AskPage}
  877.     display:none;
  878.     {/block:AskPage}
  879.     {block:SubmitPage}
  880.     display:none;
  881.     {/block:SubmitPage}
  882. }
  883.  
  884. .update {
  885.     display: flex;
  886.     width: 47%;
  887.     margin: 4rem 0;
  888. }
  889.  
  890. .update hr {
  891.     flex-shrink: 0;
  892.     width: 3rem;
  893.     margin: .7rem 2rem 0;
  894.     border-top: 2px solid var(--accents);
  895. }
  896.  
  897. .update-title {
  898.     position: relative;
  899.     display: flex;
  900.     flex-shrink: 0;
  901.     width: 17rem;
  902.     font-family: nygth-regular;
  903.     font-weight: 400;
  904.     font-size: 1.6rem;
  905.     line-height: 155%;
  906.     letter-spacing: .06rem;
  907. }
  908.  
  909. .update-content {
  910.     font-size: 1.1rem;
  911.     letter-spacing: .05rem;
  912.     line-height: 150%;
  913. }
  914.  
  915. /* footer navigation */
  916.  
  917. #footer-navigation {
  918.     max-width: 60rem;
  919.     margin:0 auto 5rem;
  920.     font-family: nygth-regular;
  921.     font-size: 1.7rem;
  922.     text-transform: uppercase;
  923.     letter-spacing: .06rem;
  924.     text-align:center;
  925. }
  926.  
  927. #footer-navigation ul{
  928.     display: flex;
  929.     justify-content: space-between;
  930.     flex-wrap: wrap;
  931. }
  932.  
  933. #footer-navigation ul li {
  934.     margin:0 2rem 1rem
  935. }
  936.  
  937. #footer-navigation a:hover{color: var(--links-hover);}
  938.  
  939. /* copyright section */
  940.  
  941. #copyright-section {
  942.     display: flex;
  943.     justify-content: flex-end;
  944.     margin: 0 0 3rem;
  945.     font-family: 'quicksand', serif;
  946.     font-size: 1rem;
  947.     max-width: 100%;
  948. }
  949.  
  950. #copyright-section h2 {
  951.     display: inline-block;
  952.     margin: 0 2rem 0 0;
  953.     font-family: nygth-regular-italic;
  954.     font-size: 1.2rem;
  955.     font-weight: 400;
  956.     letter-spacing: .2rem;
  957. }
  958.  
  959. #copyright-author {
  960.     display: flex;
  961.     margin:0 2rem
  962. }
  963.  
  964. #copyright-author h3{
  965.     font-weight: 400;
  966.     text-transform: lowercase;
  967.     margin: 0;
  968. }
  969.  
  970. #copyright-author span {margin:0 .5rem}
  971.  
  972. /* others */
  973.  
  974. #credit {
  975.     margin: 0;
  976.     margin-left: 2rem;
  977. }
  978.  
  979. #credit a {font-weight: 700;}
  980.  
  981. .ttop {
  982.     position:fixed;
  983.     bottom:2rem;
  984.     right:2rem;
  985. }
  986.  
  987. .ttop .fa-chevron-up {
  988.     font-size:1.5rem;
  989. }
  990.  
  991. {CustomCSS}
  992.  
  993. /* MEDIA */
  994.  
  995. @media only screen and (min-width:0) and (max-width:400px) {
  996.  
  997.     #global-navigation ul li {
  998.       display:block;
  999.       margin-right: 0;
  1000.     }
  1001.  
  1002.     #about-the-author {
  1003.         padding:8rem 3rem;  
  1004.     }
  1005.  
  1006.     #copyright-section {
  1007.         display: block;
  1008.         margin: 0 0;
  1009.     }
  1010.    
  1011.     #copyright-section h2 {
  1012.         display: block;
  1013.         margin: 0 0 1rem 0;
  1014.     }
  1015.    
  1016.     #copyright-author {
  1017.         display: block;
  1018.         margin:1rem 0
  1019.     }
  1020.    
  1021.     #copyright-author h3{
  1022.         font-weight: 400;
  1023.         text-transform: lowercase;
  1024.         margin: 0;
  1025.         display: inline-block;
  1026.     }
  1027.    
  1028.     #copyright-author span {margin:0 0}
  1029.  
  1030.     #credit {
  1031.         margin: 1rem 0 2rem;
  1032.     }
  1033.  
  1034.   }
  1035. @media only screen and (min-width:0) and (max-width:600px) {
  1036.     .update {
  1037.         display: block;
  1038.         margin: 6rem 0;
  1039.     }
  1040.    
  1041.     .update hr {
  1042.         width: 100%;
  1043.         margin: 1.5rem 0rem 0;
  1044.         border-top: 2px solid var(--accents);
  1045.     }
  1046.  
  1047.    
  1048.     .update-title {
  1049.         position: relative;
  1050.         display: block;
  1051.         flex-shrink: 0;
  1052.         width: 100%;
  1053.     }
  1054.    
  1055. }
  1056.  
  1057. @media only screen and (min-width:0) and (max-width:1000px) {
  1058.    
  1059.    #blog-title,#blog-description {
  1060.         max-width: 90%;
  1061.         margin-inline:auto
  1062.    }
  1063.  
  1064.    #currently-writing {
  1065.        padding:2rem 2rem;  
  1066.    }
  1067.  
  1068.     .writing-book-wrapper {
  1069.         display: block;
  1070.         justify-content: space-between;
  1071.         flex-wrap: wrap;
  1072.         max-width: 75rem;
  1073.         margin: auto;
  1074.     }
  1075.  
  1076.     .currently-writing-book {
  1077.         width: 100%;
  1078.         margin:10rem 0 ;
  1079.         font-family: nygth-regular-italic;
  1080.         font-weight: 400;
  1081.     }
  1082.  
  1083.     #footer-section {padding:0 2rem 0;}
  1084.  
  1085.     #author-name {
  1086.         text-align: center;
  1087.     }
  1088.        
  1089.     figure.author-image {
  1090.         display: block;
  1091.         margin:0 auto
  1092.     }
  1093.  
  1094.     #author-description {
  1095.         width: 100%;
  1096.         display: block;
  1097.         margin-top: 5rem;
  1098.     }
  1099.  
  1100.  
  1101.     .update {
  1102.         width: 80%;
  1103.         margin: 4rem auto;
  1104.     }
  1105.  
  1106. }
  1107.  
  1108. @media only screen and (min-width:0) and (max-width:1200px) {
  1109.    
  1110.     #footer-section {padding:0 2rem 0;}
  1111.  
  1112. }
  1113.  
  1114. @media only screen and (min-width:0) and (max-width:1400px) {
  1115.  
  1116.     #global-navigation ul {
  1117.       display: flex;
  1118.       justify-content: space-evenly;
  1119.       flex-wrap:wrap;
  1120.       max-width: 75rem;
  1121.       margin: 0 auto;
  1122.     }
  1123.    
  1124.     #global-navigation ul li {
  1125.       margin: 0 1rem 1rem;
  1126.     }
  1127.    
  1128.   }
  1129.  
  1130.  .show-{CurrentPage} {
  1131.      display:none;
  1132.  }
  1133.  
  1134.  
  1135.  .show-1{
  1136.      display:block;
  1137.  }
  1138.  
  1139. </style>
  1140. </head>
  1141. <body>
  1142.  
  1143. <button class="theme-toggle" aria-label="toggle dark or light mode" type="button"><i class="ph ph-moon light-on" title="toggle dark mode"></i><i class="ph ph-sun light-off" title="toggle light mode"></i></button>
  1144.  
  1145. <!-- container -->
  1146.  
  1147. <section id="container">
  1148.  
  1149. <!-- global navigation -->
  1150.  
  1151. <nav id="global-navigation"><ul>
  1152.     <li><a href="/">home</a></li>
  1153.     <li><a href="/ask">inbox</a></li>
  1154.     <li><a href="/archive">archive</a></li>
  1155.     <li><a href="LINK URL">link</a></li>
  1156.  
  1157.     <!-- open updates tab  -->
  1158.     <li style="position: relative;"><button id="updates-button">updates</button>
  1159.  
  1160.         <!-- updates tab content -->
  1161.         <div id="updates-tab">
  1162.  
  1163.             <h4><span>title</span></h4>
  1164.  
  1165.             <p>content</a></p>
  1166.  
  1167.             <!-- updates divider -->
  1168.             <hr>
  1169.  
  1170.             <h4><span>title</span></h4>
  1171.  
  1172.             <p>content</a></p>
  1173.  
  1174.         </div>
  1175.     </li>
  1176. </ul></nav>
  1177.  
  1178.     <!-- header start -->
  1179. <header id="header">
  1180.    
  1181.     <!-- header image -->
  1182.     <figure class="header-image"><img src="IMAGE URL" alt="header image" class="header-image"></figure>
  1183.  
  1184.     <!-- header title -->
  1185.     <h1 id="blog-title"><a href="/">
  1186.         {title}
  1187.     </a></h1>
  1188.  
  1189.     <!-- header description -->
  1190.     <article id="blog-description">
  1191.         {description}
  1192.     </article>
  1193.  
  1194.     <!-- header novel navigation -->
  1195.     <nav id="header-navigation"><ul>
  1196.         <li><a href="LINK URL">link</a></li>
  1197.         <li><a href="LINK URL">link</a></li>
  1198.         <li><a href="LINK URL">link</a></li>
  1199.         <li><a href="LINK URL">link</a></li>
  1200.     </ul></nav>
  1201.  
  1202.     <!-- social icons navigation
  1203.         find more at https://fontawesome.com/search?ic=brands
  1204.     -->
  1205.     <nav id="social-navigation"><ul>
  1206.         <li><a href="LINK URL"><i class="fa-brands fa-twitter"></i></a></li>
  1207.         <li><a href="LINK URL"><i class="fa-brands fa-instagram"></i></a></li>
  1208.         <li><a href="LINK URL"><i class="fa-brands fa-facebook"></i></a></li>
  1209.     </ul></nav>
  1210.  
  1211. </header>
  1212.     <!-- header end -->
  1213.  
  1214. <div class="show-{CurrentPage}">
  1215.  
  1216.     <!-- latest novels start -->
  1217. <section id="latest-novels">
  1218.    
  1219.     <!-- latest novel image -->
  1220.     <figure class="latest-novel-image"><a href="LINK URL"><img src="IMAGE URL" alt="" class="latest-novel-image"></a></figure>
  1221.  
  1222.     <!-- latest novel image -->
  1223.     <figure class="latest-novel-image"><a href="LINK URL"><img src="IMAGE URL" alt="" class="latest-novel-image"></a></figure>
  1224.  
  1225.     <!-- latest novel image -->
  1226.     <figure class="latest-novel-image"><a href="LINK URL"><img src="IMAGE URL" alt="" class="latest-novel-image"></a></figure>
  1227.  
  1228.     <!-- view all books link -->
  1229.     <p id="latest-novels-link"><a href="">view all books</p></a>
  1230. </section>
  1231.     <!-- latest novels end -->
  1232.  
  1233.     <!-- currently writing start -->
  1234. <section id="currently-writing"><div class="writing-book-wrapper">
  1235.  
  1236.     <!-- currently writing book start -->
  1237.     <article class="currently-writing-book">
  1238.         <h2 class="currently-writing-title">book title</h2>
  1239.  
  1240.         <article class="currently-writing-summary">
  1241.             <p>paragraph</p>
  1242.             <p>paragraph</p>
  1243.         </article>
  1244.  
  1245.         <a class="currently-writing-link" href="">read more</a>
  1246.     </article>
  1247.     <!-- currently writing book end -->
  1248.    
  1249.    
  1250.     <!-- currently writing book start -->
  1251.     <article class="currently-writing-book">
  1252.         <h2 class="currently-writing-title">book title</h2>
  1253.  
  1254.         <article class="currently-writing-summary">
  1255.             <p>paragraph</p>
  1256.             <p>paragraph</p>
  1257.         </article>
  1258.  
  1259.         <a class="currently-writing-link" href="">read more</a>
  1260.     </article>
  1261.     <!-- currently writing book end -->
  1262.    
  1263. </div></section>
  1264.     <!-- currently writing end -->
  1265. </div>
  1266.  
  1267.     <!-- blog wrapper -->
  1268. <section id="blog-wrapper">
  1269.     {block:Posts}
  1270.     <article class="posts" id="{PostID}">
  1271.    
  1272.     {block:Submission}<div class="submission-label">submitted by: <a href="{SubmitterURL}" class="submitter-url"><span class="submission-name">{Submitter}</span></a></div>{/block:Submission}
  1273.    
  1274.    
  1275.     {block:Date}
  1276.    
  1277.         {block:PinnedPostLabel}<div id="pinned-post"><i class="fa-solid fa-thumbtack"></i> this is a pinned post</div>{/block:PinnedPostLabel}
  1278.    
  1279.     {/block:Date}
  1280.    
  1281.        
  1282.     {block:Answer}
  1283.     <div class="ask-post">
  1284.    
  1285.         <div class="ask">
  1286.        
  1287.             <div class="asker">
  1288.                 <img src="{AskerPortraitURL-40}"/ class="asker-img">
  1289.                 <div class="asker-user">{Asker} sent</div>
  1290.             </div>
  1291.            
  1292.             <div class="q">
  1293.                 {Question}
  1294.             </div>
  1295.            
  1296.         </div>
  1297.        
  1298.         {block:Answerer}
  1299.         <div class="answer">
  1300.            
  1301.             <div class="ask-answerer"><img src="{AnswererPortraitURL-40}"/ class="answerer-img"><div class="answerer-user">{Answerer} answered</div></div>
  1302.            
  1303.             <div class="reply">{Answer}</div>
  1304.        
  1305.         </div>
  1306.         {/block:Answerer}
  1307.     </div>
  1308.         {block:NotReblog}{Replies}
  1309.         {/block:NotReblog}
  1310.     {block:RebloggedFrom}
  1311.     {block:Reblogs}<div class="capt">
  1312.    
  1313.     {block:HasAvatar}
  1314.         {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1315.         {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1316.         {/block:HasAvatar}
  1317.         {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1318.         {block:HasNoPermalink}<span class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</span>{/block:HasNoPermalink}
  1319.        
  1320.             {Body}
  1321.     </div>{/block:Reblogs}{/block:RebloggedFrom}
  1322.     {/block:Answer}
  1323.    
  1324.    
  1325.     {block:Text}
  1326.     {block:Title}<h2 class="posttitle">{Title}</h2>{/block:Title}
  1327.     {block:Body}<div class="capt">
  1328.     {block:NotReblog}{Body}{/block:NotReblog}
  1329.     {block:RebloggedFrom}{block:Reblogs}
  1330.     {block:HasAvatar}
  1331.     {block:HasPermalink}<a href="{Permalink}" target="_blank" class="cimg"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1332.     {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1333.     {/block:HasAvatar}
  1334.     {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1335.     {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  1336.     {Body}
  1337.     {/block:Reblogs}{/block:RebloggedFrom}
  1338.     </div>{/block:Body}
  1339.     {/block:Text}
  1340.        
  1341.     {block:Quote}<div class="quote-post">
  1342.     <div class="quote"> {Quote}</div>
  1343.     {block:Source}<div class="quote-source">{Source}</div>{/block:Source}
  1344.     </div>{/block:Quote}
  1345.        
  1346.     {block:Link}<div class="link-post">
  1347.     <a href="{URL}" class="link-name">{Name}</a>
  1348.     {block:Excerpt}<div class="link-excerpt">{Excerpt}</div>{/block:Excerpt}</div>
  1349.     {block:Description}<div class="capt">
  1350.     {block:NotReblog}{Description}{/block:NotReblog}
  1351.     {block:RebloggedFrom}
  1352.     {block:Reblogs}<div class="capt">
  1353.    
  1354.     {block:HasAvatar}
  1355.         {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1356.         {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1357.         {/block:HasAvatar}
  1358.         {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1359.         {block:HasNoPermalink}<span class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</span>{/block:HasNoPermalink}
  1360.        
  1361.             {Body}
  1362.     </div>{/block:Reblogs}{/block:RebloggedFrom}
  1363.     </div>{/block:Description}
  1364.     {/block:Link}
  1365.        
  1366.     {block:Chat}
  1367.     {block:Title}<h2 class="posttitle">{Title}</h2>{/block:Title}
  1368.     {block:Lines}
  1369.     <div class="chat-post">
  1370.         <div class="chat-line-{alt}">
  1371.             {block:Label}<div class="label-{alt}">{Label}</div>{/block:Label}
  1372.            
  1373.             <div class="line-{alt}">{Line}</div>
  1374.         </div>
  1375.     </div>
  1376.     {/block:Lines}
  1377.     {/block:Chat}
  1378.        
  1379.     {block:Photo}
  1380.     <a href="#" 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">
  1381.         <img class="photo" src="{PhotoURL-HighRes}">
  1382.     </a>
  1383.     {block:Caption}<div class="capt">
  1384.     {block:NotReblog}{Caption}{/block:NotReblog}
  1385.     {block:RebloggedFrom}{block:Reblogs}
  1386.     {block:HasAvatar}
  1387.         {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1388.         {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1389.         {/block:HasAvatar}
  1390.         {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1391.         {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  1392.             {Body}
  1393.     {/block:Reblogs}{/block:RebloggedFrom}
  1394.     </div>{/block:Caption}
  1395.     {/block:Photo}
  1396.        
  1397.     {block:Photoset}
  1398.     <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
  1399.     {block:Caption}<div class="capt">
  1400.     {block:NotReblog}{Caption}{/block:NotReblog}
  1401.     {block:RebloggedFrom}{block:Reblogs}
  1402.     {block:HasAvatar}
  1403.         {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1404.         {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1405.         {/block:HasAvatar}
  1406.         {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1407.         {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  1408.             {Body}
  1409.     {/block:Reblogs}{/block:RebloggedFrom}
  1410.     </div>{/block:Caption}
  1411.     {/block:Photoset}
  1412.    
  1413.     {block:Audio}
  1414.     {block:AudioEmbed}<div class="audio">{AudioEmbed}</div>{/block:AudioEmbed}
  1415.     {block:Caption}<div class="capt">
  1416.     {block:NotReblog}{Caption}{/block:NotReblog}
  1417.     {block:RebloggedFrom}{block:Reblogs}
  1418.     {block:HasAvatar}
  1419.         {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1420.         {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1421.         {/block:HasAvatar}
  1422.         {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1423.         {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  1424.             {Body}
  1425.     {/block:Reblogs}{/block:RebloggedFrom}
  1426.     </div>{/block:Caption}
  1427.     {/block:Audio}
  1428.        
  1429.     {block:Video}
  1430.     <div class="video">{Video-500}</div>
  1431.     {block:Caption}<div class="capt">
  1432.     {block:NotReblog}{Caption}{/block:NotReblog}
  1433.     {block:RebloggedFrom}{block:Reblogs}
  1434.     {block:HasAvatar}
  1435.         {block:HasPermalink}<a href="{Permalink}" target="_blank"><img class="cimg" src="{PortraitURL-64}"></a>{/block:HasPermalink}
  1436.         {block:HasNoPermalink}<img class="cimg" src="{PortraitURL-64}">{/block:HasNoPermalink}
  1437.         {/block:HasAvatar}
  1438.         {block:HasPermalink}<a target="_blank" class="user {block:IsDeactivated}userd{/block:IsDeactivated}" href="{Permalink}">{Username}</a>{/block:HasPermalink}
  1439.         {block:HasNoPermalink}<div class="user {block:IsDeactivated}userd{/block:IsDeactivated}">{Username}</div>{/block:HasNoPermalink}
  1440.             {Body}
  1441.     {/block:Reblogs}{/block:RebloggedFrom}
  1442.     </div>{/block:Caption}
  1443.     {/block:Video}
  1444.    
  1445.     <div class="permalink">
  1446.    
  1447.         {block:date}<date class="time"><a href="{Permalink}" title="{TimeAgo}">{month} {DayOfMonthWithSuffix} {year}</a></date>{/block:date}
  1448.        
  1449.         {block:NoteCount}<div class="noteco"><a href="{Permalink}" title="notes">notes: {NoteCount}</a></div>{/block:NoteCount}
  1450.        
  1451.         {block:IndexPage}
  1452.         <div class="controls">
  1453.         <a href="{ReblogURL}" target="_blank" class="reblog">
  1454.         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 361.095 361.095" style="enable-background:new 0 0 361.095 361.095;" xml:space="preserve"><g><g><path d="M182.595,325.678c-63.183,0-120.133-42.217-138.267-102.567c-2.833-9.067-12.183-14.167-21.25-11.333    c-9.067,2.833-14.167,12.183-11.333,21.25c22.95,75.933,91.517,126.65,170.85,126.65c98.317,0,178.5-80.183,178.5-178.5    s-80.183-178.5-178.5-178.5c-55.817,0-108.233,26.633-141.667,69.7l-7.083-56.1c-1.133-9.35-9.633-15.867-18.983-14.733    C5.511,2.678-1.005,11.178,0.128,20.528l13.317,103.7c1.133,8.5,8.5,14.733,16.717,14.733c0.567,0,1.417,0,1.983,0l102.567-11.617    c9.35-1.133,16.15-9.35,15.017-18.7s-9.35-16.15-18.7-15.017l-68.85,7.65c26.633-39.95,71.683-64.6,120.417-64.6    c79.617,0,144.5,64.883,144.5,144.5S262.211,325.678,182.595,325.678z"/></g></g></svg>
  1455.         </a>
  1456.         <a href="#" class="like">{LikeButton}
  1457.         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 442.403 442.403" style="enable-background:new 0 0 442.403 442.403;" xml:space="preserve"><g><g><path d="M213.05,422.652c2.833,1.7,5.95,2.833,9.35,2.833c3.117,0,6.517-0.85,9.35-2.833c7.65-5.1,187.283-123.533,207.683-243.95    c10.483-62.333-8.783-100.867-26.633-122.117c-20.967-24.933-52.133-39.667-83.017-39.667c-10.2,0-20.117,1.7-28.9,5.1    c-43.067,16.15-72.25,44.767-88.117,64.317c-15.583-19.267-42.217-47.033-74.517-58.083c-9.917-3.4-20.683-5.1-32.017-5.1    c-28.9,0-56.383,11.9-75.367,32.867c-16.717,18.417-35.7,53.55-29.75,114.75C13.016,291.185,204.833,417.268,213.05,422.652z     M56.083,78.685c17.283-18.983,38.817-21.817,50.15-21.817c7.367,0,14.45,1.133,20.967,3.4    c39.383,13.317,70.833,63.467,71.4,63.75c3.117,5.1,8.783,8.217,14.733,7.933c5.95,0,11.333-3.4,14.45-8.5    c0.283-0.567,28.617-48.733,85.283-69.983c4.817-1.7,10.767-2.833,16.717-2.833c20.967,0,42.217,10.483,56.95,27.767    c19.267,22.667,25.783,55.533,18.983,94.633c-7.367,43.067-42.5,94.633-101.717,149.317c-33.433,30.883-66.3,54.683-81.6,65.45    c-16.15-11.05-51-36.55-86.417-68.85C74.216,262.285,39.366,209.868,35.116,167.368C31.433,128.552,38.516,97.952,56.083,78.685z"/></g></g></svg>
  1458.         </a>
  1459.         </div>
  1460.        
  1461.         {/block:IndexPage}
  1462.         <div style="clear:both"></div>
  1463.     </div><!-- permalink end -->
  1464.            
  1465.         {block:HasTags}
  1466.         <div class="tags">tagged: {block:Tags}
  1467.         #<a href="{TagURL}">{Tag} </a>
  1468.         {/block:Tags}</div>{/block:HasTags}
  1469.     {/block:Date}
  1470.        
  1471.     <!-- {block:ContentSource}{SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}"height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}{/block:ContentSource}{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  1472.        
  1473.         {block:PermalinkPage}
  1474.         {block:RebloggedFrom}<div class="via">
  1475.        
  1476.         <div class="reblogged-from"><span>reblogged from:</span> <a target="_blank" href="{ReblogParentURL}">{ReblogParentName}</a></div>
  1477.        
  1478.         <div class="reblogged-source"><span>source:</span> <a target="_blank" href="{ReblogRootURL}">{ReblogRootName}</a></div>
  1479.         </div>
  1480.        
  1481.         {/block:RebloggedFrom}
  1482.         {/block:PermalinkPage}
  1483.        
  1484.     {block:PostNotes}
  1485.     <div class="notes">
  1486.         <p class="notes-label"><span>notes:</span></p>
  1487.        
  1488.         {PostNotes}
  1489.     </div>
  1490.     {/block:PostNotes}
  1491.     </article> <!--posts-->
  1492.        
  1493.     {/block:Posts}
  1494.        
  1495.     {block:Pagination}<div class="pagination">
  1496.     {block:PreviousPage}<a title="previous page" href="{PreviousPage}" class="back-page"><i class="fa-solid fa-chevron-left"></i>PREVIOUS PAGE</a>{/block:PreviousPage}
  1497.     {block:NextPage}<a href="{NextPage}" class="next-page" title="next page">NEXT PAGE<i class="fa-solid fa-chevron-right"></i></a>{/block:NextPage}
  1498.     <div style="clear:both"></div>
  1499.     </div>{/block:Pagination}
  1500.        
  1501.     <a href="#top" class="achl ttop" title="go to top"><i class="fa-solid fa-chevron-up"></i></a>
  1502. </main>
  1503.      
  1504. </section>
  1505. <!-- blog wrapper end-->
  1506.  
  1507. <div class="show-{CurrentPage}">
  1508. <!-- author section start -->
  1509. <section id="about-the-author"><div id="author-wrapper">
  1510.  
  1511.     <!-- author name -->
  1512.     <h2 id="author-name">anna </h2>
  1513.  
  1514.     <!-- author image -->
  1515.     <figure class="author-image"><img src="IMAGE URL" alt="" class="author-image"></figure>
  1516.  
  1517.     <!-- author biography -->
  1518.     <article id="author-description">
  1519.         <p>paragraph</p>
  1520.         <p>paragraph</p>
  1521.     </article>
  1522.  
  1523.     <!-- author social icons
  1524.      
  1525.         find more at https://fontawesome.com/search?ic=brands
  1526.     -->
  1527.     <nav id="author-socials"><ul>
  1528.         <li><a href="LINK URL"><i class="fa-brands fa-twitter"></i></a></li>
  1529.         <li><a href="LINK URL"><i class="fa-brands fa-instagram"></i></a></li>
  1530.         <li><a href="LINK URL"><i class="fa-brands fa-facebook"></i></a></li>
  1531.     </ul></nav>
  1532.  
  1533. </div></section>
  1534. <!-- author section end -->
  1535. </div>
  1536.  
  1537. <!-- footer start -->
  1538. <footer id="footer-section">
  1539.  
  1540.     <!-- footer updates wrapper -->
  1541. <div class="show-{CurrentPage}"><section id="footer-updates">
  1542.  
  1543.         <!-- update start-->
  1544.         <article class="update">
  1545.  
  1546.             <!-- update title -->
  1547.             <h3 class="update-title">
  1548.                 update title 1
  1549.             <hr>
  1550.             </h3>
  1551.  
  1552.  
  1553.             <!-- update content -->
  1554.             <article class="update-content">
  1555.                 <p>paragraph</p>
  1556.                 <p>paragraph</p>
  1557.             </article>
  1558.  
  1559.         </article>
  1560.         <!-- update end-->
  1561.        
  1562.      
  1563.         <!-- update start-->
  1564.         <article class="update">
  1565.  
  1566.             <!-- update title -->
  1567.             <h3 class="update-title">
  1568.                 update title 2
  1569.             <hr>
  1570.             </h3>
  1571.  
  1572.  
  1573.             <!-- update content -->
  1574.             <article class="update-content">
  1575.                 <p>paragraph</p>
  1576.                 <p>paragraph</p>
  1577.             </article>
  1578.  
  1579.         </article>
  1580.         <!-- update end-->
  1581.        
  1582.      
  1583.     </section></div>
  1584.     <!-- footer updates wrapper end -->
  1585.  
  1586.     <!-- footer naviation -->
  1587.    
  1588.     <nav id="footer-navigation"><ul>
  1589.         <li><a href="LINK URL">novels</a></li>
  1590.         <li><a href="LINK URL">the untold</a></li>
  1591.         <li><a href="LINK URL">books</a></li>
  1592.         <li><a href="LINK URL">wips</a></li>
  1593.     </ul></nav>
  1594.  
  1595.     <!-- footer copyright -->
  1596.  
  1597.     <section id="copyright-section">
  1598.         <h2>{title}</h2>
  1599.         —
  1600.         <article id="copyright-author">
  1601.             <h3>anna</h3>
  1602.             <span>©</span>
  1603.             2025
  1604.         </article>
  1605.         —
  1606.         <p id="credit">coded by <a target="_blank" href="https://southcodes.tumblr.com/">southcodes</a></p>
  1607.     </section>
  1608. </footer>
  1609. <!-- footer end -->
  1610.  
  1611. <!-- scripts -->
  1612.  
  1613. <!-- jquery -->
  1614. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  1615.  
  1616. <!-- dark mode icons -->
  1617. <script src="https://unpkg.com/@phosphor-icons/web"></script>
  1618.  
  1619. <!-- font awesome icons -->
  1620. <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
  1621.  
  1622. <!-- video resizing script by shythemes -->
  1623. <script src="https://static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  1624.  
  1625. <script>
  1626. $(document).ready(function(){
  1627.  
  1628.     // updates tab popup
  1629.     $("#updates-button").click(function(){
  1630.         $("#updates-tab").fadeToggle();
  1631.     });
  1632.  
  1633.     // for posts
  1634.     $(".audio iframe").each(function(index, elem) {elem.setAttribute("width","100%");});
  1635.  
  1636.     $( ".ask-post div.reply:empty" ).parent().hide();
  1637.  
  1638. });
  1639.  
  1640. // dark mode
  1641. const themeToggleButtons = document.querySelectorAll(".theme-toggle");
  1642.  
  1643. themeToggleButtons.forEach((btn) => {
  1644.     btn.addEventListener("click", function () {
  1645.  
  1646.         // Add theme-transition class for smooth transitions
  1647.         document.documentElement.classList.add("theme-transition");
  1648.  
  1649.         // Retrieve the current theme and determine the target theme
  1650.         let currentTheme = document.documentElement.getAttribute("data-theme");
  1651.         let targetTheme = (currentTheme === "light") ? "dark" : "light";
  1652.  
  1653.         // Remove theme-transition class after a short delay
  1654.         window.setTimeout(function () {
  1655.             document.documentElement.classList.remove("theme-transition");
  1656.         }, 50);
  1657.  
  1658.         // Set the data-theme attribute and store in local storage
  1659.         document.documentElement.setAttribute("data-theme", targetTheme);
  1660.         localStorage.setItem("theme", targetTheme);
  1661.     });
  1662. });
  1663. </script>
  1664. </body>
  1665. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!