diff --git a/apps/svelte.dev/src/routes/+layout.svelte b/apps/svelte.dev/src/routes/+layout.svelte index 2dbe2b0bb2..d8f6ef1cfe 100644 --- a/apps/svelte.dev/src/routes/+layout.svelte +++ b/apps/svelte.dev/src/routes/+layout.svelte @@ -38,21 +38,7 @@ {#snippet top_nav()} - + @@ -191,6 +170,10 @@ Top navigation bar for the application. It provides a slot for the left side, th } @media (max-width: 799px) { + nav { + transition: transform 0.2s; + } + nav:not(.visible):not(:focus-within) { transform: translate(0, calc(var(--sk-nav-height))); } @@ -251,7 +234,7 @@ Top navigation bar for the application. It provides a slot for the left side, th 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); - :global(.dark) & { + :root.dark & { background-image: url(../branding/svelte-dark.svg); } } @@ -272,18 +255,6 @@ Top navigation bar for the application. It provides a slot for the left side, th display: block; } - .appearance { - display: flex; - align-items: center; - margin-left: 1.5rem; - } - - .appearance .caption { - display: none; - line-height: 1; - margin-right: 0rem; - } - @media (max-width: 799px) { nav { top: unset; @@ -298,19 +269,6 @@ Top navigation bar for the application. It provides a slot for the left side, th padding: 1rem var(--sk-page-padding-side); } - .appearance { - position: relative; - display: flex; - padding: 1.5rem 0; - margin: 0 1rem; - justify-content: space-between; - } - - .appearance .caption { - display: block; - font: var(--sk-font-ui-medium); /* TODO this should be inherited */ - } - nav :global(.large) { display: none; } @@ -350,6 +308,31 @@ Top navigation bar for the application. It provides a slot for the left side, th .desktop { display: contents; + + [data-icon] { + background: no-repeat 50% 50%; + background-size: calc(100% - 1rem) auto; + padding: 0 0.5rem; + height: 100%; + } + + [data-icon='discord'] { + width: 3.4rem; + background-image: url($lib/icons/discord-light.svg); + + :global(.dark) & { + background-image: url($lib/icons/discord-dark.svg); + } + } + + [data-icon='github'] { + width: 3rem; + background-image: url($lib/icons/github-light.svg); + + :global(.dark) & { + background-image: url($lib/icons/github-dark.svg); + } + } } nav :global(.small) { diff --git a/packages/site-kit/src/lib/nav/Separator.svelte b/packages/site-kit/src/lib/nav/Separator.svelte deleted file mode 100644 index bb6160853e..0000000000 --- a/packages/site-kit/src/lib/nav/Separator.svelte +++ /dev/null @@ -1,33 +0,0 @@ - - -
- - diff --git a/packages/site-kit/src/lib/nav/index.ts b/packages/site-kit/src/lib/nav/index.ts index 5db97bd12b..12c8c7365b 100644 --- a/packages/site-kit/src/lib/nav/index.ts +++ b/packages/site-kit/src/lib/nav/index.ts @@ -1,5 +1,3 @@ -export { open_nav } from './Menu.svelte'; export { default as Nav } from './Nav.svelte'; export { default as PreloadingIndicator } from './PreloadingIndicator.svelte'; -export { default as Separator } from './Separator.svelte'; export { default as SkipLink } from './SkipLink.svelte';