Move all the home styles to inline CSS

layouts/index.html

@@ -1,9 +1,221 @@
 {{ define "body" }}
 <main>
-  <div class="platter grid">
+  <header class="platter">
     <h1 class="site">{{ partial "site_name.html" .Title }}</h1>
     <div id="content">
       {{ .Content }}
     </div>
     {{ partial "site_nav.html" . }}
+  </header>
+</main>
+{{ end }}
+
+{{ define "styles" }}
+<style>
+  :root {
+    --animation-offset: 6px;
+    --font-size-max: 12px;
+    --line-height: 1.85;
+  }
+
+  body {
+    display: flex;
+    flex-direction: column;
+    font-size: 2rem;
+    justify-content: center;
+    margin: auto;
+  }
+
+  h1 {
+    font-size: 5rem;
+    line-height: 1.3;
+    margin: 0;
+    padding: 0;
+  }
+
+  @media (max-width: 599px) {
+    h1 {
+      font-size: 4.25rem;
+    }
+  }
+
+  header.site h1 { white-space: normal; }
+
+  @media (max-width: 599px) {
+    html {
+      --font-size-scale-factor: 1.33vmax;
+    }
+  }
+
+  main {
+    line-height: var(--landing-line-height);
+    margin-block-start: 10vh;
+    width: inherit;
+  }
+
+  main header {
+    align-items: first baseline;
+    display: grid;
+    gap: 0 2rem;
+    grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 2fr);
+    grid-template-rows: repeat(2, max-content);
+    grid-template-areas:
+      "title blurb"
+      "title nav";
+    padding-inline: 1em;
+    width: min-content;
+  }
+
+  @media (max-width: 599px) {
+    main header {
+      gap: 1rem 0;
+      grid-template-columns: 1fr;
+      grid-template-rows: repeat(3, max-content);
+      grid-template-areas:
+        "title"
+        "blurb"
+        "nav";
+      justify-items: center;
+      text-align: center;
+    }
+  }
+
+  main h1 {
+    letter-spacing: 0.025em;
+    text-align: end;
+  }
+
+  @media (max-width: 599px) {
+    main h1 {
+      text-align: center;
+    }
+  }
+
+  nav {
+    align-items: baseline;
+    align-self: center;
+    display: flex;
+    font-size: inherit;
+    list-style: none;
+    text-transform: lowercase;
+  }
+
+  p {
+    margin: 0;
+    line-height: var(--line-height);
+  }
+
+  h1 {
+    grid-area: title;
+  }
+
+  #content {
+    grid-area: blurb
+  }
+
+  nav {
+    grid-area: nav
+  }
+
+  h1,
+  #content>p,
+  nav {
+    position: relative;
+  }
+
+  h1 {
+    animation: left-fade-in var(--transition-duration) ease-in-out;
+  }
+
+  @media (max-width: 599px) {
+    h1 {
+      animation: top-fade-in var(--transition-duration) ease-in-out;
+    }
+  }
+
+  #content>p,
+  nav {
+    animation: right-fade-in var(--transition-duration) ease-in-out;
+  }
+
+  @media (max-width: 599px) {
+
+    #content>p,
+    nav {
+      animation: bottom-fade-in var(--transition-duration) ease-in-out;
+    }
+  }
+
+  @keyframes left-fade-in {
+    from {
+      opacity: 0%;
+      left: var(--animation-offset);
+    }
+
+    33% {
+      opacity: 0%;
+      left: var(--animation-offset);
+    }
+
+    to {
+      opacity: 100%;
+      left: 0;
+    }
+  }
+
+  @keyframes right-fade-in {
+    from {
+      opacity: 0%;
+      left: calc(-1 * var(--animation-offset));
+    }
+
+    33% {
+      opacity: 0%;
+      left: calc(-1 * var(--animation-offset));
+    }
+
+    to {
+      opacity: 100%;
+      left: 0;
+    }
+  }
+
+  @keyframes top-fade-in {
+    from {
+      opacity: 0%;
+      bottom: calc(-1 * var(--animation-offset));
+    }
+
+    33% {
+      opacity: 0%;
+      bottom: calc(-1 * var(--animation-offset));
+    }
+
+    to {
+      opacity: 100%;
+      bottom: 0;
+    }
+  }
+
+  @keyframes bottom-fade-in {
+    from {
+      opacity: 0%;
+      bottom: var(--animation-offset);
+    }
+
+    33% {
+      opacity: 0%;
+      bottom: var(--animation-offset);
+    }
+
+    to {
+      opacity: 100%;
+      bottom: 0;
+    }
+  }
+
+  .platter {
+    padding: 1.5rem 3rem;
+  }
+</style>
 {{ end }}