all in one / RASPBERRY

<!DOCTYPE html>
<head>

<!--



                         raspberry

                         @odeysseus



- based off kickstarter's updates section
- credits listed at odeysseus.tumblr.com/credit
-->

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

<title>timeline</title> <!--title-->

<link href="https://fonts.googleapis.com/css?family=Merriweather:300,600" rel="stylesheet"> <link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

<style type="text/css">

.iframe-controls--desktop { display:none!important; }
@-webkit-keyframes fade {
        0%   {opacity: 0;}
        100% { opacity: 1; }
}

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

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

 ::-webkit-scrollbar{
    width:1px;
}

::-webkit-scrollbar-thumb {background:#d7c7d5;opacity:.5;}

::-webkit-scrollbar-track {background:#fafafa;}

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

body {
background:#fefefe;
color:#666; /* text color */
font-family:'Merriweather', serif; /*main font*/
font-size:10px; /* font size */
text-align:left;
font-weight:300;
line-height:180%;
-webkit-animation-name:fade;
-webkit-animation-duration:1s;
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
}


a { color:#444;text-decoration:none;padding:1px 2px;
background:rgba(146,220,232,.2); /* link background */
}

a,.box:before,.box,h9 {
transition:all .5s ease;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
}

b,strong { font-weight:600;color:#666;/* bold color */  }
a:hover { text-decoration:none;
color:#579faa;/* link hover color */
background:#fafafa; /* link hover background */ }
section { width:600px;margin:80px auto;position:relative; }
h9 { display:block;margin:15px 0px 5px;font-size:13px;color:#666; }

section:before {
    display:block;
    content:'';
    width:1px;
    left:300px;
    position:absolute;
    height:100%;
    background:#eee;
}

.box {
    margin-bottom:120px;
    display:block;
    width:280px;
    text-align:right;
    border:1px solid transparent;
    padding:10px;
    color:#999;
}
.box:before {
    content:'';
    position:absolute;
    width:20px;
    border-radius:100%;
    background:rgba(146, 220, 232,.4); /* color of dot */
    display:block;
    height:20px;
    margin-top:-20px;
    margin-left:-20px;
}

.box:nth-of-type(even):before { margin-left:280px; }
.box:nth-of-type(odd) {
    margin-left:300px;
    text-align:left;
}

.box:hover { color:#666; }
.box:hover h9 { color:#444; }
.box:hover:before {
    width:30px;height:30px;
    margin-left:-25px;
    margin-top:-25px;
    background:rgba(146, 220, 232,.8); /* dot color on hover */
}

.box:nth-of-type(even):hover:before { margin-left:275px; }
nav a { width:32%;display:inline-block;background:none;padding:0; }
nav a:hover { background:none;}
.blog img { width:16px;height:16px;border-radius:2px;float:left;margin-right:10px;}
.blog a { margin-right:5px; }
.blog { display:block;margin-bottom:7px;text-align:left; }
.blog:last-of-type { margin-bottom:0; }
.header a { font-size:8px;text-transform:uppercase;letter-spacing:1px;margin-right:8px;}
.yo { bottom:27px;right:27px;position:fixed; }

.sm a {
    font-size:21px;
    border-radius:3px;
    padding:5px;display:inline-block;
    margin:0px 5px 6px 0px;
    width:21px;
    height:21px;
    background:#fff;
    text-align:center;
}
.sm a:hover {
    background:#eee;
    color:#444;
}
</style>
</head>
<body>
<section>
<!--start timeline-->

<!--header box-->
<div class="box header">
    <h9>raspberry</h9> <!--main title-->

    <!--links-->
    <a href="/">home</a>
    <a href="http://tumblr.com/dashboard">dash</a>
    <a href="link url">some</a>
    <a href="link url">more</a>
    <a href="link url">links</a>
</div>

<!--below are some template boxes! u can copy and paste them as many times as you like depending on what you want to use the page for-->

<!--start example box-->
<div class="box">

<h9>an example event</h9> <!--title of box-->

Content here. <b>Bold</b>, <i>italics</i>, <a href="link url">link</a>

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

<!--start blogs/friends box-->
<div class="box">
<h9> heading </h9> <!--title of box-->

<div class="blog">
<img src="img url"/> <a href="blog url"> username </a>
optional short description here
</div>

<div class="blog">
<img src="img url"/> <a href="blog url"> username </a>
optional short description here
</div>

<div class="blog">
<img src="img url"/> <a href="blog url"> username </a>
optional short description here
</div>

</div>
<!--end blogs/friends box-->

<!--start navigation box-->
<div class="box">
<h9>navigation</h9> <!--title of box-->
    <nav>

      <a href="link url">link</a>
      <a href="link url">link</a>
      <a href="link url">link</a>
      <a href="link url">link</a>
      <a href="link url">link</a>
      <a href="link url">link</a>

    </nav>
</div>
<!--end navigation box-->

<!--start social media box-->
<div class="box">
    <h9>social media</h9>
    <div class="sm">
<!--go to http://ionicons.com/ for more icons-->

<a href="link url" title="twitter"><i class="ion-social-twitter"></i></a>

<a href="link url" title="instagram"><i class="ion-social-instagram-outline"></i></a>

<a href="link url" title="pinterest"><i class="ion-social-pinterest-outline"></i></a>

<a href="link url" title="snapchat: username"><i class="ion-social-snapchat-outline"></i></a>

    </div>
</div>
<!--end social media box-->

</div>

<!--end timeline-->
</section>

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