Add main navigation menu, replace intro blurb with full About page

app/styles/_layout.scss

@@ -1,3 +1,7 @@
+body {
+  margin-bottom: 10rem;
+}
+
 main {
   padding: 1rem 2rem;
 
@@ -14,7 +18,7 @@ main {
       "contributions";
   }
 
-  &#budget {
+  &#budget, &#about {
     width: 100%;
     display: grid;
     grid-row-gap: 2rem;
@@ -56,13 +60,12 @@ main {
 
       &.text-lg {
         p {
-          font-size: 1.2rem;
-          margin-bottom: 1em;
-          line-height: 1.5em;
+          font-size: 1.35rem;
+          margin-bottom: 2rem;
+          line-height: 150%;
         }
       }
 
-      // TODO Remove after switch to Tailwind CSS
       &.text-center {
         text-align: center;
       }
@@ -74,40 +77,23 @@ main {
         }
       }
     }
-  }
-}
 
-#intro {
-  padding: 2rem;
-  background-color: rgba(0,0,0,.2);
-  font-size: 1.6rem;
+    &.text {
+      h2 {
+        margin: 4rem 0 2rem 0;
 
-  @include media-max(small) {
-    padding: 2rem 1rem;
-    font-size: 1.5rem;
-  }
+        &:first-of-type {
+          margin-top: 0;
+        }
+      }
 
-  h2 {
-    font-size: inherit;
-    margin-bottom: 1em;
-  }
-
-  p {
-    margin-bottom: 1em;
-    line-height: 1.5em;
-    font-size: 1.2rem;
-
-    &:last-child {
-      margin-bottom: 0;
+      p {
+        font-size: 1.35rem;
+        margin-bottom: 2rem;
+        line-height: 150%;
+      }
     }
-  }
 
-  a {
-    text-decoration: none;
-
-    &:hover, &:active {
-      text-decoration: underline;
-    }
   }
 }
 
@@ -128,7 +114,7 @@ main {
       }
     }
 
-    &#budget {
+    &#budget, &#about {
       grid-column-gap: 3rem;
       grid-template-columns: 2fr 4fr 2fr;
       grid-template-areas: