APPOMATTOX

<!DOCTYPE html>
<head>


<!---

Theme 08 - Appomattox
wizardhut @ tumblr.com


Credits:

- Fontawesome icon font (fontawesome.com)
- Un-nested captions (https://neothm.com and https://magnusthemes.tumblr.com)
- Remove "via" and "source" from captions (http://clcrk-tutorials.tumblr.com)

--->

<meta name="color:Background" content="#f9f9f9">
<meta name="color:Accent" content="#CC134E">

<meta name="select:Font" content="cousine" title="Cousine">
<meta name="select:Font" content="karla" title="Karla">
<meta name="select:Font" content="montserrat" title="Montserrat">
<meta name="select:Font" content="arial" title="Arial">
<meta name="select:Font" content="segoe ui" title="Segoe UI">
<meta name="select:Font" content="overpass mono" title="Overpass Mono">
<meta name="select:Font" content="work sans" title="Work Sans">
<meta name="select:Font" content="roboto" title="Roboto">

<meta name="select:Letter Spacing" content="0px" title="none">
<meta name="select:Letter Spacing" content="0.5px" title="0.5px">
<meta name="select:Letter Spacing" content="1px" title="1px">

<meta name="if:Post Shadow" content="1">
<meta name="if:Random Link" content="1">
<meta name="if:Search Box" content="1">
<meta name="if:Link 4" content="1">
<meta name="if:Link 5" content="1">

<meta name="text:Body Font Size" content="12">

<meta name="text:Link 1 URL" content="/">
<meta name="text:Link 1 NAME" content="Link one">
<meta name="text:Link 1 SUBTITLE" content="subtitle">

<meta name="text:Link 2 URL" content="/">
<meta name="text:Link 2 NAME" content="Link two">
<meta name="text:Link 2 SUBTITLE" content="subtitle">

<meta name="text:Link 3 URL" content="/">
<meta name="text:Link 3 NAME" content="Link three">
<meta name="text:Link 3 SUBTITLE" content="subtitle">

<meta name="text:Link 4 URL" content="/">
<meta name="text:Link 4 NAME" content="Link four">
<meta name="text:Link 4 SUBTITLE" content="subtitle">

<meta name="text:Link 5 URL" content="/">
<meta name="text:Link 5 NAME" content="Link 5">
<meta name="text:Link 5 SUBTITLE" content="subtitle">


<!--- google fonts --->
<link href='https://fonts.googleapis.com/css?family=Karla:400,700|Montserrat:400,500,600,700,800|Roboto+Mono:400,500,700|Roboto:400,500,700|Roboto:400,700|Overpass+Mono:400,700|Cousine:400,700|Work+Sans:400,500|Playfair+Display:900' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

<!--- icon font --->
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

<!-- smooth scroll -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>

<!--- audio player styling --->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<!-- un-nest captions -->
<script src="https://static.tumblr.com/p0knose/8Hbocatf1/unnest.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
    $("article").unNest({
        yourCaption:".caption",
        newCaptionUsername:true,
        tumblrAvatars:true,
        usernameColon:false
    });
});
</script>

<style type="text/css">


body {
    background:{color:background};
    font-family:{select:font};
    margin:0;
}



::-webkit-scrollbar {
    width: 15px;
    background: none;
}

::-webkit-scrollbar-track {
    background:#F6F6F6;
}


::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.25);
}


::selection {
    background:{color:accent};
    color:#222;
}

a {
    color:#222;
    text-decoration:none;
    padding-bottom:1px;
    transition:.3s;
    font-weight:700;
}

a:hover {
    color:#999;
    transition:.3s;
}



/* POSTS */

article {
    width:500px;
    margin-left:750px;
    padding:30px;
    margin-top:70px;
    margin-bottom:70px;
    transition:.5s;
    border:1px solid rgba(0,0,0,0.09);
    background:#fff;
    {block:ifpostshadow}box-shadow: 0px 10px 76px -23px rgba(0,0,0,0.2);{/block:ifpostshadow}
}

iframe.tumblr_audio_player {
    height:85px;!important
}



/* CAPTIONS */

.caption {
    margin-top:-10px;
    margin-left:-10px;
    font-size:{text:body font size}px;
}

.caption img {
    max-width:480px;
    margin-top:10px;
}

