From a8fd6e550fbe6cd3c0c4eeac0d69129932992497 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sat, 29 Jun 2024 10:31:21 -0700
Subject: [PATCH] Implement a clever margin trick

This trick centers content and ensures a minimum margin of spacing size S.

https://stackoverflow.com/questions/70323075/how-i-can-use-min-and-max-css-functions-to-work-with-auto
---
 assets/css/010_structure.css   | 10 +++-------
 assets/css/099_site_header.css |  8 ++++++++
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/assets/css/010_structure.css b/assets/css/010_structure.css
index f3f51a9..357dd86 100644
--- a/assets/css/010_structure.css
+++ b/assets/css/010_structure.css
@@ -20,16 +20,12 @@ body {
 }
 
 main {
-  margin-inline: auto;
+  /* Center the content and ensure a minimum margin. The calculation in the
+   * second argument does what `auto` would do if it could be used in max(). */
+  margin-inline: max(var(--space-s), 50% - var(--content-width) / 2);
   max-width: var(--content-width);
 }
 
-main,
-.site-header__conatiner,
-.site-footer__container {
-  padding-inline: var(--space-xs);
-}
-
 figure, img {
   max-width: 100%;
 }
diff --git a/assets/css/099_site_header.css b/assets/css/099_site_header.css
index b3cbfe9..6d778ed 100644
--- a/assets/css/099_site_header.css
+++ b/assets/css/099_site_header.css
@@ -12,3 +12,11 @@
     font-weight: normal;
   }
 }
+
+.site-header__container,
+.site-footer__container {
+  /* Center the content and ensure a minimum margin. The calculation in the
+   * second argument does what `auto` would do if it could be used in max(). */
+  margin-inline: max(var(--space-s), 50% - var(--content-width) / 2);
+  max-width: var(--content-width);
+}