Add CSS reset, migrate global layout and typography to base.scss

styles/base.scss

@@ -1,14 +1,81 @@
-@use 'lib/colors';
+@use "sass:math";
-@use 'lib/layout';
+@use "lib/fluids" with (
-@use 'lib/typography';
+	$lower-harmonic-ratio: 1.25,
+	$upper-harmonic-ratio: 1.3
+);
+@use "lib/reset";
+
 @use 'components/markup';
 @use 'components/site';
 @use 'components/page';
 @use 'components/banner';
 
-@include layout.setup;
+@layer reset {
-@include typography.setup;
+	@include reset.setup;
-
+}
-* {
+
-	box-sizing: border-box;
+$-comfortaa-weights: (
+	'Light': 300,
+	'Regular': 400,
+	'Medium': 500,
+	'Semi-bold': 600,
+	'Bold': 700,
+);
+@each $name, $weight in $-comfortaa-weights {
+	@font-face {
+		font-family: 'Comfortaa';
+		font-style: normal;
+		font-weight: $weight;
+		font-display: swap;
+		src: url('/assets/fonts/Comfortaa-#{$name}.ttf') format('truetype');
+	}
+}
+
+@font-face {
+	font-family: 'Comfortaa Variable';
+	font-style: normal;
+	font-display: swap;
+	src: url('/assets/fonts/Comfortaa-VariableFont_wght.ttf') format('truetype');
+}
+
+:root {
+	$-text-lower-base: math.div(1rem, 20) * 16;
+	$-text-upper-base: 1rem;
+	--text-m: #{fluids.harmonic-value(0, $-text-lower-base, $-text-upper-base)};
+	--text-l: #{fluids.harmonic-value(1, $-text-lower-base, $-text-upper-base)};
+	--text-xl: #{fluids.harmonic-value(2, $-text-lower-base, $-text-upper-base)};
+	--text-2xl: #{fluids.harmonic-value(3, $-text-lower-base, $-text-upper-base)};
+
+	$-line-height-factor: 1.5;
+	--scale-s: #{0.8 * $-line-height-factor};
+	--scale-m: #{$-line-height-factor};
+	--scale-l: #{1.5 * $-line-height-factor};
+	--scale-xl: #{1.7 * $-line-height-factor};
+
+	$-gap-lower-base: $-text-lower-base * $-line-height-factor;
+	$-gap-upper-base: $-text-upper-base * $-line-height-factor;
+	--gap-xs: #{fluids.harmonic-value(-3, $-gap-lower-base, $-gap-upper-base)};
+	--gap-s: #{fluids.harmonic-value(-2, $-gap-lower-base, $-gap-upper-base)};
+	--gap-m: #{fluids.harmonic-value(0, $-gap-lower-base, $-gap-upper-base)};
+	--gap-l: #{fluids.harmonic-value(2, $-gap-lower-base, $-gap-upper-base)};
+	--gap-xl: #{fluids.harmonic-value(3, $-gap-lower-base, $-gap-upper-base)};
+	--gap-2xl: #{fluids.harmonic-value(5, $-gap-lower-base, $-gap-upper-base)};
+
+	--weight-normal: 400;
+	--weight-emph: 600;
+}
+
+html {
+	font-size: 125%; // Scale from 16px to 20px
+	font-family: var(--font-override, Comfortaa, var(--system-fonts));
+	font-weight: var(--weight-normal);
+
+	@supports (font-variation-settings: normal) {
+		font-family: var(--font-override, 'Comfortaa Variable', var(--system-fonts));
+	}
+}
+
+body {
+	font-size: var(--text-m);
+	line-height: var(--scale-m);
 }

styles/components/_banner.scss

@@ -1,6 +1,5 @@
 @use '../lib/colors';
 @use '../lib/layout';
-@use '../lib/typography';
 
 // Banners can be put at the top of a page to draw attention. A banner has
 // two children:
@@ -68,7 +67,7 @@
 			padding: 0 var(--gap-m);
 			line-height: var(--scale-xl);
 			font-size: var(--text-2xl);
-			font-weight: typography.$emphasized-weight;
+			font-weight: var(--weight-emph);
 			background-color: colors.$teal-500;
 
 			@include colors.coderdojo-theme {

styles/components/_form-elements.scss

@@ -1,7 +1,6 @@
 @use '../lib/colors';
 @use '../lib/layout';
 @use '../lib/motion';
-@use '../lib/typography';
 
 %form-item {
 	@extend %narrow-content-gutter;
@@ -16,7 +15,7 @@
 }
 
 %form-label {
-	font-weight: typography.$emphasized-weight;
+	font-weight: var(--weight-emph);
 	color: colors.$blue-800;
 
 	@include colors.coderdojo-theme {
@@ -111,7 +110,7 @@
 
 	&:checked {
 		+ .form-input > label {
-			font-weight: typography.$emphasized-weight;
+			font-weight: var(--weight-emph);
 			color: colors.$teal-800;
 			border-color: colors.$teal-800;
 

styles/components/_markup.scss

@@ -1,7 +1,6 @@
 @use '../lib/colors';
 @use '../lib/layout';
 @use '../lib/motion';
-@use '../lib/typography';
 
 body {
 	margin: 0;
@@ -77,7 +76,7 @@ li {
 
 dt {
 	margin: var(--gap-m) 0;
-	font-weight: typography.$emphasized-weight;
+	font-weight: var(--weight-emph);
 	color: colors.$blue-800;
 
 	@include colors.coderdojo-theme {
@@ -150,7 +149,7 @@ blockquote {
 
 	&:hover {
 		border-color: colors.$blue-800;
-		font-weight: typography.$emphasized-weight;
+		font-weight: var(--weight-emph);
 
 		@include colors.coderdojo-theme {
 			border-color: colors.$brown-800;

styles/components/_page.scss

@@ -1,6 +1,5 @@
 @use '../lib/colors';
 @use '../lib/layout';
-@use '../lib/typography';
 
 .page-section {
 	padding-top: var(--gap-l);

styles/components/_site.scss

@@ -1,7 +1,6 @@
 @use '../lib/colors';
 @use '../lib/layout';
 @use '../lib/motion';
-@use '../lib/typography';
 
 @mixin header-item {
 	padding: 0 var(--gap-m);
@@ -97,7 +96,7 @@
 	a {
 		display: block;
 		padding: var(--gap-s);
-		font-weight: typography.$emphasized-weight;
+		font-weight: var(--weight-emph);
 		text-align: center;
 		text-decoration: none;
 		text-transform: lowercase;

styles/components/_tabs.scss

@@ -1,6 +1,5 @@
 @use '../lib/colors';
 @use '../lib/layout';
-@use '../lib/typography';
 
 // This is an HTML/CSS-only tabs component. It expects the following markup:
 //
@@ -45,7 +44,7 @@
 			display: block;
 
 			+ a {
-				font-weight: typography.$emphasized-weight;
+				font-weight: var(--weight-emph);
 				color: colors.$blue-800;
 			}
 		}

styles/components/_timeline.scss

@@ -2,7 +2,6 @@
 @use '../lib/colors';
 @use '../lib/layout';
 @use '../lib/motion';
-@use '../lib/typography';
 
 .timeline {
 	$stampSize: 4rem;
@@ -48,7 +47,7 @@
 				display: block;
 				padding-inline: var(--gap-s);
 				font-size: var(--text-m);
-				font-weight: typography.$normal-weight;
+				font-weight: var(--weight-normal);
 			}
 		}
 	}

styles/lib/_layout.scss

@@ -1,8 +1,3 @@
-@use "fluids" with (
-	$lower-harmonic-ratio: 1.25,
-	$upper-harmonic-ratio: 1.3
-);
-
 $breakpoint: 80rem;
 
 $narrow-content-width: 50rem;

styles/lib/_reset.scss

@@ -0,0 +1,57 @@
+@mixin setup {
+	:root {
+		--system-fonts: Avenir, Montserrat, Corbel, "URW Gothic", source-sans-pro,
+		"Source Sans 3", Ubuntu, Roboto, Noto, system-ui, sans-serif;
+		--monospace-system-fonts: ui-monospace, "Source Code Pro", "Ubuntu Mono",
+		"Cascadia Code", Menlo, Consolas, Monaco, "Andale Mono", "Liberation Mono",
+		"Lucida Console", monospace;
+
+		font-synthesis: none;
+		text-rendering: optimizeLegibility;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		color-scheme: light dark;
+	}
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	html {
+		font-size: 100%;
+		hanging-punctuation: first last;
+		orphans: 3;
+	}
+
+	body {
+		margin: 0;
+	}
+
+	input,
+	button,
+	textarea,
+	select {
+		font: inherit;
+		color: inherit;
+	}
+
+	@media (prefers-reduced-data: reduce) {
+		// Use var(--font-override, "The Font you actually want") to disable loading
+		// web fonts when prefers-reduce-data is on.
+		:root {
+			--font-override: var(--system-fonts);
+			--monospace-font-override: var(--monospace-system-fonts);
+		}
+	}
+
+	@media (prefers-reduced-motion) {
+		// Similar to the above, use something like var(--timing-override, 2s) to
+		// disable animations where appropriate.
+		:root {
+			--timing-override: 0;
+			--timing-state-override: paused;
+		}
+	}
+}

styles/lib/_typography.scss

@@ -1,46 +0,0 @@
-$normal-weight: 400;
-$emphasized-weight: 600;
-
-$comfortaa-weights: (
-	'Light': 300,
-	'Regular': 400,
-	'Medium': 500,
-	'Semi-bold': 600,
-	'Bold': 700,
-);
-
-@mixin setup {
-	@each $name, $weight in $comfortaa-weights {
-		@font-face {
-			font-family: 'Comfortaa';
-			font-style: normal;
-			font-weight: $weight;
-			font-display: swap;
-			src: url('/assets/fonts/Comfortaa-#{$name}.ttf') format('truetype');
-		}
-	}
-
-	@font-face {
-		font-family: 'Comfortaa Variable';
-		font-style: normal;
-		font-display: swap;
-		src: url('/assets/fonts/Comfortaa-VariableFont_wght.ttf') format('truetype');
-	}
-
-	html {
-		$fallback-fonts: Roboto, Arial, sans-serif;
-
-		font-size: 125%; // Scale from 16px to 20px
-		font-family: Comfortaa, $fallback-fonts;
-		font-weight: $normal-weight;
-
-		@supports (font-variation-settings: normal) {
-			font-family: 'Comfortaa Variable', $fallback-fonts;
-		}
-	}
-
-	body {
-		font-size: var(--text-m);
-		line-height: var(--scale-m);
-	}
-}