Add main navigation bar

Make donations and invitations accessible to everyone

app/assets/stylesheets/layout.scss

@@ -1,11 +1,6 @@
+@import "variables";
 @import "mediaqueries";
 
-$content-width: 800px;
-$content-max-width: 100%;
-
-body {
-}
-
 #wrapper {
   width: 100%;
   text-align: center;
@@ -14,8 +9,8 @@ body {
     margin: 0 auto;
     padding: 4rem 0;
     text-align: center;
-    background: #0d4f99;
-    background: linear-gradient(35deg, #8955a0 0, #0d4f99 100%);
+    background: $color-blue;
+    background: linear-gradient(35deg, $color-purple 0, $color-blue 100%);
 
     @include media-max(small) {
       padding: 3rem 0;
@@ -77,18 +72,18 @@ body {
   padding: 2rem 0;
 
   &.notice {
-    background: #efffc4;
+    background: $background-color-notice;
   }
 
   &.alert {
-    background: #fff4c2;
+    background: $background-color-alert;
   }
 }
 
 main {
   width: $content-width;
   max-width: $content-max-width;
-  margin: 4rem auto;
+  margin: 4rem auto 6rem auto;
   text-align: left;
 
   @include media-max(medium) {
@@ -135,8 +130,8 @@ main {
 
   section {
     border-bottom: 1px dotted #ccc;
-    padding-bottom: 4rem;
-    margin-bottom: 4rem;
+    padding-bottom: 3rem;
+    margin-bottom: 3rem;
 
     @include media-max(small) {
       padding-bottom: 3rem;
@@ -169,7 +164,7 @@ main {
 
     .grid-item {
       p {
-        color: #888;
+        color: $text-color-discreet;
         font-size: 0.85rem;
       }
     }