diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte index aac3eae31..3b90df127 100644 --- a/packages/site-kit/src/lib/components/Text.svelte +++ b/packages/site-kit/src/lib/components/Text.svelte @@ -116,9 +116,13 @@ 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: var(--sk-line-height-body) 0; + } + .controls { --height: 3.6rem; display: flex; @@ -376,11 +380,11 @@ li::before { content: ''; position: absolute; - top: 1.43rem; + top: 0.65em; left: -1.8rem; background-color: var(--sk-text-4); - width: 0.6rem; - height: 0.6rem; + width: 0.3em; + height: 0.3em; border-radius: 50%; opacity: 0.7; } diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css index 602a81e90..506fd6fc3 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: 0.5lh 0; &:first-child { margin-top: 0; @@ -136,8 +136,7 @@ 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); } 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);