From 03a105b2d1f2fc7bd63e7aae8b218da451ec7da7 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 30 Sep 2024 23:19:16 -0400 Subject: [PATCH 1/4] freight text pro --- apps/svelte.dev/src/app.html | 2 ++ packages/site-kit/src/lib/styles/tokens.css | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/svelte.dev/src/app.html b/apps/svelte.dev/src/app.html index 4fcb830279..0a7c43e318 100644 --- a/apps/svelte.dev/src/app.html +++ b/apps/svelte.dev/src/app.html @@ -8,6 +8,8 @@ + + diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css index 77ae1d6845..512d604323 100644 --- a/packages/site-kit/src/lib/styles/tokens.css +++ b/packages/site-kit/src/lib/styles/tokens.css @@ -24,7 +24,7 @@ /* typography */ --sk-font-ui: 'Yantramanav', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - --sk-font-body: 'EB Garamond', 'Big Caslon', Palatino, 'Book Antiqua', Cambria, serif; + --sk-font-body: 'freight-text-pro', 'Big Caslon', Palatino, 'Book Antiqua', Cambria, serif; --sk-font-heading: var(--sk-font-body); --sk-font-mono: 'Fira Mono', monospace; --sk-text-xxl: 3.6rem; From de295a0b64c170c705da203d9d9fd0b21bdbfb98 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Mon, 30 Sep 2024 23:26:38 -0400 Subject: [PATCH 2/4] bump weights --- apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte | 2 +- packages/site-kit/src/lib/docs/DocsContents.svelte | 2 +- packages/site-kit/src/lib/styles/base.css | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte index 9a2914d038..6a20023eb7 100644 --- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte +++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte @@ -160,7 +160,7 @@ & label { font-size: var(--sk-text-m); - font-weight: 500; + font-weight: 600; display: block; &::before { diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte index c5056f0310..bb71a7915f 100644 --- a/packages/site-kit/src/lib/docs/DocsContents.svelte +++ b/packages/site-kit/src/lib/docs/DocsContents.svelte @@ -97,7 +97,7 @@ padding-bottom: 0.8rem; font-size: var(--sk-text-m); font-family: var(--sk-font-heading); - font-weight: 500; + font-weight: 600; color: var(--sk-text-1); } diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css index dadf47e148..6429e2bbf0 100644 --- a/packages/site-kit/src/lib/styles/base.css +++ b/packages/site-kit/src/lib/styles/base.css @@ -85,7 +85,7 @@ h1 { :where(h1, h2, h3, h4, h5, h6) { position: relative; font-family: var(--sk-font-heading); - font-weight: 500; + font-weight: 600; line-height: 1.35; color: var(--sk-text-1); } From bd87e9e92cb044b8ef735e66abbf98c82be99cdb Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 2 Oct 2024 16:46:16 -0400 Subject: [PATCH 3/4] add freight display/sans --- apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte | 2 +- packages/site-kit/src/lib/docs/DocsContents.svelte | 2 +- packages/site-kit/src/lib/styles/base.css | 2 +- packages/site-kit/src/lib/styles/tokens.css | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte index 6a20023eb7..ff5b7a01f8 100644 --- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte +++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte @@ -160,7 +160,7 @@ & label { font-size: var(--sk-text-m); - font-weight: 600; + font-weight: 700; display: block; &::before { diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte index bb71a7915f..afafc7abf7 100644 --- a/packages/site-kit/src/lib/docs/DocsContents.svelte +++ b/packages/site-kit/src/lib/docs/DocsContents.svelte @@ -97,7 +97,7 @@ padding-bottom: 0.8rem; font-size: var(--sk-text-m); font-family: var(--sk-font-heading); - font-weight: 600; + font-weight: 700; color: var(--sk-text-1); } diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css index 7431a3d73b..49f74fb308 100644 --- a/packages/site-kit/src/lib/styles/base.css +++ b/packages/site-kit/src/lib/styles/base.css @@ -85,7 +85,7 @@ h1 { :where(h1, h2, h3, h4, h5, h6) { position: relative; font-family: var(--sk-font-heading); - font-weight: 600; + font-weight: 700; line-height: 1.2; color: var(--sk-text-1); } diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css index ae59fe4a6b..da3e0f4378 100644 --- a/packages/site-kit/src/lib/styles/tokens.css +++ b/packages/site-kit/src/lib/styles/tokens.css @@ -22,10 +22,10 @@ --sk-banner-bottom-height: 0px; /* typography */ - --sk-font-ui: 'Yantramanav', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + --sk-font-ui: 'freight-sans-pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; --sk-font-body: 'freight-text-pro', 'Big Caslon', Palatino, 'Book Antiqua', Cambria, serif; - --sk-font-heading: var(--sk-font-body); + --sk-font-heading: 'freight-display-pro', var(--sk-font-body); --sk-font-mono: 'Fira Mono', monospace; --sk-text-xxl: 3.6rem; --sk-text-xl: 3rem; From 143db45fb5c44a06bd9952eae442eeff416e5da1 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 2 Oct 2024 17:05:18 -0400 Subject: [PATCH 4/4] small tweaks --- .../src/routes/docs/[...path]/Breadcrumbs.svelte | 2 +- packages/site-kit/src/lib/nav/Nav.svelte | 2 +- packages/site-kit/src/lib/search/Search.svelte | 14 ++++++++------ 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte index e653287548..56c247e9f7 100644 --- a/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte +++ b/apps/svelte.dev/src/routes/docs/[...path]/Breadcrumbs.svelte @@ -17,7 +17,7 @@ line-height: 1.35; span:not(:last-child)::after { - content: ' • '; + content: ' / '; } } diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index 035c4e0d37..068ac5d376 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -183,7 +183,7 @@ Top navigation bar for the application. It provides a slot for the left side, th .menu :global(a) { color: var(--sk-text-2); line-height: 1; - padding: 0.1rem 0.5rem 0 0.5rem; + padding: 0rem 0.5rem 0 0.5rem; white-space: nowrap; height: 100%; display: flex; diff --git a/packages/site-kit/src/lib/search/Search.svelte b/packages/site-kit/src/lib/search/Search.svelte index bde300397c..bb2bbaf6d0 100644 --- a/packages/site-kit/src/lib/search/Search.svelte +++ b/packages/site-kit/src/lib/search/Search.svelte @@ -59,7 +59,7 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc input { position: relative; - padding: 0.5em 0.5em 0.4em 2em; + padding: 0.3em 0.5em 0.4em 2em; border: none; font-family: inherit; font-size: 1em; @@ -72,17 +72,17 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc no-repeat 0.6em 55% / 1.2em 1.2em url(../icons/search.svg), var(--sk-back-4); color: var(--sk-text-3); + + &::placeholder { + text-transform: lowercase; + color: var(--sk-text-3); + } } input:focus + .shortcut { display: none; } - input::placeholder { - text-transform: lowercase; - color: var(--sk-text-3); - } - .shortcut { color: var(--sk-text-3); position: absolute; @@ -97,10 +97,12 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc } kbd { + position: relative; display: none; color: var(--sk-text-3); font-size: inherit; font-family: inherit; + top: -0.1rem; } @media (min-width: 800px) {