diff --git a/sites/svelte.dev/src/routes/_components/Try.svelte b/sites/svelte.dev/src/routes/_components/Try.svelte index 65ddf2aecc..d75ec4c905 100644 --- a/sites/svelte.dev/src/routes/_components/Try.svelte +++ b/sites/svelte.dev/src/routes/_components/Try.svelte @@ -6,16 +6,19 @@
-
- -

see for yourself

- Try it locally, on StackBlitz, or
- with the interactive tutorial. + Try it locally, on StackBlitz, or with + the interactive tutorial.
+ +
+ +
@@ -41,7 +44,7 @@ .grid { display: grid; - gap: 1em; + gap: 2em; margin: 0 0 4rem 0; } @@ -49,13 +52,6 @@ margin-bottom: 0; } - @media (min-width: 900px) { - .grid { - grid-template-columns: repeat(var(--columns), 1fr); - gap: 7rem; - } - } - .try { width: 100%; margin: 0 auto; @@ -64,20 +60,38 @@ } .copy { - text-align: center; - margin: 0 0 8rem; + text-align: left; } h2 { display: inline-block; width: 25rem; - margin: 4rem 0 1rem; + margin: 0 0 1rem; font-size: var(--sk-text-xl); - text-align: justify; } a { color: inherit; text-decoration: underline; } + + @media (min-width: 900px) { + .grid { + grid-template-columns: repeat(var(--columns), 1fr); + gap: 7rem; + } + + .copy { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + order: 2; + } + + .copy div { + max-width: 15em; + text-align: center; + } + } diff --git a/sites/svelte.dev/svelte.config.js b/sites/svelte.dev/svelte.config.js index d05335d4e9..fd067f826e 100644 --- a/sites/svelte.dev/svelte.config.js +++ b/sites/svelte.dev/svelte.config.js @@ -5,5 +5,9 @@ import adapter from '@sveltejs/adapter-vercel'; export default { kit: { adapter: adapter() + }, + + vitePlugin: { + inspector: true } };