Theme 14 - Katara

<!
DOCTYPE html>
<html lang="en" data-theme="light">
<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}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">




<link href="https://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet"
type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></
script>
<script src="https://static.tumblr.com/yxfeliq/hHwojmt8m/bctphotoset.min.js"></
script>

<script src="//npf-images-v3.github.io/script.js"></script>
<link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
<style tmblr-npf>
:root {
--NPF-Caption-Spacing:1em;
--NPF-Image-Spacing:4px;
}
</style>


<link href="https://fonts.bunny.net/css?family={text:body
font}:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet"
/><link href="https://fonts.bunny.net/css?family={text:title
font}:300,400,500,600,700,800,300i,400i,500i,600i,700i,800i" rel="stylesheet" />


<script src="https://unpkg.com/phosphor-icons"></script>
<script src="https://unpkg.com/phosphor-icons@1.4.0"></script>
<script src="//pull.cappuccicons.com/cpf.js"></script>


<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>


<script src="https://rawgit.com/robinpx/tumblr/master/scripts/flexibleFrames/
flexibleFrames.min.js"></script>


<script
src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></
script>
<script>
$(document).ready(function(){
var clipboard = new ClipboardJS("#copybutton");
});
</script>


<script type="text/javascript"
src="https://static.tumblr.com/i5s2zks/9Acok8oo2/bct-timeago.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".time-ago").timeAgo({
time: "short",
spaces: true,
words: false,
prefix: "",
suffix: "ago",
});
});
</script>

<meta name="color:Background" content="#e0e0e0" />

<meta name="color:Posts" content="#eaeaea" />
<meta name="color:Borders" content="#d5d5d5" />
<meta name="color:Title" content="#444" />
<meta name="color:Text" content="#5a5a5a" />
<meta name="color:Link" content="#3b82a6" />
<meta name="color:Accent" content="#4da1c5" />
<meta name="color:Night Background" content="#1e1e1e" />

<meta name="color:Night Posts" content="#282828" />
<meta name="color:Night Borders" content="#3a3a3a" />
<meta name="color:Night Title" content="#eee" />
<meta name="color:Night Text" content="#bbb" />
<meta name="color:Night Link" content="#b0eaff" />
<meta name="color:Night Accent" content="#91d7f0" />
<meta name="color:Gradient One" content="#5592ac"/>

<meta name="color:Gradient Two" content="#80b8d0"/>
<meta name="color:Gradient Text" content="#fff"/>
<meta name="color:Gradient Accent" content="#c3f2ff"/>
<meta name="select:Corners" content="10px" title="round"/>

<meta name="select:Corners" content="5px" title="slightly round"/>
<meta name="select:Corners" content="15px" title="really round"/>
<meta name="select:Corners" content="0px" title="sharp"/>
<meta name="select:Glow" content="0 0 10px" title="on"/>

<meta name="select:Glow" content="0 0 0" title="off"/>
<meta name="if:Click Tags" content="1"/>

<meta name="if:Music Player" content="1"/>
<meta name="if:Updates" content="1"/>
<meta name="text:Post Margin" content="80"/>

<meta name="text:Body Font" content="Urbanist"/>
<meta name="text:Title Font" content="Montserrat Alternates"/>
<meta name="text:Font Size" content="15"/>
<meta name="text:Custom Description" content="custom description"/>
<meta name="text:Song Name" content="Song Name"/>

<meta name="text:Song Artist" content="Song Artist"/>
<meta name="text:Song URL" content=""/>
<meta name="text:Song Image URL" content=""/>
<meta name="text:Sidebar Link 1" content="link one"/>

<meta name="text:Sidebar Link 1 URL" content="/"/>
<meta name="text:Sidebar Link 2" content="link two"/>
<meta name="text:Sidebar Link 3" content="link three"/>
<meta name="text:Sidebar Link 4" content="link four"/>
<meta name="text:Sidebar Link 5" content="link five"/>
<meta name="text:Sidebar Link 6" content="link six"/>
<meta name="text:Update 1" content="watching"/>

<meta name="text:Update 1 Icon" content="television-fill"/>
<meta name="text:Update 2" content="listening to"/>
<meta name="text:Update 2 Icon" content="headphones-fill"/>
<meta name="text:Update 3" content="reading"/>
<meta name="text:Update 3 Icon" content="book-bookmark-fill"/>
<meta name="text:Update 4" content="playing"/>
<meta name="text:Update 4 Icon" content="game-controller-fill"/>
<meta name="text:Update 5" content=""/>
<meta name="text:Update 5 Icon" content=""/>
<meta name="text:Update 6" content=""/>
<meta name="text:Update 6 Icon" content=""/>


<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>
:root, html[data-theme='light'] {
--LightOn: flex;
--LightOff: none;
--ColorBackground: {color:background};
--ColorPosts: {color:posts};
--ColorTitle: {color:title};
--ColorText: {color:text};
--ColorLink: {color:link};
--ColorAccent: {color:accent};
--ColorBorders: {color:borders};
--ColorGradientOne: {color:gradient one};
--ColorGradientTwo: {color:gradient two};
--ColorGradientText: {color:gradient text};
--ColorGradientAccent: {color:gradient accent};
--ColorOpacity: rgba(255,255,255,.1);
--ColorReverseOpacity: rgba(0,0,0,.1);
}
html[data-theme='dark'] {
--LightOn: none;
--LightOff: flex;
--ColorBackground: {color:night background};
--ColorPosts: {color:night posts};
--ColorTitle: {color:night title};
--ColorText: {color:night text};
--ColorLink: {color:night link};
--ColorAccent: {color:night accent};
--ColorBorders: {color:night borders};
--ColorGradientOne: {color:gradient one};
--ColorGradientTwo: {color:gradient two};
--ColorGradientText: {color:gradient text};
--ColorGradientAccent: {color:gradient accent};
--ColorOpacity: rgba(0,0,0,.1);
--ColorReverseOpacity: rgba(255,255,255,.1);
}
html.theme-transition,
html.theme-transition *,
html.theme-transition *:before,
html.theme-transition *:after {
transition: 0s !important;
transition-delay: 0 !important;
}
.light-on{
display: var(--LightOn);
}
.light-off{
display: var(--LightOff);
}
/*--- TOOLTIPS ---*/
.tippy-tooltip.custom-theme {
font-family:'{text:title font}', sans-serif;
color:var(--ColorTitle);
text-transform:lowercase;
text-align:center;
letter-spacing:.1em;
background:var(--ColorPosts);
border-radius:{select:Corners};
margin-bottom:.5em;
box-shadow:0 0 10px 0 rgba(0,0,0,.2);
}
/*--- SCROLLBAR ---*/

::-webkit-scrollbar {
width:5px;
height:5px;
background:var(--ColorBackground);
}
::-webkit-scrollbar-track {
border-radius: 5px;
}
::-webkit-scrollbar-thumb {
background:linear-gradient(to top, var(--ColorGradientOne), var(--
ColorGradientTwo));
border-radius: 5px;
}
/*--- TEXT SELECTION ---*/

