page 07 // myrina

<!DOCTYPE html>
<head>

 <!-- THEME BY @VENUSTHMS
                           do not remove the credit

-------------------------------------------------------------------------

  - terms of use: venusthms.tumblr.com/terms

  - message me if you got any problems or questions about the code

  - you'll find instructions about customization through out the code

  - the grid/filter effect was created with the tutorial by @cyantists

  - icon font https://suiomi.com/font#_=_

---------------------------------------------------------------------->

<title>lists</title><link rel="shortcut icon" href="{Favicon}"> <!-- change (tab) title here -->

<!---- SCRIPT - DO NOT TOUCH ---->

<link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Karla|Montserrat|Playfair+Display|Quicksand|Raleway" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Lora|PT+Serif|Quattrocento" rel="stylesheet"><link rel="stylesheet" type="text/css" href="//venusthms.github.io/pages/myrina/style.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="https://static.tumblr.com/xd6ujov/9Rpouml9f/imagesloaded.pkgd.min.js"></script> <script src="https://static.tumblr.com/f6blkfc/3khouzw5b/masonry.pkgd.min.js"></script><script src="//venusthms.github.io/pages/myrina/grid.js"></script><link href="https://static.tumblr.com/4gatuv1/X8Poxwvz8/style-my-tooltips.css" rel="stylesheet" type="text/css" /><script src="//dl.dropbox.com/s/qxwy3ik34kqna5q/venus.js"></script>
<script src="https://static.tumblr.com/4gatuv1/Aneoxwvz8/jquery.style-my-tooltips.js"></script>
<script>
!function(t){t(document).ready(function(){t("a[title]").style_my_tooltips({tip_follows_cursor:!0,tip_delay_time:200,tip_fade_speed:300})})}(jQuery);
</script>


<style type="text/css">

/* tooltips */

#s-m-t-tooltip {
  max-width: 250px;
  margin:24px 14px 7px 12px;
  padding:5px 8px;
  background: #fff;
  border-radius:2px;
  font-family: 'karla';
  letter-spacing: 1px;
  font-size:11px;
  color:#000;
  box-shadow: none;
}

/* scrollbar */

::-webkit-scrollbar {
   width:5px;
   height:17px;
   background-color: #F6F6F6;
}
::-webkit-scrollbar-track {
   background-color: #F6F6F6;
}
::-webkit-scrollbar-thumb {
   background-color: #f8eaf1;
   min-height:24px;
   min-width:24px;
}

/* selection */

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

/* general */

body {
    background: #fff;
    cursor: default;
    font-family: karla;
    font-size: 12px;
}

/* header */

 h1 { /* title */
     font-family: 'quicksand';
      font-size: 20px;
      box-shadow: 0 -8px 0 #f9e5ef inset;
 }

 h1, .desc, .button, .venus path {
     color: #000;
     fill:#000;
 }

 .button:hover {
     text-decoration: underline;
 }

.button.selected { /* selected filter */
    color:#000000;
    text-decoration:underline;
}

/* navigation */

.links {
     left: 20px; /* change to right if you want the nav on the right side */
}

.links a {
    box-shadow: 0 -14px 0 #fcf2f7 inset;
}

.links a:hover {
    box-shadow: 0 -6px 0 #fcf2f7 inset;
    color: #000;
}

/* items */

.item {
    background: #fcf2f7; /* background colour */
}

h2 { /* item titles */
     font-family: 'quicksand';
     font-size: 15px;
     text-decoration: underline;
}

/* lists */

 ol {
      list-style: upper-roman; /* ordered lists style */
      list-style-position: inside;
 }

 ul li:before { /* icon before unordered lists */
     content: '\e12b';
     font-family:'saturnicons';
     font-size: 11px;
     top: 2px;
 }

 /* updates */

 .updates i {
     background: #E6D3E8;
 }

/* to do lists */

.finished:before { /* finished icon  */
    content:'\e086';
    font-family:'saturnicons';
    font-size: 9px;
    margin-right: 10px;
}

.inwork:before { /* progress icon  */
    content:'\e184';
    font-family:'saturnicons';
    font-size: 9px;
    margin-right: 10px;
}

.canceled:before { /* canceled icon  */
    content:'\e0c4';
    font-family:'saturnicons';
    font-size: 9px;
    margin-right: 10px;
}

 /*links*/

a {
    box-shadow: 0 -5px 0 #E6D3E8 inset;
 }

a:hover {
     color: #000;
     box-shadow: 0 -14px 0 #E6D3E8 inset;
 }

</style>
<link rel="stylesheet" type="text/css" href="//venusthms.github.io/pages/credit/venus.css">
</head>

<body>

<!----- header ----->

<div class="header">
<div class="headercontent">
    <h1>title</h1> <!----- title here ----->
    <p class="desc">here goes your description. make sure that you don't make it too long.</p>
    <div class="filter">
      <div class="button selected" filter="item">everything</div>
      <div class="button" filter="filter1">filter one</div>
      <div class="button" filter="filter2">filter two</div>
      <div class="button" filter="filter3">filter three</div>
</div></div>

<div class="links">
    <a href="/" title="back">back</a>
    <a href="/ask" title="ask">ask</a>
    <a href="/" title="link">link</a>
    <a href="/" title="link">link</a>
</div></div>


<!----- items container start:
- replace filter1/filter2/etc (after 'item') with the filter names you set above(<div class="button" filter="THISISYOURFILTERNAME">filter one</div>)

- make sure to have 'todolist'/'list'/'updates'/'text' afer 'item'.

- you can find the layouts for the different items here
----->
<div class="grid">

<!----- example: to do list ----->
    <div class="item todolist filter1"> <h2>title</h2>
      <span class="finished"><p>something</p></span>
      <span class="inwork"><p>something else</p></span>
      <span class="canceled"><p>even more</p></span>
    </div>

<!----- example: unordered list ----->
    <div class="item list filter2"><h2>title</h2>
        <ul>
            <li>list thingy</li>
            <li>list thingy</li>
            <li>list thingy</li>
        </ul>
    </div>

<!----- example: ordered list ----->
    <div class="item list filter3"><h2>title</h2>
    <ol>
        <li>list thingy</li>
        <li>list thingy</li>
          <ol>
            <li>sublist thingy</li>
            <li>sublist thingy</li>
          </ol>
        <li>list thingy</li>
        <li>list thingy</li>
    </ol>
    </div>

<!----- example: updates ----->
    <div class="item updates filter1 filter3"><h2>title</h2>
        <i>xx.yy</i> <p>update here</p><br>
        <i>xx.yy</i> <p>another update</p>
    </div>

<!----- example: text----->
    <div class="item info filter1 filter3"><h2>title</h2>
        <p>here goes some text. text text text text text text text text. maybe even include a <a href="/">link</a>. text text text.</p>
    </div>


</div><!--- Items container ends -->

<!----- credit: do not remove or edit! ----->
<a class="v" href="https://venusthms.tumblr.com/" title="Venusthms">
<div class="venus-icon"></div>
</a>


</body>
</html>