Fix up the home page; make the font size bigger; clean up the layout

content/home.css

@@ -1,5 +1,6 @@
 :root {
     --animation-offset: 6px;
+    --font-size-max: 12px;
 }
 
 body {
@@ -16,10 +17,14 @@ h1 {
     margin: 0;
     padding: 0;
 }
-@media (max-width: 450px) {
+@media (max-width: 599px) {
     h1 { font-size: 4.25rem; }
 }
 
+html {
+    font-size: clamp(var(--font-size-min), 2.5vw, var(--font-size-max));
+}
+
 main {
     margin-block-start: 10vh;
     width: inherit;
@@ -29,7 +34,7 @@ main .grid {
     align-items: baseline;
     display: grid;
     gap: 0 2rem;
-    grid-template-columns: min-content 200px;
+    grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 2fr);
     grid-template-rows: repeat(2, max-content);
     grid-template-areas:
         "title blurb"
@@ -37,7 +42,7 @@ main .grid {
     padding-inline: 1em;
     width: min-content;
 }
-@media (max-width: 450px) {
+@media (max-width: 599px) {
     main .grid {
         gap: 1rem 0;
         grid-template-columns: 1fr;
@@ -54,37 +59,48 @@ main h1 {
     letter-spacing: 0.025em;
     text-align: end;
 }
-@media (max-width: 450px) {
+@media (max-width: 599px) {
     main h1 { text-align: center; }
 }
 
-main nav {
+nav {
     align-items: baseline;
+    display: flex;
+    list-style: none;
+    text-transform: lowercase;
 }
 
-main p {
+nav > li {
+    margin-inline-start: 0.5em;
+}
+
+nav > li:first-of-type {
+    margin-inline-start: 0;
+}
+
+p {
     margin: 0;
 }
 
-#title { grid-area: title; }
+h1 { grid-area: title; }
 #content { grid-area: blurb }
-#nav { grid-area: nav }
+nav { grid-area: nav }
 
-#title > *, #content > *, #nav > * { position: relative; }
+h1, #content > p, nav { position: relative; }
 
-#title > * {
+h1 {
     animation: left-fade-in var(--transition-duration) ease-in-out;
 }
-@media (max-width: 450px) {
-    #title > * {
+@media (max-width: 599px) {
+    h1 {
         animation: top-fade-in var(--transition-duration) ease-in-out;
     }
 }
-#content > *, #nav > * {
+#content > p, nav {
     animation: right-fade-in var(--transition-duration) ease-in-out;
 }
-@media (max-width: 450px) {
-    #content > *, #nav > * {
+@media (max-width: 599px) {
+    #content > p, nav {
         animation: bottom-fade-in var(--transition-duration) ease-in-out;
     }
 }

layouts/_default/index.html

@@ -1,22 +1,16 @@
 {{ define "main" }}
-<div class="platter">
-  <div class="grid">
-    <div id="title">
-      <h1 class="site">{{ .Title }}</h1>
-    </div>
-    <div id="content">
-      {{ .Content }}
-    </div>
-    {{ with site.Menus.main }}
-    {{ $url := $.RelPermalink }}
-    <div id="nav">
-      <nav class="site bulleted">
-        {{ range . }}
-        <li><a class="{{ if eq .URL $url }}active{{ end }}" href="{{ .URL }}"><span>{{ .Name }}</span></a></li>
-        {{ end }}
-      </nav>
-    </div>
-    {{ end }}
+<div class="platter grid">
+  <h1 class="site">{{ .Title }}</h1>
+  <div id="content">
+    {{ .Content }}
   </div>
+  {{- with site.Menus.main -}}
+    {{- $url := $.RelPermalink -}}
+    <nav class="site bulleted">
+      {{- range . -}}
+        <li><a class="{{ if eq .URL $url }}active{{ end }}" href="{{ .URL }}"><span>{{ .Name }}</span></a></li>
+      {{- end -}}
+    </nav>
+  {{ end }}
 </div>
 {{ end }}