::-moz-selection { /* Code for Firefox */
color:var(--ColorPosts);
background:var(--ColorAccent);
}
::selection {
color:var(--ColorPosts);
}
/*--- COMMON ---*/
body {
font-family:'{text:body font}', sans-serif;
font-size:{text:font size}px;
color: var(--ColorText);
background-color: var(--ColorBackground);
{block:ifGradientBG}
background-image:linear-gradient(to top right, var(--ColorGradientOne), var(--
ColorGradientTwo));
background-attachment:fixed;
{/block:ifGradientBG}
line-height:140%;
word-wrap:break-word;
margin:0;
}
body {
opacity:1;
transition:.75s opacity;
}
body.fade-out {
opacity:0;
transition:none;
}
html {background-color:var(--ColorBackground);}
a {
color:var(--ColorLink);
text-decoration: none;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
a:hover {
color:var(--ColorAccent);
}
/* LINK EFFECTS */
#hua {
display:inline-block;
position:relative;
}
#hua:after {
content: '';
position:absolute;
width:100%;
transform:scaleX(0);
height:2px;
bottom:0;
left:0;
background-color:var(--ColorLink);
transform-origin:center;
transition: transform 0.25s ease-out;
}
#hua:hover:after {
transform: scaleX(1);
}
.description a, a.read_more, .updates a {

position:relative;
border-bottom:2px solid var(--ColorBorders);
}
.description a:after, a.read_more:after, .updates a:after {

content: '';
position:absolute;
width:100%;
height:2px;
bottom:-2px;
left:0;
}
.description a:hover:after, a.read_more:hover:after, .updates a:hover:after {

}
blockquote {
border-left:1px solid var(--ColorBorders);
padding-left:.75em;
margin-left:1em;
}
ul {list-style-type:circle;}
ol {list-style-type: decimal-leading-zero;}
li::marker {color:var(--ColorAccent)}
small {font-size:.95em;}
big {font-size:1.1em;}
hr {
height:1px;
border:none;
box-shadow:none;
background:var(--ColorBorders);
}
pre {
word-wrap:break-word!important;
white-space:pre-wrap;
}
b, strong {
font-weight:800;
}
b a:hover {
}
button {font-size:1em;}
h1 {font-size:1.3em; letter-spacing:.1em; padding:0; margin:.5em .25em 0 .75em;

color:var(--ColorTitle); display:inline-block; width:auto;}
h1 a {border-bottom:2px solid var(--ColorBorders);}
h1 a:hover {color:var(--ColorAccent); border-bottom:2px solid var(--ColorLink);}
h2 {font-size:1.2em; color:var(--ColorTitle); letter-spacing:.1em;}
h3 {font-size:1.15em;}
h1, h1 a, h2 {font-family:'{text:title font}', sans-serif;}
/*--- CONTAINERS ---*/
main {
width:100%;
display:flex;
justify-content:center;
gap:5em;
}
section {
width:540px;
position:relative;
margin-top:4em;
margin-bottom:4em;
}
article {
width:100%;
position:relative;
margin:{text:post margin}px auto auto auto;
box-shadow:2px 2px 10px 0 rgba(0,0,0,.1);
}
article:first-of-type {margin-top:0;}
.post-wrap {
}
/*--- TOP BUTTONS ---*/

.topleft {
position:fixed;
left:1em;
top:1em;
display:flex;
flex-direction:column;
gap:1em;
z-index:9999;
}
/* DAY/NIGHT */
button#theme-toggle {
outline:none;
border:none;
display:flex;
align-items:center;
padding:2px;
background:linear-gradient(to top right, var(--ColorGradientOne), var(--
ColorGradientTwo));
border-radius:100%;
cursor:help;
}
button#theme-toggle span {
align-items:center;
width:2.35em;
height:2.35em;
background:var(--ColorOpacity);
border-radius:100%;
}
button#theme-toggle:hover span {
background:transparent;
}
button#theme-toggle i {
font-size:1.5em;
color:var(--ColorGradientText);
text-shadow:{select:Glow};
}
button#theme-toggle:hover i {
color:var(--ColorGradientAccent);
-webkit-animation-duration: .75s;
animation-duration: .75s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count:1;
-webkit-animation-iteration-count:1;
animation-name:daynight;
-moz-animation-name:daynight;
}
@keyframes daynight {
50% {
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
}
/* MUSIC BUTTON */
.music-container {
position:relative;
display:flex;
align-items:flex-start;
}
.music-button {
display:flex;
align-items:center;
padding:2px;
ColorGradientTwo));
border-radius:100%;
cursor:help;
}
.music-button a {
display:flex;
align-items:center;
width:2.35em;
height:2.35em;
border-radius:100%;
}
.music-button:hover a {background:transparent;}
.music-container .music-button i {
font-size:1.5em;
-webkit-animation-duration: 1.65s;
animation-duration: 1.65s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-name: music;
-moz-animation-name: music;
animation-play-state:paused;
}
.music-container.play .music-button i {
animation-play-state:running;
}
@keyframes music {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(.95);
-ms-transform: scale(.95);
transform: scale(.95);
}
50% {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
75% {
-webkit-transform: scale(.95);
-ms-transform: scale(.95);
transform: scale(.95);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
/*- MUSIC PLAYER -*/
.audio-container {
position:absolute;
left:100%;
margin-left:1em;
min-width:250px;
display:flex;
align-items:center;
backdrop-filter: blur(2px);
z-index:9;
}
.audio-container:after {
content:'';
position:absolute;
left:0;
width:100%;
height:100%;
opacity:.85;
ColorGradientTwo));
z-index:-1;
}
.audio-buttons {
width:calc(100% - 1.5em);
display:flex;
justify-content:space-evenly;
align-items:center;
gap:1em;
padding:.5em 1em .5em 1em;
}
.audio-buttons i#notbtn {
font-size:1.3em;
}
.action-btn-big {
font-size:1.3em;
color:var(--ColorGradientOne);
display:flex;
align-items:center;
padding:.4em;
background:var(--ColorGradientAccent);
border:1px solid var(--ColorGradientAccent);
border-radius:100%;
cursor:pointer;
}
.action-btn-big:hover {
border:1px solid var(--ColorOpacity);
}
.action-btn:focus {outline:0;}
.img-container {
width:calc(100% - 2em);
display:flex;
justify-content:flex-start;
align-items:center;
gap:1em;
padding:1em;
}
.img-container img {
width:3em;
height:3em;
border-radius:100%;
object-fit:cover;
ColorGradientTwo));
animation:rotate 5s linear infinite;
animation-play-state:paused;
}
.music-container.play .img-container img {

animation-play-state:running;
}
@keyframes rotate {
from {
transform:rotate(0deg);
}
to {
}
}
.music-info {
text-align:left;
}
.music-info #title {
font-size:.95em;
font-weight:700;
text-align:left;
/* Tutorial on https://fossheim.io/writing/posts/css-text-gradient. */
/* Fallback: Set a background color. */
/* Create the gradient. */

background:linear-gradient(to right, var(--ColorGradientOne), var(--
ColorGradientTwo));
/* Set the background size and repeat properties. */

background-size: 100%;
background-repeat: repeat;
/* Use the text as a mask for the background. */

