From 573a06269be6976839f21fbe505796b65265f494 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Fri, 15 Sep 2023 16:32:03 -0700
Subject: [PATCH] docs: start to setup versioned docs

---
 .../01-getting-started/01-introduction.md     |  0
 .../docs/{ => 4}/01-getting-started/meta.json |  0
 .../01-svelte-components.md                   |  0
 .../02-template-syntax/02-basic-markup.md     |  0
 .../02-template-syntax/03-logic-blocks.md     |  0
 .../02-template-syntax/04-special-tags.md     |  0
 .../05-element-directives.md                  |  0
 .../06-component-directives.md                |  0
 .../02-template-syntax/07-special-elements.md |  0
 .../docs/{ => 4}/02-template-syntax/meta.json |  0
 .../docs/{ => 4}/03-runtime/01-svelte.md      |  0
 .../{ => 4}/03-runtime/02-svelte-store.md     |  0
 .../{ => 4}/03-runtime/03-svelte-motion.md    |  0
 .../03-runtime/04-svelte-transition.md        |  0
 .../{ => 4}/03-runtime/05-svelte-animate.md   |  0
 .../{ => 4}/03-runtime/06-svelte-easing.md    |  0
 .../{ => 4}/03-runtime/07-svelte-action.md    |  0
 .../docs/{ => 4}/03-runtime/meta.json         |  0
 .../04-compiler-and-api/01-svelte-compiler.md |  0
 .../02-client-side-component-api.md           |  0
 .../03-server-side-component-api.md           |  0
 .../04-custom-elements-api.md                 |  0
 .../{ => 4}/04-compiler-and-api/meta.json     |  0
 documentation/docs/{ => 4}/05-misc/01-faq.md  |  0
 .../05-misc/02-accessibility-warnings.md      |  0
 .../docs/{ => 4}/05-misc/03-typescript.md     |  0
 .../{ => 4}/05-misc/04-v4-migration-guide.md  |  0
 documentation/docs/{ => 4}/05-misc/meta.json  |  0
 .../{ => 4}/06-legacy/01-svelte-register.md   |  0
 .../docs/{ => 4}/06-legacy/meta.json          |  0
 .../5/01-getting-started/01-introduction.md   |  7 ++
 .../docs/5/01-getting-started/meta.json       |  3 +
 sites/svelte.dev/src/constants.js             |  3 +-
 sites/svelte.dev/src/lib/server/docs/index.js |  2 +-
 .../src/routes/docs/5/+page.server.js         | 14 +++
 .../svelte.dev/src/routes/docs/5/+page.svelte |  7 ++
 .../src/routes/docs/[slug]/+page.svelte       | 96 +------------------
 .../src/routes/docs/[slug]/Docs.svelte        | 53 ++++++++++
 .../src/routes/docs/[slug]/Pagination.svelte  | 58 +++++++++++
 39 files changed, 147 insertions(+), 96 deletions(-)
 rename documentation/docs/{ => 4}/01-getting-started/01-introduction.md (100%)
 rename documentation/docs/{ => 4}/01-getting-started/meta.json (100%)
 rename documentation/docs/{ => 4}/02-template-syntax/01-svelte-components.md (100%)
 rename documentation/docs/{ => 4}/02-template-syntax/02-basic-markup.md (100%)
 rename documentation/docs/{ => 4}/02-template-syntax/03-logic-blocks.md (100%)
 rename documentation/docs/{ => 4}/02-template-syntax/04-special-tags.md (100%)
 rename documentation/docs/{ => 4}/02-template-syntax/05-element-directives.md (100%)
 rename documentation/docs/{ => 4}/02-template-syntax/06-component-directives.md (100%)
 rename documentation/docs/{ => 4}/02-template-syntax/07-special-elements.md (100%)
 rename documentation/docs/{ => 4}/02-template-syntax/meta.json (100%)
 rename documentation/docs/{ => 4}/03-runtime/01-svelte.md (100%)
 rename documentation/docs/{ => 4}/03-runtime/02-svelte-store.md (100%)
 rename documentation/docs/{ => 4}/03-runtime/03-svelte-motion.md (100%)
 rename documentation/docs/{ => 4}/03-runtime/04-svelte-transition.md (100%)
 rename documentation/docs/{ => 4}/03-runtime/05-svelte-animate.md (100%)
 rename documentation/docs/{ => 4}/03-runtime/06-svelte-easing.md (100%)
 rename documentation/docs/{ => 4}/03-runtime/07-svelte-action.md (100%)
 rename documentation/docs/{ => 4}/03-runtime/meta.json (100%)
 rename documentation/docs/{ => 4}/04-compiler-and-api/01-svelte-compiler.md (100%)
 rename documentation/docs/{ => 4}/04-compiler-and-api/02-client-side-component-api.md (100%)
 rename documentation/docs/{ => 4}/04-compiler-and-api/03-server-side-component-api.md (100%)
 rename documentation/docs/{ => 4}/04-compiler-and-api/04-custom-elements-api.md (100%)
 rename documentation/docs/{ => 4}/04-compiler-and-api/meta.json (100%)
 rename documentation/docs/{ => 4}/05-misc/01-faq.md (100%)
 rename documentation/docs/{ => 4}/05-misc/02-accessibility-warnings.md (100%)
 rename documentation/docs/{ => 4}/05-misc/03-typescript.md (100%)
 rename documentation/docs/{ => 4}/05-misc/04-v4-migration-guide.md (100%)
 rename documentation/docs/{ => 4}/05-misc/meta.json (100%)
 rename documentation/docs/{ => 4}/06-legacy/01-svelte-register.md (100%)
 rename documentation/docs/{ => 4}/06-legacy/meta.json (100%)
 create mode 100644 documentation/docs/5/01-getting-started/01-introduction.md
 create mode 100644 documentation/docs/5/01-getting-started/meta.json
 create mode 100644 sites/svelte.dev/src/routes/docs/5/+page.server.js
 create mode 100644 sites/svelte.dev/src/routes/docs/5/+page.svelte
 create mode 100644 sites/svelte.dev/src/routes/docs/[slug]/Docs.svelte
 create mode 100644 sites/svelte.dev/src/routes/docs/[slug]/Pagination.svelte

