<ul>

<ul class="list">

  <li>

  <li class="list-item">

      {{page.title}}

      <strong>{{page.title}}</strong>
      <p>{{page.date}}</p>

            <li><a href="#">snips</a></li>

            <li><a href="#">snippets</a></li>
            <li><a href="#">projects</a></li>

}
// --- small screens ---

@media (min-width: 768px) {
  html {
    font-size: 125%;
    max-width: 42em;
  }
}
// --- components ---
// article
.article {

// --- small screens ---

// list

@media (min-width: 768px) {
  html {
    font-size: 125%;
    max-width: 42em;

.list {
  a {
    color: $bg;
    &:hover, &:focus, &:active {
      color: $pd;
      text-decoration: none;
    }

  .list-item {
    list-style: none;
    border-left: 2px solid $bg;
    padding: 0px 8px;
    margin: 8px 0px;
    color: $bg;
    &:hover, &:focus, &:active {
      border-color: $pd;
    }
  }