pearl

<!--

                     THEME 04
                      pearl

                     by @02px

                    enjoy :-)



to edit the updates tab, scroll to line 448 and follow the directions there :)

-->

<html>
    <head>
        <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:sidebar" content="" />
         <meta name="color:sidebar" content="#131313" />
         <meta name="color:background" content="#f8f8f8" />
         <meta name="color:title" content="#131313" />
         <meta name="color:text" content="#131313" />
         <meta name="color:links" content="#00000" />
         <meta name="color:links hover" content="#00000" />
         <meta name="color:scrollbar" content="#00000" />
         <meta name="select:font" content="Lato" title="Lato" />
         <meta name="select:font" content="Open Sans" title="Open Sans" />
         <meta name="select:font" content="Roboto" title="Roboto" />
         <meta name="text:font size" content="10px" />
         <meta name="text:ask" content="ask" />
         <meta name="text:link 1 url" content="" />
         <meta name="text:link 1" content="link 1" />
         <meta name="text:link 2 url" content="" />
         <meta name="text:link 2" content="link 2" />
         <meta name="text:link 3 url" content="" />
         <meta name="text:link 3" content="link 3" />
         <meta name="text:link 4 url" content="" />
         <meta name="text:link 4" content="link 4" />
    </head>

<script src="https://use.fontawesome.com/6ac3a8bdbf.js"></script>

<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700|Open+Sans:400,400i,700|Roboto:400,400i,700" rel="stylesheet">

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

<script>
$(document).ready(function(){
        $(".tabtwo").addClass("no");
        $(".tabthree").addClass("no");
    $("one").click(function(){
        $(".tabone").removeClass("no");
        $(".tabtwo").addClass("no");
        $(".tabthree").addClass("no");
    });
    $("two").click(function(){
        $(".tabtwo").removeClass("no");
        $(".tabone").addClass("no");
        $(".tabthree").addClass("no");
    });
    $("three").click(function(){
        $(".tabthree").removeClass("no");
        $(".tabtwo").addClass("no");
        $(".tabone").addClass("no");
    });
});
</script>

<style type="text/css">

/* -------GENERAL------- */

::-webkit-scrollbar{
    width:7px;
    height:7px;
}

::-webkit-scrollbar{
    background-color:{color:Background};
    border-radius:10px;
}

::-webkit-scrollbar-track{
    border:2px solid {color:Background};
}

::-webkit-scrollbar-thumb{
    border:2px solid {color:Background};
    background-color:{color:Scrollbar};
}

::-webkit-scrollbar:horizontal{
    display:none;
}

::-moz-selection{
       background:#eee;
}

::selection{
       background:#eee;
}

.tmblr-iframe{
    -webkit-filter: invert(100%);
        filter: invert(100%);
    opacity:0.2;
    transform:scale(0.7,0.7);
    right:-30px;
    z-index:9999999999!important;
}

body {
    background-color:{color:background};
    font-size:{text:font size};
    font-family: '{select:font}', sans-serif;
    color:{color:text};
    letter-spacing:.4px;
}

a {
    text-decoration:none;
    color:{color:links};
    transition:.4s ease;
}

a:hover {
    text-decoration:none;
    color:{color:links hover};
}

/*------POST SETTINGS------*/

img {
    max-width:100%;
}

blockquote {
    margin:0;
    padding:0px;
    border-left:1px solid transparent;
}

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

ol.notes li.note {
    padding: 10px;
}

ol.notes li.note img.avatar {
    vertical-align: -4px;
    margin-right: 10px;
    width: 0px;
    height: 0px;
}

ol.notes li.note span.action {
    font-weight: normal;
}

ol.notes li.note .answer_content {
    font-weight: normal;
}

ol.notes li.note blockquote {
    padding: 4px 10px;
    margin: 10px 0px 0px 25px;
}

ol.notes li.note blockquote a {
    text-decoration: none;
}

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

#sb {
    width:40px;
    top:0;
    left:0;
    background:{color:sidebar};
    position:fixed;
    height:100%;
    float:left;
}

