From 623413d6e859c92763350ad3569efd311634c228 Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Mon, 21 Jul 2025 11:05:29 +0100 Subject: [PATCH 1/8] Spacing: Add margin variables throughout Attempt to match figma spacing with headings Add variables for ol and ul colours --- assets/css/v2/style.css | 110 +++++++++++++++++++++++++----------- layouts/partials/table.html | 4 +- 2 files changed, 78 insertions(+), 36 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 7f3bcd75..110e48da 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -154,22 +154,65 @@ textarea:not([rows]) { --color-background: 1 0 0; --color-foreground: 0 0 0; --color-shadow: 0.86 0 0; + + --color-footer-text: 0 0 0 / 65%; + --color-product-title: 0.64 0 0; + --color-tabs-inactive-border: 0 0 0 / 20%; + + /* Typography */ + --margin-content-h1: 2.5rem 0 0 0; + --margin-content-h2: 2.5rem 0 0 0; + --margin-content-h3: 1.5rem 0 0 0; + --margin-content-h4: 1rem 0 0 0; + + /* Lists */ + --margin-list: 0.5rem 0 0.5rem 1.15rem; + --margin-list-item: 0.5rem 0 0.5rem 0; + --color-list-bullet: var(--color-codeblock-border); + --color-list-char: var(--color-codeblock-border); + + /* Codeblock */ + + --margin-codeblock: 1.5rem -1rem; --color-inline_codeblock-border: 0.85 0 0; --color-inline_codeblock-background: 0.98 0 0; --color-codeblock-border: 0.63 0 0; --color-codeblock-background: 1 0 0; --color-codeblock-highlight: 0.99 0.0479 105.97; - --color-footer-text: 0 0 0 / 65%; - --color-product-title: 0.64 0 0; - --color-tabs-inactive-border: 0 0 0 / 20%; + --codeblock-comment-diff: 2rem; + --codeblock-comment-space-between: 10px; + --codeblock-horizontal-line-length: 2rem; + --codeblock-horizontal-line-overflow: 0.25rem; + --codeblock-horizontal-padding: 1rem; + --codeblock-border-thickness: 1px; + --codeblock-code-section-padding-left: 1rem; + --codeblock-line-box-side-length: 4px; + + /* Callout */ + --margin-callout: 1rem -1rem; --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; --color-callout-caution-shadow: 0.8 0.1613 71.21 / 20%; --color-callout-important: 0.36 0 0; --color-callout-important-shadow: 0.23 0 0 / 7.06%; + --color-divider: 0.85 0 0; + /* Table */ + --margin-table: 2rem 0; + --table-top-bottom-spacing: 2rem; + --table-row-space-between: 1.5rem; + --table-min-column-spacing-narrow: 1.5rem; + --table-min-column-spacing-wide: 0.75rem; + --table-header-bottom-spacing: 1rem; + --table-line-height: 1px; + + /* Details */ + --details-margin: 0.5rem 0rem; + + --overflow-gutter-extension: 1rem; + /* vars for the primary grid setup */ --grid-sidebar: 24rem; --grid-sidebar-gutter: 3rem; @@ -178,32 +221,6 @@ textarea:not([rows]) { --grid-side-callout: minmax(18rem, 26rem); --grid-column-gutter: 3.5rem; - --code-copy-icon-height: 1rem; - --code-copy-icon-width: 1rem; - --breadcrumb-max-height: 54px; - --sidebar-margin: 1.5rem; - --sidebar-line-box-side-length: 8px; - --sidebar-line-box-top: 6px; - --sidebar-line-box-left: 12px; - --sidebar-line-width: 11.5px; - --sidebar-mobile-top-displacement: 5rem; - --side-gutter-width: 20rem; - --table-top-bottom-spacing: 1rem; - --table-row-space-between: 1.5rem; - --table-min-column-spacing-narrow: 1.5rem; - --table-min-column-spacing-wide: 0.75rem; - --table-header-bottom-spacing: 1rem; - --table-line-height: 1px; - --codeblock-comment-diff: 2rem; - --codeblock-comment-space-between: 10px; - --codeblock-horizontal-line-length: 2rem; - --codeblock-horizontal-line-overflow: 0.25rem; - --codeblock-horizontal-padding: 1rem; - --codeblock-border-thickness: 1px; - --codeblock-code-section-padding-left: 1rem; - --codeblock-line-box-side-length: 4px; - --overflow-gutter-extension: 1rem; - --flow-gap: 1rem; /* @link https://utopia.fyi/type/calculator?c=320,14,1.2,1240,16,1.25,5,3,&s=0.75,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ @@ -323,12 +340,20 @@ p { ul, ol { padding: 0; - margin: 0.5rem 0 0.5rem 1rem; + margin: var(--margin-list); } ul li, ol li { - margin: 0.5rem 0 0.5rem 0; + margin: var(--margin-list-item); +} + +ul li::marker { + color: oklch(var(--color-list-bullet)); +} + +ol li::marker { + color: oklch(var(--color-list-char)); } ul ul, @@ -865,7 +890,7 @@ nav { display: grid; grid-template-columns: minmax(0, 1fr); /* These gaps determine the spacing between all content. Be careful!! */ - gap: var(--space-m) var(--space-m); + gap: var(--flow-gap) var(--space-m); /* Handles some strangeness where single-line codeblocks caused horizon */ @@ -1289,6 +1314,7 @@ nav.sidebar.sidebar__mobile-open { /* Details/Summary */ details summary { + margin: var(--details-margin); color: oklch(var(--color-brand)); transition: text-decoration-color 0.15s ease-in-out; text-decoration: underline; @@ -1362,13 +1388,24 @@ a:hover { */ h1 { + margin: var(--margin-content-h1); font-size: var(--font-step-3); } h2 { + margin: var(--margin-content-h2); font-size: var(--font-step-2); } +h3 { + margin: var(--margin-content-h3); + font-size: var(--font-step-1); +} + +h4 { + margin: var(--margin-content-h4); +} + p { font-size: var(--font-step-0); } @@ -1605,6 +1642,10 @@ table { } } +.table { + margin: var(--margin-table); +} + .md-table-scroll-x { overflow-x: auto; width: 100%; @@ -1647,7 +1688,7 @@ table hr { blockquote { border: 1px solid oklch(var(--color-foreground)); padding: 1rem; - margin: 0 -1rem; + margin: var(--margin-callout); /* solid 3px drop shadow */ box-shadow: 3px 3px 0px oklch(var(--color-shadow)); @@ -1924,6 +1965,7 @@ a:has(code:not(pre code)) { .code-block { position: relative; + margin: var(--margin-codeblock); tr::after { display: none; @@ -2018,7 +2060,7 @@ ul .code-block { } } -/* MARK: Banner +/* MARK: Banner */ .banner { diff --git a/layouts/partials/table.html b/layouts/partials/table.html index a6aea673..19157d1c 100644 --- a/layouts/partials/table.html +++ b/layouts/partials/table.html @@ -2,6 +2,6 @@ {{ errorf "Invalid variant supplied to shortcode: Received %s. Wanted: 'narrow', 'wide'" .variant }} {{ end }} -
+
{{ .content | markdownify}} -
\ No newline at end of file +
From 8ad2651f13c412ee613bf714842843b5402620bf Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Mon, 21 Jul 2025 13:57:10 +0100 Subject: [PATCH 2/8] Spacing: Add callout and tab group spacing --- assets/css/v2/style.css | 11 +++++++++-- .../content/test-product/call-out/all-callouts.md | 7 +++++++ .../content/test-product/tab-group/tab-group.md | 6 ++++++ 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 110e48da..5e378585 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -211,6 +211,9 @@ textarea:not([rows]) { /* Details */ --details-margin: 0.5rem 0rem; + /* Tab Group */ + --magrin-tab-group: 1rem 0 0 0; + --overflow-gutter-extension: 1rem; /* vars for the primary grid setup */ @@ -221,6 +224,7 @@ textarea:not([rows]) { --grid-side-callout: minmax(18rem, 26rem); --grid-column-gutter: 3.5rem; + /* Used for standard grid gap, and internal component flows */ --flow-gap: 1rem; /* @link https://utopia.fyi/type/calculator?c=320,14,1.2,1240,16,1.25,5,3,&s=0.75,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ @@ -1722,8 +1726,8 @@ blockquote.note:before { z-index: 999; } -blockquote p:first-child { - margin: 0 auto 1rem auto; +blockquote p { + margin: 0 auto var(--flow-gap) auto; } blockquote p:last-child { @@ -1819,6 +1823,7 @@ li:has(> div > blockquote) { .tabs-container { width: calc(100% + 2rem); margin-inline-start: -1rem; + margin: var(--margin-tab-group); input[type="radio"] { display: none; @@ -1884,6 +1889,8 @@ li:has(> div > blockquote) { width: 100%; padding: 1rem; + --flow-gap: 2rem; + & > * { margin: 0 0 var(--flow-gap) 0; } diff --git a/exampleSite/content/test-product/call-out/all-callouts.md b/exampleSite/content/test-product/call-out/all-callouts.md index 7e9868d4..e10e6a8d 100644 --- a/exampleSite/content/test-product/call-out/all-callouts.md +++ b/exampleSite/content/test-product/call-out/all-callouts.md @@ -57,6 +57,13 @@ This callout especially should be used **VERY** judiciously. {{}} This is a Warning callout. There was previously a bug with **bold text** that we should be aware of and continue to check for. This callout was invoked with the `` shortcode. It has no custom title. + +This callout has another line. + +And another line. + +And a final line. + {{}} diff --git a/exampleSite/content/test-product/tab-group/tab-group.md b/exampleSite/content/test-product/tab-group/tab-group.md index 321c6c15..c4018136 100644 --- a/exampleSite/content/test-product/tab-group/tab-group.md +++ b/exampleSite/content/test-product/tab-group/tab-group.md @@ -15,7 +15,13 @@ This is a callout with an icon. {{}} {{}} + This is a Caution callout. There was previously a bug with **bold text** that we should be aware of and continue to check for. This callout was invoked with the `` shortcode. It has no custom title. + +This is on a new line. + +This is on a new line + {{}} {{}} From b7cc690c5ba650ba4bd6ce88bc976a87a0c03b7a Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Mon, 21 Jul 2025 16:20:29 +0100 Subject: [PATCH 3/8] Icons: Fix icon usage in callouts --- assets/css/v2/style.css | 18 +++--------------- layouts/partials/callout.html | 9 ++++----- 2 files changed, 7 insertions(+), 20 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 5e378585..70496066 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -1780,7 +1780,7 @@ blockquote.caution { background-color: oklch(var(--color-callout-caution-shadow)); border-bottom: 1px solid oklch(var(--color-callout-caution)); } - .call-out-type .feather { + .call-out-type .lucide { color: oklch(var(--color-callout-caution)); } } @@ -1793,7 +1793,7 @@ blockquote.warning { background-color: oklch(var(--color-callout-warning-shadow)); border-bottom: 1px solid oklch(var(--color-callout-warning)); } - .call-out-type .feather { + .call-out-type .lucide { color: oklch(var(--color-callout-warning)); } } @@ -2104,7 +2104,7 @@ hr { border: 1px solid oklch(var(--color-divider)); } -.feather { +.lucide { width: 1.8ch; height: 1.8ch; stroke: currentColor; @@ -2116,18 +2116,6 @@ hr { margin: 0; } -.lucide { - width: 1.5rem; - height: 1.5rem; - stroke: currentColor; - fill: none; - stroke-width: 2; - stroke-linecap: square; - stroke-linejoin: square; - vertical-align: sub; - margin: 0; -} - /* MARK: Accessibility */ diff --git a/layouts/partials/callout.html b/layouts/partials/callout.html index 52771103..cfc04550 100644 --- a/layouts/partials/callout.html +++ b/layouts/partials/callout.html @@ -23,13 +23,12 @@ {{ $type := (index (split $class " ") 0) | strings.FirstUpper }} {{ $specialTitles := slice "Caution" "Warning" "Deprecated" "Important" }} {{ $specialTitleIcons := dict - "Caution" "alert-triangle" - "Warning" "alert-octagon" - "Deprecated" "alert-octagon" - "Important" "arrow-right-circle" + "Caution" "triangle-alert" + "Warning" "octagon-alert" + "Deprecated" "octagon-alert" + "Important" "circle-arrow-right" }} {{ $icon := index $specialTitleIcons $type | default "" }} - {{ $isSpecialTitle := in $specialTitles $type }} {{ if $isSpecialTitle }} {{/* Loud callouts */}} From 02906822df2146b27006e03c3b274fe7cc6bc848 Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Tue, 22 Jul 2025 11:48:29 +0100 Subject: [PATCH 4/8] Callout: Fix margin and whitespace in side callouts --- assets/css/v2/style.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 70496066..02ae1c59 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -1692,6 +1692,7 @@ table hr { blockquote { border: 1px solid oklch(var(--color-foreground)); padding: 1rem; + height: fit-content; margin: var(--margin-callout); /* solid 3px drop shadow */ @@ -1707,6 +1708,16 @@ blockquote { } } +blockquote[data-grid="last-third"] { + margin-top: 0; +} + +@media (max-width: 55rem) { + blockquote[data-grid="last-third"] { + margin: var(--margin-callout); + } +} + blockquote.note { position: relative; z-index: 0; From 4678e220970253d7f3c039a039fd4e78f72a90c4 Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Wed, 23 Jul 2025 10:22:19 +0100 Subject: [PATCH 5/8] Typography: Wrap headers in .content class Fix h1s on list pages not lining up with images --- assets/css/v2/style.css | 116 +++++++++++++++++++------------------ layouts/_default/list.html | 2 +- 2 files changed, 60 insertions(+), 58 deletions(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 02ae1c59..52cb9c21 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -962,6 +962,7 @@ main { .list-page { --flow-gap: 0.5rem; + --margin-content-h1: 0; h2 { font-size: 1.5rem; @@ -1390,80 +1391,81 @@ a:hover { /* MARK: Typography */ +.content { + h1 { + margin: var(--margin-content-h1); + font-size: var(--font-step-3); + } -h1 { - margin: var(--margin-content-h1); - font-size: var(--font-step-3); -} - -h2 { - margin: var(--margin-content-h2); - font-size: var(--font-step-2); -} + h2 { + margin: var(--margin-content-h2); + font-size: var(--font-step-2); + } -h3 { - margin: var(--margin-content-h3); - font-size: var(--font-step-1); -} + h3 { + margin: var(--margin-content-h3); + font-size: var(--font-step-1); + } -h4 { - margin: var(--margin-content-h4); -} + h4 { + margin: var(--margin-content-h4); + } -p { - font-size: var(--font-step-0); -} + p { + font-size: var(--font-step-0); + } -h2:target, -h3:target, -h4:target, -h5:target, -h6:target { - color: oklch(var(--color-brand)); + h2:target, + h3:target, + h4:target, + h5:target, + h6:target { + color: oklch(var(--color-brand)); - .headerlink::before { - display: block !important; + .headerlink::before { + display: block !important; + } } -} -h2:has(a), -h3:has(a), -h4:has(a), -h5:has(a), -h6:has(a) { - width: calc(100% + 1rem); - margin-inline-start: -1rem; - padding-inline-start: 1rem; - position: relative; -} + h2:has(a), + h3:has(a), + h4:has(a), + h5:has(a), + h6:has(a) { + width: calc(100% + 1rem); + margin-inline-start: -1rem; + padding-inline-start: 1rem; + position: relative; + } -h2:has(a):hover { - .headerlink::before { - display: block; + h2:has(a):hover { + .headerlink::before { + display: block; + } } -} -h3:has(a):hover { - .headerlink::before { - display: block; + h3:has(a):hover { + .headerlink::before { + display: block; + } } -} -h4:has(a):hover { - .headerlink::before { - display: block; + h4:has(a):hover { + .headerlink::before { + display: block; + } } -} -h5:has(a):hover { - .headerlink::before { - display: block; + h5:has(a):hover { + .headerlink::before { + display: block; + } } -} -h6:has(a):hover { - .headerlink::before { - display: block; + h6:has(a):hover { + .headerlink::before { + display: block; + } } } diff --git a/layouts/_default/list.html b/layouts/_default/list.html index fa5369a4..ff6a38ca 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -1,6 +1,6 @@ {{ define "main" }} -
+
{{ if not .IsHome }} From 2ea21601f488a903820a12d6b49ae7d83fba0e66 Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Wed, 23 Jul 2025 15:08:41 +0100 Subject: [PATCH 6/8] Homepage: Fix card text overflow --- assets/css/v2/style.css | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 52cb9c21..00c4333b 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -1582,7 +1582,6 @@ a:hover { padding: 1rem 2rem 2rem 2rem; .card-container { - height: 7rem; justify-content: space-around; .card-header { From 47e8b025c0a351f206b6bb842bcc99e6480ca554 Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Wed, 23 Jul 2025 16:32:27 +0100 Subject: [PATCH 7/8] Content: Fix narrow content shifting between pages --- assets/css/v2/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index 00c4333b..1d988fee 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -887,6 +887,7 @@ nav { justify-self: center; padding: 0 var(--space-l) 2rem var(--space-l); max-width: var(--content-max-width); + width: 100%; & > *, & > ul, From 59559831b9bff573bcb614df6cf4cb253d3677bc Mon Sep 17 00:00:00 2001 From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com> Date: Wed, 23 Jul 2025 16:41:45 +0100 Subject: [PATCH 8/8] Layout: Fix outer container padding --- 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 1d988fee..97f44f08 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -404,7 +404,7 @@ ol li:last-child { } } .content { - padding: 0 var(--space-s) 2rem; + padding: 0 var(--space-l) 2rem; } .header__logo {