remove dots (sveltejs#71)

Rich-Harris · web-flow · commit ecef353a5c4e · 2022-06-11T12:22:28.000-04:00
* remove dots

* smidge more lateral padding

* tweak footer padding

* refactor

* add next/prev arrows

* small adjustment

* tweak header

* fix editor padding

* tweak &lt;pre&gt; styles
diff --git a/src/routes/tutorial/[slug]/_/Editor.svelte b/src/routes/tutorial/[slug]/_/Editor.svelte
@@ -53,6 +53,10 @@
 			editor = monaco.editor.create(container, {
 				fontFamily: 'Roboto Mono',
 				fontSize: 13,
+				padding: {
+					top: 16,
+					bottom: 16
+				},
 				minimap: {
 					enabled: false
 				}
diff --git a/src/routes/tutorial/[slug]/_/Menu/Menu.svelte b/src/routes/tutorial/[slug]/_/Menu/Menu.svelte
@@ -43,10 +43,6 @@
 	afterNavigate(() => {
 		search = '';
 	});
-
-	export function open() {
-		is_open = true;
-	}
 </script>
 
 <div class="menu-toggle-container">
@@ -60,6 +56,22 @@
 	</button>
 </div>
 
+<header>
+	<a href={current.prev ? `/tutorial/${current.prev.slug}` : undefined} aria-label="Previous">
+		<Icon name="arrow-left" size={16} />
+	</a>
+
+	<h1 on:click={() => (is_open = true)}>
+		Part {current.part.index + 1} <span class="separator">/</span>
+		{current.chapter.title} <span class="separator">/</span>
+		<strong>{current.title}</strong>
+	</h1>
+
+	<a href={current.next ? `/tutorial/${current.next.slug}` : undefined} aria-label="Previous">
+		<Icon name="arrow-right" size={16} />
+	</a>
+</header>
+
 <nav class:open={is_open} aria-label="tutorial sections">
 	<div class="controls">
 		<input
@@ -124,13 +136,56 @@
 </nav>
 
 <style>
+	header {
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+		border-bottom: 1px solid var(--border-color);
+		border-right: 1px solid var(--border-color);
+		padding: 0 0 0 var(--menu-width);
+		height: var(--menu-width);
+		align-items: center;
+	}
+
+	header strong,
+	header h1 {
+		font-size: 1.4rem;
+	}
+
+	header strong {
+		color: var(--prime);
+	}
+
+	header h1 {
+		color: var(--second);
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		font-weight: 400;
+		flex: 1;
+		top: 0.15rem;
+	}
+
+	.separator {
+		position: relative;
+		font-size: 0.8em;
+		opacity: 0.3;
+		top: -0.1rem;
+		display: inline-block;
+	}
+
+	header a:not([href]) {
+		opacity: 0.1;
+		cursor: default;
+	}
+
 	nav {
 		--menu-width: 5.4rem;
 		position: absolute;
 		width: 100%;
 		height: 100%;
 		transition: transform 0.2s;
-		transform: translate(calc(var(--menu-width) - 100%), 0);
+		transform: translate(-100%, 0);
 		background: var(--light-blue);
 		z-index: 2;
 		/* filter: drop-shadow(2px 0 2px rgba(0, 0, 0, 0.1)); */
@@ -183,6 +238,7 @@
 		background: var(--light-blue);
 		border: 2px solid transparent;
 		box-sizing: border-box;
+		padding: 0.2rem 0 0 0;
 	}
 
 	.menu-toggle:focus-visible {
@@ -228,7 +284,7 @@
 		font-weight: bold;
 	}
 
-	li.expanded img {
+	li.expanded > img {
 		transform: rotate(90deg);
 	}
 
@@ -242,38 +298,6 @@
 		--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)) - 0.7rem);
-		width: var(--dot-size);
-		height: var(--dot-size);
-		border-radius: 50%;
-		border: 1px solid var(--color);
-		box-sizing: border-box;
-	}
-
-	.section a::after {
-		transform: scale(0);
-		transition: transform 0.2s;
-		background: var(--color);
-	}
-
-	.part > a::after,
-	.chapter > a::after {
-		content: attr(data-label);
-		width: var(--menu-width);
-		text-align: center;
-		top: 0.2rem;
-		right: -0.7rem;
-		color: hsl(240, 8%, 64%);
-	}
-
-	.section[aria-current='page'] > a::after {
-		transform: none;
-	}
-
 	a {
 		color: var(--second);
 		padding: 0 0 0 0.5rem;
diff --git a/src/routes/tutorial/[slug]/_/Sidebar.svelte b/src/routes/tutorial/[slug]/_/Sidebar.svelte
@@ -2,7 +2,6 @@
 	import { createEventDispatcher } from 'svelte';
 	import { afterNavigate } from '$app/navigation';
 	import Modal from '$lib/components/Modal.svelte';
-	import { Icon } from '@sveltejs/site-kit';
 	import Menu from './Menu/Menu.svelte';
 
 	/** @type {import('$lib/types').PartStub[]} */
@@ -16,9 +15,6 @@
 	const namespace = 'learn.svelte.dev';
 	const copy_enabled = `${namespace}:copy_enabled`;
 
-	/** @type {import('svelte').SvelteComponent} */
-	let menu;
-
 	/** @type {HTMLElement} */
 	let sidebar;
 
@@ -32,14 +28,7 @@
 	});
 </script>
 