/* This will show the gradient as a text color rather than element bg. */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
}
.music-info #artist {font-size:.95em; color:var(--ColorText); text-align:left;}
.music-info h4 {margin:0;}
/* sidebar button */
.sidebar-button {
display:none;
align-items:center;
padding:2px;
ColorGradientTwo));
border-radius:100%;
cursor:help;
}
.sidebar-button a {
display:flex;
align-items:center;
width:2.35em;
height:2.35em;
border-radius:100%;
}
.sidebar-button:hover a {background:transparent;}
.sidebar-button i {
font-size:1.5em;
text-shadow:{select:glow};
}
.sidebar-button:hover i {
}
/*--- HEADER RIGHT ---*/
.topright {
position:fixed;
right:1em;
top:1em;
display:flex;
align-items:center;
gap:1em;
z-index:9999;
}
/* updates button */
.updates-wrap {
position:relative;
display:flex;
}
.updates-button {
display:flex;
align-items:center;
padding:2px;
ColorGradientTwo));
border-radius:100%;
cursor:help;
}
.updates-button a {
display:flex;
align-items:center;
width:2.35em;
height:2.35em;
border-radius:100%;
}
.updates-button:hover a {background:transparent;}
.updates-button i {
font-size:1.5em;
}
.updates-button:hover i {
-webkit-animation-duration: 1s;
animation-duration: 1s;
animation-name: wiggle;
-moz-animation-name: wiggle;
}
@keyframes wiggle {
0% {
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px)
}
15% {
}
30% {
-webkit-transform: rotate(10deg);
-ms-transform: translateX(10deg);
transform: translateX(10deg)
}
45% {
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg)
}
60% {
-ms-transform: rotate(10deg);
transform: rotate(10deg)
}
75% {
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg)
}
85% {
transform: rotate(10deg)
}
100% {
}
}
body.updates-clicked .updates-button i {color:var(--ColorGradientAccent);}
/*- updates tab -*/
.updates-container {
position:absolute;
right:100%;
margin-right:1em;
width:250px;
display:flex;
align-items:center;
z-index:9;
}
.updates-container:after {
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:.85;
background:linear-gradient(to top left, var(--ColorGradientOne), var(--
ColorGradientTwo));
z-index:-1;
}
.updates-title {
font-size:1.1em;
font-weight:700;
}
.updates {
display:flex;
gap:1em;
padding:.75em;
}
.updates li {
display:flex;
gap:.5em;
}
.updates i {
font-size:1.3em;
}
.updates span {
text-align:left;
}
/* TUMBLR CONTROLS */
#controlsbutton {
display:flex;
align-items:center;
padding:2px;
ColorGradientTwo));
border-radius:100%;
cursor:help;
}
#controlsbutton a {
display:flex;
align-items:center;
width:2.35em;
height:2.35em;
border-radius:100%;
}
#controlsbutton:hover a {background:transparent;}
#controlsbutton i {
font-size:1.5em;
}
#controlsbutton:hover i {
animation-name:tumblrcontrols;
-moz-animation-name:tumblrcontrols;
}
@keyframes tumblrcontrols {
45% {
transform: rotate(180deg);
}
55% {
}
100% {
}
}
.tmblr-iframe-compact .tmblr-iframe--unified-controls {
z-index:999999999!important;
margin-top:.5em;
margin-right:3.5em;
transform:scale(.9);
opacity:0;
visibility:hidden;
}
body.controlsclick iframe.tmblr-iframe {
opacity:1.0;
visibility:visible;
}
body.controlsclick #controlsbutton i {color:var(--ColorGradientAccent);}
/*---- SIDEBAR ----*/
aside {width:350px;}
#sidebar {
position:fixed;
margin-top:4em;
width:350px;
display:flex;
align-items:center;
box-shadow:0 5px 20px 0 rgba(0,0,0,.1);
z-index:999;
}
.sidebar-wrap {
position:relative;
width:100%;
display:flex;
}
#sidebar svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
#sidebar .svg-container {
position:absolute;
width:100%;
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
opacity:.85;
}
.title {
position:relative;
display:flex;
align-items:center;
gap:1em;
padding:.75em;
}
.title img {
width:4.5em;
height:4.5em;
border-radius:100%;
padding:2px;
background:var(--ColorGradientTwo);
}
.title a {
display:flex;
align-items:center;
}
.title b {
font-size:1.3em;
font-weight:bold;
text-align:center;
ColorGradientTwo));
background-repeat:repeat;
-webkit-text-fill-color:transparent;
-moz-background-clip:text;
-moz-text-fill-color:transparent;
}
.title a:hover b {
}
.title i {
font-style:normal;
color:var(--ColorText);
text-align:center;
}
.title a:hover i {
}
.description {
text-align:center;
padding:.75em .75em 1em .75em;
border-radius:0 0 {select:Corners} {select:Corners};
z-index:1;
}
.description p {margin-bottom:0; padding-bottom:0;}
.sidebar-bottom {
position:relative;
display:flex;
align-items:center;
gap:.5em;
margin-top:-.75em;
padding:1.25em 1em .5em 1em;
ColorGradientTwo));
}
body.nav-clicked .sidebar-bottom {border-radius:0 0 0 0;}
.sb-nav, .sb-search {cursor:help; display:flex; justify-content:center; align-

items:center;}
.sb-link {display:flex; justify-content:center; align-items:center;}
.sb-nav i, .sb-link i, .sb-search i {
font-size:1.5em;
}
.sb-nav i:hover, a.sb-link:hover i, .sb-search i:hover {
}
body.nav-clicked .sb-nav i {color:var(--ColorGradientAccent); text-shadow:

{select:Glow};}
body.search-clicked .sb-search i {color:var(--ColorGradientAccent); text-shadow:
{select:Glow};}
/* NAVIGATE */
nav {
position:relative;
display:flex;
flex-wrap:wrap;
gap:.5em;
padding:1em;
ColorGradientTwo));
border-top:1px solid var(--ColorOpacity);
z-index:9;
}
nav a {
min-width:calc(33% - .5em);
display:flex;
align-items:center;
gap:.25em;
}
nav i {
font-size:1.2em;
}
nav a:hover i {
}
nav a span {
text-align:left;
}
nav a:hover span {
}
/* SEARCH BAR */
.sb-search {
display:flex;
align-items:center;
gap:.5em;
}
body.search-clicked .sb-search {
position:absolute;
left:0;
ColorGradientTwo));
}
body.nav-clicked.search-clicked .sb-search {border-radius:0 0 0 0;}
.search .query {
border: 0;
outline: 0;
font-size:.9em;
width:100%;
background:transparent;
}
::-webkit-input-placeholder {color: inherit; opacity:.75;}

:-moz-placeholder {color: inherit; opacity:.75;}
::-moz-placeholder {color: inherit; opacity:.75;}
:-ms-input-placeholder {color: inherit; opacity:.75;}
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;}
/*---- TOP POST INFO ---*/
.topinfo {
margin-bottom:-1em;
display:flex;
justify-content:space-between;
align-items:center;
gap:.5em;
padding:.75em 1em 1.75em 1em;
ColorGradientTwo));
border-radius:{select:Corners} {select:Corners} 0 0;
}
/* top info left */

.topinfo-left {
display:flex;
justify-content:flex-end;
align-items:center;
gap:1em;
}
.topinfo-img {
width:2.35em;
height:2.35em;
display:flex;
align-items:center;
padding:2px;
border-radius:100%;
}
.topinfo-img img {
width:2.35em;
height:2.35em;
border-radius:100%;
}
.topinfo-img:hover {
transform:scale(1.1);
}
.topinfo-textwrap {
display:flex;
}
.ti-name {
font-size:.95em;
text-align:left;
}
.ti-name span {opacity:.95;}
.ti-name a {
font-weight:600;
border-bottom:1px solid transparent;
}
.ti-name a:hover {
}
.ti-text {
display:flex;
align-items:center;
gap:.5em;
}
.ti-text b {
font-weight:normal;
font-size:.95em;
text-align:left;
opacity:.95;
}
.ti-text span {
font-size:.5em;
}
/* top info right */

.topinfo-right {
display:flex;
align-items:center;
}
.topinfo-right a {
position:relative;
display:flex;
align-items:center;
}
.topinfo-right i {
font-size:1.6em;
}
.topinfo-right a:hover i {
}
/*--- POSTS ----*/
.posts li, .posts blockquote, figure, video, iframe, .video, .video iframe,
figure.tmblr-embed.tmblr-full, figure.tmblr-embed.tmblr-full iframe, .caption
iframe {max-width: 100%;}
article img {display:block; margin:auto; max-width:100%;}
.caption {
padding:1em;
}
.caption a {
position:relative;
}
.caption a:hover {border-bottom:2px solid var(--ColorLink);}
.userlink {
}
.userlink a {
display:flex;
align-items:center;
gap:.5em;
border-bottom:0;
}
.userlink a:hover {border-bottom:0;}
.usericon {
width:1.5em;
height:1.5em;
padding:2px;
border-radius:100%;
}
.usericon img {
width:1.5em;
height:1.5em;
border-radius:100%;
}
.userlink a:hover .usericon img {
}
.username {
font-weight:600;
font-size:.95em;
}
.userlink a:hover .username {
border-bottom:2px solid var(--ColorAccent);
}
.userlink.deactive .username {
opacity:.85;
}
a.read_more {
text-transform:uppercase;
letter-spacing:1px;
font-weight:bold;
color: var(--ColorTitle);
}
a.read_more:hover {color:var(--ColorAccent);}
/*--- PHOTO POSTS ----*/
.photopost {width:calc(100% - 2em); padding:1em;}

