homepage tweak

Author: Rich-Harris

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

@@ -24,7 +24,7 @@
 
 	<Hero />
 
-	<Blurb --background="var(--sk-back-1)">
+	<Blurb>
 		{#snippet one()}
 			<div>
 				<h2>fast</h2>

apps/svelte.dev/src/routes/_home/Features.svelte

@@ -2,7 +2,7 @@
 	import { Section } from '@sveltejs/site-kit/components';
 </script>
 
-<Section --background="var(--sk-back-1)">
+<Section>
 	<div class="container">
 		<div class="features">
 			<h2><span>features? we got 'em.</span></h2>

apps/svelte.dev/src/routes/_home/Hero.svelte

@@ -9,14 +9,9 @@
 
 <div class="hero">
 	<div class="hero-content">
-		<img alt="Svelte logotype" class="logotype" src={SvelteLogotype} width="300" height="56" />
-		<strong>
-			<span style="white-space: nowrap">Web development</span> <br /> but fun
-		</strong>
-		<div class="buttons">
-			<a href="/tutorial" class="cta">tutorial</a>
-			<a href="/docs" class="cta basic">read the docs</a>
-		</div>
+		<!-- <img alt="Svelte logotype" class="logotype" src={SvelteLogotype} width="300" height="56" /> -->
+		<h1>web development for the rest of us</h1>
+		<a href="/docs" class="cta basic">get started</a>
 	</div>
 
 	<picture class="machine">
@@ -51,16 +46,35 @@
 <style>
 	.hero {
 		position: relative;
-		background: radial-gradient(circle at 40% 30%, rgb(235, 243, 249), rgb(214, 222, 228));
 		padding: 6rem 0 34vw 0;
 		margin-bottom: 3rem;
-	}
 
-	.machine img {
-		position: absolute;
-		pointer-events: none;
-		width: 100%;
-		height: auto;
+		&::before {
+			content: '';
+			position: absolute;
+			width: 100%;
+			height: 200%;
+			left: 0;
+			top: 0;
+			background: linear-gradient(to bottom, transparent, var(--sk-back-1)),
+				radial-gradient(circle at 40% 30%, rgb(235, 243, 249), rgb(214, 222, 228));
+		}
+
+		:root.dark &::before {
+			background: linear-gradient(to bottom, transparent, var(--sk-back-1)),
+				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%));
+		}
 	}
 
 	.hero-content {
@@ -69,78 +83,35 @@
 		align-items: center;
 		gap: 1rem;
 		margin-bottom: 4rem;
+		text-align: center;
 	}
 
