Push

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

@@ -1,11 +1,12 @@
 <script>
 	import { Blurb } from '@sveltejs/site-kit/components';
-	import Balls from './svelte-balls.png?w=640;1280;2560;3840&format=avif;webp;png&picture';
 	import Demo from './_components/Demo.svelte';
 	import Hero from './_components/Hero.svelte';
 	import Image from './_components/Image.svelte';
 	import Supporters from './_components/Supporters/index.svelte';
+	import Try from './_components/Try.svelte';
 	import WhosUsingSvelte from './_components/WhosUsingSvelte/index.svelte';
+	import Balls from './svelte-balls.png?w=640;1280;2560;3840&format=avif;webp;png&picture';
 </script>
 
 <svelte:head>
@@ -21,7 +22,7 @@
 <Hero />
 
 <div class="blurb-shifter">
-	<Blurb>
+	<Blurb --background="var(--sk-back-1)">
 		<div slot="one">
 			<h2>Write less code</h2>
 			<p>
@@ -50,7 +51,7 @@
 
 			<a href="/blog/svelte-3-rethinking-reactivity" class="cta">learn more</a>
 		</div>
-
+		<!-- 
 		<div class="description" slot="four">
 			<p>
 				Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks
@@ -94,10 +95,12 @@ npm run dev
 			</code></pre>
 
 			<a href="/tutorial" class="cta">Learn Svelte</a>
-		</div>
+		</div> -->
 	</Blurb>
 </div>
 
+<Try />
+
 <Demo />
 
 <section>
@@ -127,10 +130,6 @@ npm run dev
 		max-width: 120rem;
 	}
 
-	.blurb-shifter {
-		margin-top: calc(-10rem + var(--side-nav));
-	}
-
 	footer {
 		display: flex;
 		flex-wrap: wrap;

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

@@ -6,32 +6,32 @@
 		{
 			id: 'hello-world',
 			title: 'Hello World',
-			description: 'Svelte components are built on top of HTML. Just add data.',
+			description: 'Svelte components are built on top of HTML. Just add data.'
 		},
 		{
 			id: 'nested-components',
 			title: 'Scoped CSS',
 			description:
-				'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 >.',
+				'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 >.'
 		},
 		{
 			id: 'reactive-assignments',
 			title: 'Reactivity',
 			description:
-				'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.',
+				'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.'
 		},
 		{
 			id: 'svg-transitions',
 			title: 'Transitions',
 			description:
-				'Build beautiful UIs with a powerful, performant transition engine built right into the framework.',
+				'Build beautiful UIs with a powerful, performant transition engine built right into the framework.'
-		},
+		}
 	];
 
 	let selected = examples[0];
 </script>
 
-<Section --background="radial-gradient(circle at 40% 30%, rgb(110, 113, 118), rgb(81, 93, 106))">
+<Section --background="var(--sk-back-5)">
 	<h3>Why Svelte?</h3>
 
 	<div class="container">
@@ -58,11 +58,11 @@
 
 <style>
 	h3 {
-		color: white;
+		/* color: white; */
 	}
 
 	.description {
-		color: white;
+		color: var(--sk-text-2);
 		height: 12rem; /* prevent layout popping when tab changes */
 	}
 
@@ -78,7 +78,7 @@
 		width: 100%;
 		height: 5rem;
 		grid-template-columns: 4fr 1fr;
-		color: white;
+		color: var(--sk-text-2);
 		align-items: center;
 		font-size: var(--h5);
 	}
@@ -124,7 +124,7 @@
 
 	a,
 	.description :global(a) {
-		color: white;
+		/* color: white; */
 	}
 
 	.description :global(a) {

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

@@ -17,7 +17,7 @@
 	.repl-container {
 		width: 100%;
 		height: 420px;
-		border-radius: var(--border-r);
+		border-radius: var(--sk-border-radius);
 		overflow: hidden;
 	}
 </style>

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

@@ -0,0 +1,108 @@
+<script>
+	import { Section } from '@sveltejs/site-kit/components';
+	import TryTerminal from '@sveltejs/site-kit/components/home/TryTerminal.svelte';
+</script>
+
+<div class="container">
+	<Section --background="var(--background-2)">
+		<div class="grid" style="--columns: 2">
+			<div class="try">
+				<TryTerminal />
+
+				<p class="create-an-app">
+					...or
+					<a target="_blank" rel="noreferrer" href="https://sveltekit.new"> create an app </a>
+					on StackBlitz.
+				</p>
+			</div>
+
+			<div class="description">
+				<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>
+					We're proud that Svelte was recently voted the <a
+						href="https://insights.stackoverflow.com/survey/2021#section-most-loved-dreaded-and-wanted-web-frameworks"
+						>most loved web framework</a
+					>
+					with the
+					<a href="https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/"
+						>most satisfied developers</a
+					>
+					drawing the
+					<a
+						href="https://tsh.io/state-of-frontend/#which-of-the-following-frameworks-would-you-like-to-learn-in-the-future"
+						>most interest in learning it</a
+					>
+					in a trio of industry surveys. We think you'll love it too.
+					<a href="/blog/svelte-3-rethinking-reactivity" class="cta"
+						>Read the introductory blog post</a
+					>
+					to learn more.
+				</p>
+			</div>
+		</div>
+	</Section>
+</div>
+
+<style>
+	.container {
+		--background-1: radial-gradient(circle at top right, rgb(230, 233, 236), rgb(244, 245, 247));
+		--background-2: var(--sk-back-4);
+	}
+
+	.grid {
+		display: grid;
+		gap: 1em;
+		margin: 0 0 4rem 0;
+	}
+
+	.grid:last-child {
+		margin-bottom: 0;
+	}
+
+	@media (min-width: 900px) {
+		.grid {
+			grid-template-columns: repeat(var(--columns), 1fr);
+			gap: 7rem;
+		}
+	}
+
+	@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;
+		}
+	}
+
+	.grid *::selection {
+		background: hsl(15, 100%, 65%);
+		color: white;
+	}
+
+	.description {
+		color: var(--sk-text-1);
+	}
+
+	.try {
+		width: 100%;
+		margin: 0 auto;
+		font-size: var(--sk-text-m);
+		color: var(--sk-text-1);
+	}
+
+	a {
+		color: inherit;
+		text-decoration: underline;
+	}
+</style>