Reduce default font size, better scale responsively

joshforisha · Aug 24, 2022 · 530ea5e · 530ea5e
1 parent 4a69448
commit 530ea5e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/_index.html b/_index.html
@@ -15,7 +15,7 @@
     <link rel="mask-icon" href="./safari-pinned-tab.svg" color="#4C566A" />
     <style>
       :root {
-        font-size: 20px;
+        font-size: 18px;
         line-height: 1.5;
 
         /* Nord Colors */
@@ -144,7 +144,7 @@
         background-color: var(--nord1);
         border-radius: 5px;
         display: block;
-        margin-top: 40px;
+        margin-top: 2.5rem;
         padding: 10px;
       }
 
@@ -266,13 +266,21 @@
         padding-left: 0;
       }
 
+      @media screen and (min-width: 768px) {
+        :root {
+          font-size: 20px;
+        }
+      }
+
       @media screen and (min-width: 1024px) {
         :root {
-          font-size: 24px;
+          font-size: 22px;
         }
+      }
 
-        section {
-          margin-top: 80px;
+      @media screen and (min-width: 1440px) {
+        :root {
+          font-size: 24px;
         }
       }