-	strong {
-		font-size: var(--sk-font-size-h2);
-		text-align: center;
-		font-family: var(--sk-font-heading);
-		text-transform: lowercase;
-		font-weight: 400;
-		color: var(--sk-text-2);
-		line-height: 1.2;
+	h1 {
+		max-width: 9em;
 	}
 
-	.buttons {
-		display: flex;
-		gap: 1rem;
-		align-items: center;
+	.machine img {
+		position: absolute;
+		pointer-events: none;
+		width: 100%;
+		height: auto;
 	}
 
 	.cta {
-		display: flex;
-		align-items: center;
-		gap: 0.1rem;
-		background: var(--sk-theme-1);
-		padding: 0.35em 0.8em;
 		font-family: var(--sk-font-ui);
 		font-size: var(--sk-font-size-ui-medium);
-		font-weight: 600;
-		white-space: nowrap;
-		border-radius: var(--sk-border-radius);
-		box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.08);
-		color: #fff;
-		transition: 0.5s var(--quint-out);
-		transition-property: box-shadow, color;
-	}
-
-	.cta:hover {
-		text-decoration: none;
-		box-shadow:
-			0px 0.8px 3.8px rgba(0, 0, 0, 0.115),
-			0px 6px 30px rgba(0, 0, 0, 0.23);
-	}
-
-	.cta.basic {
-		background-color: var(--sk-back-5);
-		color: var(--sk-text-1);
-	}
-
-	.logotype {
-		width: min(45vw, 40em);
-		height: auto;
+		color: var(--sk-theme-1);
+		text-transform: uppercase;
 	}
 
 	@media (min-width: 800px) {
 		.hero-content {
 			--width: clamp(60rem, 50vw, 80rem);
+			align-items: start;
 			position: absolute;
-			display: grid;
-			grid-template-columns: 1fr 1fr;
-			grid-column-gap: 4rem;
-			grid-row-gap: 2rem;
 			width: var(--width);
 			left: calc(0.5 * (100% - min(100vw, 120rem)) + var(--sk-page-padding-side));
-			top: 6rem;
-			font-size: 0.9em;
-		}
-
-		.logotype {
-			width: 100%;
-			justify-self: end;
-		}
-
-		strong {
+			top: calc(8vw - 2rem);
 			text-align: left;
 		}
 
@@ -152,33 +123,12 @@
 
 	@media (min-width: 1400px) {
 		.hero-content {
-			grid-template-columns: 1fr;
-			width: calc(0.5 * var(--width));
-			top: 6vw;
+			/* top: 6vw; */
 		}
 
 		.hero {
 			height: calc(10rem + 20vw);
 			padding: 10rem 0 0 0;
 		}
 	}
-
-	:global(html.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(html.dark) .logotype {
-		filter: invert(4) brightness(1.2);
-	}
 </style>

apps/svelte.dev/src/routes/tutorial/[slug]/Menu.svelte

@@ -13,7 +13,7 @@
 	/** @type {import('$lib/tutorial').Exercise} */
 	export let current;
 
-	const is_mobile = mql('(max-width: 800px)');
+	const is_mobile = mql('(max-width: 799px)');
 
 	const duration = $reduced_motion ? 0 : 200;
 
@@ -401,7 +401,7 @@
 		outline-offset: -2px;
 	}
 
-	@media screen and (max-width: 800px) {
+	@media screen and (max-width: 799px) {
 		.container {
 			border-right: none;
 		}

apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte

@@ -224,7 +224,7 @@
 		line-height: 1;
 	}
 
-	@media (max-width: 800px) {
+	@media (max-width: 799px) {
 		.text {
 			border-right: none;
 		}

packages/site-kit/src/lib/components/Banner.svelte

@@ -117,7 +117,7 @@
 		display: none;
 	}
 
-	@media screen and (max-width: 800px) {
+	@media screen and (max-width: 799px) {
 		.banner-bottom {
 			bottom: initial;
 			top: 0;

packages/site-kit/src/lib/components/Section.svelte

@@ -10,8 +10,9 @@
 
 <style>
 	section {
+		position: relative;
 		padding: 6rem 0;
-		background: var(--background, white);
+		background: var(--background, transparent);
 	}
 
 	section::after {

packages/site-kit/src/lib/components/Shell.svelte

@@ -78,7 +78,7 @@ The main shell of the application. It provides a slot for the top navigation, th
 		overflow-x: hidden;
 	}
 
-	@media (max-width: 800px) {
+	@media (max-width: 799px) {
 		main {
 			padding-top: var(--sk-banner-bottom-height);
 			padding-bottom: 0;

packages/site-kit/src/lib/home/Blurb.svelte

@@ -5,7 +5,7 @@
 	let { one, two, three }: { one?: Snippet; two?: Snippet; three?: Snippet } = $props();
 </script>
 
-<Section --background="var(--sk-back-1)">
+<Section>
 	<div class="grid">
 		{#if one}
 			<div>

packages/site-kit/src/lib/nav/Nav.svelte

@@ -172,7 +172,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		font-size: var(--sk-font-size-ui-small);
 	}
 
-	@media (max-width: 800px) {
+	@media (max-width: 799px) {
 		nav:not(.visible):not(:focus-within) {
 			transform: translate(0, calc(var(--sk-nav-height)));
 		}