TAPPP DEC UPDATED 2019

<!DOCTYPE html>
<html>
<head>

<!---
  ___ ___ _    _    _____      __  _____ _  _ ___ __  __ ___ ___
 | _ \_ _| |  | |  / _ \ \    / / |_   _| || | __|  \/  | __/ __|
 |  _/| || |__| |_| (_) \ \/\/ /    | | | __ | _|| |\/| | _|\__ \
 |_| |___|____|____\___/ \_/\_/     |_| |_||_|___|_|  |_|___|___/

                             BY CARA

Rules:
    1. Do not steal snippets or all of my codes.
    2. Do not claim theme as yours.
    3. Do not remove the credit.
-->

<!--- Meta Tags --->
<meta name="color:Background" content="#fff"/>
<meta name="color:Text" content="#000"/>
<meta name="color:link hover" content="#ffbf00"/>

<meta name="image:logo" content=""/>
<meta name="image:sidebar image" content=""/>

<meta name="if:infinite scroll" content="1"/>

<meta name="text:link 1" content=""/>
<meta name="text:link 1 url" content=""/>

<meta name="text:link 2" content=""/>
<meta name="text:link 2 url" content=""/>

<meta name="text:link 3" content=""/>
<meta name="text:link 3 url" content=""/>

<meta name="text:link 4" content=""/>
<meta name="text:link 4 url" content=""/>

<meta name="text:printables url" content=""/>
<meta name="text:wallpapers url" content=""/>

<meta name="image:header image 1" content=""/>
<meta name="text:header image 1 url" content=""/>

<meta name="image:header image 2" content=""/>
<meta name="text:header image 2 url" content=""/>

<meta name="image:header image 3" content=""/>
<meta name="text:header image 3 url" content=""/>

<meta name="image:header image 4" content=""/>
<meta name="text:header image 4 url" content=""/>

<meta name="text:productivity link" content=""/>
<meta name="text:mental health link" content=""/>
<meta name="text:organization link" content=""/>
<meta name="text:resources link" content=""/>

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link href="https://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript">
function handleThis(formElm)
{
window.location="/tagged/"+formElm.number.value+"";
return false;
}
</script>

</head>

<style type="text/css">

@font-face {
font-family: 'Brandon Bold';
src: url('https://static.tumblr.com/vowb075/wTXpb2z0z/brandon_bold.otf');
}

@font-face {
font-family: 'Brandon Regular Italic';
src: url('https://static.tumblr.com/vowb075/iSBpb2z1d/brandon_regular_italic.otf');
}

@font-face {
font-family: 'Brandon Bold Italic';
src: url('https://static.tumblr.com/vowb075/Z96pb2z19/bradon_bold_italic.otf');
}

@font-face {
font-family: 'Brandon Regular';
src: url('https://static.tumblr.com/vowb075/Ixfpb2z38/brandon_regular.otf');
}

@font-face {
font-family: 'Golden Plains';
src: url('https://static.tumblr.com/vowb075/Nt3pb2z8f/golden_plains.ttf');
}

@font-face {
font-family: 'Brandon Becker Bold';
src: url('https://static.tumblr.com/3n6ai2b/tnNpwdh3m/brandonbeckerbold.otf');
}

/* SCROLLBAR */
::-webkit-scrollbar {
width:15px;
}

::-webkit-scrollbar-track {
background-color:#fff;
}

::-webkit-scrollbar-thumb {
border-top:5px solid #fff;
border-bottom:5px solid #fff;
border-left:5px solid #fff;
border-right:5px solid #fff;
background-color:#cf7042;
}

/* Individual Posts */
article {
width:500px;
margin:0px 0px 90px 0px;
background-color:#fff;
{block:PermalinkPage}
    width:500px;
{/block:PermalinkPage}
}

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

img {
height:auto;
width:auto;
}

blockquote {
border-left:1.5px solid #cf7042;
color:{color:text};
margin-left:20px;
padding-left:10px;
}

body {
background-color: {color:background};
font-family: 'Brandon Regular';
font-size:16px;
letter-spacing:0.5px;
color:{color:text};
line-height:auto;
overflow-x:hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

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

#topb {
top:0;
width:100%;
height:15px;
background-color:#f9dfd2;
}

