From 345094f52131dea00c647696e4250f760f75c8ef Mon Sep 17 00:00:00 2001
From: Erick Ruiz de Chavez <erick@fastmail.net>
Date: Fri, 3 Jan 2025 08:56:16 -0500
Subject: [PATCH] Small style adjustments

The content on small screens was unreadable on small screens when the post had code snippets because it was centered. It was scrollable to the right, but not to the left. With this change I am only centering the page content when there is enough room on the window for it to be centered.
---
 _sass/main.scss | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/_sass/main.scss b/_sass/main.scss
index 75fa322..42d803a 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -10,6 +10,12 @@ html {
     box-sizing: inherit;
 }
 
+@media screen and (min-width: 801px) {
+    body {
+        align-items: center;
+    }
+}
+
 html, body {
     width: 100%;
     height: 100%;
@@ -21,7 +27,6 @@ body {
     max-width: 800px;
     display: flex;
     flex-direction: column;
-    align-items: center;
 }
 
 h1 {
@@ -41,7 +46,7 @@ h4,h5,h6 {
 }
 
 main {
-    margin: 20px;
+    padding: 20px;
     opacity: .8;
     line-height: 1.5rem;
 }
@@ -51,7 +56,7 @@ a {
 }
 
 .site_header {
-    margin-top: 40px;
+    padding-top: 40px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -68,24 +73,23 @@ a {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    margin: 40px 0;
+    padding: 40px 0;
 
     &__link {
         display: block;
-        margin: 0 20px;
+        padding: 0 20px;
         opacity: .8;
     }
 }
 
 .site_footer {
-    margin-top: 40px;
-    padding-bottom: 20px;
+    padding: 40px 20px;
     opacity: .3;
 }
 
 .articles {
     opacity: .8;
-    margin-top: 60px;
+    padding-top: 40px;
 }
 
 .article {