Base Code — Everchanging

<!DOCTYPE html PUBLIC>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<html>

<head>

<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}">

<!--

base code: everchaning
designed and coded by ghcstfaec
see credits @ https://ghcstfaec.tumblr.com/credits

-->

<!-- Metadata -->

<meta name="color:Asker Background" content="#f0f0f0"/>
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Border" content="#eeeeee"/>
<meta name="color:Link" content="#000000"/>
<meta name="color:Link Hover" content="#cfcfcf"/>
<meta name="color:Like" content="#ec6363"/>
<meta name="color:Main Color" content="#92261a"/>
<meta name="color:Pre Background" content="#ffffff"/>
<meta name="color:Question Background" content="#f5f5f5"/>
<meta name="color:Quote Icon Color" content="#ffffff"/>
<meta name="color:Scrollbar" content="#000000"/>
<meta name="color:Text" content="#555555"/>
<meta name="color:Tooltip Background" content="#ffffff"/>

<meta name="image:Sidebar Image" content="https://i.imgur.com/46XbmJL.png"/>

<meta name="text:Title" content="everchanging"/>

<meta name="text:Link 1 URL" content="/"/>
<meta name="text:Link 1 Name" content="Link One"/>
<meta name="text:Link 2 URL" content="/"/>
<meta name="text:Link 2 Name" content="Link Two"/>
<meta name="text:Link 3 URL" content="/"/>
<meta name="text:Link 3 Name" content="Link Three"/>

<meta name="if:Submit Link" content="1"/>

<!-- Google Fonts Script -->

<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

<!-- jQuery Script -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- Styled Tooltips Script -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:90,
tip_fade_speed:600,
attribute:"title"
});
});
})(jQuery);
</script>

<style type="text/css">

::-webkit-scrollbar-thumb:vertical {
background: {color:Scrollbar};
}

::-webkit-scrollbar {
width: 1px;
}

#s-m-t-tooltip {
background: {color:Tooltip Background};
border: 1px solid {color:Border};
font-size: 0.9rem;
margin-top: 30px;
padding: 5px;
text-align: center;
text-transform: uppercase;
z-index: 999999999999999999999999999999999999;
}

body {
background: {color:Background};
color: {color:Text};
cursor: url(https://i.imgur.com/lhPqll6.png), progress;
font-family: 'Poppins', sans-serif;
font-size: 0.9rem;
font-style: normal;
font-weight: 400;
letter-spacing: 1px;
margin: 0px;
text-align: left;
text-transform: none;
word-break: break-all;
}

b {
font-weight: 700;
}

a {
color: {color:Link};
text-decoration:  none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

a:hover {
color: {color:Link Hover};
}

h1 {
font-size: 1.2rem;
font-weight: bold;
line-height: 100%;
}

h2 {
font-size: 1rem;
font-weight: bold;
line-height: 100%;
}

blockquote {
border-left: 1px solid {color:Border};
margin: 5px;
padding-left: 5px;
}

blockquote img {
height: auto;
max-width: 100%;
}

blockquote blockquote {
border-left: 1px solid {color:Border};
padding-left: 5px;
}

pre {
background: {color:Pre Background};
border-radius: 5px;
padding: 10px;
word-wrap: break-all;
white-space: pre-wrap;
}

#container {
display: flex;
align-items: flex-start;
margin-bottom: 100px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
width: 900px;
}

#sidebar {
width: 300px;
}

.sidebar-image {
height: 220px;
width: 300px;
}

.sidebar-image img {
height: 220px;
width: 300px;
}

.blog-title {
color: {color:Main Color};
font-weight: bold;
margin-top: 30px;
text-transform: lowercase;
}

.description {
margin-top: 15px;
}

.links {
font-size: 0.9rem;
margin: -5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 15px;
text-transform: uppercase;
}

.links a {
margin: 5px;
}

#posts {
margin-left: 100px;
width: 500px;
}

.entries {
margin-bottom: 50px;
width: 500px;
}

.entries img {
height: auto;
max-width: 100%;
}

.read_more {
background: {color:Main Color};
border: 1px solid {color:Border};
border-radius: 5px;
color: white;
display: inline-block;
font-size: 0.9rem;
padding: 10px;
text-align: center;
text-transform: uppercase;
width: calc(100% - 22px);
}

.read_more:hover {
background: white;
color: {color:Main Color};
}

.text p {
margin-top: 0px;
}

.caption {
margin-top: 20px;
}

.caption p {
margin-top: 0px;
}

.ask-wrapper {
width: 100%;
}

.asker {
background: {color:Asker Background};
padding: 20px;
}

.asker-url {
font-size: 0.9rem;
text-transform: uppercase;
}

.asker-url a {
background: none;
padding: 0px;
}

.question {
background: {color:Question Background};
padding: 20px;
}

.question p {
margin-block-start: 0em;
}

.question p:last-of-type {
margin-block-end: 0em;
}

.quote {
background: {color:Question Background};
font-size: 0.9rem;
padding: 20px;
text-transform: uppercase;
}

