IMprove designs

sites/svelte.dev/src/routes/+page.svelte

@@ -21,13 +21,11 @@
 
 <Hero />
 
-<div class="blurb-shifter">
 <Blurb --background="var(--sk-back-1)">
 	<div slot="one">
 		<h2>Write less code</h2>
 		<p>
-				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
 		</p>
 
 		<a href="/blog/write-less-code" class="cta">learn more</a>
@@ -36,8 +34,8 @@
 	<div 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
+			Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays
+			fast
 		</p>
 
 		<a href="/blog/virtual-dom-is-pure-overhead" class="cta">learn more</a>
@@ -52,17 +50,12 @@
 		<a href="/blog/svelte-3-rethinking-reactivity" class="cta">learn more</a>
 	</div>
 </Blurb>
-</div>
 
 <Try />
 
 <Demo />
 
-<section>
-	<h3>Who's using Svelte?</h3>
-
 <WhosUsingSvelte />
-</section>
 
 <Supporters />
 
@@ -78,11 +71,8 @@
 </footer>
 
 <style>
-	section {
-		position: relative;
-		margin: 10rem auto;
-		padding: 0 var(--side-nav);
-		max-width: 120rem;
+	h2 {
+		line-height: 1.05;
 	}
 
 	footer {
@@ -97,10 +87,4 @@
 		padding: 0.5rem 1rem;
 		display: block;
 	}
-
-	/* @media (min-width: 900px) {
-		.blurb-shifter {
-			margin-top: -12em;
-		}
-	} */
 </style>

sites/svelte.dev/src/routes/_components/Demo.svelte

@@ -58,12 +58,11 @@
 
 <style>
 	h3 {
-		/* color: white; */
+		font-size: var(--sk-text-xl);
 	}
 
 	.description {
 		color: var(--sk-text-2);
-		height: 12rem; /* prevent layout popping when tab changes */
 	}
 
 	.container {
@@ -78,11 +77,15 @@
 		width: 100%;
 		height: 5rem;
 		grid-template-columns: 4fr 1fr;
-		color: var(--sk-text-2);
+		color: var(--sk-text-1);
 		align-items: center;
 		font-size: var(--h5);
 	}
 
+	a {
+		color: unset;
+	}
+
 	.tabs {
 		display: grid;
 		grid-template-columns: repeat(4, 1fr);
@@ -122,11 +125,6 @@
 		display: none;
 	}
 
-	a,
-	.description :global(a) {
-		/* color: white; */
-	}
-
 	.description :global(a) {
 		text-decoration: underline;
 	}

sites/svelte.dev/src/routes/_components/Hero.svelte

@@ -6,7 +6,11 @@
 
 <div class="hero">
 	<strong>Cybernetically enhanced web apps</strong>
-	<Image src={Machine} alt="The Svelte compiler packaging up your component code" --max-height="65vh" />
+	<Image
+		src={Machine}
+		alt="The Svelte compiler packaging up your component code"
+		--max-height="65vh"
+	/>
 	<img alt="Svelte logotype" class="logotype" src={SvelteLogotype} />
 </div>
 
@@ -28,7 +32,7 @@
 		font-weight: 700;
 		color: var(--sk-text-2);
 		letter-spacing: 0.05em;
-		left: max(var(--side-nav), 10%);
+		left: max(var(--sk-page-padding-side), 10%);
 		top: 25%;
 	}
 
@@ -44,18 +48,18 @@
 			position: absolute;
 			display: block;
 			width: min(30vw, 36rem);
-			bottom: 58%;
-			left: 10%;
+			bottom: 54%;
+			left: 15%;
 		}
 
 		strong {
 			max-width: 16em;
-			top: 45%;
+			top: 49%;
 		}
 
 		.logotype,
 		strong {
-			left: calc(var(--side-nav) + 4rem);
+			left: calc(var(--side-nav) + 8rem);
 			/* left: calc(50% - 56rem + var(--side-nav)); */
 		}
 	}
@@ -67,8 +71,7 @@
 		}
 	}
 