.photopost .caption {padding:.5em 0 .5em 0;}
img.photos {width:100%;}
.vignette, #vignette {opacity:0;}

.tmblr-lightbox, #tumblr_lightbox {
background-color:rgba(0,0,0,.2) !important;
z-index:9999999;
}
.lightbox-image, #tumblr_lightbox img {
box-shadow: none !important;
}
#tumblr_lightbox_caption, .lightbox-caption {
color: #fff !important;
font-family: inherit;
margin-top: 1em !important;
z-index:9999999;
}
/*--- LINK POSTS ---*/
.linkpost {
position:relative;
padding:1em;
}
.linkpost a {
display:flex;
align-items:center;
}
.linkimage {
position:relative;
width:100%;
height:200px;
z-index:9;
}
.linkimage img {
width:100%;
height:200px;
object-fit:cover;
}
.linkimage-overlay {
position:absolute;
top:0;
width:100%;
height:200px;
display:flex;
align-items:center;
font-size:1.4em;
font-weight:bold;
backdrop-filter:blur(3px);
z-index:9;
}
.linkimage:after {
content:'';
position:absolute;
top:0;
width:100%;
height:200px;
opacity:.75;
ColorGradientTwo));
z-index:1;
}
.link {
padding:1em;
background:var(--ColorReverseOpacity);
display:flex;
align-items:center;
gap:1em;
}
.link#thumbnail {border-radius:0 0 {select:Corners} {select:Corners};}
.linkicon i {
font-size:1.8em;
margin-left:.5em;
padding:.4em;
ColorGradientTwo));
border-radius:100%;
}
.linkpost a:hover .linkicon i {

transform:scale(.95);
}
.linktitle {
display:flex;
}
.linktitle b {
font-size:1.1em;
}
.linktitle span {
font-size:.9em;
}
/*--- AUDIO POSTS ---*/
.audiopost {
position:relative;
padding:1em;
display:flex;
align-items:center;
z-index:9;
}
.audiopost iframe {
width:100%;
}
.audio {
position:relative;
width:100%;
display:flex;
align-items:center;
background:var(--ColorReverseOpacity);
}
.audiowrap {
display:flex;
align-items:center;
gap:1em;
padding:1em;
}
.albumart-circle {
width:100px;
height:100px;
}
.albumart-circle img {
width:100px;
height:100px;
border-radius:100%;
padding:2px;
ColorGradientTwo));
}
.audiotitle {
display:flex;
align-items:center;
}
.audiotitle b {
text-align:center;
}
.audiotitle span {
text-align:center;
}
.audiobuttons {
display:flex;
align-items:center;
gap:1em;
padding:1em;
}
.audiobuttons i {
font-size:1.6em;
ColorGradientTwo));
background-repeat:repeat;
-webkit-text-fill-color:transparent;
-moz-background-clip:text;
-moz-text-fill-color:transparent;
}
.audioplaybg {
display:flex;
align-items:center;
padding:2px;
ColorGradientTwo));
border-radius:100%;
box-shadow:2px 8px 8px rgba(0,0,0,.1);
}
.audioplay {
width: 30px;
height: 30px;
overflow: hidden;
position: relative;
padding:8px 8px 5px 5px;
background:#f2f2f2;
border-radius:100%;
z-index:1;
}
/*--- QUOTE POSTS ----*/
.quotepost {
padding:1em;
}
.quote {
padding:.5em;
ColorGradientTwo));
}
.quotewrap {
padding:.5em;
}
.quote i {
font-size:1.4em;
margin-right:1em;
}
.quote span {
font-size:1.2em;
font-weight:bold;
text-align:left;
}
.source {
text-align:center;
padding:.5em .5em 0 .5em;
}
/*--- ANSWER POSTS ---*/
.askwrap {
padding:1em 1em .5em 1em;
}
.askicon {
width:2.2em;
height:2.2em;
padding:2px;
border-radius:100%;
ColorGradientTwo));
}
.askicon img {
width:2.2em;
height:2.2em;
border-radius:100%;
}
.asker {
display:flex;
align-items:center;
gap:.5em;
margin-bottom:1em;
}
.asker .askerstart {
display:flex;
align-items:flex-end;
text-align:right;
line-height:120%;
}
.askerstart b {
font-weight:600;
}
.askerstart a {
margin-right:0;
margin-bottom:0;
}
.askerstart span {
font-size:.9em;
}
.askmessage {
margin-left:2.5em;
margin-top:-.5em;
}
.question {
position:relative;
margin-right:2em;
text-align:right;
ColorGradientTwo));
}
.question .blurb {
position:absolute;
right:-.5em;
top:-.8em;
transform:rotate(-145deg);
width:0;
height:0;
border-left:.8em solid transparent;
border-right:.8em solid transparent;
border-top:1.8em solid var(--ColorGradientTwo);
}
.answerwrap {
padding:.5em 1em 1em 1em;
}
.answerer .usericon {
width:2.2em;
height:2.2em;
display:flex;
align-items:center;
padding:2px;
border-radius:100%;
ColorGradientTwo));
}
.answerer .usericon img {

width:2.2em;
height:2.2em;
border:none;
padding:0;
}
.answerer {
display:flex;
align-items:center;
gap:.5em;
line-height:120%;
}
.answerer .username {
font-weight:600;
border-bottom:0;
}
.answermsg {
font-size:.9em;
}
.answer {
position:relative;
margin-top:1em;
margin-left:2em;
}
.answer .blurb {
position:absolute;
left:-.5em;
top:-.8em;
width:0;
height:0;
border-left:.8em solid transparent;
border-right:.8em solid transparent;
border-top:1.8em solid var(--ColorBackground);
}
.question a, .answer a {
position:relative;
}
.question a:after, .answer a:after {

content: '';
position:absolute;
width:100%;
height:2px;
bottom:-2px;
left:0;
transform-origin:middle;
}
.question a:hover:after, .answer a:hover:after {

transform-origin: middle;
}
.question a {color:var(--ColorGradientText);border-bottom:2px solid var(--

ColorOpacity);}
.question a:after {background-color:var(--ColorGradientAccent);}
.question b {color:var(--ColorGradientText);}
/*--- CHAT POSTS ---*/
.chat {width:calc(100% - 2em); margin:0; padding:1em;}
.chat li {
position:relative;
list-style:none;
padding:1em 2em 1em 2em;
margin:.5em 0 .5em 0;
}
.chat li:last-of-type {margin-bottom:0;}

.chat li:nth-of-type(odd) {
background:var(--ColorGradientOne);
}
.chat li:nth-of-type(odd) .blurb {
position:absolute;
top:1.2em;
left:-.4em;
margin-top:-.5em;
width:2em;
height:2em;
background:var(--ColorGradientOne);
}
.chat li:nth-of-type(even) {
text-align:right;
}
.chat li:nth-of-type(even) .blurb {
position:absolute;
top:1.2em;
right:-.4em;
margin-top:-.5em;
width:2em;
height:2em;
}
.chatter:nth-of-type(even) {text-align:right;}
.chatter {
font-weight:600;
}
/*--- BOTTOM POST INFO ---*/
.bottominfo-wrap {
width:100%;
display:flex;
}
.bottominfo {
position:relative;
display:flex;
justify-content:space-between;
align-items:center;
gap:.5em;
margin-top:-.75em;
ColorGradientTwo));
}
{block:ifClickTags}
.bottominfo:after {
position:absolute;
content:'';
top:-.25em;
left:0;
width:100%;
height:1em;
}
.bottominfo.tags-clicked {
margin-top:-.75em;
}
.bottominfo.tags-clicked:after {display:none;}
{/block:ifClickTags}
.bottominfo-left {
display:flex;
align-items:center;
gap:1em;
}
/* reblog button */
.bil-icon a {
display:flex;
align-items:center;
padding:.5em;
border-radius:100%;
}
.bil-icon a:hover {transform:scale(1.1);}
.bil-icon i {
font-size:1.6em;
}
/* like button */
a.likeb span, .bil-like {

display:flex;
align-items:center;
}
.bil-like i {
font-size:1.6em;
}
.bil-like a:hover i {
}
.likeb {
position: relative;
}
.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 {
}
.clicktagsbutton {display:flex; align-items:center; justify-content:center;

cursor:help;}
.clicktagsbutton i {
font-size:1.5em;
}
.clicktagsbutton:hover i {
}
.tagsbutton {display:none;}
.clicktagsbutton.tags-clicked i {color:var(--ColorGradientAccent); text-shadow:
{select:Glow};}
/* bottom info right */