#links {
top:0px;
width:100%;
height:auto;
padding:30px 0px 30px 0px;
background-color:#fff;
text-align:center;
text-transform:uppercase;
font-family: 'Brandon Bold';
letter-spacing:2px;
}

#links a {
margin:25px;
padding-bottom:5px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

#links a:last-child {
margin-right:0px;
}

/*INSERT LINK HOVER EFFECTS HERE */
#links a:hover {
border-bottom:2px solid {color:link hover};
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/*INSERT LINK HOVER EFFECTS HERE */

#links a:hover:nth-child(3) {
border-bottom:none;
padding-bottom:none;
}

#header {
width:1000px;
height:400px;
background-color:#fff;
margin:0px auto 0px auto;
}

#header img {
width:250px;
height:400px;
float:left;
}

#container {
width:1000px;
height:auto;
margin:50px auto 50px auto;
background-color:#fff;
overflow:hidden;
}

.entries {
width:500px;
height:auto;
float:left;
position:relative;
background-color:white;
margin-left:70px;
}

/* Permalinks */
#perma {
text-align:left;
margin-top:20px;
position: relative;
font-family: 'Brandon Bold';
{block:PermalinkPage}
    display:none;
{/block:PermalinkPage}
}

#perma a {
color:black;
}

#tags {
font-family: 'Brandon Regular Italic';
}

/* Permalinks on Permalink Page */
#permanotes {
text-align:left;
margin-top:10px;
position: relative;
font-family: 'Brandon Bold Italic';
}

#permatags {
font-family: 'Brandon Regular Italic';
}

#postnotes {
font-family: 'Brandon Regular';
text-align:left;
}

.sidebar {
width:250px;
height:auto;
float:right;
position:relative;
background-color:#fff;
margin-right:70px;
}

#sidebarim {
width:150px;
margin:0 auto;
}

#sidebarim img {
border-radius:50%;
}

#description {
text-align:left;
margin-top:20px;
}

.sfm input {
margin-top:20px;
background-color:#f9dfd2;
margin-left:5px;
border:0px;
text-transform: none;
color:#000;
letter-spacing:0.5px;
padding:6px 8px;
font-family: 'Brandon Regular';
}

#sb {
width:65px;
}

#social {
width:250px;
background-color:#fff;
margin-top:25px;
text-align:center;
font-size:20px;
}

#socialboxt {
font-family: 'Brandon Bold';
text-align:center;
text-transform:uppercase;
letter-spacing:1.75px;
margin-bottom:10px;
font-size:16px;
}

#socialboxc {
text-align:center;
margin-bottom:15px;
}

#social a {
margin:3px;
color:white;
margin-bottom:15px;
}

#readerspicks {
width:250px;
margin-top:25px;
}

#readerspickst {
font-family: 'Brandon Bold';
text-align:center;
text-transform:uppercase;
letter-spacing:1.75px;
margin-bottom:20px;
}

#readerspicksc {
text-align:left;
background-color:#fff;
margin-bottom:20px;
}

#readerspicksct {
font-family: 'Brandon Bold';
font-size:12px;
}

#ftbox {
width:250px;
margin-top:25px;
}

#ftboxt {
font-family: 'Brandon Bold';
text-align:center;
text-transform:uppercase;
letter-spacing:1.75px;
margin-bottom:0px;
}

#ftboxc {
background-color:none;
margin-bottom:20px;
}

#hireme {
width:250px;
margin-top:25px;
}

#hiremet {
font-family: 'Brandon Bold';
text-align:center;
text-transform:uppercase;
letter-spacing:1.75px;
margin-bottom:0px;
}

#hiremec {
background-color:none;
margin-top:0px;
margin-bottom:20px;
}

/* Text Post Title*/
#ptitle {
font-size:25px;
color:#CF7042;
font-family: 'Brandon Bold';
margin-bottom:10px;
}

/* Text Post Body */
#pbody {
margin-top:0px;
}

