diff --git a/site/src/components/TopNav.svelte b/site/src/components/TopNav.svelte index 3d02e58f65..c135ac12f0 100644 --- a/site/src/components/TopNav.svelte +++ b/site/src/components/TopNav.svelte @@ -179,6 +179,12 @@ background-color: rgba(255, 255, 255, 0.9); } + a { + color: inherit; + border-bottom: none; + transition: none; + } + @media (min-width: 840px) { ul { padding: 0; diff --git a/site/src/routes/_components/Blurb.svelte b/site/src/routes/_components/Blurb.svelte index bcf1d4ce66..f6feb6dd5a 100644 --- a/site/src/routes/_components/Blurb.svelte +++ b/site/src/routes/_components/Blurb.svelte @@ -18,6 +18,7 @@ padding: 1em; display: flex; flex-direction: column; + border-bottom: none; } h2 { @@ -140,7 +141,7 @@ 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.

@@ -157,7 +158,7 @@ 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

diff --git a/site/src/routes/_components/WhosUsingSvelte.svelte b/site/src/routes/_components/WhosUsingSvelte.svelte index 10f8674162..a7d4fec78e 100644 --- a/site/src/routes/_components/WhosUsingSvelte.svelte +++ b/site/src/routes/_components/WhosUsingSvelte.svelte @@ -18,7 +18,6 @@ a { height: 40px; margin: 0 0.5em 0.5em 0; - text-decoration: none; border: 2px solid var(--second); padding: 5px 10px; border-radius: 20px; diff --git a/site/src/routes/blog/[slug].svelte b/site/src/routes/blog/[slug].svelte index c5b3a01396..c64130efe5 100644 --- a/site/src/routes/blog/[slug].svelte +++ b/site/src/routes/blog/[slug].svelte @@ -17,12 +17,12 @@ -
-

{post.metadata.author}

- +

{post.metadata.title}

{post.metadata.description}

+

{post.metadata.author}

+ {@html post.html}
@@ -33,20 +33,32 @@ margin: 0 auto; } + h1 { + font-size: 4rem; + font-weight: 400; + } + + .standfirst { + font-size: var(--h4); + color: var(--second); + margin: 0 0 1em 0; + } + .byline { - margin: 0 0 4rem 0; - padding: 0 0 1.6rem 0; - border-bottom: var(--border-w) solid #6767785b; + margin: 0 0 6rem 0; + padding: 1.6rem 0 0 0; + border-top: var(--border-w) solid #6767785b; font-size: var(--h6); + text-transform: uppercase; } .byline a { - border-bottom: none; - font-weight: 600; + /* border-bottom: none; */ + /* font-weight: 600; */ } .byline a:hover { - border-bottom: 2px solid var(--prime); + /* border-bottom: 2px solid var(--prime); */ } .post h1 { @@ -101,12 +113,6 @@ background: transparent; } - .standfirst { - font-size: var(--h4); - color: var(--second); - margin: 0 0 2em 0; - } - .post :global(aside) { float: right; margin: 0 0 1em 1em; diff --git a/site/src/routes/blog/index.svelte b/site/src/routes/blog/index.svelte index b733a90b0a..6f96731af0 100644 --- a/site/src/routes/blog/index.svelte +++ b/site/src/routes/blog/index.svelte @@ -21,7 +21,7 @@
{#each posts as post}
- +

{post.metadata.title}

{post.metadata.description}

 @@ -45,7 +45,7 @@ color: var(--text); max-width: 18em; font-size: var(--h3); - font-weight: 300; + font-weight: 400; } .post:first-child { @@ -56,7 +56,7 @@ .post:first-child h2 { font-size: 4rem; - font-weight: 600; + font-weight: 400; color: var(--second); } @@ -65,7 +65,7 @@ content: 'Latest post • ' attr(data-pubdate); color: var(--flash); font-size: var(--h6); - font-weight: 600; + font-weight: 400; letter-spacing: .05em; text-transform: uppercase; } diff --git a/site/src/routes/docs/_GuideContents.svelte b/site/src/routes/docs/_GuideContents.svelte index 7b200052eb..3d93869cf0 100644 --- a/site/src/routes/docs/_GuideContents.svelte +++ b/site/src/routes/docs/_GuideContents.svelte @@ -50,6 +50,9 @@ position: relative; opacity: 0.75; transition: opacity 0.2s; + border-bottom: none; + padding: 0; + color: white; } .section { diff --git a/site/src/routes/docs/index.svelte b/site/src/routes/docs/index.svelte index f635690dd5..07cd1fa191 100644 --- a/site/src/routes/docs/index.svelte +++ b/site/src/routes/docs/index.svelte @@ -367,7 +367,7 @@ -
+
{#each sections as section}

diff --git a/site/src/routes/examples/_TableOfContents.svelte b/site/src/routes/examples/_TableOfContents.svelte index 0e591659b2..a3e8b23216 100644 --- a/site/src/routes/examples/_TableOfContents.svelte +++ b/site/src/routes/examples/_TableOfContents.svelte @@ -33,38 +33,6 @@ }); - - + + diff --git a/site/src/routes/index.svelte b/site/src/routes/index.svelte index 04ca5ebcb3..3b2447c222 100644 --- a/site/src/routes/index.svelte +++ b/site/src/routes/index.svelte @@ -72,6 +72,10 @@ width: 100%; } + .example a { + color: inherit; + } + .example > p { margin: 4.4rem 2.4rem 2.4rem 0; } @@ -155,7 +159,7 @@
-
+

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

@@ -168,7 +172,7 @@
-
+

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

@@ -181,7 +185,7 @@
-
+

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

@@ -194,7 +198,7 @@
-
+

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

@@ -217,7 +221,7 @@

Contributors

-

Svelte is free and open source software, made possible by the work of dozens of volunteers. Join us!

+

Svelte is free and open source software, made possible by the work of dozens of volunteers. Join us!

{#each contributors as contributor, i}
- + diff --git a/site/src/routes/tutorial/[slug]/index.svelte b/site/src/routes/tutorial/[slug]/index.svelte index d61af3ebce..5b2c2a6398 100644 --- a/site/src/routes/tutorial/[slug]/index.svelte +++ b/site/src/routes/tutorial/[slug]/index.svelte @@ -173,7 +173,7 @@ } .chapter-markup :global(a) { - text-decoration: underline; + color: white; } .chapter-markup :global(ul) { @@ -227,12 +227,16 @@ } a.next { - text-decoration: none; + /* border-bottom: none; */ + padding-right: 1.2em; + background: no-repeat 100% 50% url(/icons/arrow-right.svg); + background-size: 1em 1em; margin-left: auto; } a.next:hover { - text-decoration: underline; + /* border-bottom: 2px solid currentColor; */ + /* text-decoration: underline; */ } .improve-chapter { @@ -244,6 +248,9 @@ font-size: 14px; text-decoration: none; opacity: .3; + padding-left: 1.2em; + background: no-repeat 0 50% url(/icons/edit.svg); + background-size: 1em 1em; } .improve-chapter a:hover { @@ -281,12 +288,12 @@ {/if} {#if selected.next} - + {/if}
- Edit this chapter + Edit this chapter

diff --git a/site/static/global.css b/site/static/global.css index 93f46ac3a8..0681ee133a 100644 --- a/site/static/global.css +++ b/site/static/global.css @@ -307,25 +307,30 @@ button > svg, } /* links ------------------------------------- */ -.linkify a:not(.open-in-repl) { +a { position: relative; - padding: 0 0 .1rem 0; - border-bottom: .1rem solid hsla(15, 100%, 50%, 0.5); /* muted --prime */ + padding: 0 0 1px 0; + border-bottom: 1px solid currentColor; user-select: none; - color: inherit; + color: var(--prime); transition: color .2s, border .2s, padding .2s; } -.linkify a:not(.open-in-repl):hover { +a:hover { color: var(--flash); } -.linkify a:not(.open-in-repl):hover { +a:hover { + padding: 0; + border-bottom: 2px solid currentColor; +} + +a.no-underline { + border-bottom: none; padding: 0; - border-bottom: .2rem solid hsla(15, 100%, 50%, 1); } -a:hover:not(.disabled) > .icon { stroke: var(--flash) } +/* a:hover:not(.disabled) > .icon { stroke: var(--flash) } */ /* lists ---------------------------------- */ .listify ol, @@ -426,18 +431,6 @@ table code, table span { border-radius: var(--border-r); } -.open-in-repl { - position: absolute; - margin-top: 4rem; - margin-left: -2.5rem; - width: 3.6rem; - height: 3.6rem; - padding: .9rem; - background-color: var(--back-light); - border-radius: 50%; - border-left: .1rem solid #c7c6c6; -} - /* theme colors --------------------------- */ .prime { color: var(--prime) !important } .second { color: var(--second) !important } diff --git a/site/static/icons/edit.svg b/site/static/icons/edit.svg new file mode 100644 index 0000000000..5e7b182086 --- /dev/null +++ b/site/static/icons/edit.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file