styling it up

app/assets/stylesheets/atoms/buttons.scss

@@ -1,7 +1,7 @@
 .btn {
   cursor: pointer;
   display: inline-block;
-  padding: 5px;
+  text-decoration: none;
 
   &:hover {
     color: $grey;

app/assets/stylesheets/grid.scss

@@ -0,0 +1,8 @@
+$gutter: 15px;
+$gutter-full: $gutter * 2;
+
+body {
+  margin: $gutter auto;
+  padding: 0 $gutter;
+}
+

app/assets/stylesheets/main.scss

@@ -8,11 +8,17 @@ $red:   #b10001;
 $taupe: #f2e8df;
 $white: #fff;
 
+$copy: $dark;
+$hover-copy: $light;
+$hover-background: $dark;
+
 @import 'mixins';
 @import 'reset';
+@import 'grid';
 
 @import 'atoms/buttons';
 
+@import 'molecules/lists';
 @import 'molecules/nav';
 
 @import 'organisms/alerts';

app/assets/stylesheets/mixins.scss

@@ -1,19 +1,25 @@
-@mixin inline-ul {
-  display: inline-block;
+@mixin clean-ul {
   list-style: none;
   margin: 0;
   padding: 0;
 
   li {
-    display: inline-block;
-    float: left;
     margin: 0;
     padding: 0;
 
     a {
       display: inline-block;
-      padding: 15px;
       text-decoration: none;
     }
   }
 }
+
+@mixin inline-ul {
+  @include clean-ul;
+  display: inline-block;
+
+  li {
+    display: inline-block;
+    float: left;
+  }
+}

app/assets/stylesheets/molecules/lists.scss

@@ -0,0 +1,35 @@
+.index {
+  @include clean-ul;
+  border-bottom: 1px solid $grey;
+  margin: 0 0 $gutter;
+  padding-bottom: $gutter / 2;
+  &:last-of-type { border-bottom: 0; }
+
+  li {
+    line-height: 1.8em;
+
+    .btn {
+      margin-left: $gutter / 2;
+      padding: 0 5px;
+    }
+
+    a {
+      color: $dark;
+      text-decoration: underline;
+      &:visited { color: $copy; }
+
+      &:hover,
+      &:active {
+        color: $hover-copy;
+      }
+    }
+  }
+
+  .name {
+    font-size: 1.2em;
+    text-transform: capitalize;
+    .btn { font-size: 1rem; }
+  }
+
+  ul { margin-left: $gutter; }
+}

app/assets/stylesheets/molecules/nav.scss

@@ -6,16 +6,22 @@
   width: calc(100% + 30px);
 
   li {
-    &:hover {
+    border-bottom: 1px solid $black;
+    border-right: 1px solid $black;
+
+    &:hover,
+    &:active {
       background-color: $grey;
     }
 
     a {
       color: $light;
+      padding: 15px;
     }
 
     &.active {
       background-color: $taupe;
+      border-bottom: 1px solid $taupe;
 
       a {
         color: $dark;
@@ -27,10 +33,11 @@
 
 .sub-nav {
   @include inline-ul;
-  margin: -19px -15px 0;
+  margin: -20px -15px 0;
 
   a {
     color: $dark;
+    padding: 15px;
 
     &:hover {
       background-color: $light;

app/assets/stylesheets/organisms/forms.scss

@@ -1,11 +1,6 @@
 form {
   width: 100%;
 
-  * {
-    font-size: 14px;
-    line-height: 1.6em;
-  }
-
   label {
     display: inline-block;
     margin: 0.6em 0 0;
@@ -18,6 +13,8 @@ form {
 
   input {
     display: block;
+    font-size: 14px;
+    line-height: 1.6em;
     margin: 0 0 0.6em;
     padding: 5px;
   }
@@ -33,4 +30,8 @@ form {
     width: calc(100% - 30px);
   }
 
+  fieldset {
+    margin: 15px;
+    border: 0;
+  }
 }

app/assets/stylesheets/reset.scss

@@ -1,11 +1,7 @@
 html {
   background-color: $taupe;
   color: $dark;
+  font-size: 18px;
   margin: 0;
   padding: 0;
 }
-
-body {
-  margin: 15px;
-  padding: 0;
-}