Use rem units for responsive font sizes.

Lullabot · Jul 23, 2024 · fdcc3d0 · fdcc3d0
1 parent 76a40a3
commit fdcc3d0
Showing 1 changed file with 15 additions and 15 deletions.
diff --git a/src/sass/styles.scss b/src/sass/styles.scss
@@ -17,7 +17,7 @@ body {
 
 main {
   font-family: 'Circular', verdana, sans-serif;
-  font-size: 20px;
+  font-size: 1.25rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -45,7 +45,7 @@ main {
     div {
       transform: rotate(-90deg);
       font-family: verdana, sans-serif;
-      font-size: 1.25em;
+      font-size: 1.25rem;
     }
   }
 }
@@ -89,7 +89,7 @@ main {
   justify-content: center;
   font-family: 'IBMPlexMono';
   border-top: 1px solid $lb-gray;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 400;
   line-height: 16px;
   letter-spacing: 0.1em;
@@ -133,13 +133,13 @@ main {
 
   > p {
     text-transform: uppercase;
-    font-size: 16px;
+    font-size: 1rem;
     color: $lb-ocean;
   }
 
 
   h1 {
-    font-size: 104px;
+    font-size: 6.5rem;
     line-height: 112px;
     font-weight: 700;
   }
@@ -152,7 +152,7 @@ div.get-started {
     text-decoration: none;
     color: $lb-black;
     text-transform: uppercase;
-    font-size: 14px;
+    font-size: 0.875rem;
     font-weight: 500;
     line-height: 16px;
     letter-spacing: 1.4px;
@@ -199,7 +199,7 @@ div.get-started {
   background-color: #fff;
   color: $lb-black;
   padding: 7em;
-  font-size: 1.25em;
+  font-size: 1.25rem;
 }
 
 .toc-container {
@@ -210,7 +210,7 @@ div.get-started {
   > p {
     text-transform: uppercase;
     margin-bottom: 2em; 
-    font-size: 16px;
+    font-size: 1rem;
     font-weight: 500;
     line-height: 24px;
     letter-spacing: 0.1em;
@@ -229,7 +229,7 @@ div.get-started {
   }
 
   .chapter-item {
-    font-size: 1.25em;
+    font-size: 1.25rem;
     font-weight: 700;
     margin-bottom: 2em; 
     color: $lb-black;
@@ -261,14 +261,14 @@ div.get-started {
 
 p {
   .chapter {
-    font-size: 1.25em;
+    font-size: 1.25rem;
     font-weight: 700;
     margin-bottom: 2em; 
     color: $lb-red;
   }
 
   .title {
-    font-size: 2em;
+    font-size: 2rem;
     font-weight: 700;
     margin-bottom: 2em; 
     color: $lb-black;
@@ -293,18 +293,18 @@ p {
     }
 
     .ebook-chapter-title {
-      font-size: 28px;
+      font-size: 1.75rem;
       font-weight: bold;
     }
   }
 
   .ebook-copy {
     .ebook-chapter-title {
-      font-size: 28px;
+      font-size: 1.75rem;
       font-weight: bold;
     }
     .copy-paragraph {
-      font-size: 20px;
+      font-size: 1.25rem;
       line-height: 2;
       padding: 0;
     }
@@ -337,7 +337,7 @@ p {
 
 
     h1 {
-      font-size: 2em;
+      font-size: 2rem;
     }
   }
   .cover-copy {