Update page styles

style.scss

@@ -1,13 +1,21 @@
 ---
 ---
+$color-accent: #0090FF;
+
 /* Mixins */
 
-@mixin for-tablet-up {
+@mixin for-tablet-portrait-up {
   @media (min-width: 640px) {
     @content;
   }
 }
 
+@mixin for-tablet-landscape-up {
+  @media (min-width: 900px) {
+    @content;
+   }
+}
+
 /* General */
 
 html {
@@ -22,6 +30,7 @@ body {
   margin: 0;
   font-family: "Rubik", sans-serif;
   -webkit-font-smoothing: antialiased;
+  color: rgba(black, 0.9);
 }
 
 a {
@@ -45,25 +54,33 @@ a {
   display: inline-block;
   padding: 1rem 1.5rem;
   border-radius: 0.375rem;
-  border: 1px solid transparent;
+  transition: background-color 150ms, box-shadow 150ms;
 }
 
 .button-primary {
   color: white;
-  background-color: black;
+  background-color: $color-accent;
+
+  &:hover {
+    background-color: mix(black, $color-accent, 10%);
+  }
 }
 
 .button-secondary {
-  border-color: black;
+  color: $color-accent;
+  box-shadow: inset 0 0 0 1px rgba($color-accent, 0.25);
+
+  &:hover {
+  box-shadow: inset 0 0 0 1px rgba($color-accent, 0.5);
+  }
 }
 
 /* Header */
 
 .header {
-  border-bottom: 1px solid black;
   text-align: center;
 
-  @include for-tablet-up {
+  @include for-tablet-portrait-up {
     text-align: left;
   }
 }
@@ -73,7 +90,7 @@ a {
   flex-direction: column;
   justify-content: space-between;
 
-  @include for-tablet-up {
+  @include for-tablet-portrait-up {
     flex-direction: row;
     align-items: center;
   }
@@ -87,6 +104,7 @@ a {
 
 .description {
   margin: 0;
+  color: rgba(black, 0.5);
 }
 
 .header-button-group {
@@ -94,7 +112,7 @@ a {
   flex-direction: column;
   margin-top: 4rem;
 
-  @include for-tablet-up {
+  @include for-tablet-portrait-up {
     flex-direction: row-reverse;
     margin-top: 0;
 
@@ -106,7 +124,7 @@ a {
   .button + .button {
     margin-top: 1rem;
 
-    @include for-tablet-up {
+    @include for-tablet-portrait-up {
       margin-top: 0;
     }
   }
@@ -114,6 +132,11 @@ a {
 
 /* Icons */
 
+.icons {
+  padding: 3rem 0;
+  background: #f5f5f5;
+}
+
 .icons-container {
   display: flex;
   flex-wrap: wrap;
@@ -137,10 +160,6 @@ a {
 
 /* Request */
 
-.request {
-  background-color: lightgray;
-}
-
 .request-container {
   display: flex;
   flex-direction: column;
@@ -154,3 +173,94 @@ a {
   text-align: center;
 }
 
+/* Footer */
+
+.footer {
+  background-color: #212121;
+  color: white;
+  padding: 1rem 0;
+
+  @include for-tablet-portrait-up {
+    padding: 4rem 0;
+  }
+}
+
+.footer a {
+  @include for-tablet-landscape-up {
+    padding: 0 0 0.25rem;
+    border-bottom: 1px solid transparent;
+    transition: border-color 150ms;
+
+    &:hover {
+      border-color: rgba(white, 0.5);
+    }
+  }
+}
+
+.footer-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.footer-main {
+  display: flex;
+  flex-direction: column;
+
+   @include for-tablet-landscape-up {
+     flex-direction: row-reverse;
+     justify-content: space-between;
+     margin-bottom: 0.75rem;
+   }
+}
+
+.footer-links {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+
+  @include for-tablet-landscape-up {
+    flex-direction: row;
+  }
+}
+
+.footer-link {
+  border-bottom: 1px solid rgba(white, 0.15);
+
+  @include for-tablet-landscape-up {
+    border-bottom: none;
+    margin-left: 2rem;
+  }
+
+  a {
+    display: inline-block;
+    width: 100%;
+    padding: 1rem 0;
+
+    @include for-tablet-landscape-up {
+      padding: 0.25rem 0;
+    }
+  }
+}
+
+.made-with-love {
+  margin: 2rem 0 1rem;
+  text-align: center;
+
+  @include for-tablet-landscape-up {
+    margin: 0;
+  }
+}
+
+.icon-count {
+  margin: 0 0 1rem;
+  font-size: 0.875rem;
+  text-align: center;
+  color: rgba(white, 0.5);
+
+  @include for-tablet-landscape-up {
+    align-self: flex-start;
+    margin: 0;
+  }
+}