More work on styling home page

src/css/compositions/row.css

@@ -0,0 +1,5 @@
+.row {
+  display: flex;
+  flex-direction: row;
+  gap: var(--vertical-spacing, 1rem);
+}

src/css/compositions/wrapper.css

@@ -2,16 +2,21 @@
 	max-width: var(--wrapper-size, var(--screen-3xl));
 	margin-left: auto;
 	margin-right: auto;
+	padding-left: var(--wrapper-padding, var(--space-size-3xl));
+	padding-right: var(--wrapper-padding, var(--space-size-3xl));
 }
 
 .wrapper-sm {
 	--wrapper-size: var(--screen-sm);
+	--wrapper-padding: var(--space-size-s);
 }
 
 .wrapper-md {
 	--wrapper-size: var(--screen-md);
+	--wrapper-padding: var(--space-size-m);
 }
 
 .wrapper-lg {
 	--wrapper-size: var(--screen-lg);
+	--wrapper-padding: var(--space-size-l);
 }

src/css/exceptions/home.css

@@ -0,0 +1,13 @@
+.home {
+  h1,
+  h2,
+  h3 {
+    &::before {
+      content: none;
+    }
+  }
+
+  h1 {
+    font-size: var(--text-size-3xl);
+  }
+}

src/css/globals.css

@@ -1,52 +1,72 @@
 body {
-	background-color: var(--color-blueGray-800);
-	color: var(--color-zinc-200);
-	font-family: var(--font-family-mono);
-	font-size: var(--text-size-s);
-	text-underline-offset: var(--space-size-4xs);
+  background-color: var(--color-blueGray-800);
+  color: var(--color-slate-200);
+  font-family: var(--font-family-mono);
+  font-size: var(--text-size-s);
+  text-underline-offset: var(--space-size-4xs);
 }
 
-h1, h2, h3, h4, h5 {
-	display: flex;
-	font-weight: bold;
-	gap: 1ch;
-	line-height: 1.2;
-	margin: 0;
+h1,
+h2,
+h3,
+h4,
+h5 {
+  display: flex;
+  font-weight: bold;
+  gap: 1ch;
+  line-height: 1.2;
+  margin: 0;
 }
 
 h1 {
-	font-size: var(--text-size-2xl);
-	word-wrap: normal;
-}
-
-h1::before {
-	content: "#";
-	margin-inline-start: -2ch;
+  font-size: var(--text-size-2xl);
+  word-wrap: normal;
 }
 
 h2 {
-	font-size: var(--text-size-xl);
-}
-
-h2::before {
-	content: "##";
-	margin-inline-start: -3ch;
+  font-size: var(--text-size-xl);
 }
 
 h3 {
-	font-size: var(--text-size-l);
-}
-
-h3::before {
-	content: "###";
-	margin-inline-start: -4ch;
+  font-size: var(--text-size-l);
 }
 
 a {
-	color: inherit;
-	text-decoration: underline;
+  color: inherit;
+  text-decoration: underline;
+
+  &:hover {
+    text-decoration-color: var(--color-amber-200);
+  }
+
+  &:visited {
+    color: inherit;
+  }
 }
 
-a:visited {
-	color: inherit;
-}
+nav {
+  --vertical-spacing: var(--space-size-m);
+  font-size: var(--text-size-s);
+}
+
+header {
+  padding-top: var(--space-size-s);
+  padding-bottom: var(--space-size-s);
+}
+
+@media (min-width: 50em) {
+  h1::before {
+    content: "#";
+    margin-inline-start: -2ch;
+  }
+
+  h2::before {
+    content: "##";
+    margin-inline-start: -3ch;
+  }
+
+  h3::before {
+    content: "###";
+    margin-inline-start: -4ch;
+  }
+}

src/css/utilities/flex.css

@@ -0,0 +1,3 @@
+.space-between {
+  justify-content: space-between;
+}