From 666e424b8b4d91d393ab54964562e6fb8bb2340f Mon Sep 17 00:00:00 2001
From: JesseBrault0709 <62299747+JesseBrault0709@users.noreply.github.com>
Date: Wed, 5 Jun 2024 16:43:56 +0200
Subject: [PATCH] Much better styling/colors/layout.

---
 .../com/jessebrault/site/StandardPage.groovy  |   7 +-
 .../site/biography/BiographyBanner.groovy     |  17 +++
 .../com/jessebrault/site/HeadTemplate.wvc     |   2 +-
 .../com/jessebrault/site/HeaderTemplate.wvc   |   6 +-
 .../jessebrault/site/StandardPageTemplate.wvc |   9 +-
 .../site/biography/BiographyBanner.txt        |  10 ++
 .../site/{ => biography}/BiographyPage.groovy |   2 +-
 .../site/BiographyPageTemplate.wvc            |  13 ---
 .../site/biography/BiographyPageTemplate.wvc  |  10 ++
 static/main.css                               | 108 +++++++++---------
 10 files changed, 106 insertions(+), 78 deletions(-)
 create mode 100644 components/groovy/com/jessebrault/site/biography/BiographyBanner.groovy
 create mode 100644 components/resources/com/jessebrault/site/biography/BiographyBanner.txt
 rename pages/groovy/com/jessebrault/site/{ => biography}/BiographyPage.groovy (94%)
 delete mode 100644 pages/resources/com/jessebrault/site/BiographyPageTemplate.wvc
 create mode 100644 pages/resources/com/jessebrault/site/biography/BiographyPageTemplate.wvc

diff --git a/components/groovy/com/jessebrault/site/StandardPage.groovy b/components/groovy/com/jessebrault/site/StandardPage.groovy
index d1bcbb1..fcd1ae0 100644
--- a/components/groovy/com/jessebrault/site/StandardPage.groovy
+++ b/components/groovy/com/jessebrault/site/StandardPage.groovy
@@ -1,6 +1,9 @@
 package com.jessebrault.site
 
+
 import groowt.view.component.web.BaseWebViewComponent
+import groowt.view.component.web.WebViewComponent
+import org.jetbrains.annotations.Nullable
 
 import java.time.LocalDate
 import java.time.format.DateTimeFormatter