diff --git a/documentation/docs/01-getting-started/01-introduction.md b/documentation/docs/4/01-getting-started/01-introduction.md
similarity index 100%
rename from documentation/docs/01-getting-started/01-introduction.md
rename to documentation/docs/4/01-getting-started/01-introduction.md
diff --git a/documentation/docs/01-getting-started/meta.json b/documentation/docs/4/01-getting-started/meta.json
similarity index 100%
rename from documentation/docs/01-getting-started/meta.json
rename to documentation/docs/4/01-getting-started/meta.json
diff --git a/documentation/docs/02-template-syntax/01-svelte-components.md b/documentation/docs/4/02-template-syntax/01-svelte-components.md
similarity index 100%
rename from documentation/docs/02-template-syntax/01-svelte-components.md
rename to documentation/docs/4/02-template-syntax/01-svelte-components.md
diff --git a/documentation/docs/02-template-syntax/02-basic-markup.md b/documentation/docs/4/02-template-syntax/02-basic-markup.md
similarity index 100%
rename from documentation/docs/02-template-syntax/02-basic-markup.md
rename to documentation/docs/4/02-template-syntax/02-basic-markup.md
diff --git a/documentation/docs/02-template-syntax/03-logic-blocks.md b/documentation/docs/4/02-template-syntax/03-logic-blocks.md
similarity index 100%
rename from documentation/docs/02-template-syntax/03-logic-blocks.md
rename to documentation/docs/4/02-template-syntax/03-logic-blocks.md
diff --git a/documentation/docs/02-template-syntax/04-special-tags.md b/documentation/docs/4/02-template-syntax/04-special-tags.md
similarity index 100%
rename from documentation/docs/02-template-syntax/04-special-tags.md
rename to documentation/docs/4/02-template-syntax/04-special-tags.md
diff --git a/documentation/docs/02-template-syntax/05-element-directives.md b/documentation/docs/4/02-template-syntax/05-element-directives.md
similarity index 100%
rename from documentation/docs/02-template-syntax/05-element-directives.md
rename to documentation/docs/4/02-template-syntax/05-element-directives.md
diff --git a/documentation/docs/02-template-syntax/06-component-directives.md b/documentation/docs/4/02-template-syntax/06-component-directives.md
similarity index 100%
rename from documentation/docs/02-template-syntax/06-component-directives.md
rename to documentation/docs/4/02-template-syntax/06-component-directives.md
diff --git a/documentation/docs/02-template-syntax/07-special-elements.md b/documentation/docs/4/02-template-syntax/07-special-elements.md
similarity index 100%
rename from documentation/docs/02-template-syntax/07-special-elements.md
rename to documentation/docs/4/02-template-syntax/07-special-elements.md
diff --git a/documentation/docs/02-template-syntax/meta.json b/documentation/docs/4/02-template-syntax/meta.json
similarity index 100%
rename from documentation/docs/02-template-syntax/meta.json
rename to documentation/docs/4/02-template-syntax/meta.json
diff --git a/documentation/docs/03-runtime/01-svelte.md b/documentation/docs/4/03-runtime/01-svelte.md
similarity index 100%
rename from documentation/docs/03-runtime/01-svelte.md
rename to documentation/docs/4/03-runtime/01-svelte.md
diff --git a/documentation/docs/03-runtime/02-svelte-store.md b/documentation/docs/4/03-runtime/02-svelte-store.md
similarity index 100%
rename from documentation/docs/03-runtime/02-svelte-store.md
rename to documentation/docs/4/03-runtime/02-svelte-store.md
diff --git a/documentation/docs/03-runtime/03-svelte-motion.md b/documentation/docs/4/03-runtime/03-svelte-motion.md
similarity index 100%
rename from documentation/docs/03-runtime/03-svelte-motion.md
rename to documentation/docs/4/03-runtime/03-svelte-motion.md
diff --git a/documentation/docs/03-runtime/04-svelte-transition.md b/documentation/docs/4/03-runtime/04-svelte-transition.md
similarity index 100%
rename from documentation/docs/03-runtime/04-svelte-transition.md
rename to documentation/docs/4/03-runtime/04-svelte-transition.md
diff --git a/documentation/docs/03-runtime/05-svelte-animate.md b/documentation/docs/4/03-runtime/05-svelte-animate.md
similarity index 100%
rename from documentation/docs/03-runtime/05-svelte-animate.md
rename to documentation/docs/4/03-runtime/05-svelte-animate.md
diff --git a/documentation/docs/03-runtime/06-svelte-easing.md b/documentation/docs/4/03-runtime/06-svelte-easing.md
similarity index 100%
rename from documentation/docs/03-runtime/06-svelte-easing.md
rename to documentation/docs/4/03-runtime/06-svelte-easing.md
diff --git a/documentation/docs/03-runtime/07-svelte-action.md b/documentation/docs/4/03-runtime/07-svelte-action.md
similarity index 100%
rename from documentation/docs/03-runtime/07-svelte-action.md
rename to documentation/docs/4/03-runtime/07-svelte-action.md
diff --git a/documentation/docs/03-runtime/meta.json b/documentation/docs/4/03-runtime/meta.json
similarity index 100%
rename from documentation/docs/03-runtime/meta.json
rename to documentation/docs/4/03-runtime/meta.json
diff --git a/documentation/docs/04-compiler-and-api/01-svelte-compiler.md b/documentation/docs/4/04-compiler-and-api/01-svelte-compiler.md
similarity index 100%
rename from documentation/docs/04-compiler-and-api/01-svelte-compiler.md
rename to documentation/docs/4/04-compiler-and-api/01-svelte-compiler.md
diff --git a/documentation/docs/04-compiler-and-api/02-client-side-component-api.md b/documentation/docs/4/04-compiler-and-api/02-client-side-component-api.md
similarity index 100%
rename from documentation/docs/04-compiler-and-api/02-client-side-component-api.md
rename to documentation/docs/4/04-compiler-and-api/02-client-side-component-api.md
diff --git a/documentation/docs/04-compiler-and-api/03-server-side-component-api.md b/documentation/docs/4/04-compiler-and-api/03-server-side-component-api.md
similarity index 100%
rename from documentation/docs/04-compiler-and-api/03-server-side-component-api.md
rename to documentation/docs/4/04-compiler-and-api/03-server-side-component-api.md
diff --git a/documentation/docs/04-compiler-and-api/04-custom-elements-api.md b/documentation/docs/4/04-compiler-and-api/04-custom-elements-api.md
similarity index 100%
rename from documentation/docs/04-compiler-and-api/04-custom-elements-api.md
rename to documentation/docs/4/04-compiler-and-api/04-custom-elements-api.md
diff --git a/documentation/docs/04-compiler-and-api/meta.json b/documentation/docs/4/04-compiler-and-api/meta.json
similarity index 100%
rename from documentation/docs/04-compiler-and-api/meta.json
rename to documentation/docs/4/04-compiler-and-api/meta.json
diff --git a/documentation/docs/05-misc/01-faq.md b/documentation/docs/4/05-misc/01-faq.md
similarity index 100%
rename from documentation/docs/05-misc/01-faq.md
rename to documentation/docs/4/05-misc/01-faq.md
diff --git a/documentation/docs/05-misc/02-accessibility-warnings.md b/documentation/docs/4/05-misc/02-accessibility-warnings.md
similarity index 100%
rename from documentation/docs/05-misc/02-accessibility-warnings.md
rename to documentation/docs/4/05-misc/02-accessibility-warnings.md
diff --git a/documentation/docs/05-misc/03-typescript.md b/documentation/docs/4/05-misc/03-typescript.md
similarity index 100%
rename from documentation/docs/05-misc/03-typescript.md
rename to documentation/docs/4/05-misc/03-typescript.md
diff --git a/documentation/docs/05-misc/04-v4-migration-guide.md b/documentation/docs/4/05-misc/04-v4-migration-guide.md
similarity index 100%
rename from documentation/docs/05-misc/04-v4-migration-guide.md
rename to documentation/docs/4/05-misc/04-v4-migration-guide.md
diff --git a/documentation/docs/05-misc/meta.json b/documentation/docs/4/05-misc/meta.json
similarity index 100%
rename from documentation/docs/05-misc/meta.json
rename to documentation/docs/4/05-misc/meta.json
diff --git a/documentation/docs/06-legacy/01-svelte-register.md b/documentation/docs/4/06-legacy/01-svelte-register.md
similarity index 100%
rename from documentation/docs/06-legacy/01-svelte-register.md
rename to documentation/docs/4/06-legacy/01-svelte-register.md
diff --git a/documentation/docs/06-legacy/meta.json b/documentation/docs/4/06-legacy/meta.json
similarity index 100%
rename from documentation/docs/06-legacy/meta.json
rename to documentation/docs/4/06-legacy/meta.json
diff --git a/documentation/docs/5/01-getting-started/01-introduction.md b/documentation/docs/5/01-getting-started/01-introduction.md
new file mode 100644
index 0000000000..7604b9aa33
--- /dev/null
+++ b/documentation/docs/5/01-getting-started/01-introduction.md
@@ -0,0 +1,7 @@
+---
+title: Introduction
+---
+
+You can find the latest Svelte reference documentation at [https://svelte.dev/docs](https://svelte.dev/docs).
+
+You can learn more about Svelte 5 and other future work on our [roadmap](https://svelte.dev/roadmap).
diff --git a/documentation/docs/5/01-getting-started/meta.json b/documentation/docs/5/01-getting-started/meta.json
new file mode 100644
index 0000000000..345e69a3c2
--- /dev/null
+++ b/documentation/docs/5/01-getting-started/meta.json
@@ -0,0 +1,3 @@
+{
+	"title": "Getting Started"
+}
diff --git a/sites/svelte.dev/src/constants.js b/sites/svelte.dev/src/constants.js
index cf5039379f..9a9d0df24a 100644
--- a/sites/svelte.dev/src/constants.js
+++ b/sites/svelte.dev/src/constants.js
@@ -4,6 +4,7 @@ export const CONTENT_BASE = '../../documentation';
 export const CONTENT_BASE_PATHS = {
 	BLOG: `${CONTENT_BASE}/blog`,
 	TUTORIAL: `${CONTENT_BASE}/tutorial`,
-	DOCS: `${CONTENT_BASE}/docs`,
+	DOCS_LATEST: `${CONTENT_BASE}/docs/4`,
+	DOCS_5: `${CONTENT_BASE}/docs/5`,
 	EXAMPLES: `${CONTENT_BASE}/examples`
 };
diff --git a/sites/svelte.dev/src/lib/server/docs/index.js b/sites/svelte.dev/src/lib/server/docs/index.js
index 4a4f9d6e42..f9e6d58ff0 100644
--- a/sites/svelte.dev/src/lib/server/docs/index.js
+++ b/sites/svelte.dev/src/lib/server/docs/index.js
@@ -29,7 +29,7 @@ export async function get_parsed_docs(docs_data, slug) {
 }
 
 /** @return {Promise<import('./types').DocsData>} */
-export async function get_docs_data(base = CONTENT_BASE_PATHS.DOCS) {
+export async function get_docs_data(base = CONTENT_BASE_PATHS.DOCS_LATEST) {
 	const { readdir, readFile } = await import('node:fs/promises');
 
 	/** @type {import('./types').DocsData} */
diff --git a/sites/svelte.dev/src/routes/docs/5/+page.server.js b/sites/svelte.dev/src/routes/docs/5/+page.server.js
new file mode 100644
index 0000000000..a078c6933d
--- /dev/null
+++ b/sites/svelte.dev/src/routes/docs/5/+page.server.js
@@ -0,0 +1,14 @@
+import { get_docs_data, get_parsed_docs } from '$lib/server/docs/index.js';
+import { error } from '@sveltejs/kit';
+import { CONTENT_BASE_PATHS } from '../../../constants';
+
+export const prerender = true;
+
+export async function load({ params }) {
+	const slug = 'introduction'; // params.slug
+	const processed_page = await get_parsed_docs(await get_docs_data(CONTENT_BASE_PATHS.DOCS_5), slug);
+
+	if (!processed_page) throw error(404);
+
+	return { page: processed_page };
+}
diff --git a/sites/svelte.dev/src/routes/docs/5/+page.svelte b/sites/svelte.dev/src/routes/docs/5/+page.svelte
new file mode 100644
index 0000000000..7a82e39f57
--- /dev/null
+++ b/sites/svelte.dev/src/routes/docs/5/+page.svelte
@@ -0,0 +1,7 @@
+<script>
+	import Docs from '../[slug]/Docs.svelte';
+
+	export let data;
+</script>
+
+<Docs version={5} {data} />
diff --git a/sites/svelte.dev/src/routes/docs/[slug]/+page.svelte b/sites/svelte.dev/src/routes/docs/[slug]/+page.svelte
index 1bdcbccc40..fb8b7503fa 100644
--- a/sites/svelte.dev/src/routes/docs/[slug]/+page.svelte
+++ b/sites/svelte.dev/src/routes/docs/[slug]/+page.svelte
@@ -1,99 +1,7 @@
 <script>
-	import { page } from '$app/stores';
-	import { Icon } from '@sveltejs/site-kit/components';
-	import { DocsOnThisPage, setupDocsHovers } from '@sveltejs/site-kit/docs';
+	import Docs from './Docs.svelte';
 
 	export let data;
-
-	$: pages = data.sections.flatMap((section) => section.pages);
-	$: index = pages.findIndex(({ path }) => path === $page.url.pathname);
-	$: prev = pages[index - 1];
-	$: next = pages[index + 1];
-
-	setupDocsHovers();
 </script>
 
-<svelte:head>
-	<title>{data.page?.title} • Docs • Svelte</title>
-
-	<meta name="twitter:title" content="{data.page.title} • Docs • Svelte" />
-	<meta name="twitter:description" content="{data.page.title} • Svelte documentation" />
-	<meta name="Description" content="{data.page.title} • Svelte documentation" />
-</svelte:head>
-
-<div class="text" id="docs-content">
-	<a
-		class="edit"
-		href="https://github.com/sveltejs/svelte/edit/master/documentation/docs/{data.page.file}"
-	>
-		<Icon size={50} name="edit" /> Edit this page on GitHub
-	</a>
-
-	<DocsOnThisPage details={data.page} />
-
-	{@html data.page.content}
-</div>
-
-<div class="controls">
-	<div>
-		<span class:faded={!prev}>previous</span>
-
-		{#if prev}
-			<a href={prev.path}>{prev.title}</a>
-		{/if}
-	</div>
-
-	<div>
-		<span class:faded={!next}>next</span>
-		{#if next}
-			<a href={next.path}>{next.title}</a>
-		{/if}
-	</div>
-</div>
-
-<style>
-	.edit {
-		position: relative;
-		font-size: 1.4rem;
-		line-height: 1;
-		z-index: 2;
-	}
-
-	.edit :global(.icon) {
-		position: relative;
-		top: -0.1rem;
-		left: 0.3rem;
-		width: 1.4rem;
-		height: 1.4rem;
-		margin-right: 0.5rem;
-	}
-
-	.controls {
-		max-width: calc(var(--sk-line-max-width) + 1rem);
-		border-top: 1px solid var(--sk-back-4);
-		padding: 1rem 0 0 0;
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		margin: 6rem 0 0 0;
-	}
-
-	.controls > :first-child {
-		text-align: left;
-	}
-
-	.controls > :last-child {
-		text-align: right;
-	}
-
-	.controls span {
-		display: block;
-		font-size: 1.2rem;
-		text-transform: uppercase;
-		font-weight: 600;
-		color: var(--sk-text-3);
-	}
-
-	.controls span.faded {
-		opacity: 0.4;
-	}
-</style>
+<Docs version={4} {data} />
diff --git a/sites/svelte.dev/src/routes/docs/[slug]/Docs.svelte b/sites/svelte.dev/src/routes/docs/[slug]/Docs.svelte
new file mode 100644
index 0000000000..36847335eb
--- /dev/null
+++ b/sites/svelte.dev/src/routes/docs/[slug]/Docs.svelte
@@ -0,0 +1,53 @@
+<script>
+	import { Icon } from '@sveltejs/site-kit/components';
+	import { DocsOnThisPage, setupDocsHovers } from '@sveltejs/site-kit/docs';
+	import Pagination from './Pagination.svelte';
+
+	export let data;
+	export let version;
+
+	setupDocsHovers();
+</script>
+
+<svelte:head>
+	<title>{data.page?.title} • Docs • Svelte</title>
+
+	<meta name="twitter:title" content="{data.page.title} • Docs • Svelte" />
+	<meta name="twitter:description" content="{data.page.title} • Svelte documentation" />
+	<meta name="Description" content="{data.page.title} • Svelte documentation" />
+</svelte:head>
+
+<div class="text" id="docs-content">
+	<a
+		class="edit"
+		href="https://github.com/sveltejs/svelte/edit/master/documentation/docs/{version}/{data.page.file}"
+	>
+		<Icon size={50} name="edit" /> Edit this page on GitHub
+	</a>
+
+	<DocsOnThisPage details={data.page} />
+
+	{@html data.page.content}
+</div>
+
+{#if version !== 5}
+	<Pagination pages={data.sections.flatMap((section) => section.pages)} />
+{/if}
+
+<style>
+	.edit {
+		position: relative;
+		font-size: 1.4rem;
+		line-height: 1;
+		z-index: 2;
+	}
+
+	.edit :global(.icon) {
+		position: relative;
+		top: -0.1rem;
+		left: 0.3rem;
+		width: 1.4rem;
+		height: 1.4rem;
+		margin-right: 0.5rem;
+	}
+</style>
diff --git a/sites/svelte.dev/src/routes/docs/[slug]/Pagination.svelte b/sites/svelte.dev/src/routes/docs/[slug]/Pagination.svelte
new file mode 100644
index 0000000000..807545d3aa
--- /dev/null
+++ b/sites/svelte.dev/src/routes/docs/[slug]/Pagination.svelte
@@ -0,0 +1,58 @@
+
+<script>
+	import { page } from '$app/stores';
+
+	export let pages;
+
+	$: index = pages.findIndex(({ path }) => path === $page.url.pathname);
+	$: prev = pages[index - 1];
+	$: next = pages[index + 1];
+</script>
+
+<div class="controls">
+	<div>
+		<span class:faded={!prev}>previous</span>
+
+		{#if prev}
+			<a href={prev.path}>{prev.title}</a>
+		{/if}
+	</div>
+
+	<div>
+		<span class:faded={!next}>next</span>
+		{#if next}
+			<a href={next.path}>{next.title}</a>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.controls {
+		max-width: calc(var(--sk-line-max-width) + 1rem);
+		border-top: 1px solid var(--sk-back-4);
+		padding: 1rem 0 0 0;
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		margin: 6rem 0 0 0;
+	}
+
+	.controls > :first-child {
+		text-align: left;
+	}
+
+	.controls > :last-child {
+		text-align: right;
+	}
+
+	.controls span {
+		display: block;
+		font-size: 1.2rem;
+		text-transform: uppercase;
+		font-weight: 600;
+		color: var(--sk-text-3);
+	}
+
+	.controls span.faded {
+		opacity: 0.4;
+	}
+</style>