refactor(typography): merge modern typography into base

Author: sarmstead

src/css/app.css

@@ -20,7 +20,6 @@
 /* /1* Pages *1/ */
 @import './pages/post.css';
 @import './pages/home.css';
-@import './pages/support.css';
 @import './pages/conferences.css';
 
 @import './modern.css';

src/css/base/typography.css

@@ -5,6 +5,7 @@ body {
     color: var(--text);
     font-family: 'Inter', sans-serif;
     font-size: 1rem;
+    line-height: 1.4rem;
 }
 
 h1,
@@ -14,23 +15,33 @@ h4,
 h5,
 h6 {
     font-family: 'Rubik', sans-serif;
+    line-height: normal;
     margin: 0;
     text-align: left;
 }
 
+p {
+    margin: 0;
+}
+
 h2 {
     font-size: 2rem;
     font-weight: 700;
     line-height: normal;
-    margin-bottom: 16px;
 }
 
 h3 {
-    font-size: 1.5rem;
+    font-size: 1.125rem;
     font-weight: 500;
     line-height: 2.25rem;
 }
 
+h6 {
+    font-size: 1.125rem;
+    font-weight: 300;
+    font-style: italic;
+}
+
 a {
     box-shadow: inset 0 -2px 0 var(--yellow);
     color: inherit;
@@ -44,12 +55,29 @@ a:hover {
 }
 
 @media (min-width: 834px) {
+    h1 {
+        font-size: 2.625rem;
+    }
+
     h2 {
-        font-size: 4.5rem;
+        font-size: 2rem;
     }
 
     h3 {
-        font-size: 2.625rem;
-        line-height: 3rem;
+        font-size: 1.625rem;
+    }
+}
+
+@media (min-width: 1440px) {
+    h1 {
+        font-size: 4.5rem;
+    }
+
+    h2 {
+        font-size: 3rem;
+    }
+
+    p {
+        font-size: 1.125rem;
     }
 }

src/css/components/sponsors.css

@@ -3,6 +3,7 @@
     box-shadow: 0px 4px 13px 0px rgba(167, 167, 167, 0.3);
     border-radius: 0 0 12px 12px;
     padding: 0;
+    margin: 30px 0;
 
     .sponsors__title {
         background-color: var(--red);

src/css/modern.css

@@ -3,14 +3,9 @@
         padding: 2.5rem;
         padding-top: 0;
     }
-
-    h1 {
-        text-transform: uppercase;
-    }
     h1,
     h2,
     h3 {
-        font-family: Rubik;
         margin-bottom: 1rem;
         column-span: all !important;
         > a {
@@ -19,7 +14,6 @@
     }
     h1,
     h2 {
-        font-weight: bold;
         position: relative;
         padding-bottom: 0.75rem;
 
@@ -34,42 +28,8 @@
             width: 70px;
         }
     }
-    h3 {
-        font-size: 18px !important;
-    }
-    h6 {
-        font-size: 18px;
-        font-family: 'Inter var', sans-serif;
-        font-weight: 300;
-        font-style: italic;
-    }
-    @media (min-width: 700px) {
-        h1 {
-            font-size: 42px;
-        }
-        h2 {
-            font-size: 32px;
-        }
-        h3 {
-            font-size: 26px !important;
-        }
-    }
-    @media (min-width: 1350px) {
-        h1 {
-            font-size: 72px;
-        }
-        h2 {
-            font-size: 48px;
-        }
-        p {
-            font-size: 18px;
-        }
-    }
-
-    p,
-    ul {
-        line-height: 1.4rem;
-        font-size: 16px;
+    h1 {
+        text-transform: uppercase;
     }
 
     .mission-and-vision {

src/css/pages/home.css

@@ -42,9 +42,9 @@
     }
 
     .home-template__pillars,
-    .home-template__open-source,
     .home-template__support {
         h2 {
+            margin-bottom: 16px;
             text-transform: uppercase;
         }
     }
@@ -196,6 +196,10 @@
         margin: auto;
         max-width: 900px;
         padding: 70px 40px;
+
+        h2 {
+            text-transform: uppercase;
+        }
     }
 
     .home-template__open-source__content {
@@ -412,7 +416,7 @@
         }
 
         .home-template__support {
-            padding: 96px 0;
+            padding: 96px 0 66px;
         }
     }
 }