/* reblogs */
blockquote.tumblr_parent {
    background:none;
    margin-left:0px;
    border-radius:5px;
    padding:10px;
    width:480px;
    max-width:480px;
    word-break:break-word;
    color:#222;
    padding-left:20px;
    font-size:{text:body font size}px;
    margin-top:20px;
    line-height:20px;
    letter-spacing:{select:letter spacing};
}

/* non-reblogged original post */
.originalpost blockquote.tumblr_parent {
    padding:20px;
    width:480px;
    margin:0;
    color:#222;
    background:transparent!important;
    padding-left:0px;
    text-align:left;
    font-size:{text:body font size}px;
    letter-spacing:{select:letter spacing};
}

/* non-reblogged original post */
.caption.originalpost {
    margin:-5px 0;
    line-height:30px;
    background:transparent!important;
    margin-top:10px;
    border:none;
    font-size:{text:body font size}px;
}

/* reblogs; tumblr user icons */
img.tumblr_avatar {
    margin-right:10px;
    margin-top:2px!important;
    height:25px;
    width:25px;
    margin-left:0px;
    float:left;
    border-radius:100%!important;
    vertical-align:-20%!important;
    color:#fff;
    font-size:{text:body font size}px;
}

/* reblogs; tumblr user names */
.caption a.tumblr_blog {
    font-size:{text:body font size}px;
    line-height:20px;
    color:#222;
    letter-spacing:{select:letter spacing};
    display:block;
    padding:5px;
    padding-bottom:10px;
    text-decoration:none;
    font-weight:700;
    background:transparent;
    transition:.3s;
    border-bottom:1px solid #f0f0f0;
}

/* reblogs; tumblr user names hover */
.caption a:hover.tumblr_blog {
    color:{color:accent};
    transition:.3s;
}



/* SIDEBAR */

.sidebar {
    top:0;
    position:fixed;
    background:#fff;
    width:120px;
    border-right:1px solid rgba(0,0,0,0.09);
    height:100%;
    text-align:center;
    padding:20px;
}

.sidebar_title {
    text-transform:capitalize;
    font-weight:700;
    font-size:18px;
    letter-spacing:1px;
    margin-top:30px;
}

.sidebar_img {
    opacity:.7;
    transition:.7s;
}

.sidebar_img img {
    margin-bottom:30px;
    border-radius:100%;
}

.sidebar_nav {
    text-align:center;
    margin-top:50px;
}

.sidebar_nav a {
    display:block;
    margin-bottom:30px;
    font-size:25px;
    transition:.5s;
}

.sidebar_nav a:hover {
    color:#fff;
    transition:.5s;
}

.sidebar_nav_accent {
    letter-spacing:1px;
    position:absolute;
    font-size:12px;
    background:#fff;
    padding:10px;
    text-align:center;
    font-weight:700;
    text-transform:capitalize;
    width:60px;
    margin-left:20px;
    margin-top:-33px;
    opacity:0;
    color:#222;
    transition:.5s;
}

.sidebar_nav a:hover .sidebar_nav_accent {
    opacity:1;
    color:#222;
    transition:.5s;
}



/* NAVIGATION */

.nav {
    position:fixed;
    margin-left:161px;
    bottom:0;
    border-right:1px solid rgba(0,0,0,0.09);
    padding:40px;
    width:400px;
    text-align:left;
    padding-top:110px;
    top:0;
    background:#fff;
}

.nav a {
    font-size:30px;
    color:#171717;
    display:block;
    padding:10px;
    font-family:{select:font};
    letter-spacing:0px;
    font-weight:700;
    transition:.4s;
    margin-bottom:22px;
}

.nav a:hover {
    color:{color:accent};
    transition:.4s;
}

.nav_subtitle {
    position:absolute;
    font-size:{text:body font size}px;
    font-weight:400;
    opacity:0;
    transition:.4s;
    color:#222;
    font-family:{select:font};
    letter-spacing:{select:letter spacing};
    transform:translateY(-10px);
}

.nav a:hover .nav_subtitle {
    opacity:1;
    transition:.4s;
    font-style:normal;
    transform:translateY(2px);
}



/* DESCRIPTION */

.desc {
    border-top:1px solid rgba(0,0,0,0.09);
    padding:40px;
    margin-left:-40px;
    width:400px;
    margin-top:40px;
    text-align:left;
    font-size:{text:body font size}px;
    line-height:20px;
    letter-spacing:{select:letter spacing};
}



/* SEARCH BOX */

.search_bg {
    border-top:1px solid rgba(0,0,0,0.09);
    padding:40px;
    margin-left:-40px;
    width:400px;
}