.bottominfo-right {
display:flex;
align-items:center;
gap:1em;
}
.bottominfo-right a {
display:flex;
align-items:center;
}
.bottominfo-right i {
font-size:1.6em;
}
.bottominfo-right a:hover i {
}
#copybutton {cursor:help;}
/*--- TAGS ---*/
.tags, .clicktags {
display:flex;
align-items:center;
flex-wrap:wrap;
gap:.75em;
border-top:1px solid var(--ColorBorders);
z-index:1;
}
.tags a {
display:flex;
align-items:center;
gap:.05em;
}
.tags a span {
}
.tags a:hover span {
}
.tags a b {
font-weight:normal;
opacity:.85;
/*--- PAGINATION ---*/
article.pagination {
display:flex;
align-items:center;
gap:2em;
ColorGradientTwo));
}
.pagination-buttons {
display:flex;
align-items:center;
gap:1em;
}
.pagination-btn {
display:flex;
align-items:center;
}
.pagination-btn a {
display:flex;
align-items:center;
}
.pagination-btn i {
font-size:1.6em;
}
.pagination-btn:hover i {
}
.pagination-btn.nopgn {opacity:.5; cursor:not-allowed;}
.pagination-btn.nopgn i {color:var(--ColorGradientAccent); text-shadow:none;}
.pagination-btn.nopgn:hover i {color:var(--ColorGradientAccent);}
.pagination-btn.nopgn.yespgn {display:none;}
.jump-btn, .jump-btn a, .currentpg {
display:flex;
align-items:center;
}
.jump-btn a, .currentpg {
font-size:.95em;
width:1.8em;
height:1.8em;
border-radius:100%;
}
.currentpg {
cursor:default;
}
.jump-btn a {
border:1px solid var(--ColorGradientAccent);
}
.jump-btn a:hover {
}
/*--- TAG / DAY PAGES ---*/
article.tdpage {
display:flex;
align-items:center;
gap:1em;
ColorGradientTwo));
}
.tdpage-text {
font-size:.95em;
text-align:left;
}
.tdpage-text b {color:var(--ColorGradientText);}
.tdpage i {
font-size:1.3em;
padding:.3em;
border-radius:100%;
}
/*--- PERMALINK INFO ---*/
.perma-page {
margin:1em 0 1em 0;
display:flex;
gap:1em;
padding:1em;
}
.perma-page li {
display:flex;
align-items:center;
gap:.5em;
}
.perma-page i {
font-size:1.2em;
padding:.3em;
ColorGradientTwo));
border-radius:100%;
}
.perma-page span {
font-size:.95em;
}
.perma-page a {font-weight:700; color:var(--ColorTitle); position:relative;}
.perma-page a:hover {color:var(--ColorAccent);}

.perma-page a:after {
content: '';
position:absolute;
width:100%;
height:2px;
bottom:-2px;
left:0;
}
.perma-page a:hover:after {
}
/*--- POST NOTES ---*/
.notes {
margin:2em 0;
ColorGradientTwo));
}
.notes-title {
display:flex;
align-items:center;
gap:1em;
}
.notes-title span {
text-align:left;
}
.notes-titleicon {
display:flex;
align-items:center;
padding:.5em;
border-radius:100%;
}
.notes-titleicon i {
font-size:1.6em;
}
ol.notes {
max-width: 100%;
margin:0;
}
.more_notes_link {
width:100%;
}
a.more_notes_link {
font-weight:bold;
letter-spacing: 0.1em;
}
a.more_notes_link::after {
content:'\eb98';
}
a.more_notes_link::before {
content:'\eb98';
position:absolute;
left:0;
font-family:'cappuccicons';
}
ol.notes li.note blockquote {

display:none;
}
ol.notes li.note {
padding:1em 0 1em 0;
list-style-type:none;
display:flex;
align-items:center;
gap:.5em;
font-size:.9em;
border-top:1px solid var(--ColorBorders);
}
ol.notes li.note:first-of-type {border-top:none;}
ol.notes li.note a {text-transform:uppercase;}
ol.notes li.note img.avatar {

width:1.5em;
height:1.5em;
padding:2px;
border-radius:100%;
}
ol.notes li.note.reblog::after {
content:'\ec37';
color:#03cf35;
}
ol.notes li.note.like::after {
content:'\eb04';
color:#fe492f;
}
ol.notes li.note.reply::after {
content:'\e9d7';
color:#00b8ff;
}
ol.notes li.note.reply span {
color:#00b8ff;
}
ol.notes li.note.reply span.action {
}
ol.notes li.note.original_post::after {
content:'\eb68';
}
ol.notes li.note.original_post {
font-weight:bold;
}
ol.notes li.note.reblog, ol.notes li.note.like, ol.notes li.note.original_post,

ol.notes li.note.reply, a.more_notes_link {
position:relative;
}
ol.notes li.note.reblog span, ol.notes li.note.like span, ol.notes
li.note.original_post span, ol.notes li.note.reply span {margin-right:.3em; margin-
left:.3em;}
ol.notes li.note.reblog::after, ol.notes li.note.like::after, ol.notes
li.note.original_post::after, ol.notes li.note.reply::after,
a.more_notes_link::after {
position:absolute;
right:0;
font-family:'cappuccicons';
}
/*---- BOTTOM BUTTONS ---*/
.bbuttons {
position:fixed;
left:1em;
bottom:1em;
display:flex;
align-items:center;
gap:1em;
z-index:9999;
}
/* SCROLL TO TOP */
#totop {
display:none;
align-items:center;
padding:2px;
ColorGradientTwo));
border-radius:100%;
cursor:help;
}
#totop a {
width:2.35em;
height:2.35em;
display:flex;
align-items:center;
border-radius:100%;
cursor:help;
}
#totop:hover a {background:transparent;}
#totop i {
font-size:1.5em;
}
#totop:hover i {
animation-name:totop;
-moz-animation-name:totop;
}
@keyframes totop {
0% {
-webkit-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px)
}
10% {
-webkit-transform: translateY(-3px);
-ms-transform: translateY(-3px);
transform: translateY(-3px)
}
20% {
}
30% {
}
40% {
}
50% {
}
60% {
}
70% {
}
80% {
}
90% {
}
100% {
}
}
/*--- CREDIT: DO NOT TOUCH ---*/
.credit {
display:flex;
align-items:center;
padding:2px;
ColorGradientTwo));
border-radius:100%;
}
.credit a {
width:2.35em;
height:2.35em;
display:flex;
align-items:center;
border-radius:100%;
}
.credit i {
font-size:1.5em;
}
.credit:hover i {
-webkit-animation-duration: 2s;
animation-duration: 2s;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
animation-name: bounce;
-moz-animation-name: bounce;
}
@keyframes bounce {
0% {
}
25% {
}
50% {
}
75% {
}
100% {
}
}
/*--- RESPONSIVENESS ---*/

