Merge pull request sveltejs#53 from sveltejs/vedam-design

Facelift

Author: Rich-Harris

content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md

@@ -27,4 +27,4 @@ This tutorial is split into four main parts:
 
 Each section will present an exercise designed to illustrate a feature. Later sections build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the menu above.
 
-If you get stuck, you can click the `Solve` button to the left of the editor. (It's disabled on sections like this one that don't include an exercise.) Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it in to the editor.
+If you get stuck, you can click the `solve` button to the left of the editor. (It's disabled on sections like this one that don't include an exercise.) Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it in to the editor.

src/routes/__layout.svelte

@@ -67,4 +67,18 @@
 		position: relative;
 		top: var(--nav-h);
 	}
+
+	.large {
+		display: none;
+	}
+
+	@media (min-width: 800px) {
+		.small {
+			display: none;
+		}
+
+		.large {
+			display: inline;
+		}
+	}
 </style>

src/routes/tutorial/[slug]/_/Chrome.svelte

@@ -0,0 +1,60 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+	import refresh from './refresh.svg';
+
+	/** @type {string} */
+	export let path;
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<div class="chrome">
+	<button on:click={() => dispatch('refresh')} aria-label="reload">
+		<img src={refresh} alt="Reload icon" />
+	</button>
+
+	<input
+		aria-label="URL"
+		value={path}
+		on:change={(e) => {
+			dispatch('change', { value: e.currentTarget.value });
+		}}
+	/>
+</div>
+
+<style>
+	.chrome {
+		width: 100%;
+		height: 4rem;
+		display: flex;
+		gap: 0.5rem;
+		padding: 0.4rem;
+		background: #f9f9f9;
+	}
+
+	.chrome button {
+		padding: 0.5rem;
+	}
+
+	.chrome button img {
+		height: 100%;
+		width: auto;
+		transition: 0.2s ease-out;
+		transform: none;
+	}
+
+	.chrome button:active img {
+		transform: rotate(-180deg);
+		transition: none;
+	}
+
+	.chrome input {
+		flex: 1;
+		padding: 0.5rem 1rem 0.4rem 1rem;
+		border-radius: 0.5rem;
+		border: 1px solid rgba(0, 0, 0, 0.1);
+		box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
+		font-family: inherit;
+		font-size: 1.6rem;
+	}
+</style>

src/routes/tutorial/[slug]/_/Menu/Menu.svelte

@@ -49,19 +49,36 @@
 	}
 </script>
 
-<button class="menu-toggle" on:click={() => (is_open = !is_open)} aria-label="Toggle menu" aria-expanded={is_open}>
-	<Icon name={is_open ? 'close' : 'menu'} />
-</button>
+<div class="menu-toggle-container">
+	<button
+		class="menu-toggle"
+		on:click={() => (is_open = !is_open)}
+		aria-label="Toggle menu"
+		aria-expanded={is_open}
+	>
+		<Icon name={is_open ? 'close' : 'menu'} />
+	</button>
+</div>
 
 <nav class:open={is_open} aria-label="tutorial sections">
 	<div class="controls">
-		<input type="search" placeholder="Search" bind:value={search} aria-hidden={!is_open ? "true" : null} tabindex={!is_open ? -1 : null} />
+		<input
+			type="search"
+			placeholder="Search"
+			bind:value={search}
+			aria-hidden={!is_open ? 'true' : null}
+			tabindex={!is_open ? -1 : null}
+		/>
 	</div>
 
 	<div class="sections">
 		<ul>
 			{#each filtered as part (part.slug)}
-				<li class="part" transition:slide|local={{ duration }}>
+				<li
+					class="part"
+					transition:slide|local={{ duration }}
+					class:expanded={part.slug === current.part.slug}
+				>
 					<a sveltekit:prefetch href="/tutorial/{part.first}" data-label={part.label}>
 						Part {part.label}: {part.title}
 					</a>
@@ -114,10 +131,10 @@
 		height: 100%;
 		transition: transform 0.2s;
 		transform: translate(calc(var(--menu-width) - 100%), 0);
-		background: var(--second);
+		background: var(--back-api);
 		z-index: 2;
 		/* filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.1)); */
-		border-right: 1px solid rgba(255, 255, 255, 0.1);
+		border-right: 1px solid var(--border-color);
 		display: flex;
 		flex-direction: column;
 	}
