05. notebook

<!DOCTYPE html>
<head>

<!--
     © Clerihew Themes 2018

     Do not use without reading terms of use.

     Contact me at clerihew.tumblr.com if you have problems with any
     un-heavily edited code or if you have questions on how to use this theme.
-->

  <title>{Title}</title>

  <link href="https://fonts.googleapis.com/css?family=Krub" rel="stylesheet">

  <style>

/* sidebar for icon, links */
    .sidebar {
        width: 300px;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
    }

/* icon border color */
    .sidebar .icon {
        margin-top: 100px;
        margin-left: 86px;
        width: 128px;
        border-bottom: 2px solid black;
    }

/* change sidebar links background color, font size/family, text color */
    .sidebar .links {
        background-color: white;
        font-family: "Krub", sans-serif;
        color: black;
        font-size: 16px;
        text-align: center;
        padding-top: 3px;
        padding-bottom: 3px;
        width: 128px;
        margin-top: 5px;
        margin-bottom: 5px;
        margin-left: 86px;
        margin-right: 86px;
        border-radius: 5px;
        -webkit-transition: color 1s;
        -moz-transition: color 1s;
        -o-transition: color 1s;
        transition: color 1s;
    }

  /* change sidebar links hover */
    .sidebar .links:hover {
        background-color: white;
        color: #c0c0c0;
    }

    .sidebar .link-decoration a {
        text-decoration: none;
    }

    .about {
        width: 700px;
        font-family: "Krub", sans-serif;
        font-size: 16px;
        margin-left: 400px;
        margin-top: 100px;
    }

  </style>

</head>
<body>
  <div class="sidebar">
<!-- icon size, check out tumblr page on theme making for other sizes -->      <div class="icon">
      <img src="{PortraitURL-128}">
    </div>

    <div class="link-decoration">
    <a href="/"><div class="links">home</div></a>
    {block:AskEnabled}<a href="/ask"><div class="links">{AskLabel}</div></a>{/block:AskEnabled}
<!-- DO NOT TOUCH THIS -->
    <a href="https://clerihew.tumblr.com"><div class="links">theme</div></a>
    </div>
    </div>

    <div class="about">
     <p> This is an about page. It is filled with text like <b>this</b> and <i>this</i> and <u>this</u>. Maybe you want to do <del>this</del> ? That's fine too! <blockquote>Hey, how about this? Pretty crazy, right?</blockquote> Betcha it makes you want to make your own about page, huh? You should download this theme so you can! Now, here's some filler text.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis tellus ut sapien tempor, a iaculis felis tempor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ultricies imperdiet scelerisque. Nulla pretium sodales urna sit amet placerat. In non mi quis sem ullamcorper bibendum. Donec sed lacus odio. Vestibulum maximus lectus vitae sem pretium, non fringilla lectus egestas. Fusce id leo a sapien consequat dictum ac vitae arcu. Donec at mi purus. Sed volutpat posuere nunc, ac dictum nibh sagittis imperdiet. Integer commodo elit nec felis tempor, vitae suscipit leo viverra. Phasellus varius tellus eu egestas pharetra. Pellentesque interdum ex non fermentum vehicula. Duis vel enim massa. Donec feugiat facilisis nulla, nec eleifend est congue eu. Cras eros tortor, consequat sed vehicula sed, semper vel orci. Cras luctus, eros convallis dapibus rutrum, libero magna faucibus lorem, quis tristique ex lorem eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>


</body>
</html>