Improve styles

Signed-off-by: Severin Kaderli <severin@kaderli.dev>

static/styles.css

@@ -21,6 +21,13 @@
 
   /* Peach */
   --link-color: hsl(22, 99%, 52%);
+
+  /* Grid */
+  /* https://ryanmulligan.dev/blog/layout-breakouts/ */
+  --gap: var(--spacing);
+  --full: minmax(var(--gap), 1fr);
+  --content: min(80ch, 100% - var(--gap) * 2);
+  --feature: minmax(0, var(--spacing-4));
 }
 
 @media (prefers-color-scheme: dark) {
@@ -36,20 +43,15 @@
 html {
   margin: 0;
   padding: 0;
-  font-size: 16px;
+  font-size: 100%;
 }
 
 body {
   margin: 0;
-  padding: var(--spacing-3) var(--spacing);
-  display: grid;
-  grid-template-columns: minmax(auto, 1024px);
-  gap: var(--spacing-3) var(--spacing);
+  padding: var(--spacing-3) 0;
   background-color: var(--color-background);
   color: var(--color-text);
   font-family: var(--font-sans-serif);
-  font-size: 100%;
-  justify-content: center;
 }
 
 a {
@@ -88,6 +90,26 @@ td {
 header,
 main,
 footer {
-  background-color: var(--color-background-accent);
-  padding: var(--spacing);
+  display: grid;
+  grid-template-columns:
+    [full-start] var(--full)
+    [feature-start] var(--feature)
+    [content-start] var(--content) [content-end]
+    var(--feature) [feature-end]
+    var(--full) [full-end];
+}
+
+h1,
+h2,
+h3,
+p {
+  grid-column: content;
+}
+
+p {
+  font-size: 1rem;
+}
+
+table {
+  grid-column: feature;
 }