.icons, .icons a {
    margin-top:205px;
    color:white;
    font-size:15px;
    font-weight:bold;
    text-align:center;
}

.icons i {
    display:block;
    margin-bottom:35px;
}

.four a, .five a {
    color:white;
    font-size:15px;
    font-weight:bold;
    margin-left:14px;
    position:absolute;
}

.four a {
    bottom:35px;
}

.five a {
    bottom:10px;
}

.content {
    width:200px;
    margin-top:120px;
    position:fixed;
    margin-left:70px;
}

img.sb {
    width:50px;
    height:50px;
    border-radius:8%;
    object-fit:cover;
    overflow:hidden;
    transition:.3s ease;
    display:inline-block;
}

img.sb:hover {
    opacity:.7;
}

#title {
    font-size:calc({text:font size} - 1px);
    text-transform:uppercase;
    letter-spacing:1px;
    color:{color:title};
    display:inline-block;
    position:absolute;
    vertical-align:top;
    margin:18px 0 0 15px;
    border-bottom:1px solid #eee;
}

#title a {
    color:{color:title};
    transition:.6s ease;
}

#title a:hover {
    color:{color:links hover};
    letter-spacing:3px;
}

#desc {
    padding-top:20px;
    line-height:20px;
}

one, two, three, four {
    cursor:pointer;
}

#links {
    color:{color:links};
    padding:20px 0 0 40px;
}

#links a {
    margin-right:40px;
    line-height:20px;
    border-bottom:1px solid #eee;
}

#updates {
    padding:5px;
    margin-top:20px;
}

.uptitle {
    letter-spacing:2px;
    padding-bottom:5px;
}

.upd {
    padding:10px;
    background:#f8f8f8;
    border:1px solid #eee;
    margin-bottom:20px;
}

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

.container {
    width:500px;
    margin:auto;
    margin-bottom:100px;
}

.posts {
    padding:10px;
    margin-left:100px;
    margin-top:70px;
    transition: .5s ease;
}

.posts img {
    height:auto;
}

.title {
    font-size:calc({text:font size}px + 1px);
    text-transform:uppercase;
    padding:10px;
}

.no {
    display:none;
}

.tumblr_parent {
  margin:10px 5px 0 5px;
  border-bottom:1px solid #eee;
}

.tumblr_blog {
    position:absolute;
    margin-top:4px;
    border-bottom:1px solid #eee;
}

.tumblr_avatar {
  margin-right:10px;
  height:22px;
  width:22px;
  border-radius:100%;
}

.via {
    font-size:calc({text:font size} - 2px);
    text-transform:uppercase;
    padding:10px 0 10px 5px;
    letter-spacing:1px;
    display:inline-block;
}

.via a, .time a, .notes a {
    border-bottom:1px solid #eee;
    transition:.6s ease;
}

.via a:hover, .time a:hover, .notes a:hover, .tags a:hover {
    color:{color:links hover};
    letter-spacing:2px;
}

.time {
    float:right;
    display:inline-block;
    font-size:calc({text:font size} - 2px);
    text-transform:uppercase;
    padding:10px 0 10px 5px;
    letter-spacing:1px;
}

.notes {
    display:inline-block;
    margin-left:5px;
    padding:10px 0 10px 0px;
    font-size:calc({text:font size} - 2px);
    text-transform:uppercase;
    letter-spacing:1px;
}

.tags {
    float:right;
    display:inline-block;
    padding:10px 5px 10px 0;
    font-size:calc({text:font size} - 2px);
    text-transform:uppercase;
    letter-spacing:1px;
}

#n {position:fixed;right:30px;bottom:30px;font-size:11px;z-index:9999999;}

</style>

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>

<script src="http://static.tumblr.com/wgg6svp/OoTofxa0c/unnest.min.js"></script>

