add instructions, make some style tweaks

packages/create-svelte/templates/default/src/routes/+layout.svelte

@@ -28,7 +28,7 @@
 		flex-direction: column;
 		padding: 1rem;
 		width: 100%;
-		max-width: 1024px;
+		max-width: 64rem;
 		margin: 0 auto;
 		box-sizing: border-box;
 	}

packages/create-svelte/templates/default/src/routes/+page.ts

@@ -1 +1,3 @@
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in production
 export const prerender = true;

packages/create-svelte/templates/default/src/routes/Header.svelte

@@ -22,7 +22,7 @@
 			<li class:active={$page.url.pathname === '/about'}>
 				<a href="/about">About</a>
 			</li>
-			<li class:active={$page.url.pathname === '/sverdle'}>
+			<li class:active={$page.url.pathname.startsWith('/sverdle')}>
 				<a href="/sverdle">Sverdle</a>
 			</li>
 		</ul>

packages/create-svelte/templates/default/src/routes/about/+page.svelte

@@ -3,7 +3,7 @@
 	<meta name="description" content="About this app" />
 </svelte:head>
 
-<div class="content">
+<div class="text-column">
 	<h1>About this app</h1>
 
 	<p>
@@ -24,13 +24,3 @@
 		using it with JavaScript disabled!
 	</p>
 </div>
-
-<style>
-	.content {
-		display: flex;
-		width: 100%;
-		flex: 0.6;
-		flex-direction: column;
-		justify-content: center;
-	}
-</style>

packages/create-svelte/templates/default/src/routes/about/+page.ts

@@ -1,9 +1,9 @@
 import { dev } from '$app/environment';
 
 // we don't need any JS on this page, though we'll load
-// it in dev so that we get hot module replacement...
+// it in dev so that we get hot module replacement
 export const csr = dev;
 
 // since there's no dynamic data here, we can prerender
-// it so that it gets served as a static asset in prod
+// it so that it gets served as a static asset in production
 export const prerender = true;

packages/create-svelte/templates/default/src/routes/styles.css

@@ -69,6 +69,15 @@ pre {
 	color: var(--color-text);
 }
 
+.text-column {
+	display: flex;
+	max-width: 48rem;
+	flex: 0.6;
+	flex-direction: column;
+	justify-content: center;
+	margin: 0 auto;
+}
+
 input,
 button {
 	font-size: inherit;

packages/create-svelte/templates/default/src/routes/sverdle/+page.svelte

@@ -233,6 +233,7 @@
 		border-radius: 2px;
 		background: white;
 		margin: 0;
+		color: rgba(0, 0, 0, 0.7);
 	}
 
 	input:disabled:not(.exact):not(.close) {

packages/create-svelte/templates/default/src/routes/sverdle/how-to-play/+page.svelte

@@ -1,3 +1,89 @@
-<h1>How to play Sverdle</h1>
+<div class="text-column">
+	<h1>How to play Sverdle</h1>
 
-<p>err.... TODO. sorry, been busy</p>
+	<p>
+		Sverdle is a clone of <a href="https://www.nytimes.com/games/wordle/index.html">Wordle</a>, the
+		word guessing game. To play, enter a five-letter English word. For example:
+	</p>
+
+	<div class="example">
+		<span class="close">r</span>
+		<span class="missing">i</span>
+		<span class="close">t</span>
+		<span class="missing">z</span>
+		<span class="exact">y</span>
+	</div>
+
+	<p>
+		The <span class="exact">y</span> is in the right place. <span class="close">r</span> and
+		<span class="close">t</span>
+		are the right letters, but in the wrong place. The other letters are wrong, and can be discarded.
+		Let's make another guess:
+	</p>
+
+	<div class="example">
+		<span class="exact">p</span>
+		<span class="exact">a</span>
+		<span class="exact">r</span>
+		<span class="exact">t</span>
+		<span class="exact">y</span>
+	</div>
+
+	<p>This time we guessed right! You have <strong>six</strong> guesses to get the word.</p>
+
+	<p>
+		Unlike the original Wordle, Sverdle runs on the server instead of in the browser, making it
+		impossible to cheat. You can even play with JavaScript disabled.
+	</p>
+</div>
+
+<style>
+	span {
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 0.8em;
+		width: 2.4em;
+		height: 2.4em;
+		background-color: white;
+		box-sizing: border-box;
+		border-radius: 2px;
+		border-width: 2px;
+		color: rgba(0, 0, 0, 0.7);
+	}
+
+	.missing {
+		background: rgba(255, 255, 255, 0.5);
+		color: rgba(0, 0, 0, 0.5);
+	}
+
+	.close {
+		border-style: solid;
+		border-color: var(--color-theme-2);
+	}
+
+	.exact {
+		background: var(--color-theme-2);
+		color: white;
+	}
+
+	.example {
+		display: flex;
+		justify-content: start;
+		margin: 1rem 0;
+		gap: 0.2rem;
+	}
+
+	.example span {
+		font-size: 1.4rem;
+	}
+
+	p span {
+		position: relative;
+		border-width: 1px;
+		border-radius: 1px;
+		font-size: 0.4em;
+		transform: scale(2) translate(0, -10%);
+		margin: 0 1em;
+	}
+</style>

packages/create-svelte/templates/default/src/routes/sverdle/how-to-play/+page.ts

@@ -0,0 +1,9 @@
+import { dev } from '$app/environment';
+
+// we don't need any JS on this page, though we'll load
+// it in dev so that we get hot module replacement
+export const csr = dev;
+
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in production
+export const prerender = true;