Banner and contact styling.

components/resources/com/jessebrault/site/biography/BiographyBanner.txt

@@ -2,7 +2,7 @@
     <div class="headshot-container">
         <img src="/portrait.jpg" class="headshot" />
     </div>
-    <div class="blurb-container">
+    <div class="banner-text blurb-container">
         <p id="jesse-brault-name">Jesse Brault</p>
         <p>American conductor, composer, and developer.</p>
         <button type="button">Read More</button>

components/resources/com/jessebrault/site/contact/ContactBannerTemplate.wvc

@@ -7,7 +7,7 @@ import com.jessebrault.site.icon.*
     <div class="headshot-container">
         <img src="/portrait2.jpg" class="headshot" />
     </div>
-    <article class="social-media-links">
+    <article class="banner-text social-media-links">
         <h1>Social Media</h1>
         <div class="social-media-links">
             <a href={spotifyUrl}><SpotifyIcon /><span>Spotify Profile</span></a>

pages/resources/com/jessebrault/site/contact/ContactPageTemplate.wvc

@@ -11,25 +11,30 @@ import com.jessebrault.site.StandardPage
             <div class="control">
                 <label for="name">Name</label>
                 <input id="name" name="name" type="text" />
+                <p class="message">&nbsp;</p>
             </div>
 
             <div class="control">
                 <label for="institution">Institution</label>
                 <input id="institution" name="institution" type="text" />
+                <p class="message">&nbsp;</p>
             </div>
 
             <div class="control">
                 <label for="email">Email</label>
                 <input id="email" name="email" type="email" />
+                <p class="message">&nbsp;</p>
             </div>
 
             <div class="control">
                 <label for="message">Message</label>
                 <textarea id="message" name="message"></textarea>
+                <p class="message">&nbsp;</p>
             </div>
 
             <div class="control">
                 <input type="submit" />
+                <p class="message">&nbsp;</p>
             </div>
         </form>
     </article>

static/main.css

@@ -24,7 +24,6 @@ body {
 .header-banner-container {
     background-color: var(--petrol);
     font-family: var(--gothic);
-    letter-spacing: 0.2em;
 }
 
 header {
@@ -45,8 +44,13 @@ header .titles * {
     margin: 0;
 }
 
+header .titles h1 {
+    letter-spacing: 0.175em;
+}
+
 header .titles h2 {
     font-size: 18px;
+    letter-spacing: 0.15em;
 }
 
 nav ul {
@@ -79,6 +83,10 @@ nav a:hover {
     padding: 15px 50px 30px;
 }
 
+.banner-text {
+    letter-spacing: 0.15em;
+}
+
 main {
     background-color: var(--off-white);
     display: flex;
@@ -90,7 +98,7 @@ article {
     font-family: var(--garamond);
     letter-spacing: 0.05em;
     padding: 50px 25px;
-    max-width: 700px;
+    max-width: 70ch;
     text-align: justify;
 }
 
@@ -117,6 +125,12 @@ footer svg:hover {
     fill: var(--off-white);
 }
 
+input,
+textarea,
+button {
+    border-radius: 3px;
+}
+
 .headshot-container {
     display: flex;
     flex-direction: column;
@@ -142,17 +156,24 @@ footer svg:hover {
 }
 
 .biography-banner .blurb-container p#jesse-brault-name {
+    letter-spacing: 0.15em;
     font-size: 54px;
 }
 
 .biography-banner .blurb-container button {
-    border: 1px solid var(--light-gray);
+    border: 1px solid var(--charcoal);
+    background-color: var(--light-gray);
     width: 150px;
     height: 40px;
     font-family: var(--gothic);
     font-size: 18px;
 }
 
+.biography-banner .blurb-container button:hover {
+    background-color: var(--off-white);
+    cursor: pointer;
+}
+
 .contact-banner article.social-media-links {
     font-family: var(--gothic);
 }
@@ -160,7 +181,6 @@ footer svg:hover {
 .contact-banner article.social-media-links h1 {
     font-size: 36px;
     color: var(--light-gray);
-    text-align: center;
 }
 
 .contact-banner div.social-media-links {
@@ -215,13 +235,13 @@ form.contact {
     width: 100%;
     display: flex;
     flex-direction: column;
-    row-gap: 15px;
+    row-gap: 10px;
 }
 
 .contact .control {
     display: flex;
     flex-direction: column;
-    row-gap: 10px;
+    row-gap: 5px;
 }
 
 .contact .control * {
@@ -235,7 +255,6 @@ form.contact {
     font-size: 18px;
     padding: 5px;
     border: 1px solid var(--charcoal);
-    border-radius: 3px;
 }
 
 .contact .control textarea {
@@ -252,3 +271,7 @@ form.contact {
     background-color: rgba(from var(--petrol) r g b / 0.5);
     cursor: pointer;
 }
+
+.contact .control .message {
+    margin: 0;
+}