/* Asker */
.as {
font-family: 'Brandon Bold';
font-size:25px;
text-align:center;
color:#afbf34;
z-index:9;
}

/* Asker's Blog Link */
.as a {
color:#4c903d;
}

.qu {
margin-top:10px;
font-family: 'Brandon Regular';
color:black;
text-align:left;
font-size:16px;
border:2.5px solid #4c903d;
padding:20px;
}

/* Answer */
.ans {
margin:0px 0px 10px 0px;
}

/* Quote */
.quo {
margin:10px 0px 15px 0px;
}

/* Source */
.sou {
margin-top:10px;
font-family: 'Brandon Regular Italic';
border-top:3px solid #ffb5ac;
padding-top:10px;
}

/* CREDITS TO TUMBLR DOCS */
ol.notes {
padding: 0px;
margin: 25px 0px;
list-style-type: none;
border-bottom: solid 1px #eee;
}

ol.notes li.note {
border-top: solid 1px #eee;
padding: 10px;
}

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

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

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

ol.notes li.note blockquote {
border-color: #eee;
padding: 4px 10px;
margin: 10px 0px 0px 25px;
}

ol.notes li.note blockquote a {
text-decoration: none;
}
/* CREDITS TO TUMBLR DOCS */

/* Infinite Scroll */
{block:ifnotinfinitescroll}
.pagi {
font-size:40px;
text-align:center;
font-family: 'Golden Plains';
color:#db663e;
background-color:#fff;
margin-bottom:50px;
}
{/block:ifnotinfinitescroll}

.pagi a {
color:#db663e;
margin-right:40px;
}

.pagi a:last-child {
margin-right:0px;
}

{block:ifinfinitescroll}
.pagi {
display:none;
}
{/block:ifinfinitescroll}

/* Footer */
#footer {
bottom:0px;
width:100%;
height:200px;
padding-top:50px;
padding-bottom:50px;
background-color:#f9dfd2;
}

#footerc {
width:810px;
margin:0 auto;
background-color:yellow;
}

#categoriesf {
width:150px;
height:auto;
float:left;
}

#categoriest {
font-family: 'Brandon Bold';
}

#categoriesc {
text-align:left;
text-transform:capitalize;
}

#categoriesc a {
display:block;
}

#downloadst {
font-family: 'Brandon Bold';
}

#downloadsc {
text-align:left;
text-transform:capitalize;
}

#downloadsc a {
display:block;
}

#socialfooter {
margin-left:80px;
width:250px;
height:30px;
float:left;
}

#socialft {
font-family: 'Brandon Bold';
}

#socialfc {
text-align:left;
text-transform:capitalize;
}

#socialfc a {
color:black;
}

#businesst {
font-family: 'Brandon Bold';
}

#businessc {
text-align:left;
}

#socialfc a {
display:block;
}

#credits {
margin-left:80px;
width:250px;
height:30px;
float:left;
}

#creditst {
font-family: 'Brandon Bold';
}

#creditsc {
text-align:left;
}

</style>
<body>

<title>{Title}</title>

<div id="topb"></div>

<div id="links">
    <a href="{text:link 1 url}">{text:link 1}</a>
    <a href="{text:link 2 url}">{text:link 2}</a>
    <a href="/"><span><img src="{image:logo}" style="width:150px;height:auto;"></span></a>
    <a href="{text:link 3 url}">{text:link 3}</a>
    <a href="{text:link 4 url}">{text:link 4}</a>
</div>

<div id="header">
    <a href="{text:header image 1 url}"><img src="{image:header image 1}"></a>
    <a href="{text:header image 2 url}"><img src="{image:header image 2}"></a>
    <a href="{text:header image 3 url}"><img src="{image:header image 3}"></a>
    <a href="{text:header image 4 url}"><img src="{image:header image 4}"></a>
</div>

<div id="container">

<div class="sidebar">
<div id="sidebarim"><img src="{image:sidebar image}"></div>

<div id="description">{Description}</div>

<form onsubmit="return handleThis(this)" class="sfm">
<input onfocus="this.value=''" value="Look for something..." type="text" name="number" id="sfm">
<input type="submit" value="Search" name="Submit" id="sb">
</form>