@media only screen and (max-width: 1075px) {
.sidebar-button {display:flex;}
body.explore-click #explore {left:0;}
aside {position:fixed; left:4.5em; z-index:999;}
#sidebar {display:none;}
body.sidebar-click #sidebar {display:flex;}
body.sidebar-click .sidebar-button i {color:var(--ColorGradientAccent);}
}
@media only screen and (max-width: 700px) {

section {margin-left:4.5em; margin-right:4.5em;}
.tmblr-iframe-compact .tmblr-iframe--unified-controls, #controlsbutton, .ti-name
span {display:none;}
}
{CustomCSS}
</style>
</head>
<body>
<script>
document.body.classList.add('fade-out');
window.addEventListener('DOMContentLoaded', () => {
document.body.classList.remove('fade-out');
});
</script>
<main>


<div class="topleft">


<button id="theme-toggle" aria-label="toggle dark or light mode" type="button">
<span class="light-on" title="turn off the lights"><i
class="ph-moon-fill"></i></span>
<span class="light-off" title="turn on the lights"><i
class="ph-sun-fill"></i></span>
</button>


{block:ifMusicPlayer}
<div class="music-container" id="music-container">
<div title="music player" class="music-button"><a><i class="ph-music-notes-
fill"></i></a></div>
<div class="audio-container" id="audio-container">
<audio src="{text:Song URL}" id="audio"></audio>
<div class="audio-buttons">
<i id="notbtn" class="ph-queue-fill"></i>
<i id="notbtn" class="ph-rewind-fill"></i>
<button id="play" class="action-btn action-btn-big">
<i class="ph-play-fill"></i>
</button>
<i id="notbtn" class="ph-fast-forward-fill"></i>
<i id="notbtn" class="ph-playlist-fill"></i>
</div>
<div class="img-container">
<img src="{text:Song Image URL}" alt="music-cover" id="cover">
<div class="music-info">
<div id="title">{text:Song Name}</div>
<div id="artist">{text:Song Artist}</div>
</div>
</div>
</div>
</div>
<div title="toggle sidebar" class="sidebar-button"><a><i class="ph-sidebar-

fill"></i></a></div>
</div>
<div class="topright">
<div title="toggle controls" id="controlsbutton"><a><i
class="ph-gear-fill"></i></a></div>
{block:ifUpdates}
<div class="updates-wrap">
<div title="updates" class="updates-button"><a><i
class="ph-bell-fill"></i></a></div>
<div class="updates-container">
<div class="updates-title">updates</div>
<div class="updates">
<li><i class="ph-{text:Update 1 Icon}"></i><span>{text:Update
1}</span></li>
{block:ifUpdate2}<li><i class="ph-{text:Update 2
Icon}"></i><span>{text:Update 2}</span></li>{/block:ifUpdate2}
</div>
</div>
</div>
{/block:ifUpdates}
</div>


<aside>
<div id="sidebar">
<div class="sidebar-wrap">
<div class="svg-container">
<svg viewBox="0 0 250 250" preserveAspectRatio="xMinYMin meet">
<path d="M0,50 C75,100 150,0 250,50 L250,00 L0,0 Z" style="stroke: none;
fill:var(--ColorGradientOne);"></path>
</svg>
</div>
<div class="title">
<img src="{PortraitURL-128}">
<a href="/"><b>{Title}</b><i>@{Name}</i></a>
</div>
{block:ifCustomDescription}<div class="description">{text:Custom
Description}</div>{/block:ifCustomDescription}
<div class="sidebar-bottom">
<a title="home" class="sb-link" href="/"><i class="ph-house-fill"></i></a>
{block:AskEnabled}<a title="contact" class="sb-link" href="/ask"><i
class="ph-chats-circle-fill"></i></a>{/block:AskEnabled}
<a title="archive" class="sb-link" href="/archive"><i class="ph-archive-
fill"></i></a>
<div title="navigate" class="sb-nav"><i class="ph-navigation-arrow-
fill"></i></div>
<div class="sb-search">
<i title="toggle searchbar" class="ph-magnifying-glass"></i>
<div class="searchwrap">
<form class="search" action="javascript:return false">
<input type="text" class="query" placeholder="search"></form>
</div>
</div>
</div>
<nav>
{block:ifSidebarLink1}<a href="{text:Sidebar Link 1 URL}"><i class="ph-
number-one"></i><span>{text:Sidebar Link 1}</span></a>{/block:ifSidebarLink1}
number-two"></i><span>{text:Sidebar Link 2}</span></a>{/block:ifSidebarLink2}
number-three"></i><span>{text:Sidebar Link 3}</span></a>{/block:ifSidebarLink3}
number-four"></i><span>{text:Sidebar Link 4}</span></a>{/block:ifSidebarLink4}
number-five"></i><span>{text:Sidebar Link 5}</span></a>{/block:ifSidebarLink5}
number-six"></i><span>{text:Sidebar Link 6}</span></a>{/block:ifSidebarLink6}
</nav>
</div>
</div>
</div>
</aside>


<section>


{block:TagPage}
<article class="tdpage">
<i class="ph-tag-fill"></i>
<div class="tdpage-text">
showing <b>{tagresultcount}</b> posts tagged <b>#{Tag}</b>
</div>
</article>
{/block:TagPage}
{block:DayPage}
<article class="tdpage">
<i class="ph-calendar-plus-fill"></i>
<div class="tdpage-text">
showing all posts made on <b>{Month} {DayOfMonth}, {Year}</b>
</div>
</article>
{/block:DayPage}


{block:posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}
<article class="posts" id="{PostID}" post-type="{PostType}">


{block:Date}
<div class="topinfo">
<div class="topinfo-left">
{block:NotReblog}
<div class="topinfo-img"><a title="original post" href="/"><img
src="{PortraitURL-128}"></a></div>
{/block:NotReblog}
{block:RebloggedFrom}
<div class="topinfo-img"><a target="_blank" title="@{ReblogRootName}"
href="//{ReblogRootName}.tumblr.com"><img
src="{ReblogRootPortraitURL-128}"></a></div>
{/block:RebloggedFrom}
<div class="topinfo-textwrap">
{block:NotReblog}
<div class="ti-name"><span>{PostType} post by </span><a
href="{Permalink}">{Name}</a></div>
{/block:NotReblog}
<div class="ti-name"><span>{PostType} post by </span><a target="_blank"
href="{ReblogRootURL}">{ReblogRootName}</a></div>
<div class="ti-text">
<b class="time-ago">{TimeStamp}</b>
<span>●</span>
<b class="notecount">{NoteCountWithLabel}</b>
</div>
</div>
</div>
<div class="topinfo-right">
<a {block:PinnedPostLabel}style="display:none;"{/block:PinnedPostLabel}
title="view permalink" href="{Permalink}"><i
class="ph-link-simple-horizontal"></i></a>
{block:PinnedPostLabel}<a title="pinned post" href="{Permalink}"><i
class="ph-push-pin-fill"></i></a>{/block:PinnedPostLabel}
</div>
</div>
{/block:Date}
<div class="post-wrap">

{block:Photo}
<div class="photopost">
<img src="{PhotoURL-highres}" al="{photoalt}" class="photos">
{block:Caption}
{block:NotReblog}
<div class="caption">{Caption}</div>
{/block:NotReblog}
{block:Rebloggedfrom}
{block:Reblogs}
<div class="caption">
<div class="userlink
{block:IsDeactivated}deactive{/block:IsDeactivated}"><a
{block:IsDeactivated}title="deactivated"{/block:IsDeactivated}
href="{Permalink}"><div class="usericon"><img src="{PortraitURL-64}"></div><div
class="username">{Username}</div></a></div>
{Body}
</div>
{/block:Reblogs}
{/block:Caption}
</div>
{/block:Photo}


{block:Photoset}
<div class="photopost">
<div class="photo-slideshow" id="photoset_{PostID}" data-
layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-
photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-
500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-
height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}"
href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
{block:Caption}
{block:NotReblog}
{/block:NotReblog}
{block:Reblogs}
{Body}
</div>
{/block:Reblogs}
{/block:Caption}
</div>
{/block:Photoset}


