From 8b62002b915eb42d86288c76d49bd8f27366420a Mon Sep 17 00:00:00 2001
From: Puru Vijay <devpuruvj@gmail.com>
Date: Mon, 10 Apr 2023 03:33:47 +0530
Subject: [PATCH] IMprove designs

---
 sites/svelte.dev/src/routes/+page.svelte      | 80 ++++++++-----------
 .../src/routes/_components/Demo.svelte        | 14 ++--
 .../src/routes/_components/Hero.svelte        | 50 ++++++------
 .../_components/Supporters/index.svelte       |  3 +-
 .../src/routes/_components/Try.svelte         | 20 +++--
 .../_components/WhosUsingSvelte/index.svelte  | 35 +++++---
 6 files changed, 101 insertions(+), 101 deletions(-)

diff --git a/sites/svelte.dev/src/routes/+page.svelte b/sites/svelte.dev/src/routes/+page.svelte
index ace1d3ed17..2ef4309573 100644
--- a/sites/svelte.dev/src/routes/+page.svelte
+++ b/sites/svelte.dev/src/routes/+page.svelte
@@ -21,48 +21,41 @@
 
 <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
-			</p>
-
-			<a href="/blog/write-less-code" class="cta">learn more</a>
-		</div>
-
-		<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
-			</p>
-
-			<a href="/blog/virtual-dom-is-pure-overhead" class="cta">learn more</a>
-		</div>
-
-		<div slot="three">
-			<h2>Truly reactive</h2>
-			<p>
-				No more complex state management libraries — Svelte brings reactivity to JavaScript itself
-			</p>
-
-			<a href="/blog/svelte-3-rethinking-reactivity" class="cta">learn more</a>
-		</div>
-	</Blurb>
-</div>
+<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
+		</p>
+
+		<a href="/blog/write-less-code" class="cta">learn more</a>
+	</div>
+
+	<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
+		</p>
+
+		<a href="/blog/virtual-dom-is-pure-overhead" class="cta">learn more</a>
+	</div>
+
+	<div slot="three">
+		<h2>Truly reactive</h2>
+		<p>
+			No more complex state management libraries — Svelte brings reactivity to JavaScript itself
+		</p>
+
+		<a href="/blog/svelte-3-rethinking-reactivity" class="cta">learn more</a>
+	</div>
+</Blurb>
 
 <Try />
 
 <Demo />
 
-<section>
-	<h3>Who's using Svelte?</h3>
-
-	<WhosUsingSvelte />
-</section>
+<WhosUsingSvelte />
 
 <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>
diff --git a/sites/svelte.dev/src/routes/_components/Demo.svelte b/sites/svelte.dev/src/routes/_components/Demo.svelte
index c4acad6f0f..66dcfa9f49 100644
--- a/sites/svelte.dev/src/routes/_components/Demo.svelte
+++ b/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;
 	}
diff --git a/sites/svelte.dev/src/routes/_components/Hero.svelte b/sites/svelte.dev/src/routes/_components/Hero.svelte
index 324cb367c2..87b72fe538 100644
--- a/sites/svelte.dev/src/routes/_components/Hero.svelte
+++ b/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,24 +71,22 @@
 		}
 	}
 
-	@media (prefers-color-scheme: dark) {
-		.hero {
-			background: radial-gradient(
-					64.14% 72.25% at 47.58% 31.75%,
-					hsl(209deg 6% 47% / 52%) 0%,
-					hsla(0, 0%, 100%, 0) 100%
-				),
-				linear-gradient(
-					92.4deg,
-					hsl(210, 7%, 16%) 14.67%,
-					hsl(0deg 0% 0% / 48%) 54.37%,
-					hsla(207, 22%, 13%, 0.62) 92.49%
-				),
-				linear-gradient(0deg, hsl(204, 38%, 20%), hsl(204, 10%, 90%));
-		}
+	:global(body.dark) .hero {
+		background: radial-gradient(
+				64.14% 72.25% at 47.58% 31.75%,
+				hsl(209deg 6% 47% / 52%) 0%,
+				hsla(0, 0%, 100%, 0) 100%
+			),
+			linear-gradient(
+				92.4deg,
+				hsl(210, 7%, 16%) 14.67%,
+				hsl(0deg 0% 0% / 48%) 54.37%,
+				hsla(207, 22%, 13%, 0.62) 92.49%
+			),
+			linear-gradient(0deg, hsl(204, 38%, 20%), hsl(204, 10%, 90%));
+	}
 
-		.logotype {
-			filter: invert(4) brightness(1.2);
-		}
+	:global(body.dark) .logotype {
+		filter: invert(4) brightness(1.2);
 	}
 </style>
diff --git a/sites/svelte.dev/src/routes/_components/Supporters/index.svelte b/sites/svelte.dev/src/routes/_components/Supporters/index.svelte
index a523e8819c..4d9af1d84f 100644
--- a/sites/svelte.dev/src/routes/_components/Supporters/index.svelte
+++ b/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 {
diff --git a/sites/svelte.dev/src/routes/_components/Try.svelte b/sites/svelte.dev/src/routes/_components/Try.svelte
index e88e9b4ee2..319e730b4a 100644
--- a/sites/svelte.dev/src/routes/_components/Try.svelte
+++ b/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;
diff --git a/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte b/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte
index 1a182121b0..2e5b8b85f7 100644
--- a/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte
+++ b/sites/svelte.dev/src/routes/_components/WhosUsingSvelte/index.svelte
@@ -1,20 +1,30 @@
 <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>
 
-<div class="logos">
-	{#each sorted as { href, filename, alt, style, invert, width, height }}
-		<a target="_blank" rel="noreferrer" {href} class:invert style={style || ''}>
-			<img src="/whos-using-svelte/{filename}" {alt} {width} {height} loading="lazy" />
-		</a>
+<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 || ''}>
+					<img src="/whos-using-svelte/{filename}" {alt} {width} {height} loading="lazy" />
+				</a>
 
-		<span class="spacer" />
-	{/each}
-</div>
+				<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 {
-			--invert: 1;
-			filter: grayscale(1) contrast(4) opacity(0.7) invert(var(--invert, 0));
-		}
+	:global(body.dark) .logos a {
+		--invert: 1;
+		filter: grayscale(1) contrast(4) opacity(0.7) invert(var(--invert, 0));
 	}
 </style>