From 67f50a01b191e23398a4a572185b4efe700edc68 Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Mon, 30 Oct 2023 12:30:39 +0100
Subject: [PATCH] Updated wrapper / base styles

---
 src/assets/css/blocks/prose.css         | 2 +-
 src/assets/css/compositions/grid.css    | 2 +-
 src/assets/css/global/global-styles.css | 8 +++++++-
 src/assets/css/global/variables.css     | 1 +
 src/assets/css/utilities/content.css    | 2 +-
 src/assets/css/utilities/wrapper.css    | 5 ++---
 src/posts/2022-10-12-post-with-image.md | 2 +-
 7 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/assets/css/blocks/prose.css b/src/assets/css/blocks/prose.css
index dfbd020..eedb54a 100644
--- a/src/assets/css/blocks/prose.css
+++ b/src/assets/css/blocks/prose.css
@@ -1,6 +1,6 @@
 .prose {
   --flow-space: var(--space-m-l);
-  --wrapper-max-width: 55rem;
+  --wrapper-width: clamp(16rem, 93vw, 55rem);
 }
 
 .prose :is(h2, h3, h4) + * {
diff --git a/src/assets/css/compositions/grid.css b/src/assets/css/compositions/grid.css
index 16aea17..25bcee0 100644
--- a/src/assets/css/compositions/grid.css
+++ b/src/assets/css/compositions/grid.css
@@ -29,5 +29,5 @@ to change how empty grid tracks are handled */
 
 .grid[data-layout='50-50'] {
   --grid-placement: auto-fit;
-  --grid-min-item-size: clamp(16rem, 50vw, 26rem);
+  --grid-min-item-size: clamp(16rem, 50vw, 28rem);
 }
diff --git a/src/assets/css/global/global-styles.css b/src/assets/css/global/global-styles.css
index 1de65dc..495c4aa 100644
--- a/src/assets/css/global/global-styles.css
+++ b/src/assets/css/global/global-styles.css
@@ -6,11 +6,17 @@
 */
 body {
   color: var(--color-dark);
-  background: var(--color-light);
+  background-color: var(--color-light);
   font-size: var(--size-step-1);
   font-family: var(--font-base);
   line-height: 1.4;
   letter-spacing: var(--tracking);
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  flex: auto;
 }
 
 /* Base typesetting */
diff --git a/src/assets/css/global/variables.css b/src/assets/css/global/variables.css
index 24a7569..1f1f278 100644
--- a/src/assets/css/global/variables.css
+++ b/src/assets/css/global/variables.css
@@ -6,6 +6,7 @@
   --transition-movement: 200ms linear;
   --transition-fade: 200ms ease;
   --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
+  --wrapper-width: clamp(16rem, 93vw, 85rem);
   --tracking: -0.05ch;
   --tracking-s: -0.075ch;
 }
diff --git a/src/assets/css/utilities/content.css b/src/assets/css/utilities/content.css
index aec2836..cf9efab 100644
--- a/src/assets/css/utilities/content.css
+++ b/src/assets/css/utilities/content.css
@@ -1,7 +1,7 @@
 /* breakout content elements to wrapper based on full bleed image solution by josh cumeau. https://www.joshwcomeau.com/css/full-bleed/ */
 
 .content {
-  --wrapper-max-width: 75rem;
+  --wrapper-width: clamp(16rem, 93vw, 75rem);
   display: grid;
   grid-template-columns:
     1fr
diff --git a/src/assets/css/utilities/wrapper.css b/src/assets/css/utilities/wrapper.css
index 42f6555..4ea7f3d 100644
--- a/src/assets/css/utilities/wrapper.css
+++ b/src/assets/css/utilities/wrapper.css
@@ -5,8 +5,7 @@
  * Info: https://piccalil.li/quick-tip/use-css-clamp-to-create-a-more-flexible-wrapper-utility/
  */
 .wrapper {
-  max-inline-size: var(--wrapper-max-width, 85rem);
   margin-inline: auto;
-  padding-inline: var(--gutter);
-  /* position: relative; */
+  position: relative;
+  inline-size: var(--wrapper-width, 85rem);
 }
diff --git a/src/posts/2022-10-12-post-with-image.md b/src/posts/2022-10-12-post-with-image.md
index 33264bc..e8d4fa1 100644
--- a/src/posts/2022-10-12-post-with-image.md
+++ b/src/posts/2022-10-12-post-with-image.md
@@ -7,7 +7,7 @@ date: 2022-10-12
 This starter uses Eleventy's build-time image transformations. Find more info on https://www.11ty.dev/docs/plugins/image/ and edit settings in `config/shortcodes/imagePlaceholder`.
 
 For now there are three image sizes: 320px, 570px and 820px.
-820px is the maximum size, equivalent to the width set for our content wrapper in `prose.css`: `--wrapper-max-width: 55rem;`.
+820px is the maximum size, equivalent to the width set for our content wrapper in `prose.css`: `--wrapper-width: clamp(16rem, 93vw, 55rem);`.
 
 The `sizes` attribute is set to `sizes = '(min-width: 55rem) 820px, 100vw'`.