.website {
border: 1px solid {color:Border};
border-radius: 5px;
font-size: 0.9rem;
padding: 20px;
text-transform: uppercase;
}

.chat {
font-size: 0.9rem;
text-transform: uppercase;
}

.chat li {
list-style-type: none;
}

.chat li:nth-child(odd) {
background: {color:Main Color};
color: {color:Quote Icon Color};
padding: 10px;
}

.chat li:nth-child(even) {
background: {color:Question Background};
color: {color:Main Color};
padding: 10px;
}

.audio iframe {
height: 85px;
width: 500px;
}

video {
height: auto;
width: 100%;
}

.entries-information {
border-top: 1px solid {color:Border};
font-size: 0.9rem;
margin-top: 20px;
padding-top: 20px;
text-transform: uppercase;
}

.notes li {
list-style-type: none;
margin-left: -40px;
}

.notes img {
display: none;
}

.pagination {
font-size: 0.9rem;
text-transform: uppercase;
}

#credit {
bottom: 15px;
font-size: 0.7rem;
position: fixed;
right: 15px;
text-transform: uppercase;
}

#credit a {
color: {color:Link};
}

#credit a:hover {
color: {color:Link Hover};
}

{CustomCSS}

</style>

</head>

<body>

<div id="container">

<div id="sidebar">

<div class="sidebar-image"><img src="{image:Sidebar Image}"/></div>

<div class="blog-title">{text:Title}</div>

{block:Description}<div class="description">{Description}</div>{/block:Description}

<div class="links">
<a href="/">Home</a>
{block:AskEnabled}<a href="/ask">Ask</a>{/block:AskEnabled}
{block:SubmissionsEnabled}{block:IfSubmitLink}<a href="/submit">Submit</a>{/block:IfSubmitLink}{/block:SubmissionsEnabled}
{block:ifLink1URL}<a href="{text:Link 1 URL}">{text:Link 1 Name}</a>{/block:ifLink1URL}
{block:ifLink2URL}<a href="{text:Link 2 URL}">{text:Link 2 Name}</a>{/block:ifLink2URL}
{block:ifLink3URL}<a href="{text:Link 3 URL}">{text:Link 3 Name}</a>{/block:ifLink3URL}
<a href="/archive">Archive</a>
</div>

</div>

<div id="posts">

{block:Posts}

<div class="entries" id="{PostID}">

{block:Text}
{block:Title}
<h1>{Title}</h1>
{/block:Title}
<div class="text">
{Body}
</div>
{/block:Text}

{block:Answer}
<div class="ask-wrapper">
<div class="asker">
<div class="asker-url">A Message From <a href="{AskerURL}">{Asker}</a>
</div>
</div>
<div class="question">
{Question}
</div>
</div>
<div class="caption">
{Answer}
</div>
{/block:Answer}

{block:Quote}
<div class="quote">
"{Quote}</i>" {block:Source}— {Source}{/block:Source}
</div>
{/block:Quote}

{block:Link}
<div class="website"><a href="{URL}" target="_blank">{Name}</a></div>
{block:Description}
<div class="caption">
{Description}
</div>
{/block:Description}
{/block:Link}

{block:Chat}
<div class="chat">
{block:Title}
<h1>{Title}</h1>
{/block:Title}
{block:Lines}
<li>{block:Label}{Label}{/block:Label}
{Line}
</li>
{/block:Lines}
</div>
{/block:Chat}

{block:Audio}
<div class="audio">
{AudioEmbed}
</div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:Audio}

{block:Photo}
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:Photo}

{block:Photoset}
{Photoset}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:Photoset}

{block:Video}
<div class="video">
{Video-500}
</div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:Video}

{block:Date}
<div class="entries-information">
{block:Date}
{block:NoteCount}
<a href="{Permalink}">{NoteCountWithLabel}</a> /
{/block:NoteCount}
<a href="{Permalink}">{DayOfMonth} {ShortMonth} {Year}</a>
{/block:Date}
{block:RebloggedFrom}<a href="{ReblogParentURL}">Via</a>{/block:RebloggedFrom}
{block:ContentSource}<a href="{SourceURL}">Source</a>{/block:ContentSource}
{block:RebloggedFrom}
<a href="{ReblogURL}" target="_blank">Reblog</a>
{/block:RebloggedFrom}
<div class="tags">
{block:Tags}
<a href="{TagURL}" style="margin-right: 5px;">#{Tag}</a>
{/block:Tags}
</div>
{block:PostNotes}
{PostNotes}
{/block:PostNotes}
</div>
{/block:Date}

</div>

{/block:Posts}

{block:Pagination}
<div class="pagination">
{CurrentPage} Out Of {TotalPages}
{block:PreviousPage}
<a href="{PreviousPage}">Previous</a>
{/block:PreviousPage}
{block:NextPage}
Or <a href="{NextPage}">Next</a>
{/block:NextPage}
</div>
{/block:Pagination}

</div>

</div>

<div id="credit"><a href="http://ghcstfaec.tumblr.com/" title="ghcstfaec" target="_blank">GHCST</a></div>

</body>

</html>