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:

app/styles/app.scss

@@ -98,6 +98,7 @@ section {
 @import "components/contributor-profile";
 @import "components/expense-list";
 @import "components/external-account-link";
+@import "components/main-navigation-menu";
 @import "components/loading-spinner";
 @import "components/reimbursement-list";
 @import "components/topbar";

app/styles/components/_main-navigation-menu.scss

@@ -0,0 +1,30 @@
+nav#main-menu {
+  padding: 2rem;
+  background-color: rgba(0,0,0,.2);
+
+  ul {
+    list-style: none;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 3rem;
+    font-size: 1.5rem;
+
+    @include media-max(small) {
+      justify-content: center;
+      font-size: 1.2rem;
+    }
+  }
+
+  li {
+    a {
+      text-decoration: none;
+      color: #fff;
+
+      &.active, &:hover {
+        color: $yellow;
+      }
+    }
+  }
+}

app/styles/components/_topbar.scss

@@ -13,6 +13,7 @@
   h1 {
     display: inline-block;
     text-transform: uppercase;
+    font-weight: bold;
 
     a {
       color: inherit;