Begin adding progress bar links

scss/atat.scss

@@ -19,5 +19,6 @@
 @import 'sections/main';
 @import 'sections/topbar';
 @import 'sections/sidenav';
+@import 'sections/progress_menu';
 @import 'sections/footer';
 @import 'sections/login';

scss/sections/_progress_menu.scss

@@ -0,0 +1,48 @@
+.progress-menu {
+  display: table;
+  margin: 0 auto;
+  padding-bottom: $gap * 2;
+
+  ul {
+    list-style: none;
+  }
+
+  &__item {
+    float: left;
+    font-weight: $font-bold;
+
+    a {
+      display: block;
+      padding: $gap ($gap * 2);
+      color: $color-black;
+      text-decoration: none;
+      margin: 0 ($gap * 2);
+
+      &:hover {
+        color: $color-blue;
+      }
+    }
+
+    &:after {
+      display: inline-block;
+      height: 2px;
+      content: "..";
+      color: $color-gray-lightest;
+      text-shadow: none;
+      background-color: $color-gray-light;
+      position: relative;
+      top: -4rem;
+    }
+
+    a:before {
+      content: "o";
+      display: block;
+      text-align: center;
+    }
+
+    &--complete:before {
+
+    }
+
+  }
+}

templates/styleguide.html.to

@@ -26,6 +26,15 @@
 {% block content %}
 
 <div class='col col--grow'>
+
+  <div class="progress-menu">
+  <ul>
+      <li class="progress-menu__item progress-menu__item--complete"><a href="#">Details of Use</a></li>
+      <li class="progress-menu__item progress-menu__item--active"><a href="#">Organization Info</a></li>
+      <li class="progress-menu__item"><a href="#">Primary POC</a></li>
+    </ul>
+  </div>
+
   <div class='panel'>
     <div class='panel__content'>
       <em>This is a panel content</em>