.search {
    border:none;
    font-family:{select:font};
    font-size:18px;
}

.search:hover {
    color:rgba(0,0,0,.9);
}

input[type=submit] {
    display:none;
}

input[type=text]:focus {
    outline:none;
}

input::placeholder {
    color:rgba(0,0,0,0.3);
}

.fa-search {
    margin-right:10px;
    font-size:18px;
}




/* POSTS: QUOTE */

.quote {
    padding-left:70px;
    font-weight:700;
    font-size:22px;
}

.fa-quote-left {
    font-size:40px;
    color:#222;
    position:absolute;
    margin-left:-65px;
}

.source {
    font-size:{text:body font size}px;
    letter-spacing:{select:letter spacing};
    margin-top:30px;
    padding-left:70px;
}



/* POST INFO */

.postinfo {
    text-align:right;
    margin-bottom:30px;
}

.postinfo a {
    margin-left:10px;
}

.postinfo a:hover:nth-of-type(1) {
    color:{color:accent};
}

.postinfo_notes {
    position:absolute;
    font-size:{text:body font size}px;
    text-align:right;
    width:405px;
    letter-spacing:{select:letter spacing};
    margin-top:-17px;
    opacity:0;
    transition:.4s;
    color:#222;
}

.postinfo a:hover .postinfo_notes {
    opacity:1;
    transition:.4s;
    color:#222;
}




/* PAGINATION */

.pagination {
    margin-left:730px;
    padding:20px;
    padding-bottom:80px;
    width:560px;
    font-size:20px;
}

.pagination_next {
    float:right;
}

.pagination_previous {
    float:left;
}

.pagination a:hover {
    color:{color:accent};
}



/* ASKS */

.question {
    font-size:{text:body font size}px;
    letter-spacing:{select:letter spacing};
    background:#f9f9f9;
    padding:20px;
}

.asker-question {
    margin-left:40px;
}

.asker {
    margin-bottom:10px;
}

.asker img {
    border-radius:100%;
    width:25px;
    vertical-align:middle;
    margin-right:10px;
}

.answer {
    font-size:{text:body font size}px;
    letter-spacing:{select:letter spacing};
    text-align:right;
    margin-top:20px;
    border-top:1px solid #f0f0f0;
    padding-top:10px;
}



/* PERMALINK PAGE */

.permalink_notes {
    color:#000;
    margin-left:300px;
    font-size:{text:body font size}px;
    letter-spacing:{select:letter spacing};
    line-height:30px;
    height:400px;
    overflow:auto;
    width:400px;
    border:1px solid rgba(0,0,0,0.09);
    background:#fff;
    position:absolute;
    top:0;
    margin-top:70px;
}

.permalink_notes img {
    border-radius:100%;
    margin-right:10px;
    vertical-align:middle;
}

ol.notes {
    list-style-type: none;
}

{block:PermalinkPage}

.nav {
    display:none;
}

.postinfo {
    display:none;
}

{/block:PermalinkPage}



/* TAGS */

.tags {
    border-top:1px solid #f0f0f0;
    padding-top:10px;
    margin-top:20px;
    text-align:right;
    font-size:{text:body font size}px;
    letter-spacing:{select:letter spacing};
}



/* SEARCH RESULTS */

.noresults {
    margin-left:900px;
    position:fixed;
    font-weight:700;
    margin-top:300px;
    font-size:30px;
    letter-spacing:{select:letter spacing};
    text-align:center;
    width:500px;
}

.noresults a {
    color:{color:accent};
}

.noresults a:hover {
    color:#111;
}

.results {
    margin-left:750px;
    font-weight:700;
    margin-top:100px;
    font-size:30px;
    letter-spacing:{select:letter spacing};
    text-align:center;
    width:560px;
}

</style>
</head>


<!--- audio player styling --->
<script>
   $(document).ready(function() {
      $('iframe.tumblr_audio_player').load( function() {
         $('iframe.tumblr_audio_player').contents().find("head")
            .append($("<link href='https://fonts.googleapis.com/css?family=Karla:400,700|Roboto+Mono:400,700|Roboto:400,700|Montserrat:400,500,600,700,800|Overpass+Mono:400,700|Work+Sans:400,500' rel='stylesheet' type='text/css'> <style type='text/css'> .audio-player{background:#f9f9f9; color:#222; font-family:{select:font};border-top-left-radius:0px;border-bottom-left-radius:0px;!important} </style>"));
      });
   });
