refactor(typography): move typographical styles into dedicated file

* Use home-template typographical styles as new basis

Author: sarmstead

src/css/app.css

@@ -1,4 +1,5 @@
 /* Base */
+@import './base/typography.css';
 @import './base/colors.css';
 
 /* /1* Components *1/ */

src/css/base/typography.css

@@ -0,0 +1,55 @@
+body {
+    color: var(--text);
+    font-family: 'Inter', sans-serif;
+    font-size: 1rem;
+    margin: 0;
+    padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: 'Rubik', sans-serif;
+    margin: 0;
+    text-align: left;
+}
+
+h2 {
+    font-size: 2rem;
+    font-weight: 700;
+    line-height: normal;
+    margin-bottom: 16px;
+    text-transform: uppercase;
+}
+
+h3 {
+    font-size: 1.5rem;
+    font-weight: 500;
+    line-height: 2.25rem;
+}
+
+a {
+    box-shadow: inset 0 -2px 0 var(--yellow);
+    color: inherit;
+    padding-bottom: 1px;
+    text-decoration: none;
+    transition: all 0.15s ease-in-out;
+}
+
+a:hover {
+    box-shadow: inset 0 -2px 0 var(--red);
+}
+
+@media (min-width: 834px) {
+    h2 {
+        font-size: 4.5rem;
+    }
+
+    h3 {
+        font-size: 2.625rem;
+        line-height: 3rem;
+    }
+}

src/css/pages/home.css

@@ -1,44 +1,13 @@
 .home-template {
-    h1,
-    h2,
-    h3 {
-        font-family: 'Rubik', sans-serif;
-        margin: 0;
-        text-align: left;
-    }
-
-    h2 {
-        font-size: 2rem;
-        font-weight: 700;
-        line-height: normal;
-        text-transform: uppercase;
-        margin-bottom: 16px;
-    }
-
-    h3 {
-        font-size: 1.5rem;
-        font-weight: 500;
-        line-height: 2.25rem;
-    }
-
     h3#conferences {
         background: none;
     }
 
-    p {
-        font-family: 'Inter', sans-serif;
-    }
-
     hr {
         border: 3px solid var(--yellow);
         width: 70px;
     }
 
-    section {
-        padding: 0;
-        margin: 0;
-    }
-
     .home-template__hero {
         display: flex;
         flex-direction: column;
@@ -302,15 +271,6 @@
     }
 
     @media (min-width: 834px) {
-        h2 {
-            font-size: 4.5rem;
-        }
-
-        h3 {
-            font-size: 2.625rem;
-            line-height: 3rem;
-        }
-
         .home-template__hero {
             gap: 24px;
             padding: 96px 56px;

src/css/rubycentral.css

@@ -10,52 +10,3 @@
 html {
   scroll-behavior: smooth;
 }
-
-body {
-  margin: 0;
-  padding: 0;
-  font-family: 'Inter', sans-serif;
-  color: var(--text);
-  font-size: 16px;
-}
-
-body p {
-  line-height: 27px;
-  margin: 0 0 27px 0;
-}
-
-body p:last-child {
-  margin: 0;
-}
-
-body a {
-  text-decoration: none;
-  color: inherit;
-  text-decoration: none;
-  padding-bottom: 1px;
-  box-shadow: inset 0 -2px 0 var(--yellow);
-  transition: all .15s ease-in-out;
-}
-
-body a:hover {
-  box-shadow: inset 0 -2px 0 var(--red);
-  transition: all .15s ease-in-out;
-}
-
-h3 {
-  font-size: 24px;
-  font-weight: 600;
-  font-family: 'Rubik';
-  margin: 0 0 5px 0;
-}
-
-@media screen and (max-width: 1200px) and (orientation: portrait),
-(max-width: 1097px) and (orientation: landscape) {
-}
-
-@media screen and (max-width: 900px) and (orientation: portrait),
-(max-width: 823px) and (orientation: landscape) {
-  h3 {
-    font-size: 20px;
-  }
-}