Updated wrapper / base styles

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) + * {

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);
 }

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 */

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;
 }

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

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);
 }

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'`.