</script>



<body>


<div class="sidebar">
    <div class="sidebar_title">
    {Title}
    </div>

    <div class="sidebar_nav">

        <a href="/"><i class="far fa-circle"></i> <div class="sidebar_nav_accent">home</div></a>

        <a href="/ask"><i class="far fa-envelope-open"></i> <div class="sidebar_nav_accent">ask</div></a>

        <a href="/archive"><i class="far fa-calendar"></i> <div class="sidebar_nav_accent">archive</div></a>

        <a href="/submit"><i class="far fa-edit"></i> <div class="sidebar_nav_accent">submit</div></a>

        {block:ifrandomlink}<a href="/random"><i class="far fa-question-circle"></i> <div class="sidebar_nav_accent">random</div></a>{/block:ifrandomlink}

        <a href="http://bigchobani.tumblr.com/"><i class="far fa-star"></i> <div class="sidebar_nav_accent">theme</div></a>
    </div>
</div>

<div class="nav">

    <a href="{text:link 1 url}">{text:link 1 name} <div class="nav_subtitle">{text:link 1 subtitle}</div></a>

     <a href="{text:link 2 url}">{text:link 2 name} <div class="nav_subtitle">{text:link 2 subtitle}</div></a>

     <a href="{text:link 3 url}">{text:link 3 name} <div class="nav_subtitle">{text:link 3 subtitle}</div></a>

     {block:iflink4}<a href="{text:link 4 url}">{text:link 4 name} <div class="nav_subtitle">{text:link 4 subtitle}</div></a>{/block:iflink4}

     {block:iflink5}<a href="{text:link 5 url}">{text:link 5 name} <div class="nav_subtitle">{text:link 5 subtitle}</div></a>{/block:iflink5}

<div class="desc">
    {Description}
</div>

{block:ifsearchbox}
<div class="search_bg">
    <form action="/search" method="get">
    <i class="fas fa-search"></i><input type="text" name="q" value="{SearchQuery}" class="search" autocomplete="off" placeholder="Search {Name}"/>
    <input type="submit" value="Search"/>
</form>
</div>
{/block:ifsearchbox}

</div>

{block:SearchPage}
<div class="results">
    {SearchResultCount} results	for '{SearchQuery}':
</div>
{/block:SearchPage}


{block:Posts}
    <article id="p-{PostType}" class="post">

<div class="postinfo">
{block:HomePage}
        {block:NoteCount}
    <a href="#">
    <i class="fas fa-heart"></i>
    <div class="postinfo_notes">
            {NoteCountWithLabel}
    </div>
    </a>
{/block:NoteCount}
        {/block:HomePage}
    <a href="{ReblogURL}"><i class="fas fa-sync-alt"></i></a>
    <a href="{Permalink}"><i class="fas fa-link"></i></a>
</div>

{block:Quote}
<div class="quote"><span class="fas fa-quote-left"></span>{Quote}</div>
<div class="source">― {Source}</div>
{/block:Quote}

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

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

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

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

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

{block:Answer}
    <div class="question">
        <div class="asker"><img src="{AskerPortraitURL-30}" alt=""> {Asker} sent:</div>
        <div class="asker-question">{Question}</div>
    </div>

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

{block:HasTags}
<div class="tags">
{block:Tags}
<a href="{TagURL}">#{Tag}</a>&nbsp;
{/block:Tags}
{/block:HasTags}

{block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->{/block:ContentSource}{block:RebloggedFrom}<!-- {ReblogParentName} -->{/block:RebloggedFrom}

	</article>
{/block:posts}

{block:Pagination}
<div class="pagination">
    {block:NextPage}
    <div class="pagination_next"><a href="{NextPage}"><i class="fas fa-arrow-right"></i></a></div>
    {/block:NextPage}

    {block:PreviousPage}
    <div class="pagination_previous"><a href="{PreviousPage}"><i class="fas fa-arrow-left"></i></a></div>
    {/block:PreviousPage}
</div>
{/block:Pagination}

{block:PermalinkPage}
    {block:PostNotes}
        <div class="permalink_notes">
            {PostNotes-16}
        </div>
    {/block:PostNotes}
{/block:PermalinkPage}


<!--- SEARCH RESULTS --->

{block:NoSearchResults}
<div class="noresults">
No results for '{SearchQuery}'. <p>
Try something else, or <a href="/">go back to the posts</a>.
</div>
{/block:NoSearchResults}



</body>
</html>