From e3affd87305a204947bfd15ed65b58be4bdb4bbb Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 4 Oct 2024 13:39:17 -0400 Subject: [PATCH 1/8] redesign docs page --- .../src/routes/blog/[slug]/+page.svelte | 2 +- apps/svelte.dev/src/routes/docs/+page.svelte | 79 +++++++++++++------ .../src/routes/docs/arrow-right.svg | 1 + 3 files changed, 59 insertions(+), 23 deletions(-) create mode 100644 apps/svelte.dev/src/routes/docs/arrow-right.svg diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte index 1d656f7adc..997e257fb5 100644 --- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte +++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte @@ -45,7 +45,7 @@ diff --git a/apps/svelte.dev/src/routes/docs/arrow-right.svg b/apps/svelte.dev/src/routes/docs/arrow-right.svg new file mode 100644 index 0000000000..1b36824698 --- /dev/null +++ b/apps/svelte.dev/src/routes/docs/arrow-right.svg @@ -0,0 +1 @@ + From 4289bc95b97d65ad51889ebb3d8a35c59cee9db1 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 4 Oct 2024 13:40:22 -0400 Subject: [PATCH 2/8] fix --- apps/svelte.dev/src/routes/docs/+page.svelte | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte index 69faebf320..7655a84321 100644 --- a/apps/svelte.dev/src/routes/docs/+page.svelte +++ b/apps/svelte.dev/src/routes/docs/+page.svelte @@ -65,7 +65,7 @@
-

I'm brand new here

+

I’m brand new here

We recommend starting with the interactive tutorial, which will teach you how to use Svelte right here in your browser. @@ -73,10 +73,10 @@ -

I'm migrating an app from Svelte 4

+

I’m migrating an app from Svelte 4

- If you're already experienced with an older version of Svelte, the migration guide will - bring you up to speed on the changes in Svelte 5. + If you’re already experienced with an older version of Svelte, the migration guide + will bring you up to speed on the changes in Svelte 5.

From 6ba0d9718dac6866d2ab4422c712019869799bac Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 4 Oct 2024 13:41:20 -0400 Subject: [PATCH 3/8] fix --- apps/svelte.dev/src/routes/docs/+page.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte index 7655a84321..d94714dd7d 100644 --- a/apps/svelte.dev/src/routes/docs/+page.svelte +++ b/apps/svelte.dev/src/routes/docs/+page.svelte @@ -116,7 +116,7 @@ } h2 { - padding-right: 2rem; + padding-right: 4rem; background: url(./arrow-right.svg) no-repeat 100% 50%; background-size: 3rem; } From cfa9a0f28d838c0ac6fafa5754f22baac8ef3a66 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 4 Oct 2024 13:49:31 -0400 Subject: [PATCH 4/8] fix --- apps/svelte.dev/src/routes/blog/+page.svelte | 1 + apps/svelte.dev/src/routes/blog/[slug]/+page.svelte | 1 + apps/svelte.dev/src/routes/docs/+page.svelte | 1 + packages/site-kit/src/lib/styles/tokens.css | 4 ++-- 4 files changed, 5 insertions(+), 2 deletions(-) diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte index 8bfd036de4..9f9a4127ef 100644 --- a/apps/svelte.dev/src/routes/blog/+page.svelte +++ b/apps/svelte.dev/src/routes/blog/+page.svelte @@ -37,6 +37,7 @@ min-height: calc(100vh - var(--sk-nav-height) - var(--sk-banner-bottom-height)); padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 6rem var(--sk-page-padding-side); max-width: var(--sk-page-main-width); + box-sizing: content-box; margin: 0 auto; text-wrap: balance; } diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte index 997e257fb5..57a7917000 100644 --- a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte +++ b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte @@ -47,6 +47,7 @@ .post { padding: var(--sk-page-padding-top) var(--sk-page-padding-side); max-width: var(--sk-page-main-width); + box-sizing: content-box; margin: 0 auto; } diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte index d94714dd7d..89972ebc77 100644 --- a/apps/svelte.dev/src/routes/docs/+page.svelte +++ b/apps/svelte.dev/src/routes/docs/+page.svelte @@ -94,6 +94,7 @@ .page { padding: var(--sk-page-padding-top) var(--sk-page-padding-side); max-width: var(--sk-page-main-width); + box-sizing: content-box; margin: auto; text-wrap: balance; } diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css index 416af9baf2..dd8acb34bd 100644 --- a/packages/site-kit/src/lib/styles/tokens.css +++ b/packages/site-kit/src/lib/styles/tokens.css @@ -18,7 +18,7 @@ --sk-page-padding-side: 2.4rem; --sk-thick-border-width: 0.3rem; --sk-border-radius: 0.4rem; - --sk-page-main-width: 80rem; + --sk-page-main-width: 84rem; --sk-banner-bottom-height: 0px; /* typography */ @@ -37,7 +37,7 @@ --sk-font-size-ui-large: 3rem; /* TODO add regular/small */ --sk-font-size-code: 1.4rem; - --sk-line-max-width: 84rem; + --sk-line-max-width: 84rem; /* TODO can this be merged with --sk-page-main-width? /* Base colors */ --sk-theme-1-hsl: 12, 93%, 43%; From ec8acfa3413a01d352a4e15dfc3bfc41d9cb4d12 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 4 Oct 2024 13:57:10 -0400 Subject: [PATCH 5/8] link to discord --- apps/svelte.dev/src/routes/docs/+page.svelte | 13 +++++++++++++ apps/svelte.dev/src/routes/docs/external-link.svg | 1 + 2 files changed, 14 insertions(+) create mode 100644 apps/svelte.dev/src/routes/docs/external-link.svg diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte index 89972ebc77..c97c03a06c 100644 --- a/apps/svelte.dev/src/routes/docs/+page.svelte +++ b/apps/svelte.dev/src/routes/docs/+page.svelte @@ -87,6 +87,14 @@ share them with other people.