{block:Text}
{block:Title}
<h1><a href="{Permalink}">{Title}</a></h1>
{/block:Title}
{block:NotReblog}
<div class="caption">{Body}</div>
{/block:NotReblog}
{block:Reblogs}
{Body}
</div>
{/block:Reblogs}
{/block:Text}

{block:Video}
<div class="video">{Video-700}</div>
{block:Caption}
{block:NotReblog}
{/block:NotReblog}
{block:Reblogs}
{Body}
</div>
{/block:Reblogs}
{/block:Caption}
{/block:Video}


{block:Chat}
<ul class="chat">
{block:Lines}
{block:Label}<div class="chatter">{Label}</div>{/block:Label}
<li>{Line} <div class="blurb"></div></li>
{/block:Lines}
</ul>
{/block:Chat}


{block:Link}
<div class="linkpost">
<a href="{URL}">
{block:Thumbnail}<div class="linkimage"><img src="{Thumbnail-HighRes}">
<div class="linkimage-overlay">{Name}</div>
</div>{/block:Thumbnail}
<div class="link" {block:Thumbnail}id="thumbnail"{/block:Thumbnail}>
<div class="linkicon"><i class="ph-link"></i></div>
<div class="linktitle"><b>{Name}</b>
{block:Excerpt}<span>{Excerpt}</span>{/block:Excerpt}
</div>
</div>
</a>
</div>
{block:Description}
{block:NotReblog}
<div class="caption">{Description}</div>
{/block:NotReblog}
{/block:Description}
{block:Reblogs}
{Body}
</div>
{/block:Reblogs}
{/block:Link}


{block:Audio}
<div class="audiopost">
<div class="audio">
<div class="audiowrap">
<div class="albumart-circle">{block:albumart}<img
src="{AlbumArtURL}">{/block:albumart}</div>
<div class="audiotitle">
<b>{block:trackname}{Trackname}{/block:trackname}</b>
<span>{block:Album}{Album}{/block:Album}</span>
<span>{block:Artist}{Artist}{/block:Artist}</span>
</div>
</div>
<div class="audiobuttons">
<i class="ph-playlist-fill"></i>
<i class="ph-rewind-fill"></i>
<div class="audioplaybg">
<div
class="audioplay">{block:AudioPlayer}{AudioPlayer}{/block:AudioPlayer}</div>
</div>
<i class="ph-fast-forward-fill"></i>
<i class="ph-queue-fill"></i>
</div>
</div>
</div>
{block:Caption}
{block:NotReblog}
{/block:NotReblog}
{block:Reblogs}
{Body}
</div>
{/block:Reblogs}
{/block:Caption}
{/block:Audio}


{block:Quote}
<div class="quotepost">
<div class="quote">
<div class="quotewrap"><i
class="ph-quotes-fill"></i><span>{Quote}</span></div>
<div class="source">
{Source}
</div>
</div>
</div>
{/block:Quote}


{block:Answer}
<div class="askwrap">
<div class="asker">
<div class="askerstart">
<b>{Asker}</b>
<span>sent a message</span>
</div>
<div class="askicon"><img src="{AskerPortraitURL-64}"></div>
</div>
<div class="question">
{Question}
<div class="blurb"></div>
</div>
</div>
{block:Answerer}
<div class="answerwrap">
<div class="answerer">
<div class="usericon"><img src="{AnswererPortraitURL-64}"></div>
<div class="answererwrap">
<div class="username"
{block:IsDeactivated}title="deactivated"{/block:IsDeactivated}>{Answerer}</div>
<div class="answermsg">replied</div>
</div>
</div>
<div class="answer">
{Answer}</div>
</div>
{/block:Answerer}
{block:NotReblog}
<div class="answerwrap">
<div class="answerer">
<div class="usericon"><img src="{PortraitURL-64}"></div>
<div class="answererwrap">
<div class="username"><a
href="/">{Name}</a></div>
<div class="answermsg">replied</div>
</div>
</div>
<div class="answer">
{Replies}</div>
</div>
{/block:NotReblog}
{block:Reblogs}
{Body}
</div>
{/block:Reblogs}
{/block:Answer}
</div>
</div>
{block:Date}
<div class="bottominfo-wrap">


{block:HasTags}
<div class="tags">
{block:Tags}<a href="{TagURL}"><b>#</b><span>{Tag}</span></a>{/block:Tags}
</div>
{/block:HasTags}


<div class="bottominfo">
<div class="bottominfo-left">
<div class="bil-icon"><a title="reblog" href="{ReblogURL}"
target="_blank"><i class="ph-arrows-clockwise-bold"></i></a></div>
<div class="bil-like"><a title="like" class="likeb"
href="#">{LikeButton}<span class="actual-button"><i class="ph-heart-straight-
fill"></i></span></a></div>
{block:ifClickTags}<div title="toggle tags" class="clicktagsbutton"><i
class="ph-tag-fill"></i></div>{/block:ifClickTags}
</div>
<div class="bottominfo-right">
<a target="_blank" title="reblogged from @{ReblogParentName}"
href="{ReblogParentURL}"><i class="ph-arrow-u-down-left-fill"></i></a>
<a title="view day page" title="{Month} {DayofMonth}{DayofMonthSuffix},
{Year}" href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}"><i class="ph-
clock-fill"></i></a>
<a title="copy link to post" id="copybutton" data-clipboard-
text="{Permalink}"><i class="ph-copy-fill"></i></a>
</div>
</div>
</div>

{/block:Date}
</article> 


{block:Date}
{block:PermalinkPage}
<div class="perma-page">
{block:NotReblog}<li><i class="ph-map-pin-fill"></i><span>original
post</span></li>{/block:NotReblog}
{block:RebloggedFrom}<li><i class="ph-map-pin-fill"></i><span>originally
posted by <a
href="{ReblogRootURL}">@{ReblogRootName}</a></span></li>{/block:RebloggedFrom}
{block:RebloggedFrom}<li><i
class="ph-arrow-counter-clockwise-bold"></i><span>reblogged from <a
href="{ReblogParentURL}">@{ReblogParentName}</a></span></li>{/block:RebloggedFrom}
<li><i class="ph-clock-fill"></i><span>posted <a title="view day page"
href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}">{DayofWeek}, {Month}
{DayofMonth}{DayofMonthSuffix}</a> at {12hour}{ampm}</span></li>
</div>
{/block:PermalinkPage}
{/block:Date}


{block:PermalinkPage}{block:Date}
{block:NoteCount}{block:PostNotes}
<div class="notes">
<div class="notes-title">
<div class="notes-titleicon"><i class="ph-music-note-fill"></i></div>
<span>{NoteCountWithLabel}</span>
</div>
<div class="notes-container">{PostNotes-64}</div>
</div>
{/block:PostNotes}{/block:NoteCount}
{/block:Date}{/block:PermalinkPage}
{/block:Posts}


{block:Pagination}
<article class="pagination">
<div class="pagination-buttons">
{block:PreviousPage}
<div class="pagination-btn"><a title="go back" href="{previouspage}"><i
class="ph-caret-left-bold"></i></a></div>
{/block:PreviousPage}
<div class="pagination-btn nopgn
{block:PreviousPage}yespgn{/block:PreviousPage}"><a><i class="ph-caret-left-
bold"></i></a></div>
</div>
{block:JumpPagination length="5"}
{block:CurrentPage}
<div title="current page" class="currentpg">{PageNumber}</div>
{/block:CurrentPage}
{block:JumpPage}
<div class="jump-btn"><a title="jump to page {PageNumber}"
class="jump_page" href="{URL}">{PageNumber}</a></div>
{/block:JumpPage}
{/block:JumpPagination}
<div class="pagination-buttons">
{block:NextPage}
<div class="pagination-btn"><a title="go forward" href="{nextpage}"><i
class="ph-caret-right-bold"></i></a></div>
{/block:NextPage}
<div {block:NextPage}style="display:none;"{/block:NextPage}
class="pagination-btn nopgn"><a><i class="ph-caret-right-bold"></i></a></div>
</div>
</article>
{/block:Pagination}
</section> 