-<Menu bind:this={menu} {index} current={section} />
-
-<header on:click={() => menu.open()}>
-	<h1>
-		Part {section.part.index + 1} > {section.chapter.title} >
-		<strong>{section.title}</strong>
-	</h1>
-</header>
+<Menu {index} current={section} />
 
 <div
 	bind:this={sidebar}
@@ -113,36 +102,10 @@
 {/if}
 
 <style>
-	header {
-		display: flex;
-		border-bottom: 1px solid var(--border-color);
-		border-right: 1px solid var(--border-color);
-		padding: 0 0 0 calc(var(--menu-width) + 2.2rem);
-		height: var(--menu-width);
-		align-items: center;
-	}
-
-	header strong,
-	header h1 {
-		font-size: 1.4rem;
-	}
-
-	header strong {
-		color: var(--prime);
-	}
-
-	header h1 {
-		color: var(--second);
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		font-weight: 400;
-	}
-
 	.text {
 		flex: 1 1;
 		overflow-y: auto;
-		padding: 2.2rem 2.2rem 2.2rem calc(var(--menu-width) + 2.2rem);
+		padding: 2.2rem 3rem;
 		color: var(--second);
 		border-right: 1px solid var(--border-color);
 	}
@@ -192,7 +155,7 @@
 		margin: 0 0 1.6rem 0;
 		line-height: 1.3;
 		border-radius: 0.5rem;
-		box-shadow: inset 1px 1px 4px hsl(206, 20%, 85%);
+		box-shadow: inset 1px 1px 3px hsl(206deg 20% 93%);
 	}
 
 	.text :global(pre) :global(code) {
@@ -256,7 +219,7 @@
 	}
 
 	footer {
-		padding: 1.5rem 2.2rem 1.5rem calc(var(--menu-width) + 2.2rem);
+		padding: 1rem 3rem;
 		display: flex;
 		justify-content: space-between;
 		border-top: 1px solid var(--border-color);
diff --git a/src/routes/tutorial/[slug]/index.svelte b/src/routes/tutorial/[slug]/index.svelte
@@ -282,9 +282,13 @@
 <div class="container">
 	<SplitPane type="horizontal" min="360px" max="50%" pos="33%">
 		<section class="content" slot="a">
-			<Sidebar {index} {section} on:select={e => {
-				select(/** @type {import('$lib/types').FileStub} */ (section.a[e.detail.file]));
-			}} />
+			<Sidebar
+				{index}
+				{section}
+				on:select={(e) => {
+					select(/** @type {import('$lib/types').FileStub} */ (section.a[e.detail.file]));
+				}}
+			/>
 		</section>
 
 		<section slot="b">
@@ -470,7 +474,6 @@
 	}
 
 	.editor-container {
-		padding: 0.5rem;
 		background-color: var(--light-blue);
 	}
 </style>
