testing

index.html

<div class="container">
  <header class="site-header">
    <a href="#0" class="logo">CalVAD Status</a>
    <nav class="site-nav">
      <ul>
        <li><a href="#0">downloads</a></li>
        <li  class="active"><a href="#0">raw processing</a></li>
        <li><a href="#0">imputations</a></li>
        <li><a href="#0">grid modeling</a></li>
      </ul>
    </nav>
    <nav class="actions">
      <ul>
        <li><a href="#0">help</a></li>
        <li><a href="#0">about</a></li>
      </ul>
    </nav>
  </header>
  <div class="app">
    <div class="appnav">
      <a href="#0" class="dashboard-year">2015</a>
    </div>
    <ul class="dashboards">
      <li>
        <div class="graphic"></div>
      </li>
      <li><div class="graphic"></div>
      </li>
      <li><div class="graphic"></div>
      </li>
      <li><div class="graphic"></div>
      </li>
      <li>
        <div class="graphic"></div>
      </li>
    </ul>
  </div>
</div>

style.scss

$font-stack: Helvetica,sans-serif;
$header-text-color: #cecede;
$text-color: #010309;
$bg-color: #9d9393;
$app-bg-color: #e0eaf0;

body {
  font-family: sans-serif;
  background: $app-bg-color;
}
@media(max-width: 706px){
  .site-header {
    flex-wrap: wrap;
  }
  .site-nav {
    order: 2;
  }
}
@media(max-width: 420px){
  .site-nav, .actions{
    ul {
      flex-wrap: wrap;
    }
  }

}
.container {
  display:flex;
  flex-direction: column;
}
.site-header {
  background: $bg-color;
  display: flex;
  align-items: center;
  border-bottom: solid darken($bg-color,40%) 1px;
}
.logo{
  flex-grow: 2;
  margin-left: 2px;
  text-transform: uppercase;
  text-decoration: none;
  spacing: 3px;
  font-size: 0.9em;
  color: $header-text-color;  
}
.site-nav{
  flex-grow: 2;
  ul{
    display: flex;
    align-items: flex-start;
    list-style:none;
    margin: 0;
    padding: 0;

  }
  a {
    text-transform: uppercase;
    text-decoration: none;
    padding: 20px;
    display: inline-block;
    color: lighten($header-text-color,40%);
  }
  a:hover{
    background: darken($bg-color,20%);
  }

  .active{
    a {
      font-weight: bold;
      background: darken($bg-color,40%);
    }
  }
}
.actions{
  text-align: right;
  margin-left: auto;
  margin-right: 10px;
  ul {
    list-style: none;
    display: flex;  
    align-items: flex-start;
    margin: 0;
    padding:0;
  }
  a {
    text-transform: uppercase;
    text-decoration: none;
    padding: 20px;
    display: inline-block;
    color: lighten($header-text-color,40%);
  }
  a:hover{
    background: darken($bg-color,10%);
  }

}
.app {
  display: flex;
  color: $text-color;

}
.appnav  {
  a {
    text-transform: uppercase;
    text-decoration: none;
    padding: 20px;
    display: inline-block;
    color: lighten($text-color,40%);
  }

}
.dashboard-year {
  font-size: 2rem;
  background: desaturate(lighten($bg-color,25%),50%);
}  
ul.dashboards {
  list-style: none;
  display: flex;  
  align-items: flex-start;
  margin: 0;
  padding:0;
  flex-wrap:wrap;
  align-items: center;
  justify-content: space-between;
}
.graphic {
  min-width: 200px;
  min-height: 200px;
  border: solid black 1px;
}

testing.markdown

testing

A Pen by James Marca on CodePen.

License.