NAVI/TAGS #1: somewhere

<!--

    - navigation #1 'somewhere' by http://southcodes.tumblr.com/
    - modify as you like but keep the credit intact
    - any errors? need help? have questions? let me know!
      southcodes.tumblr.com/ask

-->

<!DOCTYPE html>
<head>

    <title>{Title}</title>

    <link rel="shortcut icon" href="{favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    <link href="https://fonts.googleapis.com/css?family=Cabin|Noto+Sans|Nunito+Sans|Montserrat|Ubuntu" rel="stylesheet">

    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<script>
$('.navi').masonry({
  itemSelector: '.box',
});
</script>


<style type="text/css">

.tmblr-iframe {
    margin:10px;
    opacity:.5;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;q
    transition-duration: 0.2s;
}

.tmblr-iframe:hover{
    opacity:.8;
    -moz-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    -webkit-transition-duration: 0.6s;q
    transition-duration: 0.6s;
}

::-webkit-scrollbar-thumb:vertical {
    background-color: #bbb;
    height: 11px;
    border: 4px solid #fff;
}


::-webkit-scrollbar {
    background-color: inherit;
    height:10px;
    width:9px;
}

#s-m-t-tooltip{
    font-family:calibri;
    max-width:300px;
    margin-top:25px;
    margin-left:15px;
    z-index:999999;
    letter-spacing:1.6px;
    text-transform:uppercase;
    font-size:8.5px;
    border: solid 1px #ddd;
    background-color:#fcfcfc;
    color:#666;
    padding:3px 5px 3px 5px;
}

body {
    font-family:'Noto sans';
    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;
}

a {
    text-decoration:none;
    color:#8c8c8c;
    -moz-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    -webkit-transition-duration: 0.6s;
    transition-duration: 0.6s;
}

a:hover {
    color:#000;
    -moz-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    -webkit-transition-duration: 0.6s;
    transition-duration: 0.6s;
}

.container {
    width:100%;
    margin:10% auto 40px;
}

.header {
    text-align:center;
}

.icon img {
    width:50px;
    border-radius:4px;
}

.title {
    margin:20px 0 25px;
    font-size:15px;
    letter-spacing:1.5px;
    font-family:'Montserrat';
}

.links {
    font-family:calibri;
    font-size:11px;
    letter-spacing:1.5px;
}

.links a{
    padding-right:5px;
}

.links a:last-child{
    padding-right:0px;
}

.navi {
    width:calc(190px * 4); /*change the last number to the number of boxes per row you want*/
    margin: 50px auto 0;
}

.box {
    display:inline-block;
    width:130px;
    margin: 0 30px 30px;
}

.boxt {
    font-family:'Montserrat';
    padding:3px 3px 6px;
    border-bottom:1px solid #eee;
    font-size:12.5px;
    letter-spacing:1px;
}

.boxc {
    margin:10px auto 0px;
    line-height:20px;
    font-size:10px;
}

.boxc a {
    display:block;
    line-height:23px;
}

.boxc a:hover {
    padding-left:7px;
}

.credit {
    font-family:calibri;
    position:fixed;
    bottom:10px;
    right:10px;
}

.credit a{
    color:#666;
    font-size:10px;
    font-variant:small-caps;
}


</style>
</head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:30,
tip_fade_speed:300,
attribute:"title"
});
});
})(jQuery);
</script>

<body>
<div class="container">

<div class="header">
    <div class="icon"><a href="/"><img src="{favicon}"></a></div>

    <div class="title">navi title</div>

<!--    links    -->
    <div class="links">
        <a href="/">return</a>
        <a href="/ask">inbox</a>
        <a href="https://www.tumblr.com">dashboard</a>
    </div>
</div>


<div class="navi" data-masonry='{ "itemSelector": ".box"}'>

<!--
- want a different number of boxes per row? look up ".navi" on the code!
-->


<!-- START box 1 (add as many as you want!) -->

    <div class="box">
        <div class="boxt">box title 1</div>

        <div class="boxc">
        <a href="">link 1</a>;
        <a href="">link 2</a>;
        </div>
    </div>

<!-- END box 1 -->


<!-- START box 2 -->

    <div class="box">
        <div class="boxt">box title 2</div>

        <div class="boxc">
        <a href="">link 1</a>;
        <a href="">link 2</a>;
        </div>
    </div>

<!-- END box 2 -->


<!-- START box 3 -->

    <div class="box">
        <div class="boxt">box title 3</div>

        <div class="boxc">
        <a href="">link 1</a>;
        <a href="">link 2</a>;
        <a href="">link 3</a>;
        </div>
    </div>

<!-- END box 3 -->


<!-- START box 4 -->

    <div class="box">
        <div class="boxt">box title 4</div>

        <div class="boxc">
        <a href="">link 1</a>;
        <a href="">link 2</a>;
        </div>
    </div>

<!-- END box 4 -->


<!-- START box 5 -->

    <div class="box">
        <div class="boxt">box title 5</div>

        <div class="boxc">
        <a href="">link 1</a>;
        <a href="">link 2</a>;
        </div>
    </div>

<!-- END box 5 -->


</div>

</div>
<!-- dont touch pls <3 -->
<div class="credit"><a href="http://southcodes.tumblr.com" title="southcodes">s.</a></div>
</body>
</html>