More work on theme

src/css/compositions/stack.css

@@ -0,0 +1,15 @@
+[class*="stack"] > * + * {
+	margin-block-start: var(--vertical-spacing, 1.5rem);
+}
+
+.stack-sm {
+	--vertical-spacing: var(--space-size-s);
+}
+
+.stack-md {
+	--vertical-spacing: var(--space-size-m);
+}
+
+.stack-lg {
+	--vertical-spacing: var(--space-size-l);
+}

src/css/compositions/wrapper.css

@@ -0,0 +1,17 @@
+[class*="wrapper"] {
+	max-width: var(--wrapper-size, var(--screen-3xl));
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.wrapper-sm {
+	--wrapper-size: var(--screen-sm);
+}
+
+.wrapper-md {
+	--wrapper-size: var(--screen-md);
+}
+
+.wrapper-lg {
+	--wrapper-size: var(--screen-lg);
+}

src/css/fonts/space_grotesk.css

@@ -1,72 +1,7 @@
 @font-face {
     font-family: 'Space Grotesk';
-    src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.woff2') format('woff2'),
-        url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
+    src: url('/assets/fonts/SpaceGrotestk.woff2') format('woff2 supports variations'),
+        url('/assets/fonts/SpaceGrotesk.woff2') format('woff2-variations');
+    font-weight: 300 400 500 600 700;
+    font-feature-settings: "liga", "ss03", "ss02", "ss01", "onum";
 }
-
-@font-face {
-    font-family: 'Space Grotesk';
-    src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.woff2') format('woff2'),
-        url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Bold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Space Grotesk';
-    src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.woff2') format('woff2'),
-        url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Space Grotesk';
-    src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.woff2') format('woff2'),
-        url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Medium.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Space Grotesk';
-    src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.woff2') format('woff2'),
-        url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Space Grotesk';
-    src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.woff2') format('woff2'),
-        url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Space Grotesk';
-    src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.woff2') format('woff2'),
-        url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-}
-
-@font-face {
-    font-family: 'Space Grotesk';
-    src: url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.woff2') format('woff2'),
-        url('/assets/fonts/Space_Grotesk/SpaceGrotesk-Light.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
-}
-

src/css/globals.css

@@ -1,4 +1,35 @@
 body {
+	background-color: var(--color-blueGray-800);
+	color: var(--color-zinc-200);
 	font-family: var(--font-family-mono);
-	font-size: var(--font-size-s);
+	font-size: var(--text-size-s);
+	text-underline-offset: var(--space-size-4xs);
+}
+
+h1, h2, h3, h4, h5 {
+	font-weight: bold;
+	line-height: 1.2;
+	margin: 0;
+}
+
+h1 {
+	font-size: var(--text-size-2xl);
+	word-wrap: normal;
+}
+
+h2 {
+	font-size: var(--text-size-xl);
+}
+
+h3 {
+	font-size: var(--text-size-l);
+}
+
+a {
+	color: inherit;
+	text-decoration: underline;
+}
+
+a:visited {
+	color: inherit;
 }

src/css/utilities/circle.css

@@ -0,0 +1,7 @@
+.circle {
+	aspect-ratio: 1;
+	border-radius: 100%;
+	display: block;
+	object-fit: cover;
+	object-position: center;
+}