+ + +

Help! I'm stuck

+

+ Join our Discord server where you can hang out with fellow Svelte users and ask them + questions. It's like an LLM but with people. +

+
@@ -120,6 +128,11 @@ padding-right: 4rem; background: url(./arrow-right.svg) no-repeat 100% 50%; background-size: 3rem; + + .external & { + background-image: url(./external-link.svg); + background-size: 3rem; + } } p:last-child { diff --git a/apps/svelte.dev/src/routes/docs/external-link.svg b/apps/svelte.dev/src/routes/docs/external-link.svg new file mode 100644 index 0000000000..853d4afd66 --- /dev/null +++ b/apps/svelte.dev/src/routes/docs/external-link.svg @@ -0,0 +1 @@ + From feb04f22b6614a7234f89bf958610e99ab2feb20 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 4 Oct 2024 14:52:59 -0400 Subject: [PATCH 6/8] tighten up --- apps/svelte.dev/src/routes/docs/+page.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte index c97c03a06c..6441ba57b2 100644 --- a/apps/svelte.dev/src/routes/docs/+page.svelte +++ b/apps/svelte.dev/src/routes/docs/+page.svelte @@ -110,7 +110,7 @@ .options a { display: block; color: var(--sk-text-2); - margin: 2em -2em; + margin: 1em -2em; padding: 2em; background-color: var(--sk-back-2); border-radius: var(--sk-border-radius); From fbe459f78d683e25c331f08911ceb333e149793b Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 4 Oct 2024 15:56:05 -0400 Subject: [PATCH 7/8] oops --- apps/svelte.dev/src/routes/docs/+page.svelte | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte index 6441ba57b2..874a88f2ff 100644 --- a/apps/svelte.dev/src/routes/docs/+page.svelte +++ b/apps/svelte.dev/src/routes/docs/+page.svelte @@ -112,10 +112,11 @@ color: var(--sk-text-2); margin: 1em -2em; padding: 2em; - background-color: var(--sk-back-2); + background-color: var(--sk-back-1); border-radius: var(--sk-border-radius); &:hover { + background-color: var(--sk-back-2); filter: drop-shadow(1px 2px 4px rgb(0 0 0 / 0.1)); text-decoration: none; From b4c3534ef774028412ecfb5506eeba6498fdd684 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Fri, 4 Oct 2024 16:33:58 -0400 Subject: [PATCH 8/8] make arrows slightly brighter --- apps/svelte.dev/src/routes/docs/arrow-right.svg | 2 +- apps/svelte.dev/src/routes/docs/external-link.svg | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/svelte.dev/src/routes/docs/arrow-right.svg b/apps/svelte.dev/src/routes/docs/arrow-right.svg index 1b36824698..1e020ac881 100644 --- a/apps/svelte.dev/src/routes/docs/arrow-right.svg +++ b/apps/svelte.dev/src/routes/docs/arrow-right.svg @@ -1 +1 @@ - + diff --git a/apps/svelte.dev/src/routes/docs/external-link.svg b/apps/svelte.dev/src/routes/docs/external-link.svg index 853d4afd66..6770bf94e2 100644 --- a/apps/svelte.dev/src/routes/docs/external-link.svg +++ b/apps/svelte.dev/src/routes/docs/external-link.svg @@ -1 +1 @@ - +