From 6bf64ca092eef541e9ad9f809f03b3458f51ca0d Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Fri, 19 Apr 2019 22:19:52 -0400 Subject: [PATCH] make type easier to read, revert copy changes --- site/src/routes/_components/Blurb.svelte | 167 +++++++++--------- .../routes/_components/WhosUsingSvelte.svelte | 33 ++-- site/src/routes/index.svelte | 12 +- site/static/global.css | 3 +- 4 files changed, 114 insertions(+), 101 deletions(-) diff --git a/site/src/routes/_components/Blurb.svelte b/site/src/routes/_components/Blurb.svelte index 74353a6e11..5f657def74 100644 --- a/site/src/routes/_components/Blurb.svelte +++ b/site/src/routes/_components/Blurb.svelte @@ -1,7 +1,3 @@ - - -
-
+
+

Write less code

-

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

+

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

- - discover how - + learn more
-
+

No virtual DOM

-

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

- - - wonder why - +

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

+ + learn more
-
+

Truly reactive

-

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

+

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

- - experience how - + 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 -

+

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.

-

Convince yourself

-# quick install
 npx degit sveltejs/template my-svelte-project
 cd my-svelte-project
 
@@ -144,12 +153,8 @@ 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 93b90dbae3..021de2742c 100644 --- a/site/src/routes/_components/WhosUsingSvelte.svelte +++ b/site/src/routes/_components/WhosUsingSvelte.svelte @@ -13,23 +13,32 @@ margin: 1em 0 0 0; display: flex; flex-wrap: wrap; - align-items: center; - justify-content: space-between; } - a:not(.btn) { - height: 5rem; - margin: 0 1.6rem 3.2rem; + a { + height: 40px; + margin: 0 0.5em 0.5em 0; 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:not(.btn) { - height: 6rem; - padding: 1rem 2rem; - border-radius: var(--border-r); + a { + height: 60px; + padding: 10px 20px; + border-radius: 30px; } } @@ -45,5 +54,5 @@ Nesta logo The New York Times logo Stone Payments logo -

+ your company?

- + + your company? + \ No newline at end of file diff --git a/site/src/routes/index.svelte b/site/src/routes/index.svelte index 3eb8ad0323..40f6d27b71 100644 --- a/site/src/routes/index.svelte +++ b/site/src/routes/index.svelte @@ -49,7 +49,7 @@ right: -4rem; width: 68rem; height: 68rem; - mix-blend-mode: multiply; + /* mix-blend-mode: multiply; */ will-change: transform; } @@ -112,14 +112,14 @@ Svelte logotype

Cybernetically enhanced web apps

- +
-

A taste of Svelte
Svelte components are built on top of HTML. Just add data.

+

Svelte components are built on top of HTML. Just add data.

@@ -132,7 +132,7 @@
-

Scoped styles
CSS is component-scoped by default — no more style collisions or specificity wars. Or you can use your favourite CSS-in-JS library.

+

CSS is component-scoped by default — no more style collisions or specificity wars. Or you can use your favourite CSS-in-JS library.

@@ -145,7 +145,7 @@
-

Intelligent compiler
Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.

+

Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.

@@ -158,7 +158,7 @@
-

Build-in Transitions
Create beautiful UIs with a powerful, performant transition engine built right into the framework.

+

Build beautiful UIs with a powerful, performant transition engine built right into the framework.

diff --git a/site/static/global.css b/site/static/global.css index 83dc70ead0..26723d752e 100644 --- a/site/static/global.css +++ b/site/static/global.css @@ -141,10 +141,9 @@ body { font: 300 var(--h4)/var(--lh) var(--font); background-color: var(--back); color: var(--text); - -webkit-font-smoothing: antialiased; /* default spacing of Overpass is a bit too airy */ - letter-spacing: -.013em; + /* letter-spacing: -.013em; */ } h1, h2, h3, h4, h5, h6, blockquote {