Tailwind: Use Tailwind font sizes for headings

codesquadhud · Mar 12, 2021 · 03412cb · 03412cb
1 parent 1c80d1e
commit 03412cb
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 52 deletions.
diff --git a/assets/css/components/global.css b/assets/css/components/global.css
@@ -7,8 +7,6 @@ html {
 
 body {
     color: color(var(--color-base) l(+20%));
-    font-size: 0.9375rem;
-    line-height: 1.6em;
 }
 
 label {
@@ -53,56 +51,6 @@ a[class]:hover {
     transition: 0.2s ease;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    line-height: 2.15em;
-    font-weight: 700;
-}
-
-h1 {
-    font-size: 2.875rem;
-    letter-spacing: -0.5px;
-}
-@media (max-width: 500px) {
-    h1 {
-        font-size: 1.6875rem;
-    }
-}
-
-h2 {
-    font-size: 2.25rem;
-}
-@media (max-width: 500px) {
-    h2 {
-        font-size: 1.375rem;
-    }
-}
-
-h3 {
-    font-size: 2rem;
-}
-@media (max-width: 500px) {
-    h3 {
-        font-size: 1.125rem;
-    }
-}
-
-h4 {
-    font-size: 1.625rem;
-}
-
-h5 {
-    font-size: 1.5rem;
-}
-
-h6 {
-    font-size: 1.375rem;
-}
-
 /* Remove all animations and transitions for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
     * {

diff --git a/assets/css/main.css b/assets/css/main.css
@@ -14,3 +14,21 @@
 @import "ghost/readmore.css";
 @import "ghost/errors.css";
 @import "ghost/footer.css";
+
+@layer base {
+    h1, h2, h3, h4, h5, h6 {
+        @apply font-bold;
+    }
+    h1 {
+        @apply text-5xl;
+    }
+    h2 {
+        @apply text-4xl;
+    }
+    h3 {
+        @apply text-3xl;
+    }
+    h4, h5, h6 {
+        @apply text-2xl;
+    }
+}