feat: additional styling

src/css/_buttons.scss

@@ -0,0 +1,25 @@
+
+.btn {
+  display: inline-block;
+  padding: 1rem 2rem;
+  border-radius: $border-radius;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.btn-primary {
+  background-color: var(--brand-primary);
+  color: var(--white);
+  font-size: 1.5rem;
+
+  &:hover {
+    background-color: darken($brand-primary, 5%);
+  }
+
+  @media screen and (min-width: $lg-min) {
+    font-size: 2rem;
+  }
+
+}

src/css/_layout.scss

@@ -3,11 +3,6 @@
 body {
   margin: 0;
   padding: 0;
-  font-size: 1rem;
-  line-height: 1.25;
-  font-family: NotoSans-Regular, Helvetica, Arial, sans-serif;
-  color: var(--text-color);
-  background-color: var(--bg-color);
   overflow-x: hidden;
   hyphens: auto;
 }
@@ -49,3 +44,12 @@ main {
     margin: 0 auto;
   }
 }
+
+.cta {
+  text-align: center;
+  margin: 4rem auto;
+}
+
+footer {
+  margin: 4rem 0;
+}

src/css/_typography.scss

@@ -1,18 +1,44 @@
 @import "variables";
 
+body {
+  font-size: 1rem;
+  line-height: 1.25;
+  font-family: NotoSans-Regular, Helvetica, Arial, sans-serif;
+  color: var(--text-color);
+  background-color: var(--bg-color);
+}
+
 h1 {
+  font-size: 1.5rem;
   color: var(--brand-primary);
   @media screen and (min-width: $lg-min) {
+    font-size: 2rem;
     hyphens: none;
   }
 }
 
+h2 {
+  font-size: 1.25rem;
+  color: var(--brand-secondary);
+  @media screen and (min-width: $lg-min) {
+    font-size: 1.5rem;
+  }
+}
+
+h3 {
+  font-size: 1rem;
+  color: var(--brand-secondary);
+  @media screen and (min-width: $lg-min) {
+    font-size: 1.25rem;
+  }
+}
+
 .lead {
   @media screen and (min-width: $sm-min) {
     font-size: 1.5rem;
   }
   @media screen and (min-width: $xl-min) {
-    font-size: 2rem;
+    font-size: 1.75rem;
     hyphens: none;
   }
 }

src/css/_variables.scss

@@ -24,6 +24,8 @@
   }
 }
 
+$brand-primary: #D51130;
+
 // styling
 $border-radius: 5px;
 $box-shadow: 10px;

src/css/app.scss

@@ -1,8 +1,9 @@
 @import "./variables";
 @import "./fonts";
 @import "./layout";
+@import "./typography";
 @import "./hero";
 @import "./grid";
-@import "./typography";
+@import "./buttons";
 @import "./utility";