<div id="social">
    <div id="socialboxt">keep in touch</div>
    <div id="socialboxc">Access behind-the-scenes content that doesn’t make it to the blog!</div>
    <a href="https://facebook.com/arialligraphy"><i class="fab fa-facebook-f" style="background-color:#ffb5ac;padding:10px;width:20px;height:20px;"></i></a>
    <a href="https://instagram.com/arialligraphy"><i class="fab fa-instagram" style="background-color:#db663e;padding:10px;width:20px;height:20px;"></i></a>
    <a href="https://twitter.com/arialligraphy"><i class="fab fa-twitter" style="background-color:#ffd647;padding:10px;width:20px;height:20px;"></i></a>
    <a href="https://pinterest.com/arialligraphy"><i class="fab fa-pinterest-p" style="background-color:#afbf34;padding:10px;width:20px;height:20px;"></i></a>
</div>

<div id="readerspicks">
    <div id="readerspickst">reader's picks</div>
    <div id="readerspicksc"><img src=https://static.tumblr.com/3n6ai2b/oFZq1dkk0/tap_rp_box1.jpg>
    <div id="readerspicksct">PRODUCTIVITY</div>
    <a href="{text:productivity link}">Decorating your planner or bullet journal</a>
    <br><br><img src=https://static.tumblr.com/3n6ai2b/maBq1dklg/tap_rp_box3.png>
    <div id="readerspicksct">MENTAL HEALTH</div>
    <a href="{text:mental health link}">Spoken word poetry | How are you?</a>
    <br><br><img src=https://static.tumblr.com/3n6ai2b/NMMq1dmuf/tap_rp_box2.png>
    <div id="readerspicksct">ORGANIZATION</div>
    <a href="{text:organization link}">Spice up your work desk with these five tips</a>
    <br><br><img src=https://static.tumblr.com/3n6ai2b/mojq1dpa6/tap_rp_box4.png>
    <div id="readerspicksct">RESOURCES</div>
    <a href="{text:resources link}">Here’s a list of sites where you can get free textbooks</a>
    </div>
</div>

<div id="ftbox">
    <div id="ftboxt">press</div>
    <div id="ftboxc"><br><img src=https://static.tumblr.com/3n6ai2b/Q6Eq1daj5/press_logos.png></div>
</div>

<div id="hireme">
    <div id="hiremet">let's work together</div>
    <div id="hiremec"><br><img src=https://static.tumblr.com/3n6ai2b/fOSq1ibcd/hire_me_box_v2.png><br><center>Ariadne is open to commissions and brand partnerships!<br><br>Send an email to<br><a href="mailto:[email protected]?Subject=Hi%20Ariadne!">[email protected]</a></center></div>
</div>
<!--Closing sidebar--></div>

<div class="entries">
{block:Posts}
<article>

{block:Text}
<div id="post text">
{block:Title}
<div id="ptitle">{Title}</div>
{/block:Title}
<div id="pbody">{Body}</div>
{/block:Text}

{block:Photo}
<div class="photo">
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
{/block:Photo}

{block:Panorama}
<div id="post panorama">
{LinkOpenTag}
<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
{LinkCloseTag}{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Panorama}

{block:Photoset}
<div class="photoset">
{block:IndexPage}
{Photoset-500}
{block:Caption}{Caption}{/block:Caption}
{/block:IndexPage}
{block:PermalinkPage}
{Photoset-500}
{block:Caption}{Caption}{/block:Caption}
{/block:PermalinkPage}
{/block:Photoset}

{block:Quote}
<div class="quote">
<div class="quo">“{Quote}”</div>
{block:Source}<div class="sou">— {Source}</div>{/block:Source}
{/block:Quote}

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

{block:Chat}
<div class="chat">
<ul>
{block:Lines}
{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>
{/block:Lines}
</ul>
{/block:Chat}

{block:Answer}
<div class="answer">
<div class="as">{Asker} asked:</div>
<div class="qu">{Question}</div>
<div class="ans">{Answer}</div>
{/block:Answer}
</div>

{block:Video}
<div id="post video">
{Video-500}
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Video}

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