-	@media (prefers-color-scheme: dark) {
-		.hero {
+	:global(body.dark) .hero {
 		background: radial-gradient(
 				64.14% 72.25% at 47.58% 31.75%,
 				hsl(209deg 6% 47% / 52%) 0%,
@@ -83,8 +86,7 @@
 			linear-gradient(0deg, hsl(204, 38%, 20%), hsl(204, 10%, 90%));
 	}
 
-		.logotype {
+	:global(body.dark) .logotype {
 		filter: invert(4) brightness(1.2);
 	}
-	}
 </style>

sites/svelte.dev/src/routes/_components/Supporters/index.svelte

@@ -6,7 +6,7 @@
 
 <Section>
 	<p class="intro">
-		Svelte is free and open source software, made possible by the work of hundreds of supporters.
+		Svelte is free and open source software, made possible <br /> by the work of hundreds of supporters.
 	</p>
 
 	<div class="layout">
@@ -49,6 +49,7 @@
 <style>
 	h3 {
 		color: var(--sk-text-2);
+		font-size: var(--sk-text-l);
 	}
 
 	.intro {

sites/svelte.dev/src/routes/_components/Try.svelte

@@ -1,9 +1,10 @@
 <script>
 	import { Section } from '@sveltejs/site-kit/components';
 	import TryTerminal from '@sveltejs/site-kit/components/home/TryTerminal.svelte';
+	import { theme } from '@sveltejs/site-kit/theme';
 </script>
 
-<div class="container">
+<div class="container" class:dark={$theme.current === 'dark'}>
 	<Section --background="var(--background-2)">
 		<div class="grid" style="--columns: 2">
 			<div class="try">
@@ -60,6 +61,11 @@
 		--background-2: var(--sk-back-4);
 	}
 
+	.container.dark {
+		--background-1: #222;
+		--background-2: #444;
+	}
+
 	.grid {
 		display: grid;
 		gap: 1em;
@@ -77,12 +83,8 @@
 		}
 	}
 
-	@media (prefers-color-scheme: dark) {
-		.container {
-			/* --background-1: radial-gradient(circle at top right, rgb(49, 49, 49), rgb(77, 77, 77)); */
-			--background-1: #222;
-			--background-2: #444;
-		}
+	.create-an-app {
+		font-size: 0.75em;
 	}
 
 	.grid *::selection {
@@ -94,6 +96,10 @@
 		color: var(--sk-text-1);
 	}
 
+	.description p:first-child {
+		margin-top: 0;
+	}
+
 	.try {
 		width: 100%;
 		margin: 0 auto;

sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte

@@ -1,9 +1,14 @@
 <script>
+	import Section from '../Section.svelte';
 	import { companies } from './companies.js';
+	import { theme } from '@sveltejs/site-kit/theme';
 
 	const sorted = companies.sort((a, b) => (a.alt < b.alt ? -1 : 1));
 </script>
 
+<Section --background={$theme.current === 'light' ? 'var(--sk-back-4)' : '#444'}>
+	<section class="whos-using-svelte-container" class:dark={$theme.current === 'dark'}>
+		<h3>Who's using Svelte?</h3>
 		<div class="logos">
 			{#each sorted as { href, filename, alt, style, invert, width, height }}
 				<a target="_blank" rel="noreferrer" {href} class:invert style={style || ''}>
@@ -13,8 +18,13 @@
 				<span class="spacer" />
 			{/each}
 		</div>
+	</section>
+</Section>
 
 <style>
+	h3 {
+		font-size: var(--sk-text-xl);
+	}
 	.logos {
 		display: flex;
 		margin: 6rem 0 0 0;
@@ -55,6 +65,7 @@
 		min-width: 0; /* Avoid image overflow in Safari */
 		width: 100%;
 		height: auto;
+		/* mix-blend-mode: multiply; */
 	}
 
 	@media (min-width: 640px) {
@@ -74,10 +85,8 @@
 		}
 	}
 
-	@media (prefers-color-scheme: dark) {
-		a {
+	:global(body.dark) .logos a {
 		--invert: 1;
 		filter: grayscale(1) contrast(4) opacity(0.7) invert(var(--invert, 0));
 	}
-	}
 </style>