Styling and layout.

pages/resources/com/jessebrault/site/BiographyPageTemplate.wvc

@@ -2,6 +2,9 @@
 package com.jessebrault.site
 ---
 <StandardPage title={title}>
+    <div class="headshot-container">
+        <img src="/headshot.jpg" class="headshot" />
+    </div>
     <article>
         <%= renderBiography() %>
     </article>

static/main.css

@@ -1,3 +1,9 @@
+:root {
+    --black: #110d0c;
+    --dark-red: #401815;
+    --off-white: #fdfdfd;
+}
+
 .cormorant-garamond-regular {
     font-family: 'Cormorant Garamond', serif;
     font-weight: 400;
@@ -31,17 +37,24 @@ html {
 body {
     margin: 0;
     padding: 0;
+    background-color: var(--off-white);
 }
 
 header,
 footer {
     display: flex;
     align-items: center;
-    padding: 0 25px;
+    padding: 15px 25px;
 }
 
 header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
     justify-content: space-between;
+    background: linear-gradient(90deg, var(--dark-red), var(--black));
+    color: white;
+    filter: drop-shadow(var(--black) 0 3px 3px);
 }
 
 footer {
@@ -62,6 +75,16 @@ nav ul {
     padding: 0;
 }
 
+nav a,
+nav a:visited {
+    color: white;
+    text-decoration: none;
+}
+
+nav a:hover {
+    color: hsl(from white h s calc(l * 0.8));
+}
+
 main {
     padding: 0 25px;
     text-align: justify;
@@ -70,6 +93,20 @@ main {
     align-items: center;
 }
 
-main > * {
+article {
+    padding: 15px 0;
+    max-width: 700px;
+}
+
+.headshot-container {
+    width: 100vw;
+    background: linear-gradient(90deg, #0d1313, var(--black));
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    filter: drop-shadow(var(--black) 0 3px 3px);
+}
+
+.headshot {
     max-width: 700px;
 }