<script> $(function(){  $('.posts').unnest({
    yourCaption: ".caption", //your caption selector, the div wrapping {Caption}
    wrapName: ".tumblr_parent", //the name of the captions’ new wrapper
    newCaptionUsername: false, //if the user adds a new caption, following a series of captions, show their username above the caption
    originalPostCaptionUsername: false, //for the original captions, or a user-added caption that previously didn’t have any, have their username on it
    tumblrAvatars: true, //”dashboard style” caption, have the avatar of the blog next to the username
    tumblrAvatarClass: ".tumblr_avatar", //class of the avatar next to the username
    usernameColon: false //if turned to false, removes the colon at the end of usernames
  }); }); </script>

<body>
<div id="sb">
    <div class="icons">
        <one><i class="fa fa-user" aria-hidden="true"></i></one>
        <two><i class="fa fa-bars" aria-hidden="true"></i></two>
        <three><i class="fa fa-plus" aria-hidden="true"></i></three>
    </div>

            {block:Pagination}{block:PreviousPage}
                <div class="four"><a href="{PreviousPage}"><i class="fa fa-chevron-left" aria-hidden="true"></i><p></a></div>
            {/block:PreviousPage}
                {block:NextPage}
                <div class="five"><a href="{NextPage}"><i class="fa fa-chevron-right" aria-hidden="true"></i></a></div>
            {/block:NextPage}{/block:Pagination}
</div>
<div class="content">
    <a href="/"><img class="sb" src="{image:sidebar}"></a><div id="title"><a href="/">{Title}</a></div>
<div class="tabone">
    <div id="desc">{block:Description}{Description}{/block:Description}</div>
</div>
<div class="tabtwo">
    <div id="links">
        <a href="/">home</a>
        <a href="/ask">{text:ask}</a><br>
        <a href="{text:link 1 url}">{text:link 1}</a>
        <a href="{text:link 2 url}">{text:link 2}</a><br>
        <a href="{text:link 3 url}">{text:link 3}</a>
        <a href="{text:link 4 url}">{text:link 4}</a><br>
    </div>
</div>
<div class="tabthree">
    <div id="updates">

        <div class="uptitle">

        title 1 <!–– edit your title here ––>

        </div>

        <div class="upd">

		put your updates here. <!–– delete this and put in your updates! ––>

		</div>

        <div class="uptitle">

		title 2 <!–– heres your second title.. ––>

		</div>

        <div class="upd">

		another one! put your updates here. <!–– delete this and put in your updates! ––>

		</div>

        <div class="uptitle">

		title 3 <!–– and your third! you get the gist. ––>

		</div>

        <div class="upd">

		and a third! or more! put your updates here. <!–– delete this and put in your updates! ––>

		</div>

    </div>
</div>
</div>

<div class="container">

{block:Posts}

<div class="posts">

<div class="via">via <a href="{ReblogParentURL}">{ReblogParentName}</a></div>
<div class="time"><a href="{Permalink}"> {Month} {DayOfMonth}{DayOfMonthSuffix}</a> {12Hour}:{Minutes} {AmPm}</div>

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

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

{block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{/block:Panorama}

{block:Photoset}{Photoset}{/block:Photoset}

{block:Quote}"{Quote}"{block:Source}{Source}{/block:Source}{/block:Quote}

{block:Link}<a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}

{block:Chat}{block:Title}{Title}</a>{/block:Title}
{block:Lines}<li>{block:Label}{Label}{/block:Label}{Line}</li>{/block:Lines}{/block:Chat}

{block:Video}{Video-500}{/block:Video}

{block:Audio}{AudioEmbed}{/block:Audio}

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

{block:NoteCount}<div class="notes"><a href="{Permalink}">{NoteCountWithLabel}</a></div>{/block:NoteCount}

{block:HasTags}
{block:Tags}<div class="tags"><a href="{TagUrl}">{Tag}.</a></div>{/block:Tags}
{/block:HasTags}

{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}

<!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->

{block:PermalinkPage}
{block:PostNotes}
{PostNotes}
{/block:PostNotes}
{/block:PermalinkPage}

</div>

{/block:Posts}

</div>

<div id="n"><a href="https://02px.tumblr.com">02</a></div>

</body>
</html>