<div id="perma">
<a href="{Permalink}">Posted on {DayOfMonthWithZero} {Month} {Year}</a><a href="{ReblogURL}" style="float:right;font-family:'Brandon Bold';">Reblog</a>

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

{block:PermalinkPage}
<div id="permanotes">
{block:Date}{DayOfMonthWithZero} {Month} {Year}{/block:Date}
{block:NoteCount}<br>{NoteCountWithLabel}{/block:NoteCount}
{block:HasTags}<div id="permatags">{block:Tags}#<a href="{TagURL}">{Tag} </a>{/block:Tags}</div>{/block:HasTags}
{block:PostNotes}<div id="postnotes">{PostNotes}</div>{/block:PostNotes}
</div></div></div>
{/block:PermalinkPage}

</article>
{/block:Posts}

{block:Pagination}
<div class="pagination">
<div class="pagi">
{block:PreviousPage}<a href="{PreviousPage}">backward</a>{/block:PreviousPage}
{block:NextPage}<a href="{NextPage}">move forward</a>{/block:NextPage}
</div></div>
{/block:Pagination}
</div>
<nav>
<ul>
{block:HasPages}
{block:Pages}
<li> <a href="{URL}">{Label}</a></li>
{/block:Pages}
{/block:HasPages}
</ul>
</nav>

<!--Closing Entries--></div>

<!--Closing Container--></div>

<div id="footer">
    <div id="footerc">
        <div id="categoriesf">
            <div id="categoriest">Categories</div>
            <div id="categoriesc">
                <a href="{text:link 1 url}">{text:link 1}</a>
                <a href="{text:link 2 url}">{text:link 2}</a>
                <a href="{text:link 3 url}">{text:link 3}</a>
                <a href="{text:link 4 url}">{text:link 4}</a>
            </div>
            <br>
            <div id="downloadst">Downloads</div>
                <div id="downloadsc">
                <a href="{text:printables link url}">printables</a>
                <a href="{text:wallpapers link url}">wallpapers</a>
            </div>
        </div>

        <div id="socialfooter">
            <div id="socialft">Follow Ariadne on social media</div>
            <div id="socialfc">
                <a href="{text:facebook url}">Facebook</a>
                <a href="{text:twitter url}">Twitter</a>
                <a href="{text:instagram url}">Instagram</a>
                <a href="{text:pinterest url}">Pinterest</a>
            </div>
            <br>
            <div id="businesst">For business inquiries, email</div>
            <div id="businessc">
                <a href="mailto:[email protected]">[email protected]</a>
            </div>
        </div>

        <div id="credits">
            <div id="creditst">© 2019 The Arialligraphy Project</div>
            <div id="creditsc">
                All rights reserved.
                <br>
                <br>
                Theme by Cara of <a href="https://pillowthemes.tumblr.com/">Pillow Themes</a>
            </div>
        </div>
    </div>
</div>

<!--- DO NOT TOUCH THIS PART --->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
{block:IfInfiniteScroll}
<script src="https://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
<script src="https://static.tumblr.com/iwtk77u/Yhym2yygt/jquery.imagesloaded.min.js"></script>
{/block:IfInfiniteScroll}

<script>
(function() {
    var $tumblelog = $('#content');
    {block:IfInfiniteScroll}
    $tumblelog.infinitescroll({
        navSelector  : ".pagination",
        nextSelector : ".pagination a:first",
        itemSelector : "article",
        bufferPx     : 50,
        done : "",
        loading: {
            img : "",
            msgText: ""
        },
    },
      function( newElements ) {
            var $newElems = $( newElements ).css({ opacity: 0 });
            $newElems.imagesLoaded(function(){
                $newElems.animate({ opacity: 1 });
                $tumblelog.masonry( 'appended', $newElems);
            });
          }
    );
    {/block:IfInfiniteScroll}
    $tumblelog.imagesLoaded( function(){
      $tumblelog.masonry({
        columnWidth: function( containerWidth ) {
            return containerWidth / 100;
          }
      });
    });
})();
</script>
<!--- DO NOT TOUCH THIS PART --->

</body>
</html>