tags / ANCHOR

<!DOCTYPE html>
<head>

<!--


                         anchor nav

                         @odeysseus


-->

<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<title>navigation</title>

<style type="text/css">

* { margin:0;padding:0;box-sizing:border-box; }
iframe.tmblr-controls { display:none!important; }

@-webkit-keyframes fadein {
        0%   {opacity: 0;}
        100% { opacity: 1; }
}

@-moz-keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; }
}

@keyframes fadein {
        0%   { opacity: 0; }
        100% { opacity: 1; }
}

.tmblr-iframe { display:none; } /* to hide tumblr controls */

a { text-decoration:none;color:#767676;transition:0.15s ease-in;}
a:hover { color:#333;cursor:help; }
b,strong { color:#333; /* bold text */ }

body {
    background:#fff;
    font-family:'Georgia',serif; /*font*/
    font-size:12px; /* font size */
    line-height:190%;
    font-weight:300;
    color:#767676; /* text color */
    -webkit-animation: fadein 1s;
    -moz-animation: fadein 1s;
    animation: fadein 1s;
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    font-smoothing:antialiased;

}

section {
    margin:150px;
    width:500px;
}

h1,h2 {
    font-weight:400;
    color:#333;
    margin-bottom:5px;
}

h1 { font-size:20px; }
h2 { font-size:16px;margin-bottom:10px; }

article {
    margin-top:40px;
    padding-top:40px;
    border-top:1px solid #eee;
    display:block;
}

article a { position:relative; }
nav { margin-top:5px; }

article a:after {
    content:' . ';
    margin:0 5px;
}

article a:hover:after { color:#767676!important; }
article a:last-of-type:after { content:''; }


article a:before {
    content:'';
    height:1px;
    position:absolute;
    width:0;
    margin-top:12px;
    background:transparent;
    transition:width .35s ease, background-color .35s ease;
}

article a:hover:before {
    width:calc(100% - 18px);
    background:#333;
}

.anchor { bottom:27px;right:27px;position:fixed; }
</style>
</head>
<body>
    <section>
        <header> <!--header-->
            <h1>navigation</h1> <!--heading-->
            <nav><!--links-->
                <a href="#!">home</a> .
                <a href="#!">dash</a> .
                <a href="#!">inbox</a>
            <!--end links--></nav>
        </header>

            <!--example tag box, copy and paste as needed-->
            <article>
                <h2>category one</h2> <!--heading-->

                <a href="/tagged/tag-name"> tag </a>
                <a href="/tagged/tag-name"> tag </a>
                <a href="/tagged/tag-name"> tag </a>
                <a href="/tagged/tag-name"> tag </a>

            </article>
            <!--end example box-->

            <!--example tag box-->
            <article>
                <h2>category one</h2> <!--heading-->

                <a href="/tagged/tag-name"> tag </a>
                <a href="/tagged/tag-name"> tag </a>
                <a href="/tagged/tag-name"> tag </a>
                <a href="/tagged/tag-name"> tag </a>

            </article>
            <!--end example box-->

    </section>

<div class="anchor"><a href="http://odeysseus.tumblr.com">O</a></div>
</body>
</html>