top bar 222

<html>
<head>
<!--
Don't use this theme or you catch these hands

-->
    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    {block:Description}
        <meta name="description" content="{MetaDescription}">
    {/block:Description}
    <meta name="image:bg" content=""/>
    <meta name="image:Sidebar" content=""/>
    <meta name="color:Background" content="#a7abdd">
    <meta name="color:Text" content="#82868A">
    <meta name="color:Link" content="#a7abdd">
    <meta name="color:Link background" content="#a7abdd">
    <meta name="color:Posts" content="#a7abdd">
    <meta name="color:borders" content="#">
    <meta name="text:Post width" content="400px">
    <meta name="text:Font size" content="80%">
    <meta name="text:Link 1" content="Link 1">
    <meta name="text:URL 1" content="">

    <meta name="text:Link 2" content="Link 2">
    <meta name="text:URL 2" content="">

    <meta name="text:Link 3" content="Link 2">
    <meta name="text:URL 3" content="">

    <meta name="text:Link 4" content="Link 2">
    <meta name="text:URL 4" content="">

    <meta name="text:Link 5" content="Link 2">
    <meta name="text:URL 5" content="">


    <meta name="text:Icon size" content="100" />
    <meta name="if:Round icon" content="1"/>
    <meta name="if:Repeating bg" content="1"/>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<style>

html {
    font-size: {text:Font size};
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size:14px;
    color: {color:Text};
    background-color: {color:Background};
    background:url({image:bg});
    {block:ifnotrepeatingbg}
    background-size: cover;
    {/block:ifnotrepeatingbg}
    background-attachment: fixed;
    background-color: {color:Background};
}

/* Link styles */

a {
    color: {color:Link};
    text-decoration:none;
    transition: all 0.2s ease;
}

a:hover {

}

/* Container and posts */


.entry {
    margin-bottom: 3rem;
}

/* Navigation styles */

header,
.pagination {
    width: {text:Post width};
    margin: 0 auto;
}


/* Elements */

img,
iframe {
    max-width: 100%;
}

blockquote {
    padding-left: 1rem;
    border-left: 1px solid {color:link};
    margin-left: .3rem;
}

pre {
    overflow: auto;
}

/* Audio styles */

.tumblr_audio_player {
    height: 100px;
}

/* Post notes */

ol.notes {
    list-style: none;
    padding: 0;
    margin: 0;
}

ol.notes li.note img.avatar {
    display: none;
}
#container {
    width: {text:Post width};
    border:4px solid {color:borders};
    margin: 0 auto;
    margin-top:100px;
    background:{color:background};
    padding:10px;
    border-radius:3px;
}
#top {
    background-color:{color:posts};
    overflow: auto;
    z-index:1;
    position:fixed;
    top:-0px;
    width:100%;
    border-bottom:4px solid {color:borders};
    margin-left:-7px;
    padding:15px;

}
#icon {
    width:130px;
    height:130px;
    background:{color:posts};
    border:4px solid{color:borders};
    position:fixed;
    left:15px;
    top:5px;
    border-radius:100%;
    z-index:2;
}
#icon img {
    border-radius:100%;
}

#links
{
    margin-left:160px;
}
#top a{
    display: inline-block;
    color: {color:link};
    text-align: center;
    padding: 8px;
    text-decoration: none;
    background:{color:link background};
    border-radius:3px;
    transition:0.5s;
    margin-left:8px;

}
#top a:hover {
    background-color: {color:background};
    color:{color:link background};
    transition:0.5s;
}

#top img {
width:{text:icon size}px;
{block:ifroundicon}
border-radius:80px;
{/block:ifroundicon}
padding:5px;
vertical-align:center;
}
#notes
{
    margin-left:-10px;
    background:{color:link background};
    margin-right:-10px;
    padding:10px;
}
#notes2
{
    margin-left:20px;
}


</style>
</head>
<body>
<div id="icon"><img src="{image:sidebar}"></div>
<div id="top">
<div id="links">
<a href="/{text:URL 1}">{text:Link 1}</a>
<a href="/{text:URL 2}">{text:Link 2}</a>
<a href="/{text:URL 3}">{text:Link 3}</a>
<a href="/{text:URL 4}">{text:Link 4}</a>
<a href="/{text:URL 5}">{text:Link 5}</a>
</div>
</div>


<div id="container">
{block:Posts}
<article class="entry">
{block:Text}
<section class="text">
{block:Title}
    <h2>{Title}</h2>
{/block:Title}
{Body}
{/block:Text}

{block:Audio}
<section class="audio">
{block:AudioEmbed}
{AudioEmbed}
{/block:AudioEmbed}
{/block:Audio}

{block:Video}
<section class="video">
{Video-500}
{/block:Video}

{block:Photo}
<section class="photo">
<img src="{PhotoURL-HighRes}">
{/block:Photo}

<!-- ... Other post types -->

{block:Caption}
{Caption}
{/block:Caption}
<div id="notes">
<div id="notes2">
{block:Date}<a href="{Permalink}">{ShortDayOfWeek}, {DayOfMonth}{DayOfMonthSuffix} {Month}, {Year}</a><br>{/block:Date}<a href="{ReblogURL}">Reblog</a>
<br>{block:HasTags}Tags:{block:tags} <a href="{TagURL}"> {tag},</a>{block:tags}{/block:HasTags}
    </div>
</div>
</section> <!-- end post section -->
</article>

{block:PostNotes}
{PostNotes}
{/block:PostNotes}
{/block:Posts}
</div> <!-- end container -->

{block:Pagination}
<div class="pagination">
{block:PreviousPage}
<a href="{PreviousPage}">Previous</a>
{/block:PreviousPage}
{block:NextPage}
<a href="{NextPage}">Next</a>
{/block:NextPage}
</div>
{/block:Pagination}
{block:PermalinkPage}
{block:RebloggedFrom}<br><a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> | {block:ContentSource}<a href="{ReblogRootURL}" title="{ReblogRootName}">src</a><br>{/block:ContentSource}{/block:RebloggedFrom}
{/block:PermalinkPage}
</body>
</html>