@@ -8,12 +11,14 @@ import java.time.format.DateTimeFormatter
 class StandardPage extends BaseWebViewComponent {
 
     final String title
+    final Closure<WebViewComponent> banner
 
     StandardPage(Map attr) {
         this.title = attr.title
+        this.banner = attr.banner ?: { '' }
     }
 
-    List getPageChildren() {
+    List getMainChildren() {
         this.children
     }
 
diff --git a/components/groovy/com/jessebrault/site/biography/BiographyBanner.groovy b/components/groovy/com/jessebrault/site/biography/BiographyBanner.groovy
new file mode 100644
index 0000000..bf15f3c
--- /dev/null
+++ b/components/groovy/com/jessebrault/site/biography/BiographyBanner.groovy
@@ -0,0 +1,17 @@
+package com.jessebrault.site.biography
+
+import com.jessebrault.ssg.view.SkipTemplate
+import groowt.view.View
+import groowt.view.component.web.lib.DelegatingWebViewComponent
+
+@SkipTemplate
+class BiographyBanner extends DelegatingWebViewComponent {
+
+    private static final String biographyBannerSrc = BiographyBanner.getResource('BiographyBanner.txt').text
+
+    @Override
+    protected View getDelegate() {
+        return { Writer w -> w << biographyBannerSrc }
+    }
+
+}
diff --git a/components/resources/com/jessebrault/site/HeadTemplate.wvc b/components/resources/com/jessebrault/site/HeadTemplate.wvc
index b4e5103..e90ddce 100644
--- a/components/resources/com/jessebrault/site/HeadTemplate.wvc
+++ b/components/resources/com/jessebrault/site/HeadTemplate.wvc
@@ -8,7 +8,7 @@ package com.jessebrault.site
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=EB+Garamond:wght@400;600&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=EB+Garamond:wght@400;600&family=Didact+Gothic&display=swap" rel="stylesheet" />
 
     <link rel="stylesheet" href="/main.css" />
 </head>
diff --git a/components/resources/com/jessebrault/site/HeaderTemplate.wvc b/components/resources/com/jessebrault/site/HeaderTemplate.wvc
index de810dd..0a2aa1c 100644
--- a/components/resources/com/jessebrault/site/HeaderTemplate.wvc
+++ b/components/resources/com/jessebrault/site/HeaderTemplate.wvc
@@ -3,12 +3,12 @@ package com.jessebrault.site
 ---
 <header>
     <div class="titles">
-        <h1 class="eb-garamond-semibold">$siteName</h1>
-        <h2 class="eb-garamond-semibold">$siteTagLine</h2>
+        <h1>$siteName</h1>
+        <h2>$siteTagLine</h2>
     </div>
     <nav>
         <ul>
-            <Each items={menuItems} transform={<li class="eb-garamond-regular"><a href={it.path}>$it.name</a></li>} />
+            <Each items={menuItems} transform={<li><a href={it.path}>$it.name</a></li>} />
         </ul>
     </nav>
 </header>
diff --git a/components/resources/com/jessebrault/site/StandardPageTemplate.wvc b/components/resources/com/jessebrault/site/StandardPageTemplate.wvc
index c3220e8..bc0f183 100644
--- a/components/resources/com/jessebrault/site/StandardPageTemplate.wvc
+++ b/components/resources/com/jessebrault/site/StandardPageTemplate.wvc
@@ -4,12 +4,15 @@ package com.jessebrault.site
 import com.jessebrault.site.icon.SpotifyIcon
 import com.jessebrault.site.icon.YoutubeIcon
 ---
-<html lang="en" class="cormorant-garamond-regular">
+<html lang="en">
     <Head title={title} />
     <body>
-        <Header />
+        <div class="header-banner-container">
+            <Header />
+            <% children -> children << banner() %>
+        </div>
         <main>
-            <% children -> pageChildren.each { children << it } %>
+            <% children -> mainChildren.each { children << it } %>
         </main>
         <footer>
             <div class="social-icons">
diff --git a/components/resources/com/jessebrault/site/biography/BiographyBanner.txt b/components/resources/com/jessebrault/site/biography/BiographyBanner.txt
new file mode 100644
index 0000000..45237df
--- /dev/null
+++ b/components/resources/com/jessebrault/site/biography/BiographyBanner.txt
@@ -0,0 +1,10 @@
+<div class="banner">
+    <div class="headshot-container">
+        <img src="/headshot.jpg" class="headshot" />
+    </div>
+    <div class="banner-blurb-container">
+        <p>With a unique set of talents, skills, and experiences,</p>
+        <p id="jesse-brault-name">Jesse Brault</p>
+        <p>is an American conductor, composer, and developer.</p>
+    </div>
+</div>
diff --git a/pages/groovy/com/jessebrault/site/BiographyPage.groovy b/pages/groovy/com/jessebrault/site/biography/BiographyPage.groovy
similarity index 94%
rename from pages/groovy/com/jessebrault/site/BiographyPage.groovy
rename to pages/groovy/com/jessebrault/site/biography/BiographyPage.groovy
index 6526d95..2950eeb 100644
--- a/pages/groovy/com/jessebrault/site/BiographyPage.groovy
+++ b/pages/groovy/com/jessebrault/site/biography/BiographyPage.groovy
@@ -1,4 +1,4 @@
-package com.jessebrault.site
+package com.jessebrault.site.biography
 
 import com.jessebrault.site.util.TitleMaker
 import com.jessebrault.ssg.di.InjectText
diff --git a/pages/resources/com/jessebrault/site/BiographyPageTemplate.wvc b/pages/resources/com/jessebrault/site/BiographyPageTemplate.wvc
deleted file mode 100644
index b09291b..0000000
--- a/pages/resources/com/jessebrault/site/BiographyPageTemplate.wvc
+++ /dev/null
@@ -1,13 +0,0 @@
----
-package com.jessebrault.site
----
-<StandardPage title={title}>
-    <div class="biography-container">
-        <div class="headshot-container">
-            <img src="/headshot.jpg" class="headshot" />
-        </div>
-        <article>
-            <%= renderBiography() %>
-        </article>
-    </div>
-</StandardPage>
diff --git a/pages/resources/com/jessebrault/site/biography/BiographyPageTemplate.wvc b/pages/resources/com/jessebrault/site/biography/BiographyPageTemplate.wvc
new file mode 100644
index 0000000..3a41a5c
--- /dev/null
+++ b/pages/resources/com/jessebrault/site/biography/BiographyPageTemplate.wvc
@@ -0,0 +1,10 @@
+---
+package com.jessebrault.site.biography
+
+import com.jessebrault.site.StandardPage
+---
+<StandardPage title={title} banner={<BiographyBanner />}>
+    <article>
+        <%= renderBiography() %>
+    </article>
+</StandardPage>
diff --git a/static/main.css b/static/main.css
index 4e53885..1bc4d66 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1,63 +1,36 @@
 :root {
     --black: #000000;
+    --charcoal: #38383b;
     --dark-blue: #00416b;
     --medium-blue: #005e9b;
     --light-blue: #0071bb;
     --light-gray: #dedede;
+    --petrol: #005f6a;
     --off-white: #fdfdfd;
 }
 
-.cormorant-garamond-regular {
-    font-family: 'Cormorant Garamond', serif;
-    font-weight: 400;
-    font-style: normal;
-}
-
-.cormorant-garamond-semibold {
-    font-family: 'Cormorant Garamond', serif;
-    font-weight: 600;
-    font-style: normal;
-}
-
-.eb-garamond-regular {
-    font-family: 'EB Garamond', serif;
-    font-optical-sizing: auto;
-    font-weight: 400;
-    font-style: normal;
-}
-
-.eb-garamond-semibold {
-    font-family: 'EB Garamond', serif;
-    font-optical-sizing: auto;
-    font-weight: 600;
-    font-style: normal;
-}
-
 html {
-    font-size: 14pt;
+    font-size: 18px;
 }
 
 body {
     margin: 0;
     padding: 0;
-    background-color: var(--black);
+    background-color: var(--charcoal);
 }
 
-header,
-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-inline: 50px;
+.header-banner-container {
+    background-color: var(--charcoal);
+    font-family: 'Didact Gothic', sans-serif;
+    letter-spacing: 0.2em;
 }
 
 header {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    background: linear-gradient(var(--light-blue), var(--dark-blue));
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    padding: 15px 50px;
     color: var(--off-white);
-    filter: drop-shadow(var(--black) 0 2px 2px);
 }
 
 header .titles {
@@ -66,6 +39,14 @@ header .titles {
     column-gap: 15px;
 }
 
+header .titles * {
+    margin: 0;
+}
+
+header .titles h2 {
+    font-size: 18px;
+}
+
 nav ul {
     display: flex;
     column-gap: 25px;
@@ -76,6 +57,7 @@ nav ul {
 
 nav a,
 nav a:visited {
+    letter-spacing: 0.1em;
     color: var(--light-gray);
     text-decoration: none;
 }
@@ -84,11 +66,26 @@ nav a:hover {
     color: var(--off-white);
 }
 
+.banner {
+    display: flex;
+    align-items: center;
+}
+
+.banner > * {
+    width: 100%;
+    padding: 15px 50px;
+}
+
 main {
     background-color: var(--off-white);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 article {
+    font-family: 'Cormorant Garamond', serif;
+    letter-spacing: 0.05em;
     padding: 15px 25px;
     max-width: 700px;
     text-align: justify;
@@ -97,10 +94,10 @@ article {
 footer {
     display: flex;
     justify-content: space-between;
-    padding-block: 20px;
-    background: linear-gradient(var(--medium-blue), var(--dark-blue));
+    padding: 20px 50px;
+    background-color: var(--charcoal);
     color: var(--off-white);
-    filter: drop-shadow(var(--black) 0 -1px 1px);
+    font-family: 'Cormorant Garamond', serif;
 }
 
 footer .social-icons {
@@ -117,21 +114,7 @@ footer svg:hover {
     fill: var(--off-white);
 }
 
-.biography-container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-}
-
-.biography-container > article {
-    grid-column: 1 / 2;
-    grid-row: 1;
-    padding-inline: 50px;
-}
-
 .headshot-container {
-    grid-column: 2 / 3;
-    grid-row: 1;
-    background-color: var(--black);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -140,3 +123,16 @@ footer svg:hover {
 .headshot {
     width: 100%;
 }
+
+.banner-blurb-container {
+    color: var(--off-white);
+    text-align: center;
+}
+
+.banner-blurb-container p {
+    font-size: 24px;
+}
+
+.banner-blurb-container p#jesse-brault-name {
+    font-size: 48px;
+}