From 1b269479826528aeccb3d7b73908e321860f4b7d Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 25 Sep 2024 18:43:13 -0400 Subject: [PATCH 1/3] move search bar to right hand side --- packages/site-kit/src/lib/nav/Nav.svelte | 22 +++---------------- .../site-kit/src/lib/search/Search.svelte | 3 ++- 2 files changed, 5 insertions(+), 20 deletions(-) diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index b607d257e0..52d289825c 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -88,10 +88,6 @@ Top navigation bar for the application. It provides a slot for the left side, th {/if}
-
- {@render search?.()} -
-
{#each links as link} {#if link.sections?.[0].path} @@ -116,6 +112,8 @@ Top navigation bar for the application. It provides a slot for the left side, th >
+ + {@render search?.()}
@@ -317,17 +315,10 @@ Top navigation bar for the application. It provides a slot for the left side, th } } - .desktop .center-area { - display: flex; - align-items: center; - justify-content: center; - flex: 1; - } - @media (min-width: 800px) { nav { display: grid; - grid-template-columns: auto 1fr 1fr; + grid-template-columns: 1fr auto; } nav::after { @@ -357,11 +348,4 @@ Top navigation bar for the application. It provides a slot for the left side, th display: none; } } - - @media (min-width: 1240px) { - nav { - display: grid; - grid-template-columns: 1fr auto 1fr; - } - } diff --git a/packages/site-kit/src/lib/search/Search.svelte b/packages/site-kit/src/lib/search/Search.svelte index b9e8b2e732..31a8990f50 100644 --- a/packages/site-kit/src/lib/search/Search.svelte +++ b/packages/site-kit/src/lib/search/Search.svelte @@ -139,7 +139,8 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc @media (min-width: 1240px) { .search-container { - width: 32rem; + width: 19rem; + margin-left: 1rem; } } From 023010ab07d7d9ce65a1b7192b823be337641f2c Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 25 Sep 2024 19:30:50 -0400 Subject: [PATCH 2/3] shuffle nav around --- .../src/lib/icons/discord-black.svg | 1 + .../src/lib/icons/discord-white.svg | 1 + .../svelte.dev/src/lib/icons/github-black.svg | 1 + .../svelte.dev/src/lib/icons/github-white.svg | 1 + apps/svelte.dev/src/routes/+layout.svelte | 52 ++++++++++++++++--- .../site-kit/src/lib/components/Icons.svelte | 14 ----- packages/site-kit/src/lib/nav/Nav.svelte | 31 ++++------- 7 files changed, 61 insertions(+), 40 deletions(-) create mode 100644 apps/svelte.dev/src/lib/icons/discord-black.svg create mode 100644 apps/svelte.dev/src/lib/icons/discord-white.svg create mode 100644 apps/svelte.dev/src/lib/icons/github-black.svg create mode 100644 apps/svelte.dev/src/lib/icons/github-white.svg diff --git a/apps/svelte.dev/src/lib/icons/discord-black.svg b/apps/svelte.dev/src/lib/icons/discord-black.svg new file mode 100644 index 0000000000..ccf347891c --- /dev/null +++ b/apps/svelte.dev/src/lib/icons/discord-black.svg @@ -0,0 +1 @@ + diff --git a/apps/svelte.dev/src/lib/icons/discord-white.svg b/apps/svelte.dev/src/lib/icons/discord-white.svg new file mode 100644 index 0000000000..7f9a31f02f --- /dev/null +++ b/apps/svelte.dev/src/lib/icons/discord-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/svelte.dev/src/lib/icons/github-black.svg b/apps/svelte.dev/src/lib/icons/github-black.svg new file mode 100644 index 0000000000..2eb09aed3b --- /dev/null +++ b/apps/svelte.dev/src/lib/icons/github-black.svg @@ -0,0 +1 @@ + diff --git a/apps/svelte.dev/src/lib/icons/github-white.svg b/apps/svelte.dev/src/lib/icons/github-white.svg new file mode 100644 index 0000000000..d5e6491854 --- /dev/null +++ b/apps/svelte.dev/src/lib/icons/github-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/svelte.dev/src/routes/+layout.svelte b/apps/svelte.dev/src/routes/+layout.svelte index 2e29231de7..8dba4233ab 100644 --- a/apps/svelte.dev/src/routes/+layout.svelte +++ b/apps/svelte.dev/src/routes/+layout.svelte @@ -31,14 +31,12 @@ {/snippet} {#snippet external_links()} - - Discord - + + Discord - - GitHub - + + GitHub {/snippet} @@ -66,4 +64,46 @@ height: 100%; width: 100%; } + + @media (min-width: 800px) { + [data-icon] { + background: no-repeat 50% 50%; + background-size: calc(100% - 1rem) auto; + padding: 0 0.5rem; + opacity: 0.6; + + :global(.dark) & { + opacity: 0.8; + } + + /* visually hidden, but visible to screen readers */ + span { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; + } + } + + [data-icon='discord'] { + width: 3.4rem; + background-image: url($lib/icons/discord-black.svg); + + :global(.dark) & { + background-image: url($lib/icons/discord-white.svg); + } + } + + [data-icon='github'] { + width: 3rem; + background-image: url($lib/icons/github-black.svg); + + :global(.dark) & { + background-image: url($lib/icons/github-white.svg); + } + } + } diff --git a/packages/site-kit/src/lib/components/Icons.svelte b/packages/site-kit/src/lib/components/Icons.svelte index 1794a57758..eabce1c942 100644 --- a/packages/site-kit/src/lib/components/Icons.svelte +++ b/packages/site-kit/src/lib/components/Icons.svelte @@ -51,20 +51,6 @@ Provides a list of svg icons that can be referenced through the `Icon` component - - - - - - - - diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index 52d289825c..37f3a2903d 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -21,17 +21,9 @@ Top navigation bar for the application. It provides a slot for the left side, th links: NavigationLink[]; search?: Snippet; external_links?: Snippet; - theme_label?: Snippet; } - let { - home_title = 'Homepage', - title, - links, - search, - external_links, - theme_label - }: Props = $props(); + let { home_title = 'Homepage', title, links, search, external_links }: Props = $props(); let visible = $state(true); @@ -101,19 +93,17 @@ Top navigation bar for the application. It provides a slot for the left side, th {/if} {/each} + - - +
{@render external_links?.()} + {@render search?.()} +
- {#if theme_label}{@render theme_label()}{:else}Theme{/if} + Theme
- - {@render search?.()}
@@ -136,9 +126,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
- {#if theme_label}{@render theme_label()}{:else}Theme{/if} + Theme
@@ -318,7 +306,7 @@ Top navigation bar for the application. It provides a slot for the left side, th @media (min-width: 800px) { nav { display: grid; - grid-template-columns: 1fr auto; + grid-template-columns: auto 1fr 1fr; } nav::after { @@ -333,6 +321,9 @@ Top navigation bar for the application. It provides a slot for the left side, th height: 100%; align-items: center; padding: 0 var(--sk-page-padding-side) 0 0; + } + + .menu:last-child { justify-content: end; } From 8ca68bc778c531093ff1f0a6f95110a5164d3b4a Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 25 Sep 2024 19:39:47 -0400 Subject: [PATCH 3/3] tweaks --- apps/svelte.dev/src/lib/icons/theme-dark.svg | 1 + apps/svelte.dev/src/lib/icons/theme-light.svg | 1 + .../src/lib/components/ThemeToggle.svelte | 77 +++---------------- packages/site-kit/src/lib/nav/Nav.svelte | 1 + .../site-kit/src/lib/search/Search.svelte | 2 +- 5 files changed, 16 insertions(+), 66 deletions(-) create mode 100644 apps/svelte.dev/src/lib/icons/theme-dark.svg create mode 100644 apps/svelte.dev/src/lib/icons/theme-light.svg diff --git a/apps/svelte.dev/src/lib/icons/theme-dark.svg b/apps/svelte.dev/src/lib/icons/theme-dark.svg new file mode 100644 index 0000000000..5063700ede --- /dev/null +++ b/apps/svelte.dev/src/lib/icons/theme-dark.svg @@ -0,0 +1 @@ + diff --git a/apps/svelte.dev/src/lib/icons/theme-light.svg b/apps/svelte.dev/src/lib/icons/theme-light.svg new file mode 100644 index 0000000000..b860398b56 --- /dev/null +++ b/apps/svelte.dev/src/lib/icons/theme-light.svg @@ -0,0 +1 @@ + diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte index b9660b7e46..6755366f82 100644 --- a/packages/site-kit/src/lib/components/ThemeToggle.svelte +++ b/packages/site-kit/src/lib/components/ThemeToggle.svelte @@ -1,6 +1,5 @@