From 44e641d36da7ae550efbe9d6b64a843abec629f5 Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Tue, 29 Oct 2024 11:35:39 +0100 Subject: [PATCH 1/7] chore: spacing tweaks - make paragraph breaks less spacey - move `ul` closer to the preceeding paragraph which gives more visual clarity of where it belongs to - give code blocks a bit more space at the top/bottom on larger screens - give blockquotes more space at the top/bottom on larger screens Combined, these changes give more visual clarity of which things belong together, which stand on its own, etc --- packages/site-kit/src/lib/components/Text.svelte | 6 +++++- packages/site-kit/src/lib/styles/base.css | 15 ++++++++++++++- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte index aac3eae31..f4ff49b90 100644 --- a/packages/site-kit/src/lib/components/Text.svelte +++ b/packages/site-kit/src/lib/components/Text.svelte @@ -119,6 +119,10 @@ margin: 2rem 0; /* background: var(--sk-back-3); */ + @media (min-width: 767px) { + margin: 3rem 0; + } + .controls { --height: 3.6rem; display: flex; @@ -376,7 +380,7 @@ li::before { content: ''; position: absolute; - top: 1.43rem; + top: 1.1rem; left: -1.8rem; background-color: var(--sk-text-4); width: 0.6rem; diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css index 602a81e90..70ee04dba 100644 --- a/packages/site-kit/src/lib/styles/base.css +++ b/packages/site-kit/src/lib/styles/base.css @@ -45,7 +45,7 @@ p, ul, ol { font: var(--sk-font-body); - margin: 1lh 0; + margin: 2rem 0; &:first-child { margin-top: 0; @@ -56,6 +56,15 @@ ol { } } +ul, +ol { + margin-top: 1rem; +} + +p:has(+ ul, + ol) { + margin-bottom: 1rem; +} + a { position: relative; text-decoration: none; @@ -139,6 +148,10 @@ blockquote { margin: 2.4rem 0; padding: 2rem 2.4rem 1.8rem 2.4rem; max-width: var(--sk-page-content-width); + + @media (min-width: 767px) { + margin: 4rem 0; + } } blockquote :where(p, ul, ol) { From 2e046ab357f3fece4e43330f88e8872f3043d9ac Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Tue, 29 Oct 2024 21:00:46 +0100 Subject: [PATCH 2/7] Update packages/site-kit/src/lib/styles/base.css Co-authored-by: Rich Harris --- packages/site-kit/src/lib/styles/base.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css index 70ee04dba..785bfbac9 100644 --- a/packages/site-kit/src/lib/styles/base.css +++ b/packages/site-kit/src/lib/styles/base.css @@ -45,7 +45,7 @@ p, ul, ol { font: var(--sk-font-body); - margin: 2rem 0; + margin: 0.5lh 0; &:first-child { margin-top: 0; From aed7f4c6f48802a57138c4c8ed0f5ef9c026d53b Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Tue, 29 Oct 2024 21:10:44 +0100 Subject: [PATCH 3/7] line height-dependent top/bubble calculation --- packages/site-kit/src/lib/components/Text.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte index f4ff49b90..d7d5de3fb 100644 --- a/packages/site-kit/src/lib/components/Text.svelte +++ b/packages/site-kit/src/lib/components/Text.svelte @@ -380,11 +380,11 @@ li::before { content: ''; position: absolute; - top: 1.1rem; + top: calc((var(--sk-font-size-body) / var(--sk-line-height-body)) - 0.05lh); left: -1.8rem; background-color: var(--sk-text-4); - width: 0.6rem; - height: 0.6rem; + width: 0.2lh; + height: 0.2lh; border-radius: 50%; opacity: 0.7; } From c34d7377da90d320f53f7b44c1275afb3ecac25b Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 29 Oct 2024 16:42:39 -0400 Subject: [PATCH 4/7] i get best results with this --- packages/site-kit/src/lib/components/Text.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte index d7d5de3fb..6bd054b53 100644 --- a/packages/site-kit/src/lib/components/Text.svelte +++ b/packages/site-kit/src/lib/components/Text.svelte @@ -380,11 +380,11 @@ li::before { content: ''; position: absolute; - top: calc((var(--sk-font-size-body) / var(--sk-line-height-body)) - 0.05lh); + top: 0.65em; left: -1.8rem; background-color: var(--sk-text-4); - width: 0.2lh; - height: 0.2lh; + width: 0.3em; + height: 0.3em; border-radius: 50%; opacity: 0.7; } From d57a417f1d3466bb978eb287b4c8a0c8c84c5a7e Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 29 Oct 2024 16:52:30 -0400 Subject: [PATCH 5/7] rhythm --- packages/site-kit/src/lib/components/Text.svelte | 4 ++-- packages/site-kit/src/lib/styles/tokens.css | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte index 6bd054b53..3b90df127 100644 --- a/packages/site-kit/src/lib/components/Text.svelte +++ b/packages/site-kit/src/lib/components/Text.svelte @@ -116,11 +116,11 @@ border: 1px solid var(--sk-back-5); border-radius: var(--sk-border-radius); overflow: hidden; - margin: 2rem 0; + margin: calc(0.5 * var(--sk-line-height-body)) 0; /* background: var(--sk-back-3); */ @media (min-width: 767px) { - margin: 3rem 0; + margin: var(--sk-line-height-body) 0; } .controls { diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css index 4cb3c8cbf..f0e403cbd 100644 --- a/packages/site-kit/src/lib/styles/tokens.css +++ b/packages/site-kit/src/lib/styles/tokens.css @@ -39,7 +39,9 @@ --sk-font-size-ui-large: 3rem; --sk-font-size-mono: 1.4rem; - --sk-line-height-body: 1.5; + /* doing it this way (rather than just `1.5`) means it has a unit, and can be used elsewhere */ + --sk-line-height-body: calc(1.5 * var(--sk-font-size-body)); + --sk-line-height-body-small: calc(1.5 * var(--sk-font-size-body-small)); --sk-font-h1: 500 var(--sk-font-size-h1) / 1.2 var(--sk-font-family-heading); --sk-font-h2: 500 var(--sk-font-size-h2) / 1.2 var(--sk-font-family-heading); From 5731caec0d0be21f345212890f5667dcaaa4acc2 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 29 Oct 2024 16:59:42 -0400 Subject: [PATCH 6/7] we no longer need these, because of the changes to p/ol/ul --- packages/site-kit/src/lib/styles/base.css | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css index 785bfbac9..9016ad2d6 100644 --- a/packages/site-kit/src/lib/styles/base.css +++ b/packages/site-kit/src/lib/styles/base.css @@ -56,15 +56,6 @@ ol { } } -ul, -ol { - margin-top: 1rem; -} - -p:has(+ ul, + ol) { - margin-bottom: 1rem; -} - a { position: relative; text-decoration: none; From a05d8090e64b3a01be209e43d1e7f2f9aebadf67 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 29 Oct 2024 17:03:17 -0400 Subject: [PATCH 7/7] simplify --- packages/site-kit/src/lib/styles/base.css | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css index 9016ad2d6..506fd6fc3 100644 --- a/packages/site-kit/src/lib/styles/base.css +++ b/packages/site-kit/src/lib/styles/base.css @@ -136,13 +136,8 @@ header { /* opinionated styles --------------------- */ blockquote { position: relative; - margin: 2.4rem 0; - padding: 2rem 2.4rem 1.8rem 2.4rem; + margin: var(--sk-line-height-body) 0; max-width: var(--sk-page-content-width); - - @media (min-width: 767px) { - margin: 4rem 0; - } } blockquote :where(p, ul, ol) {