<div class="bbuttons">
<div id="totop"><a title="back to top" href="#top" target="_self"><i class="ph-
caret-up-bold"></i></a></div>

<div class="credit">
<a title="katara theme by sage" href="https://demontimes.tumblr.com"><i
class="ph-ghost-fill"></i></a>
</div>
</div>
</main> 
<script>
// music player
const musicContainer = document.querySelector('.music-container');
const playBtn = document.querySelector('#play');
const audio = document.querySelector('#audio');
const title = document.querySelector('#title');
const cover = document.querySelector('#cover');
function playSong() {
musicContainer.classList.add('play');
playBtn.querySelector('#play i').classList.remove('ph-play-fill');
playBtn.querySelector('#play i').classList.add('ph-pause-fill');
audio.play();
}
function pauseSong() {
musicContainer.classList.remove('play')
playBtn.querySelector('#play i').classList.add('ph-play-fill')
playBtn.querySelector('#play i').classList.remove('ph-pause-fill')
audio.pause()
}
// event listeners
playBtn.addEventListener('click', () => {
const isPlaying = musicContainer.classList.contains('play');
if (isPlaying) {
pauseSong();
} else {
playSong();
}
});
document.getElementById("audio").loop = true;
{/block:ifMusicPlayer}
/// photoset
$('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: 'corners',
gutter: '4px',
borderRadius: '{select:Corners}',
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
});
});
// tooltips
tippy('[title]', {
theme: 'custom',
arrow: false,
followCursor: true,
delay: 100,
placement: 'bottom',
offset: "40, 10",
zIndex: 9999999999,
maxWidth: 400,
content(reference) {
const title = reference.getAttribute('title');
reference.removeAttribute('title');
return title;
},
});
// notes
$('article').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');
}
});
// videos
$(document).ready(function() {
flexibleFrames($(".video")); // $(".video") is the class selector passed in the
argument
});
// music button
$(".audio-container").hide();
$('.music-button').click(function(){
$(".audio-container").slideToggle(0);
$('body').toggleClass('music-clicked');
});
});
// updates button
$(".updates-container").hide();
$('.updates-button').click(function(){
$(".updates-container").slideToggle(0);
$('body').toggleClass('updates-clicked');
});
});
// sidebar buttons
$("nav").hide();
$('.sb-nav').click(function(){
$("nav").slideToggle(0);
$('body').toggleClass('nav-clicked');
});
});
$(".searchwrap").hide();
$('.sb-search i').click(function(){
$(".searchwrap").slideToggle(0);
$('body').toggleClass('search-clicked');
});
});
// searchbar
$('.search').submit(function(event){
var value = $('input:first').val();
location.replace('http://{Name}.tumblr.com/search/' + value);
});
});
// scroll to top
$('#totop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
var mybutton = document.getElementById("totop");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
mybutton.style.display = "flex";
} else {
mybutton.style.display = "none";
}
}
// toggle tags
{block:ifClickTags}
$('.tags').hide();
$('.clicktagsbutton').click(function() {
$(this).closest('article').find('.tags').slideToggle(0);
$(this).toggleClass('tags-clicked');
$(this).find(".bottominfo").toggleClass('tags-clicked');
return false;
});
});
{/block:ifClickTags}
// tumblr controls
$('#controlsbutton').click(function(){
$('body').toggleClass('controlsclick');
});
});
// responsive sidebar
$('.sidebar-button').click(function(){
$('body').toggleClass('sidebar-click');
});
});
// day/night mode
const toggle = document.getElementById("theme-toggle");
toggle.onclick = function () {
// add class to html and make transition snappy
document.documentElement.classList.add("theme-transition");
// alright lets retrive the info from data-theme
let currentTheme = document.documentElement.getAttribute("data-theme");
// if it's dark already, let's go into the light
let targetTheme = "light";
// but if it is light let's toggle dark mode
if (currentTheme === "light") {
targetTheme = "dark";
}
// ok now that theme has been toggled, get rid of snappy transition
window.setTimeout(function () {
document.documentElement.classList.remove("theme-transition");
}, 50);
// we're going to save our theme preference now
document.documentElement.setAttribute("data-theme", targetTheme);
localStorage.setItem("theme", targetTheme);
};
</script>
</body>
</html>

Theme 14 - Katara

Uploaded by

Copyright:

Available Formats

You might also like

Theme 14 - Katara

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Theme 14 - Katara

Uploaded by

Copyright:

Available Formats

<!

<meta name="color:Background" content="#e0e0e0" />

<meta name="color:Night Background" content="#1e1e1e" />

<meta name="color:Gradient One" content="#5592ac"/>

<meta name="select:Corners" content="10px" title="round"/>

<meta name="select:Glow" content="0 0 10px" title="on"/>

<meta name="if:Click Tags" content="1"/>

<meta name="text:Post Margin" content="80"/>

<meta name="text:Song Name" content="Song Name"/>

<meta name="text:Sidebar Link 1" content="link one"/>

<meta name="text:Update 1" content="watching"/>

/*--- TOOLTIPS ---*/

/*--- SCROLLBAR ---*/

/*--- TEXT SELECTION ---*/

/*--- COMMON ---*/

.description a, a.read_more, .updates a {

.description a:after, a.read_more:after, .updates a:after {

.description a:hover:after, a.read_more:hover:after, .updates a:hover:after {

h1 {font-size:1.3em; letter-spacing:.1em; padding:0; margin:.5em .25em 0 .75em;

/*--- CONTAINERS ---*/

/*--- TOP BUTTONS ---*/

/*- MUSIC PLAYER -*/

.music-container.play .img-container img {

/* Create the gradient. */

/* Set the background size and repeat properties. */

/* Use the text as a mask for the background. */

/*--- HEADER RIGHT ---*/

body.updates-clicked .updates-button i {color:var(--ColorGradientAccent);}

/*- updates tab -*/

/*---- SIDEBAR ----*/

.sb-nav, .sb-search {cursor:help; display:flex; justify-content:center; align-

body.nav-clicked .sb-nav i {color:var(--ColorGradientAccent); text-shadow:

::-webkit-input-placeholder {color: inherit; opacity:.75;}

input:focus::-webkit-input-placeholder {color: transparent;}

/*---- TOP POST INFO ---*/

/* top info left */

/* top info right */

/*--- POSTS ----*/

article img {display:block; margin:auto; max-width:100%;}

.caption a:hover {border-bottom:2px solid var(--ColorLink);}

/*--- PHOTO POSTS ----*/

.photopost {width:calc(100% - 2em); padding:1em;}

.vignette, #vignette {opacity:0;}

/*--- LINK POSTS ---*/

.linkpost a:hover .linkicon i {

/*--- AUDIO POSTS ---*/

/*--- QUOTE POSTS ----*/

/--- TOOLTIPS ---/

/--- SCROLLBAR ---/

/--- TEXT SELECTION ---/

/--- COMMON ---/

/--- CONTAINERS ---/

/--- TOP BUTTONS ---/

/- MUSIC PLAYER -/

/--- HEADER RIGHT ---/

/- updates tab -/

/---- SIDEBAR ----/

/---- TOP POST INFO ---/

/--- POSTS ----/

/--- PHOTO POSTS ----/

/--- LINK POSTS ---/

/--- AUDIO POSTS ---/

/--- QUOTE POSTS ----/

/--- ANSWER POSTS ---/

/--- CHAT POSTS ---/

/--- BOTTOM POST INFO ---/

/--- TAGS ---/

/--- PAGINATION ---/

/--- TAG / DAY PAGES ---/

/--- PERMALINK INFO ---/

/--- POST NOTES ---/

/---- BOTTOM BUTTONS ---/

/--- CREDIT: DO NOT TOUCH ---/

/--- RESPONSIVENESS ---/