From 2c599536f358499722f390614f702071be4cc771 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Tue, 20 Sep 2022 23:49:19 -0500
Subject: [PATCH] Enable mobile friendly CSS with font scaling, re-add margin &
 grid center

---
 _includes/header.html |  2 +-
 _sass/main.scss       | 26 +++++++++++++++++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/_includes/header.html b/_includes/header.html
index 1306cf0..38516a9 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,4 +1,4 @@
-<header>
+<header id="header">
     <div class="stack" style="--stacks: 3;">
         <span style="--index: 0;">ryan walters</span>
         <span style="--index: 1;">ryan walters</span>
diff --git a/_sass/main.scss b/_sass/main.scss
index 0492d29..2c82134 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -25,9 +25,26 @@ body {
 }
 
 html {
+  padding: 0;
+  margin: 0;
   overflow-y: scroll;
-  font-size: 16pt;
   text-rendering: optimizeLegibility;
+
+  @include for-size(phone-only) {
+    font-size: 10pt;
+  }
+  @include for-size(tablet-portrait-up) {
+    font-size: 12pt;
+  }
+  @include for-size(tablet-landscape-up) {
+    font-size: 14pt;
+  }
+  @include for-size(desktop-up) {
+    font-size: 16pt;
+  }
+  @include for-size(big-desktop-up) {
+    font-size: 18pt;
+  }
 }
 
 body {
@@ -36,11 +53,15 @@ body {
   line-height: 1.5;
   background: #0e0e0e;
   color: white;
+
+  display: grid;
+  justify-items: center;
+  align-items: center;
 }
 
 .body-container {
   max-width: 46em;
-  margin: 0 auto;
+  margin: 0 1em;
 }
 
 p,
@@ -255,7 +276,6 @@ nav {
 html,
 body {
   visibility: visible !important;
-  margin: 0 auto;
 }
 
 small {