Add main navigation bar

Make donations and invitations accessible to everyone

app/assets/stylesheets/_variables.scss

@@ -0,0 +1,10 @@
+$content-width: 800px;
+$content-max-width: 100%;
+
+$text-color-body: #222;
+$text-color-discreet: #888;
+
+$background-color-notice: #efffc4;
+$background-color-alert: #fff4c2;
+$color-blue: #0d4f99;
+$color-purple: #8955a0;

app/assets/stylesheets/fonts.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 @font-face {
   font-family: 'Raleway';
   src: url('/fonts/raleway-light.woff') format('woff2');
@@ -8,6 +10,7 @@
 body {
   font-family: "Open Sans", Helvetica, Arial, sans-serif;
   font-weight: 400;
+  color: $text-color-body;
 }
 
 h1, h2, h3 {

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;
       }
     }

app/assets/stylesheets/main_nav.scss

@@ -0,0 +1,31 @@
+@import "variables";
+
+#main-nav {
+  width: 100%;
+  text-align: center;
+  background-color: #efefef;
+
+  .wrapper {
+    width: $content-width;
+    max-width: $content-max-width;
+    margin: 0 auto;
+  }
+
+  ul {
+    li {
+      display: inline;
+
+      a {
+        display: inline-block;
+        padding: 1.5rem;
+        text-decoration: none;
+        color: $text-color-discreet;
+
+        &.active {
+          color: $text-color-body;
+          border-bottom: 2px solid #ffd000;
+        }
+      }
+    }
+  }
+}