diff --git a/site/src/components/TopNav.svelte b/site/src/components/TopNav.svelte index d02ff58cec..6079ffa86e 100644 --- a/site/src/components/TopNav.svelte +++ b/site/src/components/TopNav.svelte @@ -1,7 +1,6 @@ + -
-
-

Write less code

-

Build boilerplate-free components using languages you already know — HTML, CSS and JavaScript

+
+
+

Write less code

+

+ Build boilerplate-free components using languages you already know — HTML, CSS and JavaScript +

- learn more + + discover how +
-
-

No virtual DOM

-

Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays fast

+
+

No virtual DOM

+

+ Svelte compiles your code to tiny, framework-less vanilla JS — your app + starts fast and stays fast +

- learn more + + wonder why +
-
-

Truly reactive

-

No more complex state management libraries — Svelte brings reactivity to JavaScript itself

+
+

Truly reactive

+

+ No more complex state management libraries — Svelte brings reactivity to JavaScript itself +

- learn more + + experience how +
-

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

- -

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

- -

Read the introductory blog post to learn more.

+

Svelte up your life

+

+ Svelte is a radical new approach to building user interfaces. Whereas + traditional frameworks do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app. +

+ +

+ Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes. +

+ +

+ Read the introductory blog post + to learn more +

+

Convince yourself

+# quick install
 npx degit sveltejs/template my-svelte-project
 cd my-svelte-project
 
@@ -159,8 +144,12 @@ npm install
 npm run dev & open http://localhost:5000
 		
-

See the quickstart guide for more information.

+

+ See the quickstart guide for more information. +

-

Learn Svelte

+

+ Learn Svelte +

-
\ No newline at end of file +
diff --git a/site/src/routes/_components/WhosUsingSvelte.svelte b/site/src/routes/_components/WhosUsingSvelte.svelte index 58dddc3632..93b90dbae3 100644 --- a/site/src/routes/_components/WhosUsingSvelte.svelte +++ b/site/src/routes/_components/WhosUsingSvelte.svelte @@ -13,32 +13,23 @@ margin: 1em 0 0 0; display: flex; flex-wrap: wrap; + align-items: center; + justify-content: space-between; } - a { - height: 40px; - margin: 0 0.5em 0.5em 0; + a:not(.btn) { + height: 5rem; + margin: 0 1.6rem 3.2rem; text-decoration: none; - border: 1px solid #aaa; - padding: 5px 10px; - border-radius: 20px; - } - - .add-yourself { - display: flex; - align-items: center; - border: 1px solid #eee; } - img { - height: 100%; - } + img { height: 100% } @media (min-width: 540px) { - a { - height: 60px; - padding: 10px 20px; - border-radius: 30px; + a:not(.btn) { + height: 6rem; + padding: 1rem 2rem; + border-radius: var(--border-r); } } @@ -54,5 +45,5 @@ Nesta logo The New York Times logo Stone Payments logo - + your company? +

+ your company?

diff --git a/site/src/routes/index.svelte b/site/src/routes/index.svelte index 58b28f09b3..3eb8ad0323 100644 --- a/site/src/routes/index.svelte +++ b/site/src/routes/index.svelte @@ -1,6 +1,4 @@