Draw a platter around the home page layout

content/home.css

@@ -1,35 +1,19 @@
 :root {
-    --lt-blue: rgb(69, 212, 243);
+    --animation-left-offset: 6px;
-    --mid-blue: rgb(26, 169, 239);
+    --animation-duration: 0.7s;
-    --dk-blue: rgb(63, 46, 231);
-    --purple: rgb(161, 49, 232);
-    --lilac: rgb(187, 121, 245);
-
-    --font-size-min: 8px;
-    --font-size-max: 16px;
 }
 
-* { box-sizing: border-box; }
-
-a {
-    color: var(--mid-blue);
-    text-decoration: none;
-}
-a:hover {
-    text-decoration: underline;
-    text-underline-offset: 0.12em;
-}
-a:visited { color: none; }
-
 body {
     display: flex;
+    flex-direction: column;
     font-size: 2rem;
-    margin: auto;
     justify-content: center;
+    margin: auto;
 }
 
 h1 {
-    font-family: Krungthep, Museo_Slab, Tahoma, sans-serif;
+    font-size: 5rem;
+    line-height: 1.3;
     margin: 0;
     padding: 0;
 }
@@ -37,33 +21,24 @@ h1 {
     h1 { font-size: 4.25rem; }
 }
 
-html {
+main {
-    background-color: #fff;
+    margin-block-start: 10vh;
-    color: #000;
-    font-family: Verdana, sans-serif;
-    font-size: clamp(var(--font-size-min), 2.5vw, var(--font-size-max));
-}
-@media (prefers-color-scheme: dark) {
-    html {
-        background-color: #000;
-        color: #fff;
-    }
 }
 
-main {
+main .grid {
     align-items: baseline;
     display: grid;
-    grid-template-columns: min-content 3fr;
+    gap: 0 2rem;
+    grid-template-columns: min-content fit-content(35%);
     grid-template-rows: repeat(2, max-content);
     grid-template-areas:
         "title blurb"
         "title nav";
-    grid-gap: 2rem;
+    padding-inline: 1em;
-    margin-block-start: 10vh;
+    width: min-content;
-    max-width: 800px;
 }
 @media (max-width: 450px) {
-    main {
+    main .grid {
         grid-template-columns: 1fr;
         grid-template-rows: repeat(3, max-content);
         grid-template-areas:
@@ -76,16 +51,6 @@ main {
 }
 
 main h1 {
-    background:
-        radial-gradient(circle at 20% 70%, var(--purple), transparent 40%),
-        radial-gradient(circle at 30% 30%, var(--lt-blue), var(--mid-blue) 20%, transparent 80%),
-        radial-gradient(ellipse at 95% 20%, var(--dk-blue), var(--mid-blue) 70%, transparent 80%),
-        radial-gradient(circle at 100% 100%, var(--purple), var(--lilac) 100%),
-        radial-gradient(circle at 45% 100%, var(--lilac), var(--purple) 60%),
-        radial-gradient(ellipse at 50% 50%, var(--dk-blue), transparent 80%);
-    background-clip: text;
-    color: transparent;
-    grid-area: title;
     letter-spacing: 0.025em;
     text-align: end;
 }
@@ -94,41 +59,57 @@ main h1 {
 }
 
 main nav {
-    align-items: center;
+    align-items: baseline;
-    display: flex;
-    font-size: max(1rem, 75%);
-    font-variant: small-caps;
-    grid-area: nav;
-    height: 100%;
-    justify-content: center;
-    letter-spacing: 0.12em;
-    list-style: none;
-    text-transform: lowercase;
-}
-
-main nav li {
-    display: block;
-    margin-inline-end: 0.5em;
-}
-
-main nav li:first-child::before {
-    content: "";
-}
-
-main nav li::before {
-    content: "•";
-    font-size: 60%;
-    opacity: 80%;
-    margin-inline-end: 0.5em;
 }
 
 main p {
-    grid-area: blurb;
     margin: 0;
-    padding: 0;
 }
 
-p {
+#title { grid-area: title; }
-    letter-spacing: 0.025em;
+#content { grid-area: blurb }
-    line-height: 1.25;
+#nav { grid-area: nav }
+
+#title, #content, #nav { overflow: none; }
+#title > *, #content > *, #nav > * { position: relative; }
+
+#title > * {
+    animation: left-fade-in var(--animation-duration) ease-in-out;
+}
+#content > *, #nav > * {
+    animation: right-fade-in var(--animation-duration) ease-in-out;
+}
+
+@keyframes left-fade-in {
+    from {
+        opacity: 0%;
+        left: var(--animation-left-offset);
+    }
+    33% {
+        opacity: 0%;
+        left: var(--animation-left-offset);
+    }
+    to {
+        opacity: 100%;
+        left: 0;
+    }
+}
+
+@keyframes right-fade-in {
+    from {
+        opacity: 0%;
+        left: calc(-1 * var(--animation-left-offset));
+    }
+    33% {
+        opacity: 0%;
+        left: calc(-1 * var(--animation-left-offset));
+    }
+    to {
+        opacity: 100%;
+        left: 0;
+    }
+}
+
+.platter {
+    padding: 1.5rem 3rem;
 }

layouts/_default/index.html

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

static/styles/root.css

@@ -8,6 +8,13 @@
     --background-color: #fff;
     --foreground-color: #000;
 
+    --separator-color: #dfdfdf;
+    --header-border-color: var(--separator-color);
+    --footer-border-color: var(--separator-color);
+
+    --box-shadow-color: rgba(230, 230, 230, 0.5);
+    --header-box-shadow-color: var(--box-shadow-color);
+
     --font-family-body: Verdana, Helvetica, sans-serif;
     --font-family-heading: Museo_Slab, Tahoma, sans-serif;
     --font-family-site-heading: /*Krungthep,*/ Museo_Slab, Tahoma, sans-serif;
@@ -99,16 +106,12 @@ header.site .grid {
     display: grid;
     gap: 0.5em;
     grid-template-columns: max-content auto max-content;
-    width: var(--content-width);
+    max-width: var(--content-width);
 }
 
 header.site .platter {
-    background: var(--background-color);
-    border: 1px solid #dfdfdf;
-    border-radius: 12px;
-    box-shadow: 4px 5px 5px rgba(230, 230, 230, 0.5);
     margin: 0 auto;
-    padding-inline: 3rem;
+    padding: 1.5rem 3rem;
 }
 
 header.site .grid nav:first-of-type {
@@ -189,3 +192,10 @@ footer.site p + p {
         white-space: nowrap;
     }
 }
+
+.platter {
+    background: var(--background-color);
+    border: 1px solid var(--header-border-color);
+    border-radius: 12px;
+    box-shadow: 4px 5px 5px var(--header-box-shadow-color);
+}