From ea9fb02aaafe604fde1e0e5a7b4ea210512000fc Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sun, 20 Aug 2023 09:48:19 -0700
Subject: [PATCH] Move home styles to home.css

---
 assets/styles/home.css | 207 ++++++++++++++++++++++++++++++++++++++++
 layouts/index.html     | 212 +----------------------------------------
 2 files changed, 208 insertions(+), 211 deletions(-)
 create mode 100644 assets/styles/home.css

diff --git a/assets/styles/home.css b/assets/styles/home.css
new file mode 100644
index 0000000..faf3734
--- /dev/null
+++ b/assets/styles/home.css
@@ -0,0 +1,207 @@
+@layer page {
+  :root {
+    --animation-offset: 6px;
+    --font-size-max: 12px;
+    --line-height: 1.85;
+  }
+
+  body {
+    display: flex;
+    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 {
+    display: block;
+    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;
+  }
+}
diff --git a/layouts/index.html b/layouts/index.html
index d39322b..0160d19 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,7 +1,7 @@
 {{ define "body" }}
 <main>
   <header class="platter">
-    <h1 class="site">{{ partial "site_name.html" .Title }}</h1>
+    <h1 class="site gradient">{{ partial "site_name.html" .Title }}</h1>
     <div id="content">
       {{ .Content }}
     </div>
@@ -9,213 +9,3 @@
   </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 }}