From f3375a9a194cd97429f12705865aa04ab5aa8f96 Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Sun, 28 Apr 2019 14:36:07 -0400
Subject: [PATCH] more more stuff into shared site-kit

---
 site/src/routes/_components/Example.svelte |  52 +++++
 site/src/routes/_layout.svelte             |  22 +-
 site/src/routes/index.svelte               | 223 ++++++---------------
 site/static/svelte-logo-mask.svg           |  17 +-
 site/static/svelte-logo-outline.svg        |  21 +-
 site/static/svelte-logo.svg                |  21 +-
 6 files changed, 185 insertions(+), 171 deletions(-)
 create mode 100644 site/src/routes/_components/Example.svelte

diff --git a/site/src/routes/_components/Example.svelte b/site/src/routes/_components/Example.svelte
new file mode 100644
index 0000000000..c07b4be0b5
--- /dev/null
+++ b/site/src/routes/_components/Example.svelte
@@ -0,0 +1,52 @@
+<script>
+	import { Section } from '@sveltejs/site-kit';
+	import IntersectionObserver from '../../components/IntersectionObserver.svelte';
+	import ReplWidget from '../../components/Repl/ReplWidget.svelte';
+
+	export let id;
+</script>
+
+<style>
+	.example {
+		width: 100%;
+	}
+
+	.example :global(a) {
+		color: inherit;
+	}
+
+	.example > :global(p) {
+		margin: 4.4rem 2.4rem 2.4rem 0;
+	}
+
+	.repl-container {
+		width: 100%;
+		height: 420px;
+		border-radius: var(--border-r);
+		overflow: hidden;
+	}
+
+	@media (min-width: 920px) {
+		.example {
+			display: grid;
+			grid-template-columns: 1fr 3fr;
+			grid-gap: 0.5em;
+			align-items: start;
+		}
+	}
+</style>
+
+<Section>
+	<div class="example">
+		<slot></slot>
+
+		<div class="repl-container">
+			<IntersectionObserver once let:intersecting top={400}>
+				{#if intersecting}
+					<!-- <Lazy this={loadReplWidget} example={id}/> -->
+					<ReplWidget example={id}/>
+				{/if}
+			</IntersectionObserver>
+		</div>
+	</div>
+</Section>
\ No newline at end of file
diff --git a/site/src/routes/_layout.svelte b/site/src/routes/_layout.svelte
index 4ed5e6b7dd..b559691f1f 100644
--- a/site/src/routes/_layout.svelte
+++ b/site/src/routes/_layout.svelte
@@ -1,8 +1,8 @@
 <script>
 	import { page, preloading } from '@sapper/app';
-	import { Icons } from '@sveltejs/site-kit';
+	import { Icon, Icons, Nav, NavItem } from '@sveltejs/site-kit';
 	import PreloadingIndicator from '../components/PreloadingIndicator.svelte';
-	import Nav from '../components/TopNav.svelte';
+	// import Nav from '../components/TopNav.svelte';
 
 	export let segment;
 </script>
@@ -14,7 +14,23 @@
 {/if}
 
 {#if $page.path !== '/repl/embed'}
-	<Nav {segment}/>
+	<Nav {segment} {page} logo="svelte-logo-horizontal.svg">
+		<NavItem segment="tutorial">Tutorial</NavItem>
+		<NavItem segment="docs">API</NavItem>
+		<NavItem segment="examples">Examples</NavItem>
+		<NavItem segment="repl">REPL</NavItem>
+		<NavItem segment="blog">Blog</NavItem>
+
+		<NavItem external="https://sapper.svelte.technology">Sapper</NavItem>
+
+		<NavItem external="https://discord.gg/yy75DKs" title="Discord Chat">
+			<Icon name="message-square"/>
+		</NavItem>
+
+		<NavItem external="https://github.com/sveltejs/svelte" title="GitHub Repo">
+			<Icon name="github"/>
+		</NavItem>
+	</Nav>
 {/if}
 
 <main>
diff --git a/site/src/routes/index.svelte b/site/src/routes/index.svelte
index dc31a14df2..46f86050d4 100644
--- a/site/src/routes/index.svelte
+++ b/site/src/routes/index.svelte
@@ -1,13 +1,11 @@
 <script>
-	import Blurb from './_components/Blurb.svelte';
+	import { Blurb, Hero, Section } from '@sveltejs/site-kit';
+	// import Blurb from './_components/Blurb.svelte';
+	import Example from './_components/Example.svelte';
 	import WhosUsingSvelte from './_components/WhosUsingSvelte.svelte';
-	import IntersectionObserver from '../components/IntersectionObserver.svelte';
 	// import Lazy from '../components/Lazy.svelte';
-	import ReplWidget from '../components/Repl/ReplWidget.svelte';
 	import contributors from './_contributors.js';
 
-	let sy = 0;
-
 	// TODO this causes a Sapper CSS bug...
 	// function loadReplWidget() {
 	// 	console.log('lazy loading');
@@ -16,77 +14,18 @@
 </script>
 
 <style>
-	.container {
-		position: relative;
-		margin: 10rem auto;
-		padding: 0 var(--side-nav);
-		max-width: 120rem;
-	}
-
-	.container h3 { color: var(--text) }
-	.container ul { list-style: none }
-
-	/* max line-length ~60 chars */
-	li:not(.box) > p {
-		max-width: var(--linemax)
-	}
-
 	/* darken text for accesibility */
+	/* TODO does this belong elsewhere? */
 	:global(.back-light) {
 		--text: hsl(36, 3%, 44%);
 	}
 
-	.hero {
-		margin: 10rem auto;
-	}
-
-	.hero h3, .logotype {
-		position: relative;
-		left: 1.6rem;
-	}
-
-	.hero h3 {
-		font-size: 2rem;
-	}
-
-	.logotype {
-		height: 4rem;
-	}
-
-	.logo {
-		position: absolute;
-		top: -4rem;
-		right: 0rem;
-		width: 52rem;
-		will-change: transform;
-		display: none;
-	}
-
 	.examples {
 		background: var(--second);
 		color: white;
 		overflow: hidden;
 	}
 
-	.example {
-		width: 100%;
-	}
-
-	.example a {
-		color: inherit;
-	}
-
-	.example > p {
-		margin: 4.4rem 2.4rem 2.4rem 0;
-	}
-
-	.repl-container {
-		width: 100%;
-		height: 420px;
-		border-radius: var(--border-r);
-		overflow: hidden;
-	}
-
 	.contributor {
 		width: 2.4em;
 		height: 2.4em;
@@ -98,45 +37,6 @@
 		margin: 0 0.5em 0.5em 0;
 		border: 2px solid var(--second);
 	}
-
-	@media (min-width: 640px) {
-		.logotype {
-			height: 6rem;
-		}
-
-		.hero h3 {
-			font-size: var(--h3);
-		}
-	}
-
-	@media (min-width: 800px) {
-		.logo {
-			display: block;
-		}
-
-		.hero {
-			margin: 15rem auto;
-		}
-
-		.hero h3, .logotype {
-			left: 3rem;
-		}
-	}
-
-	@media (min-width: 920px) {
-		.example {
-			display: grid;
-			grid-template-columns: 1fr 3fr;
-			grid-gap: 0.5em;
-			align-items: start;
-		}
-	}
-
-	@media (min-width: 1200px) {
-		.logo {
-			right: calc(50vw - 60rem);
-		}
-	}
 </style>
 
 <svelte:head>
@@ -147,78 +47,83 @@
 	<meta name="Description" content="Cybernetically enhanced web apps">
 </svelte:head>
 
-<svelte:window bind:scrollY={sy}/>
+<Hero
+	title="Svelte"
+	tagline="Cybernetically enhanced web apps"
+	outline="svelte-logo-outline.svg"
+	logotype="svelte-logotype.svg"
+/>
 
-<img alt="Svelte logo" class="logo" src="svelte-logo-outline.svg" style="transform: translate(0, {sy * .2}px)">
+<Blurb>
+	<a href="blog/write-less-code" slot="one">
+		<h2>Write less code</h2>
+		<p>Build boilerplate-free components using languages you already know — HTML, CSS and JavaScript</p>
 
-<section class="hero container">
-	<img alt="Svelte logotype" class="logotype" src="svelte-logotype.svg">
-	<h3>Cybernetically enhanced web apps</h3>
-</section>
+		<span class="learn-more">learn more</span>
+	</a>
 
-<Blurb/>
+	<a href="blog/virtual-dom-is-pure-overhead" slot="two">
+		<h2>No virtual DOM</h2>
+		<p>Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays fast</p>
+
+		<span class="learn-more">learn more</span>
+	</a>
+
+	<a href="blog/svelte-3-rethinking-reactivity" slot="three">
+		<h2>Truly reactive</h2>
+		<p>No more complex state management libraries — Svelte brings reactivity to JavaScript itself</p>
+
+		<span class="learn-more">learn more</span>
+	</a>
+
+	<div class="description" slot="what">
+		<p>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 <em>browser</em>, Svelte shifts that work into a <em>compile step</em> that happens when you build your app.</p>
+
+		<p>Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.</p>
+
+		<p><a href="blog/svelte-3-rethinking-reactivity">Read the introductory blog post</a> to learn more.</p>
+	</div>
+
+	<div style="grid-area: start; display: flex; flex-direction: column; min-width: 0" slot="how">
+		<pre class="language-bash" style="margin: 0 0 1em 0; min-width: 0; min-height: 0">
+npx degit sveltejs/template my-svelte-project
+cd my-svelte-project
+
+npm install
+npm run dev & open http://localhost:5000
+		</pre>
+
+		<p style="flex: 1">See the <a href="blog/the-easiest-way-to-get-started">quickstart guide</a> for more information.</p>
+
+		<p class="cta"><a rel="prefetch" href="tutorial">Learn Svelte</a></p>
+	</div>
+</Blurb>
 
 <div class="examples">
-	<section class="container example">
+	<Example id="hello-world">
 		<p>Svelte components are built on top of HTML. Just add data.</p>
+	</Example>
 
-		<div class="repl-container">
-			<IntersectionObserver once let:intersecting top={400}>
-				{#if intersecting}
-					<!-- <Lazy this={loadReplWidget} example="hello-world"/> -->
-					<ReplWidget example="hello-world"/>
-				{/if}
-			</IntersectionObserver>
-		</div>
-	</section>
-
-	<section class="container example">
+	<Example id="nested-components">
 		<p>CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="/blog/svelte-css-in-js">use your favourite CSS-in-JS library</a>.</p>
+	</Example>
 
-		<div class="repl-container">
-			<IntersectionObserver once let:intersecting top={400}>
-				{#if intersecting}
-					<!-- <Lazy this={loadReplWidget} example="nested-components"/> -->
-					<ReplWidget example="nested-components"/>
-				{/if}
-			</IntersectionObserver>
-		</div>
-	</section>
-
-	<section class="container example">
+	<Example id="reactive-assignments">
 		<p>Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.</p>
+	</Example>
 
-		<div class="repl-container">
-			<IntersectionObserver once let:intersecting top={400}>
-				{#if intersecting}
-					<!-- <Lazy this={loadReplWidget} example="reactive-assignments"/> -->
-					<ReplWidget example="reactive-assignments"/>
-				{/if}
-			</IntersectionObserver>
-		</div>
-	</section>
-
-	<section class="container example">
+	<Example id="svg-transitions">
 		<p>Build beautiful UIs with a powerful, performant transition engine built right into the framework.</p>
-
-		<div class="repl-container">
-			<IntersectionObserver once let:intersecting top={400}>
-				{#if intersecting}
-					<!-- <Lazy this={loadReplWidget} example="svg-transitions"/> -->
-					<ReplWidget example="svg-transitions"/>
-				{/if}
-			</IntersectionObserver>
-		</div>
-	</section>
+	</Example>
 </div>
 
-<section class="container">
+<Section>
 	<h3>Who's using Svelte?</h3>
 
 	<WhosUsingSvelte/>
-</section>
+</Section>
 
-<section class="container">
+<Section>
 	<h3>Contributors</h3>
 
 	<p>Svelte is free and open source software, made possible by the work of dozens of volunteers. <a href="https://github.com/sveltejs/svelte">Join us!</a></p>
@@ -230,4 +135,4 @@
 			href="https://github.com/{contributor}"
 		>{contributor}</a>
 	{/each}
-</section>
+</Section>
diff --git a/site/static/svelte-logo-mask.svg b/site/static/svelte-logo-mask.svg
index 2b78ccad07..9e5b40598f 100644
--- a/site/static/svelte-logo-mask.svg
+++ b/site/static/svelte-logo-mask.svg
@@ -1,5 +1,16 @@
 <?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
-	<path fill="black" d='M96.33,20.61C85.38,4.93,63.74.28,48.09,10.25L20.61,27.77A31.46,31.46,0,0,0,6.37,48.88,33.22,33.22,0,0,0,9.64,70.2,31.52,31.52,0,0,0,4.93,82a33.61,33.61,0,0,0,5.73,25.41c11,15.68,32.6,20.33,48.25,10.36l27.48-17.52a31.48,31.48,0,0,0,14.24-21.11A33.22,33.22,0,0,0,97.36,57.8,31.52,31.52,0,0,0,102.07,46a33.57,33.57,0,0,0-5.74-25.41
-	M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45' />
+<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 98.2 118" style="enable-background:new 0 0 98.2 118;" xml:space="preserve">
+<path d="M91.9,15.6C81-0.1,59.3-4.7,43.7,5.3L16.2,22.8C8.7,27.5,3.5,35.2,2,43.9c-1.3,7.3-0.2,14.8,3.3,21.3
+	c-2.4,3.6-4,7.6-4.7,11.8c-1.6,8.9,0.5,18.1,5.7,25.4c11,15.7,32.6,20.3,48.2,10.4L82,95.3c7.5-4.7,12.7-12.4,14.2-21.1
+	c1.3-7.3,0.2-14.8-3.3-21.3c2.4-3.6,4-7.6,4.7-11.8C99.2,32.1,97.2,22.9,91.9,15.6 M41,103.9c-8.9,2.3-18.2-1.2-23.4-8.7
+	c-3.2-4.4-4.4-9.9-3.5-15.3c0.2-0.9,0.4-1.7,0.6-2.6l0.5-1.6l1.4,1c3.3,2.4,6.9,4.2,10.8,5.4l1,0.3l-0.1,1c-0.1,1.4,0.3,2.9,1.1,4.1
+	c1.6,2.3,4.4,3.4,7.1,2.7c0.6-0.2,1.2-0.4,1.7-0.7l27.4-17.5c1.4-0.9,2.3-2.2,2.6-3.8c0.3-1.6-0.1-3.3-1-4.6
+	c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7L48,68.3c-1.7,1.1-3.6,1.9-5.6,2.4c-8.9,2.3-18.2-1.2-23.4-8.7
+	c-3.1-4.4-4.4-9.9-3.4-15.3c0.9-5.2,4.1-9.9,8.6-12.7l27.4-17.5c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7
+	c3.2,4.4,4.4,9.9,3.5,15.3c-0.2,0.9-0.4,1.7-0.7,2.6l-0.5,1.6l-1.4-1c-3.3-2.4-6.9-4.2-10.8-5.4l-1-0.3l0.1-1
+	c0.1-1.4-0.3-2.9-1.1-4.1c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7L32.5,46.1c-1.4,0.9-2.3,2.2-2.6,3.8
+	c-0.3,1.6,0.1,3.3,1,4.6c1.6,2.3,4.4,3.3,7.1,2.6c0.6-0.2,1.2-0.4,1.7-0.7l10.5-6.7c1.7-1.1,3.6-1.9,5.6-2.5
+	c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.9,5.2-4.1,9.9-8.6,12.7l-27.4,17.5C44.9,102.5,43,103.3,41,103.9"/>
 </svg>
diff --git a/site/static/svelte-logo-outline.svg b/site/static/svelte-logo-outline.svg
index 2257055638..9aac72c957 100644
--- a/site/static/svelte-logo-outline.svg
+++ b/site/static/svelte-logo-outline.svg
@@ -1,5 +1,20 @@
 <?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
-	<path fill="none" stroke="#ff3e00" stroke-width=".25" d='M96.33,20.61C85.38,4.93,63.74.28,48.09,10.25L20.61,27.77A31.46,31.46,0,0,0,6.37,48.88,33.22,33.22,0,0,0,9.64,70.2,31.52,31.52,0,0,0,4.93,82a33.61,33.61,0,0,0,5.73,25.41c11,15.68,32.6,20.33,48.25,10.36l27.48-17.52a31.48,31.48,0,0,0,14.24-21.11A33.22,33.22,0,0,0,97.36,57.8,31.52,31.52,0,0,0,102.07,46a33.57,33.57,0,0,0-5.74-25.41' />
-	<path fill="none" stroke="#ff3e00" stroke-width=".25" d='M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45' />
+<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 98.4 118.3" style="enable-background:new 0 0 98.4 118.3;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FF3E00;stroke-width:0.25;}
+</style>
+<path class="st0" d="M92,15.7C81.1,0.1,59.5-4.6,43.8,5.4L16.3,22.9C8.8,27.6,3.6,35.3,2.1,44c-1.3,7.3-0.2,14.8,3.3,21.3
+	c-2.4,3.6-4,7.6-4.7,11.8c-1.6,8.9,0.5,18.1,5.7,25.4c11,15.7,32.6,20.3,48.2,10.4l27.5-17.5c7.5-4.7,12.7-12.4,14.2-21.1
+	c1.3-7.3,0.2-14.8-3.3-21.3c2.4-3.6,4-7.6,4.7-11.8C99.4,32.2,97.3,23.1,92,15.7"/>
+<path class="st0" d="M41.1,104c-8.9,2.3-18.2-1.2-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3c0.2-0.9,0.4-1.7,0.6-2.6l0.5-1.6l1.4,1
+	c3.3,2.4,6.9,4.2,10.8,5.4l1,0.3l-0.1,1c-0.1,1.4,0.3,2.9,1.1,4.1c1.6,2.3,4.4,3.4,7.1,2.7c0.6-0.2,1.2-0.4,1.7-0.7l27.4-17.5
+	c1.4-0.9,2.3-2.2,2.6-3.8c0.3-1.6-0.1-3.3-1-4.6c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7l-10.5,6.7
+	c-1.7,1.1-3.6,1.9-5.6,2.4c-8.9,2.3-18.2-1.2-23.4-8.7c-3.1-4.4-4.4-9.9-3.4-15.3c0.9-5.2,4.1-9.9,8.6-12.7l27.4-17.5
+	c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.2,0.9-0.4,1.7-0.7,2.6L83,42.4l-1.4-1
+	c-3.3-2.4-6.9-4.2-10.8-5.4l-1-0.3l0.1-1c0.1-1.4-0.3-2.9-1.1-4.1c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7L32.6,46.2
+	C31.2,47,30.3,48.4,30,50c-0.3,1.6,0.1,3.3,1,4.6c1.6,2.3,4.4,3.3,7.1,2.6c0.6-0.2,1.2-0.4,1.7-0.7l10.5-6.7
+	c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.9,5.2-4.1,9.9-8.6,12.7l-27.4,17.5
+	C45,102.6,43.1,103.5,41.1,104"/>
 </svg>
diff --git a/site/static/svelte-logo.svg b/site/static/svelte-logo.svg
index 1e7460c036..4bf279659a 100644
--- a/site/static/svelte-logo.svg
+++ b/site/static/svelte-logo.svg
@@ -1,5 +1,20 @@
 <?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 103 124">
-	<path fill="#ff3e00" d='M96.33,20.61C85.38,4.93,63.74.28,48.09,10.25L20.61,27.77A31.46,31.46,0,0,0,6.37,48.88,33.22,33.22,0,0,0,9.64,70.2,31.52,31.52,0,0,0,4.93,82a33.61,33.61,0,0,0,5.73,25.41c11,15.68,32.6,20.33,48.25,10.36l27.48-17.52a31.48,31.48,0,0,0,14.24-21.11A33.22,33.22,0,0,0,97.36,57.8,31.52,31.52,0,0,0,102.07,46a33.57,33.57,0,0,0-5.74-25.41' />
-	<path fill="white" d='M45.41,108.86A21.81,21.81,0,0,1,22,100.18,20.2,20.2,0,0,1,18.53,84.9a19,19,0,0,1,.65-2.57l.52-1.58,1.41,1a35.32,35.32,0,0,0,10.75,5.37l1,.31-.1,1a6.2,6.2,0,0,0,1.11,4.08A6.57,6.57,0,0,0,41,95.19a6,6,0,0,0,1.68-.74L70.11,76.94a5.76,5.76,0,0,0,2.59-3.83,6.09,6.09,0,0,0-1-4.6,6.58,6.58,0,0,0-7.06-2.62,6.21,6.21,0,0,0-1.69.74L52.43,73.31a19.88,19.88,0,0,1-5.58,2.45,21.82,21.82,0,0,1-23.43-8.68A20.2,20.2,0,0,1,20,51.8a19,19,0,0,1,8.56-12.7L56,21.59a19.88,19.88,0,0,1,5.58-2.45A21.81,21.81,0,0,1,85,27.82,20.2,20.2,0,0,1,88.47,43.1a19,19,0,0,1-.65,2.57l-.52,1.58-1.41-1a35.32,35.32,0,0,0-10.75-5.37l-1-.31.1-1a6.2,6.2,0,0,0-1.11-4.08,6.57,6.57,0,0,0-7.06-2.62,6,6,0,0,0-1.68.74L36.89,51.06a5.71,5.71,0,0,0-2.58,3.83,6,6,0,0,0,1,4.6,6.58,6.58,0,0,0,7.06,2.62,6.21,6.21,0,0,0,1.69-.74l10.48-6.68a19.88,19.88,0,0,1,5.58-2.45,21.82,21.82,0,0,1,23.43,8.68A20.2,20.2,0,0,1,87,76.2a19,19,0,0,1-8.56,12.7L51,106.41a19.88,19.88,0,0,1-5.58,2.45' />
+<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 98.1 118" style="enable-background:new 0 0 98.1 118;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FF3E00;}
+	.st1{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M91.8,15.6C80.9-0.1,59.2-4.7,43.6,5.2L16.1,22.8C8.6,27.5,3.4,35.2,1.9,43.9c-1.3,7.3-0.2,14.8,3.3,21.3
+	c-2.4,3.6-4,7.6-4.7,11.8c-1.6,8.9,0.5,18.1,5.7,25.4c11,15.7,32.6,20.3,48.2,10.4l27.5-17.5c7.5-4.7,12.7-12.4,14.2-21.1
+	c1.3-7.3,0.2-14.8-3.3-21.3c2.4-3.6,4-7.6,4.7-11.8C99.2,32.1,97.1,22.9,91.8,15.6"/>
+<path class="st1" d="M40.9,103.9c-8.9,2.3-18.2-1.2-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3c0.2-0.9,0.4-1.7,0.6-2.6l0.5-1.6l1.4,1
+	c3.3,2.4,6.9,4.2,10.8,5.4l1,0.3l-0.1,1c-0.1,1.4,0.3,2.9,1.1,4.1c1.6,2.3,4.4,3.4,7.1,2.7c0.6-0.2,1.2-0.4,1.7-0.7L65.5,72
+	c1.4-0.9,2.3-2.2,2.6-3.8c0.3-1.6-0.1-3.3-1-4.6c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7l-10.5,6.7
+	c-1.7,1.1-3.6,1.9-5.6,2.4c-8.9,2.3-18.2-1.2-23.4-8.7c-3.1-4.4-4.4-9.9-3.4-15.3c0.9-5.2,4.1-9.9,8.6-12.7l27.5-17.5
+	c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.2,0.9-0.4,1.7-0.7,2.6l-0.5,1.6l-1.4-1
+	c-3.3-2.4-6.9-4.2-10.8-5.4l-1-0.3l0.1-1c0.1-1.4-0.3-2.9-1.1-4.1c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7L32.4,46.1
+	c-1.4,0.9-2.3,2.2-2.6,3.8s0.1,3.3,1,4.6c1.6,2.3,4.4,3.3,7.1,2.6c0.6-0.2,1.2-0.4,1.7-0.7l10.5-6.7c1.7-1.1,3.6-1.9,5.6-2.5
+	c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.9,5.2-4.1,9.9-8.6,12.7l-27.5,17.5C44.8,102.5,42.9,103.3,40.9,103.9"/>
 </svg>