apply tutorial styles to Svelte tutorials

Author: dummdidumm

apps/svelte.dev/content/tutorial/+assets/src/app.html

@@ -7,258 +7,8 @@
 		<meta name="color-scheme" content="dark light" />
 		%sveltekit.head%
 
-		<style>
-			html {
-				--bg-1: hsl(0, 0%, 100%);
-				--bg-2: hsl(206, 20%, 90%);
-				--bg-3: hsl(206, 20%, 80%);
-				--fg-1: hsl(0, 0%, 13%);
-				--fg-2: hsl(0, 0%, 20%);
-				--fg-2: hsl(0, 0%, 30%);
-				--link: hsl(208, 77%, 47%);
-				--link-hover: hsl(208, 77%, 55%);
-				--link-active: hsl(208, 77%, 40%);
-
-				&.dark {
-					--bg-1: hsl(0, 0%, 18%);
-					--bg-2: hsl(0, 0%, 30%);
-					--bg-3: hsl(0, 0%, 40%);
-					--fg-1: hsl(0, 0%, 90%);
-					--fg-2: hsl(0, 0%, 70%);
-					--fg-3: hsl(0, 0%, 60%);
-					--link: hsl(206, 96%, 72%);
-					--link-hover: hsl(206, 96%, 78%);
-					--link-active: hsl(206, 96%, 64%);
-				}
-			}
-
-			body {
-				--border-radius: 4px;
-				--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-					'Open Sans', 'Helvetica Neue', sans-serif;
-				--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
-					'DejaVu Sans Mono', monospace;
-				background: var(--bg-1);
-				color: var(--fg-1);
-				font-family: var(--font);
-				line-height: 1.5;
-				margin: 1rem;
-				height: calc(100vh - 2rem);
-			}
-
-			h1,
-			h2,
-			h3,
-			h4,
-			h5,
-			h6 {
-				font-weight: normal;
-				font-variant-numeric: tabular-nums;
-				line-height: 1.1;
-			}
-
-			:is(h1, h2, h3, h4, h5, h6, p) {
-				margin: 1rem 0.1rem;
-			}
-
-			label {
-				margin: 0.5rem 0.1rem;
-			}
-
-			:is(h1, h2, h3, h4, h5, h6, p, label):first-child {
-				margin-top: 0;
-			}
-
-			:is(h1, h2, h3, h4, h5, h6, p, label):last-child {
-				margin-bottom: 0;
-			}
-
-			a {
-				color: var(--link);
-			}
-
-			a:hover {
-				color: var(--link-hover);
-			}
-
-			a:active {
-				color: var(--link-active);
-			}
-
-			label {
-				display: flex;
-				gap: 0.5rem;
-				align-items: center;
-			}
-
-			label input {
-				margin: 0;
-			}
-
-			button,
-			input,
-			select {
-				font-family: inherit;
-				font-size: inherit;
-			}
-
-			button {
-				background: var(--link);
-				color: var(--bg-1);
-				padding: 0.5rem 1rem;
-				border: none;
-				border-radius: var(--border-radius);
-			}
-
-			button:hover {
-				background: var(--link-hover);
-			}
-
-			button:active {
-				background: var(--link-active);
-			}
-
-			:is(button, button:hover, button:active):disabled {
-				background: var(--link);
-				filter: grayscale(1);
-				opacity: 0.4;
-			}
-
-			input,
-			textarea,
-			select {
-				padding: 0.5rem;
-				border: 1px solid var(--bg-2);
-				border-radius: var(--border-radius);
-				box-sizing: border-box;
-			}
-
-			input,
-			textarea {
-				background: var(--bg-1);
-				color: inherit;
-			}
-
-			select:not([multiple]) {
-				background: var(--bg-2);
-			}
-
-			textarea {
-				font-family: var(--font-mono);
-				font-size: 0.9rem;
-			}
-
-			form {
-				display: flex;
-				flex-direction: column;
-				gap: 1rem;
-				align-items: baseline;
-			}
-
-			ul:has(li):has(form) {
-				list-style: none;
-				padding: 0;
-			}
-
-			li form {
-				flex-direction: row;
-				gap: 0.5rem;
-				margin: 0.5rem 0;
-			}
-
-			nav {
-				position: relative;
-				display: flex;
-				gap: 1em;
-				padding: 1em;
-				background: var(--bg-2);
-				z-index: 2;
-				margin: 0 0 1em 0;
-				border-radius: var(--border-radius);
-			}
-
-			nav a {
-				text-decoration: none;
-			}
-
-			nav a[aria-current='true'] {
-				border-bottom: 2px solid;
-			}
-
-			ul:has(form) {
-				list-style: none;
-				padding: 0;
-			}
-
-			progress {
-				margin: 0.5rem 0;
-			}
-
-			progress:first-child {
-				margin-top: 0;
-			}
-
-			progress:lsat-child {
-				margin-bottom: 0;
-			}
-
-			.error {
-				color: red;
-			}
-
-			code {
-				background: var(--bg-2);
-				font-family: var(--font-mono);
-				font-size: 0.9em;
-				padding: 0.15rem 0.3rem;
-				border-radius: var(--border-radius);
-			}
-
-			ul.todos {
-				padding: 0;
-			}
-
-			ul.todos li:not(:has(> form)),
-			ul.todos li form {
-				position: relative;
-				display: flex;
-				align-items: center;
-				padding: 0.5em 0.5em 0.5em 1em;
-				margin: 0 0 0.5em 0;
-				gap: 0.5em;
-				border-radius: 5px;
-				user-select: none;
-				background: var(--bg-1);
-				filter: drop-shadow(2px 3px 6px rgba(0, 0, 0, 0.1));
-				transition:
-					filter 0.2s,
-					opacity 0.2s;
-			}
-
-			ul.todos .done {
-				filter: none;
-				opacity: 0.4;
-			}
-
-			ul.todos button {
-				border: none;
-				background-color: transparent;
-				background-repeat: no-repeat;
-				background-position: 50% 50%;
-				background-size: 1rem 1rem;
-				cursor: pointer;
-				width: 3em;
-				height: 3em;
-				margin: -0.5em -0.5em -0.5em 0;
-				aspect-ratio: 1;
-				opacity: 0.5;
-				transition: opacity 0.2s;
-			}
-
-			ul.todos button:hover {
-				opacity: 1;
-			}
-		</style>
+		<!-- duplication with svelte.dev/static/shared.css needed, else styles aren't applied during local dev -->
+		<link rel="stylesheet" href="/shared.css" />
 	</head>
 	<body>
 		<div style="display: contents">%sveltekit.body%</div>