Add misc mobile and desktop component styles.

Author: Jesse Borden

assets/stylesheets/new-stylesheets/includes/footer/_base.scss

@@ -12,11 +12,13 @@
 }
 
 footer.global-footer {
-  background-color: #1E162E;
+  background-color: #1e162e;
   padding: 20px;
   text-align: center;
   padding: 6rem 3rem 3rem 3.5em;
   color: rgb(235, 236, 240);
+  position: relative;
+  z-index: 2;
 
   .container {
     max-width: 980px;
@@ -31,22 +33,22 @@ footer.global-footer {
 
     .notes {
       .logo {
-          display: flex;
-          width: 116px;
+        display: flex;
+        width: 116px;
 
-          svg {
-            flex: 1;
-          }
+        svg {
+          flex: 1;
+        }
 
-          #logotype {
-            fill: #ebecf0;
-          }
+        #logotype {
+          fill: #ebecf0;
+        }
       }
     }
 
     h3 {
       margin-bottom: 15px;
-      color: #FCA76C;
+      color: #fca76c;
       font-size: 1.17em;
       line-height: 1.2;
       font-weight: bold;
@@ -127,7 +129,7 @@ footer.global-footer {
         }
 
         input:checked + .color-scheme-toggle-label {
-          background: #FCA76C;
+          background: #fca76c;
           color: #1e162e;
         }
       }
@@ -141,20 +143,19 @@ footer.global-footer {
     align-items: flex-end;
     color: #d1d2d4;
 
-
     nav {
       display: inline-block;
 
-        ul {
-          list-style: none;
-          padding: 0;
-          margin: 0;
-          display: inline-flex;
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: inline-flex;
 
-          a {
-            color: #d1d2d4;
-          }
+        a {
+          color: #d1d2d4;
         }
+      }
     }
 
     .legals {
@@ -165,7 +166,9 @@ footer.global-footer {
         margin-bottom: 1.5em;
         line-height: 1.5em;
 
-        p { margin: 0; }
+        p {
+          margin: 0;
+        }
 
         a {
           color: #d1d2d4;
@@ -177,7 +180,7 @@ footer.global-footer {
           margin-right: 1.75em;
 
           a {
-            padding: .35em 0;
+            padding: 0.35em 0;
             border-bottom: 1px solid transparent;
 
             &:hover {
@@ -202,24 +205,24 @@ footer.global-footer {
           &.github {
             @include icon-style($icon-github);
           }
-  
+
           &.bluesky {
             @include icon-style($icon-bluesky);
           }
-  
+
           &.feed {
             @include icon-style($icon-feed);
           }
-  
+
           &.mastodon {
             @include icon-style($icon-mastodon);
           }
-  
+
           &.x {
             @include icon-style($icon-x);
           }
         }
       }
     }
   }
-}
+}

assets/stylesheets/new-stylesheets/pages/_get-started.scss

@@ -49,6 +49,11 @@
       margin-bottom: 20px;
       position: relative;
       z-index: 1;
+
+      @media only screen and (max-width: 768px) {
+        font-size: 32px;
+        line-height: 1.33;
+      }
     }
 
     > p {
@@ -71,7 +76,7 @@
       grid-template-columns: repeat(3, 1fr);
       gap: 20px;
 
-      @media only screen and (max-width: 767px) {
+      @media only screen and (max-width: 768px) {
         & {
           grid-template-columns: 1fr;
         }
@@ -137,7 +142,7 @@
 
   .content {
     background-color: white;
-    padding: 53px 50px 40px;
+    padding: 30px 50px 20px;
     max-width: 980px;
     margin: 0 auto;
     z-index: 3;
@@ -150,6 +155,10 @@
       margin: 0 10px;
     }
 
+    @media only screen and (max-width: 768px) {
+      padding: 22px 15px 10px;
+    }
+
     .section-icon {
       width: 60px;
       margin: 40px 0 0;
@@ -159,10 +168,20 @@
       text-align: center;
       font-size: 48px;
       margin-bottom: 52px;
+
+      @media only screen and (max-width: 768px) {
+        font-size: 32px;
+        line-height: 1.33;
+        margin-bottom: 22px;
+      }
     }
 
     a {
       @include link-with-right-arrow();
+
+      @media only screen and (max-width: 768px) {
+        padding-bottom: 15px;
+      }
     }
 
     .primary-cards,
@@ -285,7 +304,8 @@
 
           .name {
             margin-bottom: 6px;
-            font-size: 21px;
+            font-size: 22px;
+            line-height: 1.33;
           }
 
           .text {
@@ -312,6 +332,11 @@
     margin-bottom: 44px;
     width: 100%;
     text-align: center;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 32px;
+      line-height: 1.33;
+    }
   }
 
   .card-wrapper {
@@ -353,7 +378,6 @@
 
     p {
       margin-bottom: 25px;
-      padding-right: 90px;
     }
 
     a {
@@ -441,12 +465,22 @@
       font-size: 22px;
       line-height: 1.2;
       margin-bottom: 5px;
+
+      @media only screen and (max-width: 768px) {
+        font-size: 32px;
+        line-height: 1.33;
+      }
     }
   }
 
   h2 {
     font-size: 48px;
     margin-bottom: 27px;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 32px;
+      line-height: 1.33;
+    }
   }
 
   p,
@@ -518,12 +552,21 @@
     font-size: 48px;
     font-weight: 600;
     margin-bottom: 29px;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 32px;
+      line-height: 1.33;
+    }
   }
 
   p {
     font-size: 17px;
     padding: 0 100px;
     margin-bottom: 45px;
+
+    @media only screen and (max-width: 768px) {
+      padding: 0;
+    }
   }
 
   a {
@@ -550,6 +593,11 @@
     font-size: 48px;
     margin-bottom: 30px;
     line-height: 1.2;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 32px;
+      line-height: 1.33;
+    }
   }
 
   p {
@@ -604,6 +652,11 @@
     font-size: 48px;
     margin-bottom: 30px;
     line-height: 1.2;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 32px;
+      line-height: 1.33;
+    }
   }
 
   p {
@@ -630,6 +683,11 @@
     margin-bottom: 44px;
     width: 100%;
     text-align: center;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 32px;
+      line-height: 1.33;
+    }
   }
 
   .card-wrapper {
@@ -715,6 +773,11 @@
   h2 {
     font-size: 48px;
     margin-bottom: 30px;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 32px;
+      line-height: 1.33;
+    }
   }
 
   p {
@@ -807,6 +870,11 @@
     font-size: 48px;
     margin-bottom: 44px;
     text-align: center;
+
+    @media only screen and (max-width: 768px) {
+      font-size: 32px;
+      line-height: 1.33;
+    }
   }
 
   h3 {