From 0ed1da1c44a308b8eb5efd1a4ba487072bfc0e90 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Tue, 29 Jul 2025 09:35:37 -0700 Subject: [PATCH 1/4] Grid: Changed min width of parent grid to be smaller --- assets/css/v2/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 0e5c24d0..32a22264 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -275,7 +275,7 @@ textarea:not([rows]) { /* @link https://utopia.fyi/grid/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ --grid-max-width: 69.75rem; - --grid-min-width: 34rem; + --grid-min-width: 22rem; --grid-gutter: var(--space-s-l, clamp(1rem, 0.4975rem + 2.5126vw, 2.25rem)); --grid-columns: 12; From d54e34936e1c28474eb5f19b5a7f32c30cb32d53 Mon Sep 17 00:00:00 2001 From: Lam Nguyen Date: Mon, 18 Aug 2025 12:14:56 -0700 Subject: [PATCH 2/4] Grid: Removed overflow on callouts + codeblocks + set min width to zero --- assets/css/v2/style.css | 34 ++++++++++++++++++---------------- layouts/partials/banner.html | 2 +- 2 files changed, 19 insertions(+), 17 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 32a22264..7fabea6d 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -173,7 +173,7 @@ textarea:not([rows]) { /* Codeblock */ - --margin-codeblock: 1.5rem -1rem; + --margin-codeblock: 1.5rem var(--overflow-gutter-extension); --color-inline_codeblock-border: 0.85 0 0; --color-inline_codeblock-background: 0.98 0 0; --color-codeblock-border: 0.63 0 0; @@ -189,7 +189,7 @@ textarea:not([rows]) { --codeblock-line-box-side-length: 4px; /* Callout */ - --margin-callout: 1rem -1rem; + --margin-callout: 1rem var(--overflow-gutter-extension); --color-callout-warning: 0.65 0.188 24; --color-callout-warning-shadow: 0.65 0.188 24 / 20%; --color-callout-caution: 0.8 0.1613 71.21; @@ -216,7 +216,7 @@ textarea:not([rows]) { /* Tab Group */ --margin-tab-group: 1rem -1rem 0 -1rem; - --overflow-gutter-extension: 1rem; + --overflow-gutter-extension: -1rem; /* vars for the primary grid setup */ --grid-content: minmax(34rem, 50rem); @@ -275,7 +275,7 @@ textarea:not([rows]) { /* @link https://utopia.fyi/grid/calculator?c=320,16,1.2,1240,18,1.25,5,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ --grid-max-width: 69.75rem; - --grid-min-width: 22rem; + --grid-min-width: 0; --grid-gutter: var(--space-s-l, clamp(1rem, 0.4975rem + 2.5126vw, 2.25rem)); --grid-columns: 12; @@ -1730,7 +1730,7 @@ blockquote { border: 1px solid oklch(var(--color-foreground)); padding: 1rem; height: fit-content; - margin: var(--margin-callout); + margin: var(--margin-callout); /* Expand into the gutter */ /* solid 3px drop shadow */ box-shadow: 3px 3px 0px oklch(var(--color-shadow)); @@ -1745,16 +1745,6 @@ blockquote { } } -blockquote[data-grid="last-third"] { - margin-block-start: 0; -} - -@media (max-width: 55rem) { - blockquote[data-grid="last-third"] { - margin: var(--margin-callout); - } -} - blockquote.note { position: relative; z-index: 0; @@ -1789,6 +1779,13 @@ blockquote p:last-child { } } +/* Maintain the gutter overflow for as long as possible */ +@media (max-width: 55rem) { + blockquote { + margin-inline: 0; + } +} + blockquote > div > * { margin: 0 0 var(--flow-gap) 0; } @@ -2014,7 +2011,7 @@ a:has(code:not(pre code)) { .code-block { position: relative; - margin: var(--margin-codeblock); + margin: var(--margin-codeblock); /* Expand into the gutter */ tr::after { display: none; @@ -2087,6 +2084,11 @@ a:has(code:not(pre code)) { } } } + + /* Maintain the gutter overflow for as long as possible */ + @media (max-width: 55rem) { + margin-inline: 0rem; + } } ol .code-block, diff --git a/layouts/partials/banner.html b/layouts/partials/banner.html index 524dad2b..875b096e 100644 --- a/layouts/partials/banner.html +++ b/layouts/partials/banner.html @@ -10,7 +10,7 @@ {{- if isset . "md" -}} {{- $bannerPage := readFile .md -}} -