<!---
november by @softcodes
softcodes.tumblr.com/credits
--->
<html>
<head>
<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<title>{Title}</title>
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
{NewPostStyles}
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
{block:Options}
<meta name="image:icon" content=""/>
<meta name="image:sidebar" content=""/>
<meta name="image:project image" content=""/>
<meta name="if:right sidebar" content=""/>
<meta name="if:sidebar image" content="1"/>
<meta name="if:icon" content="1"/>
<meta name="color:background" content="#ffffff" />
<meta name="color:post accent" content="#f6f6f6" />
<meta name="color:text" content="#444444" />
<meta name="color:headings" content="#333333" />
<meta name="color:link underline" content="#ebdbca"/>
<meta name="color:accent" content="#d7ac7f"/>
<meta name="color:light accent" content="#ebdbca"/>
<meta name="color:tags" content="#aaaaaa" />
<meta name="color:borders" content="#eee" />
<meta name="color:selection text" content="#000000"/>
<meta name="color:selection background" content="#f5e7e7"/>
<meta name="color:DARK background" content="#2a2a2a" />
<meta name="color:DARK post background" content="#333333" />
<meta name="color:DARK post accent" content="#333333" />
<meta name="color:DARK text" content="#e2e2e2" />
<meta name="color:DARK headings" content="#aaaaaa" />
<meta name="color:DARK link underline" content="#b87575" />
<meta name="color:DARK accent" content="#d6a4a4" />
<meta name="color:DARK light accent" content="#b87575" />
<meta name="color:DARK tags" content="#6e6e6e" />
<meta name="color:DARK borders" content="#444444" />
<meta name="color:DARK selection text" content="#000000"/>
<meta name="color:DARK selection background" content="#d6a4a4"/>
<meta name="select:post width" content="400px" title="400px"/>
<meta name="select:post width" content="425px" title="425px"/>
<meta name="select:post width" content="450px" title="450px"/>
<meta name="select:post width" content="475px" title="475px"/>
<meta name="select:post width" content="500px" title="500px"/>
<meta name="select:post width" content="540px" title="540px"/>
<meta name="select:font size" content="12px" title="12px"/>
<meta name="select:font size" content="11px" title="11px"/>
<meta name="select:font size" content="13px" title="13px"/>
<meta name="select:font size" content="14px" title="14px"/>
<meta name="select:post margin" content="75px"/>
<meta name="select:post margin" content="100px"/>
<meta name="select:post margin" content="125px"/>
<meta name="select:post margin" content="150px"/>
<meta name="select:photoset gutter" content="1px"/>
<meta name="select:photoset gutter" content="2px"/>
<meta name="select:photoset gutter" content="3px"/>
<meta name="select:photoset gutter" content="4px"/>
<meta name="text:body font" content="Karla"/>
<meta name="text:custom title" content="your title here">
<meta name="text:custom description" content="write your custom description here!">
<meta name="text:home icon" content="home-2"/>
<meta name="text:home link" content="home"/>
<meta name="text:ask icon" content="messages-1"/>
<meta name="text:ask link" content="contact"/>
<meta name="text:archive icon" content="cloud"/>
<meta name="text:archive link" content="archive"/>
<meta name="text:link 1 icon" content="user-2"/>
<meta name="text:link 1 URL" content=""/>
<meta name="text:link 1" content=""/>
<meta name="text:link 2 icon" content="folder-favorite"/>
<meta name="text:link 2 URL" content=""/>
<meta name="text:link 2" content=""/>
<meta name="text:link 3 icon" content="star"/>
<meta name="text:link 3 URL" content=""/>
<meta name="text:link 3" content=""/>
<meta name="text:link 4 icon" content="map-1"/>
<meta name="text:link 4 URL" content=""/>
<meta name="text:link 4" content=""/>
<meta name="text:link 5 icon" content="bookmarks"/>
<meta name="text:link 5 URL" content=""/>
<meta name="text:link 5" content=""/>
<meta name="text:update icon 1" content="cloud-rain"/>
<meta name="text:update one" content="severe spring fever"/>
<meta name="text:update icon 2" content="book-open"/>
<meta name="text:update two" content="a fic i've read 4 times already"/>
<meta name="text:update icon 3" content="monitor"/>
<meta name="text:update three" content="need tv recs"/>
<meta name="text:update icon 4" content="music"/>
<meta name="text:update four" content="cowboy carter"/>
<meta name="text:project title" content="project title"/>
<meta name="text:project icon" content="magic-wand"/>
<meta name="text:project label 1" content="genre"/>
<meta name="text:content 1" content="romance"/>
<meta name="text:project label 2" content="started"/>
<meta name="text:content 2" content="september 2022"/>
<meta name="text:project label 3" content="status"/>
<meta name="text:content 3" content="first draft"/>
<meta name="text:progress bar percentage" content="75%"/>
<meta name="text:project link one" content=""/>
<meta name="text:project link 1 url" content=""/>
<meta name="text:project link two" content=""/>
<meta name="text:project link 2 url" content=""/>
<meta name="text:stats icon" content="chevron-right-circle"/>
<meta name="text:stat label 1" content="about"/>
<meta name="text:stat content 1" content="writeblr"/>
<meta name="text:stat label 2" content="est"/>
<meta name="text:stat content 2" content="2019"/>
<meta name="text:stat label 3" content="tracking"/>
<meta name="text:stat content 3" content="#user"/>
<meta name="text:stat label 4" content="timezone"/>
<meta name="text:stat content 4" content="timezone"/>
{/block:Options}
<!-- icon fonts -->
<link href="https://iconsax.gitlab.io/i/icons.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@phosphor-icons/web"></script>
<!-- google font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family={text:body font}:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet">
<!-- stylesheets -->
<link href="//static.tumblr.com/gtjt4bo/mXBrpdj0n/unblue-polls.css" rel="stylesheet">
<link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
<link rel="stylesheet" media="screen" href="//assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css">
<link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
<link href="//tmblr-npf-audio.gitlab.io/s/base.css" rel="stylesheet">
<!-- dark mode -->
<script>
const storedTheme = localStorage.getItem("theme") || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
if (storedTheme) document.documentElement.setAttribute("data-theme", storedTheme);
</script>
<style tmblr-npf>
:root {
--body-font:{text:body font};
--font-size: {select:font size};
--spacing: 1.5rem;
--post-width:{select:post width};
--post-margin:{select:post margin};
--NPF-Caption-Spacing:1em;
--NPF-Image-Spacing:{select:photoset gutter};
}
/* -- LIGHT MODE -- */
:root, html[data-theme='light'] {
--light-on: flex;
--light-off: none;
--icon:{image:icon};
--background-color: {color:background};
--post-accent:{color:post accent};
--accent: {color:accent};
--light-accent:{color:light accent};
--font-color: {color:text};
--headings:{color:headings};
--link-underline:{color:link underline};
--borders: {color:borders};
--tags: {color:tags};
--selection-text:{color:selection text};
--selection-background:{color:selection background};
--tumblr-controls-filter: invert(100%) hue-rotate(180deg);
}
/* -- DARK MODE -- */
html[data-theme='dark'] {
--light-on: none;
--light-off: flex;
--icon:{image:DARK icon};
--background-color: {color:DARK background};
--post-accent:{color:DARK post accent};
--accent: {color:DARK accent};
--light-accent:{color:DARK light accent};
--font-color: {color:DARK text};
--headings:{color:DARK headings};
--link-underline:{color:DARK link underline};
--borders: {color:DARK borders};
--tags: {color:DARK tags};
--selection-text:{color:DARK selection text};
--selection-background:{color:DARK selection background};
--tumblr-controls-filter: invert(0%);
}
html.theme-transition,
html.theme-transition *,
html.theme-transition *:before,
html.theme-transition *:after {
transition: 0s !important;
transition-delay: 0 !important;
}
button.theme-toggle {
position:fixed;
bottom:45px;
right:23px;
outline: none;
border: 0;
background: transparent;
padding: 0;
cursor: pointer;
}
button.theme-toggle i {
font-size:16px;
color: var(--tags);
}
.light-on {display: var(--light-on);}
.light-off {display: var(--light-off);}
@-webkit-keyframes fadein {
0% {opacity: 0;}
100% { opacity: 1; } }
@-moz-keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; } }
@keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; } }
::-moz-selection {background:var(--selection-background);color:var(--selection-text);}
::selection {background:var(--selection-background);color:var(--selection-text);}
body {
background-color:var(--background-color);
font-family:var(--body-font);
color:var(--font-color);
font-size:var(--font-size);
word-wrap: break-word;
line-height:1.6em;
margin:0;
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
-webkit-animation: fadein 1.5s;
-moz-animation:fadein 1.5s;
animation:fadein 1.5s;
}
a {
color:var(--font-color);
text-decoration:none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
a:hover {
color:var(--accent);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
big, small {font-size:var(--font-size);}
h1 {
margin:1rem 0 0 0;
padding:0 0 0.25rem 0;
line-height:inherit;
font-size:16px;
text-transform:lowercase;
}
h2, h3, h4, h5, h6 {
margin:0.5rem 0;
padding:0;
font-size:calc(var(--font-size) + 2px);
text-transform:lowercase;
line-height:inherit;
}
blockquote {
padding:0 0 0 1.25rem;
margin:0 0 var(--spacing) 0.8rem;
border-left:2px solid var(--light-accent);
}
blockquote p:last-of-type {
margin-bottom:0!important;
padding-bottom:0px;
}
ul, ol {
margin:0 0 var(--spacing) 1rem;
padding:0 var(--spacing);
}
/*----- containers -----*/
main {
position: relative;
width:calc(var(--post-width) + 625px);
margin:70px auto 0 auto;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}
section {
position: relative;
width:var(--post-width);
}
article {
width: 100%;
position: relative;
margin:0 auto var(--post-margin) auto;
}
#left-sidebar {
display:block;
width:225px;
height:auto;
}
#right-sidebar {
display:block;
width:225px;
height:auto;
padding-top:1em;
}
/*----- left sidebar -----*/
#left-wrap {position:fixed;width:225px;}
#blogname {
font-size:calc(var(--font-size) + 3px);
font-weight:600;
color:var(--font-color);
text-transform:lowercase;
vertical-align:middle;
margin:1em 0 0.2em 0;
letter-spacing:0;
}
#blogname a {color:var(--headings);}
#blogname a:hover {color:var(--accent);}
#handle {display:block;font-weight:700;color:var(--accent);}
#handle i {
display:inline-block;
position:relative;
font-size:16px;
color:var(--accent);
vertical-align:middle;
margin-right:0.5em;
margin-top:-3px;
}
{block:ificon}
#icon {
position:relative;
width:50px;
height:50px;
border-radius:100%;
padding:7px;
margin:0 auto -28px auto;
background-color:var(--accent);
}
#icon img {
width:50px;
height:50px;
border-radius:100%;
border:4px solid var(--background-color);
margin-left:-4px;
margin-top:-4px;
}
{/block:ificon}
{block:ifnoticon}
#icon {display:none;}
#sidebarimg {margin-top:0.5rem;}
{/block:ifnoticon}
{block:ifsidebarimage}
#sidebarimg {
width:100%;
height:auto;
z-index:-1;
}
#sidebarimg img {
width:100%;
height:auto;
border-radius:3px;
}
{/block:ifsidebarimage}
{block:ifnotsidebarimage}
#icon {
margin-bottom:0;
margin-left:0;
margin-top:0.5rem;
}
#sidebarimg {display:none;}
{/block:ifnotsidebarimage}
#description {display:block;margin-top:0.75em;}
nav {
display:grid;
grid-template-columns:49.5% 49.5%;
grid-gap:3px;
margin:50px 0;
}
nav a {
display:block;
color:var(--font-color);
padding:3px 6px;
border-radius:3px;
margin-left:-2px;
}
nav a:hover {
color:var(--font-color);
background-color:var(--light-accent);
}
nav i {
display:inline-block;
position:relative;
font-size:16px;
color:var(--headings);
vertical-align:middle;
margin-right:0.75rem;
margin-top:-3px;
}
.search-box {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}
.search-box i {
font-size:18px;
color:var(--tags);
display:block;
vertical-align:middle;
padding-top:0.65rem;
}
.search .query {
display:block;
font-size:inherit!important;
line-height:inherit!important;
width:175px;
padding:0.45rem 0.65rem!important;
margin:0!important;
border:1px solid var(--borders);
outline:0;
border-radius:4px;
color:var(--tags);
background-color:var(--post-background);
text-align:left;
}
::-webkit-input-placeholder {color: inherit;}
:-moz-placeholder {color:inherit; opacity:0.5;}
::-moz-placeholder {color:inherit; opacity:0.5;}
:-ms-input-placeholder {color:inherit;}
input:focus::-webkit-input-placeholder {color:transparent;}
input:focus:-moz-placeholder {color:transparent;}
input:focus::-moz-placeholder {color:transparent;}
input:focus:-ms-input-placeholder {color:transparent;}
/*----- right sidebar -----*/
{block:ifnotrightsidebar}
#right-wrap {display:none;}
{/block:ifnotrightsidebar}
#right-wrap {position:fixed;width:225px;}
#updates {display:block;margin-bottom:50px;}
#updates span {display:block;margin-bottom:3px;}
#updates i {
font-size:16px;
color:var(--font-color);
margin-right:0.7em;
margin-top:-1px;
}
#projects {display:block;margin-bottom:60px;}
#pro-wrap {
display:block;
border:1px solid var(--borders);
border-radius:3px;
}
#pro-top {
border-bottom:1px solid var(--borders);
padding:1.25em 1.25em 1em 1.25em;
}
#pro-top i {
font-size:16px;
color:var(--accent);
float:right;
vertical-align:middle;
padding-right:5px;
}
#pro-image {
width:40px;
height:40px;
padding:3px;
border-radius:100%;
border:2px solid var(--light-accent);
display:block;
position:relative;
margin:0 auto -18px auto;
background-color:var(--background-color);
}
#pro-image img {
width:40px;
height:40px;
border-radius:100%;
background-color:var(--background-color);
}
#pro-title {
display:inline-block;
font-weight:700;
vertical-align:middle;
line-height:125%;
}
#pro-title span {font-weight:400;display:block;}
#pro-bottom {padding:1.25em;}
#pro-bottom span {display:block;}
#pro-bottom span b {display:inline-block;width:38%;font-weight:600;}
.meter {
height: 6px;
position: relative;
background:var(--borders);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
padding:0px;
margin:1.25em 0 1.75em 0;
}
.meter > span {
display: block;
height: 100%;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
border-top-left-radius:2px;
border-bottom-left-radius:2px;
background-color:var(--accent);
position: relative;
overflow: hidden;
}
.meter > span:after {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
background-size: 50px 50px;
animation: move 2s linear infinite;
border-top-right-radius:0px;
border-bottom-right-radius:0px;
border-top-left-radius:2px;
border-bottom-left-radius:2px;
overflow: hidden;
}
#pro-buttons {
display:grid;
grid-template-columns:50% 50%;
grid-gap:5px;
margin-top:1em;
}
#pro-buttons a {
display:block;
background-color:var(--light-accent);
text-align:center;
border-radius:3px;
padding:0.2em 1em;
color:var(--font-color);
margin-bottom:0.5em;
font-size:calc(var(--font-size) - 1px);
}
#pro-buttons a:hover {
background-color:var(--accent);
color:var(--headings);
}
#stats {display:block;}
#stats span {display:block;margin-bottom:3px;}
#stats span b {display:inline-block;width:35%;font-weight:600;}
#stats i {
display:inline-block;
position:relative;
font-size:16px;
color:var(--accent);
margin-right:0.75em;
vertical-align:middle;
margin-top:-2px;
}
/*----- captions -----*/
.caption {
padding:0 0 0.5rem 0;
border-bottom:1px solid var(--borders);
}
.caption p {margin-bottom:0.75rem;}
.caption p:empty {display:none!important;}
.caption a {
box-shadow:0 -3px 0 var(--light-accent) inset;
color:var(--font-color);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.caption a:hover {
box-shadow:0 -16px 0 var(--link-underline) inset;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.caption img, .caption img a, .caption a img {box-shadow:0 0 0 inset!important;}
.original {padding:1rem 0 0.5rem 0;}
.reblog-header {margin-bottom:0.75rem;}
.user-wrap {display:block;margin-top:1.25rem;}
.avatar {
display: inline-block;
vertical-align: middle;
width:22px;
height:22px;
margin-right: .5rem;
padding:3px;
border:1px solid var(--borders);
border-radius:100%;
}
.avatar img {
border-radius:100%;
width:22px;
height:22px;
}
.username {display:inline-block;font-weight:600;}
.username a {box-shadow:0 0 0 inset;}
.username a:hover {color:var(--accent);box-shadow:0 0 0 inset;}
.deactivated {font-weight:600;text-decoration:line-through;}
.tmblr-attribution {display:none!important;}
h1.post-title {
margin:0!important;
font-size:16px!important;
padding:0!important;
font-weight:600;
}
h1.post-title a {color:var(--headings);}
/*----- photosets -----*/
.photo img {
width:100%;
}
[photoset-layout] {
grid-gap:{select:photoset gutter};
margin-bottom:1rem;
}
[photoset-layout] div {
padding:0px;
border:0px;
}
[photoset-layout] img {
border:0px;
border-radius:0px;
}
/* npf-created single photo */
figure.tmblr-full a.post_media_photo_anchor {
display:block;
position:relative;
width:100%!important;
height:100%!important;
object-fit:cover!important;
}
a.post_media_photo_anchor {box-shadow:0 0 0 inset;}
a.post_media_photo_anchor:hover {box-shadow:0 0 0 inset;}
figure.tmblr-full a.post_media_photo_anchor img {
width:100%!important;
height:100%!important;
display:block;
object-fit:cover!important;
}
/*----- link posts -----*/
.npf-link-block {
box-shadow:0 0 0 inset;
}
.npf-link-block a, .npf-link-block a:hover {box-shadow:0 0 0 inset;}
/*----- quote posts -----*/
.quoteblock {
padding:0;
padding-bottom:var(--spacing);
border-bottom:1px solid var(--borders);
}
.quoteblock a {
box-shadow:0 -3px 0 var(--light-accent) inset;
color:var(--font-color);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.quoteblock a:hover {
box-shadow:0 -16px 0 var(--light-accent) inset;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.quote {
font-size:16px;
letter-spacing:-0.25px;
}
.quote i {
display:inline-block;
position:relative;
font-size:16px;
color:var(--accent);
vertical-align:middle;
margin-right:0.25rem;
margin-top:-3px;
}
.right {margin-right:0.25em;}
.left {margin-left:0.25em;}
.quote-source {
margin: 1em 0;
font-weight:600;
text-align:right;
}
.quote-source i {
font-size:16px;
color:var(--font-color);
margin-right:0.25em;
vertical-align:middle;
margin-top:-1px;
}
/*----- chat posts -----*/
.chatbox {
padding-bottom:0;
border-bottom:1px solid var(--borders);
}
.chat {
margin:0;
padding:0;
overflow:hidden;
}
.chat li {
list-style-type: none;
margin-top:1px;
padding:0.5rem 1rem;
}
.chat li:nth-of-type(odd) {background-color:var(--post-accent);}
.chat li:nth-of-type(even) {background-color:var(--light-accent);}
.chat li:first-of-type {margin-top:0;}
.chatter {
display:inline-block;
margin-right:5px;
font-weight:600;
}
.chattxt {display:inline-block;}
/*----- audio posts -----*/
iframe.tumblr_audio_player {
width:100%;
background-color:var(--light-accent)!important;
}
.npf-audio-wrapper {
--NPF-Audio-Buttons-Size: 1.4rem;
--NPF-Audio-Buttons-Color:var(--font-color);
--NPF-Audio-Buttons-Spacing: 1.3rem;
--NPF-Audio-Image-Size: 85px;
--NPF-Audio-Image-Spacing: 0px;
margin-bottom:var(--spacing);
}
.npf-audio-background {
background-color:var(--light-accent);
padding: 1.5rem;
}
.npf-audio-title-label,
.npf-audio-artist-label,
.npf-audio-album-label {
font-weight:600;
}
.npf-audio-title,
.npf-audio-artist,
.npf-audio-album {
color:var(--font-color);
}
iframe[src*='open.spotify.com'][src*='track'], figure[data-npf*='open.spotify.com'][data-npf*='track']{
height:80px!important;
width:100%;
margin-bottom:0.75rem;
}
/*----- video posts -----*/
video, iframe, .video, .video iframe {
max-width:{select:post width};
}
/*----- answer posts -----*/
.ask-wrap {display:block;}
.ask-padding {
height:1em;
display:block;
background-color:var(--background-color);
}
.asker {
display:inline-block;
float:left;
text-transform:lowercase;
color:var(--font-color);
font-weight:700;
}
.asker a {color:var(--font-color);display:inline-block;}
.asker a:hover {color:var(--accent);}
.askerimg {
display:block;
position:relative;
width:100%;
margin:0px auto -15px auto;
width:26px;
height:26px;
border-radius:100%;
padding:3px;
border:2px solid var(--accent);
background-color:var(--background-color);
}
.askerimg img {
width:26px;
height:26px;
border-radius:100%;
}
.question {
display:block;
padding:1.75em;
border-radius:3px;
border:1px solid var(--borders);
margin-bottom:1rem;
}
.question p:first-of-type {margin-top: 0;}
.question p:last-of-type {margin-bottom: 0;}
.answer {display:block;}
/*----- post info -----*/
.info {
margin-top:1.5em;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
text-transform:lowercase;
}
.info a {
display: inline-block;
vertical-align: middle;
color:var(--headings);
margin-right:1em;
font-weight:600;
}
.info a:hover {color:var(--accent);}
.info-left i {
display:inline-block;
position:relative;
font-size:16px;
color:var(--headings);
vertical-align:middle;
margin-right:0.5rem;
margin-top:-1px;
}
.likeb {
position: relative;
display: inline-block;
height: inherit;
margin-bottom:0px;
}
.notecount {font-weight:400!important;}
.post-controls a {margin-left:0.3rem!important;margin-right:0;}
.post-controls i {
font-size:16px;
color:var(--headings);
vertical-align:middle;
}
.likeb .like_button iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 2;
opacity: 0;
}
.like_button iframe {width: 100% !important; height: 100% !important;}
.likeb .liked + .actual-button i {color:#ff0000!important;}
/* pinned post */
.pinned-post {
display:inline-block;
font-weight:600;
}
.pinned-post a {color:var(--accent);}
.pinned-post .iconsax {
font-size:16px;
color:var(--accent);
margin-top:-2px;
margin-right:0.4em!important;
}
/*---- tags -----*/
.tags {display:block;margin-top:0.75rem;}
.tags a {margin-right:1.2em;color:var(--tags);vertical-align:middle;}
.tags a:hover {color:var(--font-color);}
.tags i {
font-size:16px;
color:var(--tags);
vertical-align:middle;
margin-top:-1px;
margin-right:0.6em;
}
/*----- source info -----*/
.source-info {margin:2rem 0;}
.source-info li {list-style-type: none;text-transform:lowercase;}
.source-info li:first-of-type {margin-top:2rem;}
/*----- post notes -----*/
.notes {
margin:0;
text-transform:lowercase;
padding:0 0 var(--spacing) 0;
}
ol.notes {
max-width: 100%;
padding: 0;
margin:1.5rem 0 0 0;
}
ol.notes li.note {padding: 0.5em 0; list-style-type: none;text-align:left!important;}
ol.notes li.note img.avatar {
border-radius: 50%;
margin-right: 1em;
vertical-align: middle;
display: inline-block;
width: 1.25em;
height: 1.25em;
}
ol.notes blockquote {
margin:var(--spacing) 0;
padding-left:var(--spacing);
}
/* ---- pagination ---- */
#page-navigation {
text-align: center;
margin-bottom:100px;
}
#page-navigation a {margin: 0 1em;}
.current-page {
color:var(--accent);
margin: 0 1em;
font-weight:700;
}
#page-navigation i {
font-size:16px;
color:var(--font-color);
vertical-align:middle;
margin-top:-1px;
}
/*----- tagday page -----*/
.tagday-page {
text-transform:lowercase;
font-size:18px;
margin:0 0 100px 0;
}
.tag-day {
display:inline-block;
font-weight:700;
color:var(--accent);
}
/*----- polls -----*/
.poll-post {
margin-bottom:0.75rem;
padding:0 0 0.75rem 0;
}
.poll-post .poll-question {
font-size:15px!important;
font-weight:600!important;
text-align:center;
text-transform:lowercase;
}
.poll-post a.poll-row {
border-radius:4px!important;
padding:10px 10px 5px 10px!important;
margin:6px 0px!important;
border:0px solid var(--borders)!important;
background-color:var(--post-accent)!important;
width:auto!important;
text-decoration:none!important;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.poll-post a.poll-row:hover {
background-color:var(--light-accent)!important;
border-color:var(--light-accent)!important;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
a.poll-row p {margin: 0;}
.poll-post .poll-see-results {
margin:0.75rem 0 -0.5rem 0;
text-decoration:none!important;
box-shadow:0 0 0 inset;
}
.poll-see-results:hover, .poll-see-results a:hover {
box-shadow:0 0 0 inset!important;
color:var(--accent);
}
/*---- tooltip ----*/
.tippy-box[data-theme~='rosemary'] {
background-color:#404040;
color:#fff;
font-size:11px;
text-transform:lowercase;
letter-spacing:0.25px;
z-index:99999999999999;
}
/*----- scroll to top -----*/
.scrollToTopBtn {
background-color:transparent;
border: none;
cursor: pointer;
width:20px;
height:16px;
position: fixed;
bottom:70px;
right:20px;
font-size:16px;
color:var(--tags);
z-index:9999999;
opacity: 0;
transition: all .5s ease
}
.scrollToTopBtn i {color:var(--tags);}
.showBtn {opacity: 1;}
/* credit - don't remove */
#soft {
position: fixed;
bottom: 15px;
right:23px;
font-size:16px;
color:var(--tags);
}
#soft a {color:var(--tags);}
#soft a:hover {color:var(--accent);}
/*----- tumblr controls via @cyantists -----*/
iframe.tmblr-iframe {
z-index:99999999999999!important;
top:4px!important;
right:var(--spacing)!important;
filter:var(--tumblr-controls-filter);
opacity:0.6;
transform:scale(0.65);
transform-origin:100% 0;
-webkit-transform:scale(0.65);
-webkit-transform-origin:100% 0;
-o-transform:scale(0.65);
-o-transform-origin:100% 0;
-moz-transform:scale(0.65);
-moz-transform-origin:100% 0;
-ms-transform:scale(0.65);
-ms-transform-origin:100% 0;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
iframe.tmblr-iframe:hover {
opacity:0.8!important;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
</style>
</head>
<body class="{block:homepage}home{/block:homepage}{block:tagpage}tag{/block:tagpage}{block:searchpage}search{/block:searchpage}{block:submitpage}submit-{/block:submitpage}{block:AskPage}ask{/block:AskPage}-page">
<!---------- dark mode ---------->
<button class="theme-toggle" aria-label="toggle dark or light mode" type="button">
<div class="light-on" title="toggle dark mode">
<i class="ph ph-moon"></i>
</div>
<div class="light-off" title="toggle light mode">
<i class="ph ph-sun"></i>
</div>
</button>
<!---------- scroll to top ---------->
<div class="scrollToTopBtn"><i class="ph ph-arrow-up"></i>️</div>
<!------------- main container --------------->
<main>
<!---------------------------------------------------------->
<!---------------------- LEFT SIDEBAR ---------------------->
<!---------------------------------------------------------->
<aside id="left-sidebar">
<div id="left-wrap">
<div id="icon"><img src="{image:icon}"/></div>
<div id="sidebarimg"><img src="{image:sidebar}"/></div>
<div id="blogname"><a href="/">{text:custom title}</a></div>
<div id="handle"><i class="iconsax" icon-name="user-1-square"></i>{name}</div>
<div id="description">{text:custom description}</div>
<nav>
<a href="/"><i class="iconsax" icon-name="{text:home icon}"></i>{text:home link}</a>
<a href="/ask"><i class="iconsax" icon-name="{text:ask icon}"></i>{text:ask link}</a>
<a href="/archive"><i class="iconsax" icon-name="{text:archive icon}"></i>{text:archive link}</a>
{block:iflink1}<a href="{text:link 1 url}"><i class="iconsax" icon-name="{text:link 1 icon}"></i>{text:link 1}</a>{/block:iflink1}
{block:iflink2}<a href="{text:link 2 url}"><i class="iconsax" icon-name="{text:link 2 icon}"></i>{text:link 2}</a>{/block:iflink2}
{block:iflink3}<a href="{text:link 3 url}"><i class="iconsax" icon-name="{text:link 3 icon}"></i>{text:link 3}</a>{/block:iflink3}
{block:iflink4}<a href="{text:link 4 url}"><i class="iconsax" icon-name="{text:link 4 icon}"></i>{text:link 4}</a>{/block:iflink4}
{block:iflink5}<a href="{text:link 5 url}"><i class="iconsax" icon-name="{text:link 5 icon}"></i>{text:link 5}</a>{/block:iflink5}
</nav>
<div class="search-box">
<i class="ph ph-magnifying-glass"></i>
<form class="search" action="javascript:return false">
<input type="text" class="query" placeholder="search + enter"></form>
</div>
</div>
</aside>
<!---------------------------------------------------------->
<!---------------------------------------------------------->
<!---------------------------------------------------------->
<!---------- post container ---------->
<section>
{block:TagPage}
<article class="tagday-page">
Viewing posts filed under <span class="tag-day">#{Tag}</span>
</article>
{/block:TagPage}
{block:DayPage}
<article class="tagday-page">
Viewing posts made on <span class="tag-day">{Month} {DayOfMonth}, {Year}</span>
</article>
{/block:DayPage}
{block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
<article id="post-{PostID}" class="{posttype}-post posts" post-type="{PostType}">
<!---------- npf & legacy text posts ---------->
{block:Text}
<div class="post text">
{block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
<!--Original Post-->
{block:NotReblog}
<div class="caption original">{Body}</div>
{/block:NotReblog}
<!--Post is a reblog-->
{block:RebloggedFrom}
<div class="reblog-list">
{block:Reblogs}
<div class="caption">
<div class="reblog-header">
<div class="user-wrap">
<div class="avatar"><img src="{PortraitURL-64}"></div>
<div class="username {block:isdeactivated}deactivated{/block:isdeactivated}"><a href="{permalink}" target="_blank">{username}</a></div>
</div>
</div>
<div class="reblog-body">{Body}</div>
</div>
{/block:Reblogs}
</div>
{/block:RebloggedFrom}
</div>
{/block:Text}
<!-------- legacy photo posts ---------->
{block:Photo}
<div class="post photo">
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
<!--Original Post-->
{block:NotReblog}
<div class="caption">{Caption}</div>
{/block:NotReblog}
<!--Post is a reblog-->
{block:RebloggedFrom}
<div class="reblog-list">
{block:Reblogs}
<div class="caption">
<div class="reblog-header">
<div class="user-wrap">
<div class="avatar"><img src="{PortraitURL-64}"></div>
<div class="username {block:isdeactivated}deactivated{/block:isdeactivated}"><a href="{permalink}" target="_blank">{username}</a></div>
</div>
</div>
<div class="reblog-body">{Body}</div>
</div>
{/block:Reblogs}
</div>
{/block:RebloggedFrom}
</div>
{/block:Photo}
<!---------- legacy photoset posts ---------->
{block:Photoset}
<div class="post photoset">
<div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" class="cake"/></div>{/block:Photos}</div>
<!--Original Post-->
{block:NotReblog}
<div class="caption">{Caption}</div>
{/block:NotReblog}
<!--Post is a reblog-->
{block:RebloggedFrom}
<div class="reblog-list">
{block:Reblogs}
<div class="caption">
<div class="reblog-header">
<div class="user-wrap">
<div class="avatar"><img src="{PortraitURL-64}"></div>
<div class="username {block:isdeactivated}deactivated{/block:isdeactivated}"><a href="{permalink}" target="_blank">{username}</a></div>
</div>
</div>
<div class="reblog-body">{Body}</div>
</div>
{/block:Reblogs}
</div>
{/block:RebloggedFrom}
</div>
{/block:Photoset}
<!---------- legacy quote posts ---------->
{block:Quote}
<div class="quoteblock">
<div class="quote"><i class="iconsax right" icon-name="quote-start"></i>{Quote}<i class="iconsax left" icon-name="quote-end"></i></div>
{block:Source}
<div class="quote-source"><i class="iconsax" icon-name="minus"></i>{Source}</div>
{/block:Source}
</div>
{/block:Quote}
<!---------- legacy link posts ---------->
{block:Link}
<div class="post link">
<div class="npf-link-block"><a href="{URL}">{Name}</a></div>
<!--Original Post-->
{block:NotReblog}
<div class="caption original">{Body}</div>
{/block:NotReblog}
<!--Post is a reblog-->
{block:RebloggedFrom}
<div class="reblog-list">
{block:Reblogs}
<div class="caption">
<div class="reblog-header">
<div class="user-wrap">
<div class="avatar"><img src="{PortraitURL-64}"></div>
<div class="username {block:isdeactivated}deactivated{/block:isdeactivated}"><a href="{permalink}" target="_blank">{username}</a></div>
</div>
</div>
<div class="reblog-body">{Body}</div>
</div>
{/block:Reblogs}
</div>
{/block:RebloggedFrom}
</div>
{/block:Link}
<!---------- legacy chat posts ---------->
{block:Chat}
<div class="chatbox">
{block:Title}<h1 class="post-title"><a href="{Permalink}">{Title}</a></h1>{/block:Title}
<ul class="chat">{block:Lines}
<li>
{block:Label}<div class="chatter">{Label}</div>{/block:Label}
<div class="chattxt">{Line}</div>
</li>
{/block:Lines}</ul>
</div>
{/block:Chat}
<!---------- legacy video posts ---------->
{block:Video}
<div class="post">
<div class="video">{Video-500}</div>
<!--Original Post-->
{block:NotReblog}
<div class="caption original">{Body}</div>
{/block:NotReblog}
<!--Post is a reblog-->
{block:RebloggedFrom}
<div class="reblog-list">
{block:Reblogs}
<div class="caption">
<div class="reblog-header">
<div class="user-wrap">
<div class="avatar"><img src="{PortraitURL-64}"></div>
<div class="username {block:isdeactivated}deactivated{/block:isdeactivated}"><a href="{permalink}" target="_blank">{username}</a></div>
</div>
</div>
<div class="reblog-body">{Body}</div>
</div>
{/block:Reblogs}
</div>
{/block:RebloggedFrom}
</div>
{/block:Video}
<!--Legacy Audio Posts-->
{block:Audio}
<div class="post">
<div class="audio">
{block:AudioEmbed}{AudioEmbed}{/block:AudioEmbed}
</div>
<!--Original Post-->
{block:NotReblog}
<div class="caption original">{Body}</div>
{/block:NotReblog}
<!--Post is a reblog-->
{block:RebloggedFrom}
<div class="reblog-list">
{block:Reblogs}
<div class="caption">
<div class="reblog-header">
<div class="user-wrap">
<div class="avatar"><img src="{PortraitURL-64}"></div>
<div class="username {block:isdeactivated}deactivated{/block:isdeactivated}"><a href="{permalink}" target="_blank">{username}</a></div>
</div>
</div>
<div class="reblog-body">{Body}</div>
</div>
{/block:Reblogs}
</div>
{/block:RebloggedFrom}
</div>
{/block:Audio}
<!---------- all answer posts including npf ---------->
{block:Answer}
<div class="post">
<div class="ask-wrap">
<div class="askerimg">
<img src="{AskerPortraitURL-64}"/>
</div>
<div class="question">
<div class="asker">{asker} said: </div>
{Question}
</div>
</div>
{block:Answerer}
<div class="caption">
<div class="reblog-header">
<div class="user-wrap">
<div class="avatar"><img src="{AnswererPortraitURL-64}"></div>
<div class="username {block:isdeactivated}deactivated{/block:isdeactivated}"><a href="{permalink}" target="_blank">{Answerer} answered:</a></div>
</div>
</div>
<div class="answer">{Answer}</div>
</div>
{/block:Answerer}
<!--Original Post-->
{block:NotReblog}
<div class="caption">{Replies}</div>
{/block:NotReblog}
<!--Post is a reblog-->
{block:RebloggedFrom}
<div class="reblog-list">
{block:Reblogs}
<div class="caption">
<div class="reblog-header">
<div class="user-wrap">
<div class="avatar"><img src="{PortraitURL-64}"></div>
<div class="username {block:isdeactivated}deactivated{/block:isdeactivated}"><a href="{permalink}" target="_blank">{username}</a></div>
</div>
</div>
<div class="reblog-body">{Body}</div>
</div>
{/block:Reblogs}
</div>
{/block:RebloggedFrom}
</div>
{/block:Answer}
<!-- POST INFO -->
{block:Date}
<div class="info">
<div class="info-left">
{block:PinnedPostLabel}
<div class="pinned-post">
<a href="{Permalink}" class="pinned-post"><i class="iconsax" icon-name="info-badge"></i> pinned</a>
</div>{/block:PinnedPostLabel}
<i class="iconsax" icon-name="calendar-1"></i><a href="{Permalink}" title="{timeago}">{ShortMonth} {DayofMonth}</a>
<i class="iconsax" icon-name="message-dots-favorite"></i><a class="notecount" href="{Permalink}">{NoteCountWithLabel}</a>
</div>
<div class="post-controls">
<a href="{ReblogURL}" target="_blank" title="reblog"><i class="iconsax" icon-name="retweet"></i></a>
<a class="likeb" href="#" title="like">{LikeButton}<span class="actual-button"><i class="iconsax" icon-name="heart"></i></span></a>
</div>
</div>
<!-- TAGS -->
{block:HasTags}
<div class="tags">
<i class="iconsax" icon-name="hashtag"></i>
{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
</div>
{/block:HasTags}
{block:PermalinkPage}
<div class="source-info">
{block:RebloggedFrom}
<li><b>reblogged via:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a></li>
<li><b>originally from:</b> <a href="{ReblogRootURL}">{ReblogRootName}</a></li>
{/block:RebloggedFrom}
{block:ContentSource}<li>{lang:Source}: <a href="{SourceURL}">{SourceTitle}</a></li>{/block:ContentSource}
</div>
{/block:PermalinkPage}
{/Block:Date}
<!-- POST NOTES -->
{block:PermalinkPage}{block:Date}
{block:NoteCount}{block:PostNotes}
<div class="notes">
{PostNotes-64}
</div>
{/block:PostNotes}{/block:NoteCount}
{/block:Date}{/block:PermalinkPage}
</article>
{/block:Posts}
<!-- PAGINATION -->
{block:Pagination}
<div id="page-navigation">
{block:PreviousPage}<a href="{PreviousPage}" title="previous page"><i class="ph ph-arrow-left"></i></a>{/block:PreviousPage}
{block:JumpPagination length="5"}
{block:CurrentPage}<span class="current-page">{PageNumber}</span>{/block:CurrentPage}
{block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
{/block:JumpPagination}
{block:NextPage}<a href="{NextPage}" title="next page"><i class="ph ph-arrow-right"></i></a>{/block:NextPage}
</div>
{/block:Pagination}
</section>
<!----------------------------------------------------------->
<!--------------- RIGHT SIDEBAR CUSTOMIZATION --------------->
<!----------------------------------------------------------->
<aside id="right-sidebar">
<div id="right-wrap">
<!-- updates - change icons to whatever you like! -->
<div id="updates">
{block:ifupdateone}<span><i class="iconsax" icon-name="{text:update icon 1}"></i>{text:update one}</span>{/block:ifupdateone}
{block:ifupdatetwo}<span><i class="iconsax" icon-name="{text:update icon 2}"></i>{text:update two}</span>{/block:ifupdatetwo}
{block:ifupdatethree}<span><i class="iconsax" icon-name="{text:update icon 3}"></i>{text:update three}</span>{/block:ifupdatethree}
{block:ifupdatefour}<span><i class="iconsax" icon-name="{text:update icon 4}"></i>{text:update four}</span>{/block:ifupdatefour}
</div>
<!-- project -->
<div id="projects">
<div id="pro-image">
<img src="{image:project image}"/>
</div>
<div id="pro-wrap">
<div id="pro-top">
<div id="pro-title">{text:project title}</div>
<!-- magic wand icon -->
<i class="iconsax" icon-name="{text:project icon}"></i>
</div>
<!-- project description -->
<div id="pro-bottom">
<span><b>{text:project label 1}:</b>{text:content 1}</span>
<span><b>{text:project label 2}:</b>{text:content 2}</span>
<span><b>{text:project label 3}:</b>{text:content 3}</span>
<!-- project bar - adject the percentage -->
<div class="meter">
<span style="width:{text:progress bar percentage}"></span>
</div>
<!-- project links -->
<div id="pro-buttons">
<a href="{text:project link 1 url}">{text:project link one}</a>
<a href="{text:project link 2 url}">{text:project link two}</a>
</div>
</div>
</div>
</div>
<!-- site info -->
<div id="stats">
{block:ifstatcontent1}<span><i class="iconsax" icon-name="{text:stats icon}"></i>
<b>{text:stat label 1}:</b>{text:stat content 1}</span>{/block:ifstatcontent1}
{block:ifstatcontent2}<span><i class="iconsax" icon-name="{text:stats icon}"></i>
<b>{text:stat label 2}:</b>{text:stat content 2}</span>{/block:ifstatcontent2}
{block:ifstatcontent3}<span><i class="iconsax" icon-name="{text:stats icon}"></i>
<b>{text:stat label 3}:</b>{text:stat content 3}</span>{/block:ifstatcontent3}
{block:ifstatcontent4}<span><i class="iconsax" icon-name="{text:stats icon}"></i>
<b>{text:stat label 4}:</b>{text:stat content 4}</span>{/block:ifstatcontent4}
</div>
</div>
</aside>
<!----------------------------------------------------------->
<!----------------------------------------------------------->
<!----------------------------------------------------------->
</main>
<a href="https://softcodes.tumblr.com" title="softcodes" id="soft"><i class="ph ph-heart"></i></a>
<!----- scripts ----->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>
<script src="//tmblr-npf-audio.gitlab.io/s/init.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
<script src="//npf-images-v3.github.io/script.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
lucide.createIcons();
</script>
<script>
tippy('[title]', {
role: 'tooltip',
theme: 'rosemary',
arrow: false,
placement: 'bottom',
content(reference) {
const title = reference.getAttribute('title');
reference.removeAttribute('title');
return title;
},
});
</script>
<script>
var scrollToTopBtn = document.querySelector(".scrollToTopBtn")
var rootElement = document.documentElement
function handleScroll() {
var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight
if ((rootElement.scrollTop / scrollTotal ) > 0.05) {
scrollToTopBtn.classList.add("showBtn")
} else {
scrollToTopBtn.classList.remove("showBtn")
}
}
function scrollToTop() {
rootElement.scrollTo({
top: 0,
behavior: "smooth"
})
}
scrollToTopBtn.addEventListener("click", scrollToTop)
document.addEventListener("scroll", handleScroll)
</script>
<script>
function gatherData(images, arr) {
for (let i = 0; i < images.length; i++) {
let currentData = {
"width": images[i].getAttribute('data-width'),
"height": images[i].getAttribute('data-height'),
"low_res": images[i].getAttribute('data-lowres'),
"high_res": images[i].getAttribute('data-highres')
};
arr.push(currentData);
}
}
function getIndex(elem) {
let i = 0;
while( (elem = elem.previousElementSibling) != null ) i++;
return i;
}
function lightbox(elem) {
let currentPhotoset = elem.parentNode;
let photosetPhotos = currentPhotoset.getElementsByTagName('div');
let data = [];
gatherData(photosetPhotos, data);
Tumblr.Lightbox.init(data, getIndex(elem) + 1);
}
</script>
<script>
$(document).ready(function() {
// audio player
var $audio = $('iframe.tumblr_audio_player');
$audio.load(function() {
$(this).contents().find('head').append('<style type="text/css">' +
'.audio-player { background:var(--accent)!important; color:{color:text}!important; }' +
'.audio-player .audio-info .track-artist { color:{color:text}!important; }' +
'</style>');
});
});
</script>
<script>
var $container = $('.posts');
$container.find('.notecount').each(function(){
var n = $(this).html().split(' ')[0].replace(/,/g, '');
if (n > 999) {
n = Math.floor(n / 100) / 10;
$(this).text(n + 'k notes');
}
});
</script>
<script>
const modeBtns = document.querySelectorAll(".theme-toggle");
modeBtns.forEach((btn) => {
btn.addEventListener("click", function () {
const currentTheme = document.documentElement.getAttribute("data-theme");
const targetTheme = currentTheme === "light" ? "dark" : "light";
document.documentElement.classList.add("theme-transition");
document.documentElement.setAttribute("data-theme", targetTheme);
localStorage.setItem("theme", targetTheme);
setTimeout(function () {
document.documentElement.classList.remove("theme-transition");
}, 50);
});
});
</script>
<script>
$(document).ready(function(){
$('.search').submit(function(event){
var value = $('input:first').val();
location.replace('http://{Name}.tumblr.com/tagged/' + value);
});
});
</script>
<script>
tumblr_npf_audio({
emptyTitleText: "Untitled track",
emptyArtistText: "Untitled artist",
emptyAlbumText: "",
titleLabel: "Track:",
artistLabel: "Artist:",
albumLabel: ""
});
</script>
</body>
</html>