Responsiveness, first pass

.vuepress/scss/pages/_home.scss

@@ -10,13 +10,16 @@
   }
 
   h2 {
-    font-size: 1.75rem;
     font-weight: 400;
     margin-bottom: 4rem;
-  }
 
-  h3 {
+    @media (min-width: 851px) {
-    font-size: 1.5rem;
+      font-size: 1.75rem;
+    }
+
+    @media (max-width: 850px) {
+      font-size: 1.25rem;
+    }
   }
 
   hr {
@@ -37,6 +40,10 @@
     height: calc(50vh - 4rem);
     justify-content: center;
 
+    @media (max-width: 850px) {
+      background-size: cover;
+    }
+
     h2 {
       background-color: $white;
       border: 1px solid rgba($black, 0.1);
@@ -49,12 +56,19 @@
 
   &.alert {
     background-color: $yellow;
-    font-size: 1rem;
     line-height: 1.33;
     padding-top: 1rem;
     padding-bottom: 1rem;
     text-align: center;
 
+    @media (min-width: 901px) {
+      font-size: 1rem;
+    }
+
+    @media (max-width: 900px) {
+      font-size: 0.8rem;
+    }
+
     a {
       font-weight: 600;
     }
@@ -75,7 +89,22 @@
       position: relative;
       text-align: center;
       vertical-align: top;
-      width: 50%;
+
+      @media (min-width: 651px) {
+        width: 50%;
+      }
+
+      @media (max-width: 650px) {
+        width: 100%;
+
+        &:first-of-type {
+          padding-bottom: 1rem;
+        }
+
+        &:last-of-type {
+          padding-top: 1rem;
+        }
+      }
     }
 
 
@@ -114,22 +143,46 @@
     }
 
     h3 {
-      top: -0.85rem; left: -2rem;
-
-      color: rgba($black, 0.045);
-      font-size: 4rem;
       letter-spacing: 0.1rem;
       line-height: 1;
-      position: absolute;
       text-transform: uppercase;
+
+      @media (min-width: 1301px) {
+        top: -0.85rem; left: -2rem;
+
+        color: rgba($black, 0.045);
+        font-size: 4rem;
+        position: absolute;
+      }
+
+      @media (max-width: 1300px) {
+        color: $black;
+      }
+
+      @media (min-width: 901px) and (max-width: 1300px) {
+        font-size: 3rem;
+      }
+
+      @media (max-width: 900px) {
+        font-size: 2rem;
+        margin-bottom: 1rem;
+      }
     }
 
     p {
-      font-size: 1.5rem;
-      line-height: 1.55;
       margin-bottom: 1.5rem;
       max-width: 1000px;
 
+      @media (min-width: 901px) {
+        font-size: 1.5rem;
+        line-height: 1.55;
+      }
+
+      @media (max-width: 900px) {
+        font-size: 1.25rem;
+        line-height: 1.33;
+      }
+
       &:first-of-type {
         padding-top: 0.5rem;
       }
@@ -148,11 +201,14 @@
     border-bottom: 1px solid rgba($black, 0.05);
   }
 
-  &.community {
+  &.community,
+  &.contribute {
     p {
-      margin-right: auto;
+      @media (min-width: 1301px) {
-      margin-left: auto;
+        margin-right: auto;
-      text-align: center;
+        margin-left: auto;
+        text-align: center;
+      }
     }
 
     ul {
@@ -163,30 +219,44 @@
         @include clearfix;
       }
 
+      @media (min-width: 901px) {
+        font-size: 1.5rem;
+      }
+
+      @media (min-width: 751px) and (max-width: 900px) {
+        font-size: 1.25rem;
+      }
+
+      @media (max-width: 750px) {
+        font-size: 1rem;
+      }
+
       li {
         float: left;
-        font-size: 1.5rem;
-        padding-top: 5rem;
         position: relative;
         text-align: center;
-        width: calc(100% / 3);
 
-        &::before {
+        @media (max-width: 750px) {
-          width: 100%; height: 100%;
+          margin-bottom: 2rem;
-          top: 0; left: 0;
+          min-width: 8rem;
-
-          background-position: center 0;
-          background-repeat: no-repeat;
-          background-size: 5rem;
-          content: "";
-          position: absolute;
         }
 
         a {
           display: block;
           position: relative;
+          padding-top: 4rem;
           transition: color 0.2s;
 
+          &::before {
+            width: 100%; height: 100%;
+
+            background-position: center 0;
+            background-repeat: no-repeat;
+            content: "";
+            left: 0;
+            position: absolute;
+          }
+
           &:not(:hover) {
             color: inherit;
           }
@@ -195,90 +265,79 @@
             color: $teal;
           }
         }
-
-        &:nth-child(1)::before {
-          background-image: url("../media/svg/discord.svg");
-        }
-
-        &:nth-child(2)::before {
-          background-image: url("../media/svg/reddit.svg");
-        }
-
-        &:nth-child(3)::before {
-          background-image: url("../media/svg/slack.svg");
-        }
       }
     }
   }
 
   &.contribute {
-    p {
-      margin-right: auto;
-      margin-left: auto;
-      text-align: center;
-    }
-
     ul {
-      list-style-type: none;
-      padding-top: 1rem;
-
-      &::after {
-        @include clearfix;
-      }
-
       li {
-        float: left;
-        font-size: 1.5rem;
-        padding-top: 4rem;
-        position: relative;
-        text-align: center;
         width: calc(100% / 5);
 
-        &::before {
+        a::before {
-          width: 100%; height: 100%;
+          @media (min-width: 901px) {
-          top: 0; left: 0;
+            background-size: 4rem;
-
+            top: -1rem;
-          background-position: center 0;
-          background-repeat: no-repeat;
-          background-size: 3rem;
-          content: "";
-          position: absolute;
-        }
-
-        a {
-          display: block;
-          position: relative;
-          transition: color 0.2s;
-
-          &:not(:hover) {
-            color: inherit;
           }
 
-          &:hover {
+          @media (max-width: 900px) {
-            color: $teal;
+            background-size: 3rem;
+            top: 0;
           }
         }
 
-        &:nth-child(1)::before {
+        &:nth-child(1) a::before {
           background-image: url("../media/svg/flag.svg");
         }
 
-        &:nth-child(2)::before {
+        &:nth-child(2) a::before {
           background-image: url("../media/svg/keyboard.svg");
         }
 
-        &:nth-child(3)::before {
+        &:nth-child(3) a::before {
           background-image: url("../media/svg/anchor.svg");
         }
 
-        &:nth-child(4)::before {
+        &:nth-child(4) a::before {
           background-image: url("../media/svg/chat.svg");
         }
 
-        &:nth-child(5)::before {
+        &:nth-child(5) a::before {
           background-image: url("../media/svg/monitor.svg");
         }
       }
     }
   }
+
+  &.community {
+    ul {
+      li {
+        width: calc(100% / 3);
+
+        a::before {
+          @media (min-width: 901px) {
+            background-size: 6rem;
+            top: -2rem;
+          }
+
+          @media (max-width: 900px) {
+            background-size: 4rem;
+            top: -0.5rem;
+          }
+        }
+
+        &:nth-child(1) a::before {
+          background-image: url("../media/svg/discord.svg");
+        }
+
+        &:nth-child(2) a::before {
+          background-image: url("../media/svg/reddit.svg");
+        }
+
+        &:nth-child(3) a::before {
+          background-image: url("../media/svg/slack.svg");
+        }
+      }
+    }
+  }
 }

.vuepress/scss/partials/_footer.scss

@@ -2,18 +2,41 @@
   background-color: $black;
   color: rgba($white, 0.15);
   font-size: 1rem;
-  padding-top: 2rem;
+
-  padding-bottom: 2rem;
+  > div:first-of-type {
+    @media (max-width: 900px) {
+      overflow: auto;
+      overflow-scrolling: touch;
+      white-space: nowrap;
+      width: 102%;
+    }
+  }
 
   ul {
-    align-items: stretch;
-    display: flex;
-    flex-flow: row wrap;
     list-style-type: none;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+
+    @media (min-width: 901px) {
+      align-items: stretch;
+      display: flex;
+      flex-flow: row wrap;
+    }
 
     li {
       padding-right: 0.5rem;
       padding-left: 0.5rem;
+      vertical-align: bottom;
+
+      @media (max-width: 900px) {
+        display: inline-block;
+        transform: translate3d(0, 0, 0);
+        transition: opacity 0.2s 0.2s ease, transform 0.4s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
+
+        &:last-of-type {
+          margin-right: 3rem;
+        }
+      }
 
       &:first-of-type {
         flex: 1;

.vuepress/scss/partials/_navigation.scss

@@ -8,9 +8,30 @@
   z-index: 10;
 
   > div:first-of-type {
-    align-items: stretch;
+    position: relative;
-    display: flex;
+
-    flex-flow: row wrap;
+    @media (min-width: 701px) {
+      align-items: stretch;
+      display: flex;
+      flex-flow: row wrap;
+    }
+
+    @media (max-width: 700px) {
+      overflow: auto;
+      overflow-scrolling: touch;
+      white-space: nowrap;
+      width: 102%;
+
+      &::before {
+        width: 2rem; height: 4rem;
+        top: 0; right: 0;
+
+        background-image: linear-gradient(90deg, rgba($white, 0), $white 50%, $white); // iOS Safari cannot handle `transparent`
+        content: "";
+        position: fixed;
+        z-index: 2;
+      }
+    }
   }
 }
 
@@ -20,6 +41,17 @@
   padding-left: 0.5rem;
   position: relative;
 
+  @media (max-width: 700px) {
+    display: inline-block;
+    transform: translate3d(0, 0, 0);
+    transition: opacity 0.2s 0.2s ease, transform 0.4s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
+    vertical-align: top;
+
+    &:last-of-type {
+      margin-right: 3rem;
+    }
+  }
+
   &:first-of-type {
     @include hide-text;
     width: 10rem; height: 3rem;