@@ -129,51 +146,48 @@
 	.controls {
 		height: var(--menu-width);
 		display: flex;
-		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-		padding: 1rem 1rem 1rem calc(var(--menu-width) + 1rem);
+		border-bottom: 1px solid var(--border-color);
+		padding: 0 0 0 var(--menu-width);
 	}
 
 	.controls input {
 		flex: 1;
-		border-radius: 0.5rem;
 		border: none;
 		padding: 0.6rem 1rem 0.5rem 1rem;
 		font-family: inherit;
 		font-size: inherit;
-		background: hsl(240, 8%, 54%);
-		color: white;
-	}
-
-	.controls input::placeholder {
-		color: rgba(255, 255, 255, 0.5);
+		background: rgba(255, 255, 255, 0.5);
+		border: 2px solid transparent;
+		color: var(--text);
 	}
 
 	.controls input:focus {
-		background: white;
-		color: var(--text);
 		outline: none;
+		border: 2px solid var(--flash);
 	}
 
-	.controls input:focus::placeholder {
-		color: #333;
-	}
-
-	.menu-toggle {
+	.menu-toggle-container {
 		position: absolute;
 		left: 0;
 		top: 0;
 		width: var(--menu-width);
 		height: var(--menu-width);
 		z-index: 3;
-		/* background: linear-gradient(
-			to right,
-			var(--second),
-			var(--second) calc(100% - 1rem),
-			transparent
-		); */
-		background: var(--second);
-		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-		border-right: 1px solid rgba(255, 255, 255, 0.1);
+		border-right: 1px solid var(--border-color);
+		border-bottom: 1px solid var(--border-color);
+	}
+
+	.menu-toggle {
+		width: 100%;
+		height: 100%;
+		background: var(--back-api);
+		border: 2px solid transparent;
+		box-sizing: border-box;
+	}
+
+	.menu-toggle:focus-visible {
+		outline: none;
+		border: 2px solid var(--flash);
 	}
 
 	.sections {
@@ -185,7 +199,7 @@
 	ul {
 		position: relative;
 		list-style: none;
-		padding: 0 0 0 2rem;
+		padding: 0 0 0 1.5rem;
 		margin: 0;
 	}
 
@@ -197,19 +211,23 @@
 		position: relative;
 	}
 
-	li[aria-current='page'] {
-		font-weight: bold;
+	li[aria-current='page'] a {
+		color: var(--prime);
 	}
 
 	li img {
 		position: absolute;
-		left: -2.5rem;
+		left: -2rem;
 		top: 0.3rem;
 		width: 2rem;
 		height: 2rem;
 		transition: transform 0.2s;
 	}
 
+	li.expanded > a {
+		font-weight: bold;
+	}
+
 	li.expanded img {
 		transform: rotate(90deg);
 	}
@@ -221,14 +239,14 @@
 
 	.section {
 		--dot-size: 1.2rem;
-		--color: hsl(240, 8%, 95%);
+		--color: var(--second);
 	}
 
 	.section > a::before,
 	.section > a::after {
 		content: '';
 		top: calc(1.3rem - 0.5 * var(--dot-size));
-		right: calc(0.5 * (var(--menu-width) - var(--dot-size)));
+		right: calc(0.5 * (var(--menu-width) - var(--dot-size)) - 0.7rem);
 		width: var(--dot-size);
 		height: var(--dot-size);
 		border-radius: 50%;
@@ -248,7 +266,7 @@
 		width: var(--menu-width);
 		text-align: center;
 		top: 0.2rem;
-		right: 0;
+		right: -0.7rem;
 		color: hsl(240, 8%, 64%);
 	}
 
@@ -257,9 +275,18 @@
 	}
 
 	a {
-		color: white;
-		padding: 0.2rem 0;
+		color: var(--second);
+		padding: 0 0 0 0.5rem;
+		margin: 0 0.5rem 0 0;
 		display: block;
 		font-variant-numeric: tabular-nums;
+		border: 2px solid transparent;
+		box-sizing: border-box;
+	}
+
+	a:focus-visible {
+		/* outline-color: var(--flash); */
+		outline: none;
+		border: 2px solid var(--flash);
 	}
 </style>