From cc70200f5fb4a6a405c21b7fc88c5676fe44234c Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 23 Oct 2024 20:34:44 -0400 Subject: [PATCH 01/10] font switcher --- apps/svelte.dev/src/app.html | 4 + packages/site-kit/package.json | 7 +- .../src/lib/components/Dropdown.svelte | 12 ++- .../src/lib/components/FontDropdown.svelte | 76 +++++++++++++++++++ .../site-kit/src/lib/components/Icons.svelte | 9 +++ packages/site-kit/src/lib/nav/Nav.svelte | 5 ++ packages/site-kit/src/lib/styles/index.css | 2 + packages/site-kit/src/lib/styles/tokens.css | 18 +++++ pnpm-lock.yaml | 8 ++ 9 files changed, 135 insertions(+), 6 deletions(-) create mode 100644 packages/site-kit/src/lib/components/FontDropdown.svelte diff --git a/apps/svelte.dev/src/app.html b/apps/svelte.dev/src/app.html index ea62d87f86..e1e9679e3e 100644 --- a/apps/svelte.dev/src/app.html +++ b/apps/svelte.dev/src/app.html @@ -23,6 +23,10 @@ JSON.parse(localStorage.getItem('svelte:theme'))?.current ?? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') ); + + document.documentElement.classList.add( + `font-${localStorage.getItem('svelte:font') ?? 'elegant'}` + ); %sveltekit.head% diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json index 9ede0b81ba..99e3c56457 100644 --- a/packages/site-kit/package.json +++ b/packages/site-kit/package.json @@ -22,7 +22,6 @@ }, "homepage": "https://github.com/sveltejs/svelte.dev/tree/main/packages/site-kit#readme", "dependencies": { - "@lezer/common": "^1.0.4", "@codemirror/autocomplete": "^6.9.0", "@codemirror/commands": "^6.2.5", "@codemirror/lang-css": "^6.2.1", @@ -37,12 +36,14 @@ "@fontsource/eb-garamond": "^5.1.0", "@fontsource/fira-mono": "^5.1.0", "@fontsource/fira-sans": "^5.1.0", + "@fontsource/opendyslexic": "^5.1.0", + "@lezer/common": "^1.0.4", + "@replit/codemirror-lang-svelte": "^6.0.0", "@shikijs/twoslash": "^1.22.0", "esm-env": "^1.0.0", "json5": "^2.2.3", "shiki": "^1.22.0", - "svelte-persisted-store": "^0.9.2", - "@replit/codemirror-lang-svelte": "^6.0.0" + "svelte-persisted-store": "^0.9.2" }, "devDependencies": { "@sveltejs/kit": "^2.6.3", diff --git a/packages/site-kit/src/lib/components/Dropdown.svelte b/packages/site-kit/src/lib/components/Dropdown.svelte index 841811ee08..d0a81db900 100644 --- a/packages/site-kit/src/lib/components/Dropdown.svelte +++ b/packages/site-kit/src/lib/components/Dropdown.svelte @@ -4,14 +4,15 @@ let { children, dropdown, - align = 'left' - }: { children: Snippet; dropdown: Snippet; align?: 'left' | 'right' } = $props(); + align = 'left', + top = false + }: { children: Snippet; dropdown: Snippet; align?: 'left' | 'right'; top?: boolean } = $props();
{@render children()} -
@@ -41,6 +42,11 @@ left: auto; right: -1rem; } + + &.top { + top: auto; + bottom: calc(50% + min(50%, 1.5rem)); + } } .dropdown:hover .dropdown-content, diff --git a/packages/site-kit/src/lib/components/FontDropdown.svelte b/packages/site-kit/src/lib/components/FontDropdown.svelte new file mode 100644 index 0000000000..8f1d20065b --- /dev/null +++ b/packages/site-kit/src/lib/components/FontDropdown.svelte @@ -0,0 +1,76 @@ + + + +
+ + +
+ + {#snippet dropdown()} +
+ + + +
+ {/snippet} + + + diff --git a/packages/site-kit/src/lib/components/Icons.svelte b/packages/site-kit/src/lib/components/Icons.svelte index f1cf8a5a8c..efd2981cd1 100644 --- a/packages/site-kit/src/lib/components/Icons.svelte +++ b/packages/site-kit/src/lib/components/Icons.svelte @@ -195,5 +195,14 @@ Provides a list of svg icons that can be referenced through the `Icon` component d="M5 22q-.825 0-1.413-.588T3 20V6h2v14h11v2H5Zm4-4q-.825 0-1.413-.588T7 16V4q0-.825.588-1.413T9 2h9q.825 0 1.413.588T20 4v12q0 .825-.588 1.413T18 18H9Z" /> + + + + + + + + + diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index 7e20217a1f..8e59d45eea 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -13,6 +13,7 @@ Top navigation bar for the application. It provides a slot for the left side, th import { HoverMenu } from '../components'; import Search from '../search/Search.svelte'; import { tick } from 'svelte'; + import FontDropdown from '../components/FontDropdown.svelte'; interface Props { home_title?: string; @@ -130,11 +131,15 @@ Top navigation bar for the application. It provides a slot for the left side, th > + +
+ + - - choose('elegant')} + >Serif + +
{/snippet} @@ -51,17 +57,20 @@ button { display: block; font: var(--sk-font-ui-medium); - padding: 1rem 1.3rem; + padding: 1rem 1.3rem 1rem 3.5rem; line-height: 1; width: 100%; margin: 0; text-align: left; + background: no-repeat 1rem 1rem; + background-size: 1.6rem 1.6rem; &:hover { background-color: var(--sk-back-4); } &:first-child { + background-position: 1rem 1.3rem; padding-top: 1.3rem; } @@ -73,4 +82,35 @@ color: var(--sk-theme-1); } } + + .current { + height: 2.2rem; + aspect-ratio: 1; + } + + .elegant { + background-image: url(../icons/font-elegant-light.svg); + } + + .boring { + background-image: url(../icons/font-boring-light.svg); + } + + .accessible { + background-image: url(../icons/font-accessible-light.svg); + } + + :root.dark { + .elegant { + background-image: url(../icons/font-elegant-dark.svg); + } + + .boring { + background-image: url(../icons/font-boring-dark.svg); + } + + .accessible { + background-image: url(../icons/font-accessible-dark.svg); + } + } diff --git a/packages/site-kit/src/lib/icons/font-accessible-dark.svg b/packages/site-kit/src/lib/icons/font-accessible-dark.svg new file mode 100644 index 0000000000..f879017524 --- /dev/null +++ b/packages/site-kit/src/lib/icons/font-accessible-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/site-kit/src/lib/icons/font-accessible-light.svg b/packages/site-kit/src/lib/icons/font-accessible-light.svg new file mode 100644 index 0000000000..745a87f96e --- /dev/null +++ b/packages/site-kit/src/lib/icons/font-accessible-light.svg @@ -0,0 +1 @@ + diff --git a/packages/site-kit/src/lib/icons/font-boring-dark.svg b/packages/site-kit/src/lib/icons/font-boring-dark.svg new file mode 100644 index 0000000000..38abc6491a --- /dev/null +++ b/packages/site-kit/src/lib/icons/font-boring-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/site-kit/src/lib/icons/font-boring-light.svg b/packages/site-kit/src/lib/icons/font-boring-light.svg new file mode 100644 index 0000000000..509e00e1fd --- /dev/null +++ b/packages/site-kit/src/lib/icons/font-boring-light.svg @@ -0,0 +1 @@ + diff --git a/packages/site-kit/src/lib/icons/font-elegant-dark.svg b/packages/site-kit/src/lib/icons/font-elegant-dark.svg new file mode 100644 index 0000000000..a48fabd407 --- /dev/null +++ b/packages/site-kit/src/lib/icons/font-elegant-dark.svg @@ -0,0 +1 @@ + diff --git a/packages/site-kit/src/lib/icons/font-elegant-light.svg b/packages/site-kit/src/lib/icons/font-elegant-light.svg new file mode 100644 index 0000000000..d9bc61daab --- /dev/null +++ b/packages/site-kit/src/lib/icons/font-elegant-light.svg @@ -0,0 +1 @@ + diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index 8e59d45eea..abb3f4c227 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -277,14 +277,11 @@ Top navigation bar for the application. It provides a slot for the left side, th .home-link { --padding-right: 1rem; - width: 11.2rem; + width: 3.4rem; height: 100%; - background: url(../branding/svelte.svg) no-repeat 0 50% / calc(100% - var(--padding-right)) auto; + background: url(../branding/svelte-logo.svg) no-repeat 0 50% / calc(100% - var(--padding-right)) + auto; padding: 0 var(--padding-right) 0 calc(var(--sk-page-padding-side) + 0rem); - - :root.dark & { - background-image: url(../branding/svelte-dark.svg); - } } .mobile-menu { @@ -322,6 +319,19 @@ Top navigation bar for the application. It provides a slot for the left side, th } } + @media (min-width: 480px) { + .home-link { + width: 11.2rem; + background: url(../branding/svelte.svg) no-repeat 0 50% / calc(100% - var(--padding-right)) + auto; + padding: 0 var(--padding-right) 0 calc(var(--sk-page-padding-side) + 0rem); + + :root.dark & { + background-image: url(../branding/svelte-dark.svg); + } + } + } + @media (min-width: 800px) { .home-link { --padding-right: 2rem; From 710629d208b5a9464cecb388dbba94f7ff8e9987 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 25 Oct 2024 14:37:48 -0400 Subject: [PATCH 07/10] make it a two-way toggle --- packages/site-kit/package.json | 1 - .../src/lib/components/FontDropdown.svelte | 103 +++--------------- packages/site-kit/src/lib/nav/Nav.svelte | 13 ++- packages/site-kit/src/lib/styles/index.css | 4 +- pnpm-lock.yaml | 8 -- 5 files changed, 27 insertions(+), 102 deletions(-) diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json index 24fe57e3d1..f101cc0a24 100644 --- a/packages/site-kit/package.json +++ b/packages/site-kit/package.json @@ -37,7 +37,6 @@ "@fontsource/eb-garamond": "^5.1.0", "@fontsource/fira-mono": "^5.1.0", "@fontsource/fira-sans": "^5.1.0", - "@fontsource/opendyslexic": "^5.1.0", "@lezer/common": "^1.0.4", "@replit/codemirror-lang-svelte": "^6.0.0", "@shikijs/twoslash": "^1.22.0", diff --git a/packages/site-kit/src/lib/components/FontDropdown.svelte b/packages/site-kit/src/lib/components/FontDropdown.svelte index 8c1bdf30db..076372bbbf 100644 --- a/packages/site-kit/src/lib/components/FontDropdown.svelte +++ b/packages/site-kit/src/lib/components/FontDropdown.svelte @@ -1,116 +1,47 @@ - -
- - -
- - {#snippet dropdown()} -
- - - -
- {/snippet} - + diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index b4cb297e3a..d4c0d9c227 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -138,8 +138,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
- - + +
- + @@ -148,7 +148,7 @@ Top navigation bar for the application. It provides a slot for the left side, th - + From 54f8675cbb89607652b9b4896337128ed196c6c9 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 25 Oct 2024 14:52:29 -0400 Subject: [PATCH 09/10] oops --- packages/site-kit/src/lib/styles/tokens.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css index 1b670856ac..664d29117a 100644 --- a/packages/site-kit/src/lib/styles/tokens.css +++ b/packages/site-kit/src/lib/styles/tokens.css @@ -178,7 +178,8 @@ &.font-boring { --sk-font-family-body: 'Atkinson Hyperlegible', sans-serif; - --sk-font-size-body: 1.8rem; + --sk-font-size-body: 2rem; + --sk-font-size-body-small: 1.8rem; p code { font-size: 0.75em; From 05e66d0e951b32105dc2b703ca3345c3e11c802d Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 25 Oct 2024 14:52:42 -0400 Subject: [PATCH 10/10] tidy up --- packages/site-kit/src/lib/styles/tokens.css | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css index 664d29117a..815357713c 100644 --- a/packages/site-kit/src/lib/styles/tokens.css +++ b/packages/site-kit/src/lib/styles/tokens.css @@ -185,15 +185,6 @@ font-size: 0.75em; } } - - &.font-accessible { - --sk-font-family-body: 'OpenDyslexic', sans-serif; - --sk-font-size-body: 1.6rem; - - p code { - font-size: 0.9em; - } - } } @media screen and (min-width: 480px) {