Style Email Signup Form (#1541)

Author: bash

sass/_extra.scss

@@ -99,25 +99,46 @@ h6:hover .anchor {
     margin-bottom: 0;
 }
 
+input, button {
+    font-size: inherit;
+}
+
+input {
+    min-width: 0; // Allow the input to shrink on small devices.
+}
+
+a.btn, // Trick to increase the specificity and win against rules such as a:visited
 .btn {
     text-decoration: none;
     border-radius: 3px;
     font-weight: 600;
-    border: 1px solid transparent;
+    border: none;
     box-sizing: border-box;
     display: inline-block;
     padding: 0.4em 2em;
+    transition: background-color 125ms;
 
     background-color: $brand-color;
     color: $background-color;
     border-color: $background-color;
 
     &:hover {
         color: lighten($background-color, 10);
-        border-color: $brand-color;
+        background-color: lighten($brand-color, 5);
+    }
+
+    &:active {
+        background-color: darken($brand-color, 5);
     }
 }
 
+input[type=email] {
+    border-radius: 3px;
+    border: 1px solid $brand-color;
+    box-sizing: border-box;
+    padding: .4em;
+}
+
 // A hack for image captions.
 // See https://stackoverflow.com/questions/19331362/using-an-image-caption-in-markdown-jekyll
 img+em,
@@ -129,13 +150,39 @@ video+em {
 }
 
 .email-form {
-    display: flex;
+    display: grid;
+    margin-top: $spacing-unit;
+    grid-template-columns: auto auto;
+    justify-content: center;
+    gap: .6em 1em;
+    background-color: color-mix(in oklab, $brand-color 20%, #fff);
+    padding: $spacing-unit * .5;
+    align-items: center;
+    border-radius: 3px;
+
+    .email-form__icon {
+        width: 5em;
+        height: 5em;
+        --icon-stroke-color: #{$brand-color};
+        --icon-fill-color: rgba(255, 255, 255, .4);
+    }
 
-    .email-input {
-        margin-right: 0px;
+    .email-form__description {
+        max-width: 18em;
     }
 
-    .email-submit {
-        margin-left: 0px;
+    .email-form__input {
+        grid-column: 1 / 3;
     }
-}
+}
+
+.email-input {
+    display: grid;
+    grid-template-columns: repeat(2, auto);
+    gap: 5px;
+    
+    label {
+        grid-column: 1 / 3;
+        font-size: .8em;
+    }
+}

static/intro-icons.svg

@@ -1,14 +1,21 @@
 <form action="https://gamedev.us22.list-manage.com/subscribe/post?u=3b2317bf9350c11e252162541&amp;id=aaf37783ec&amp;f_id=0011cde1f0" method="post" name="mc-embedded-subscribe-form">
     <div class="email-form">
-        <div class="email-input">
-            <label for="email-input">Email Address</label>
-            <input type="email" inputmode="email" name="EMAIL" id="email-input" required>
+        <svg class="email-form__icon" aria-hidden="true">
+            <svg><use xlink:href="{{ get_url(path='intro-icons.svg#incoming-envelope') }}"></use></svg>
+        </svg>
+
+        <div class="email-form__description">
+            Get the Rust GameDev Workgroup’s monthly newsletter delivered directly to your inbox.
         </div>
-        <div class="email-submit">
+
+        <div class="email-form__input email-input">
+            <label for="email-input">Email Address</label>
+            <input type="email" inputmode="email" name="EMAIL" id="email-input" placeholder="[email protected]" required>
             <button type="submit" name="subscribe" class="btn">Subscribe</button>
-        </div>
-        <div style="position: absolute; left: -5000px;" aria-hidden="true">
-            <input type="text" name="b_3b2317bf9350c11e252162541_aaf37783ec" tabindex="-1" value="">
+
+            <div style="position: absolute; left: -5000px;" aria-hidden="true">
+                <input type="text" name="b_3b2317bf9350c11e252162541_aaf37783ec" tabindex="-1" value="">
+            </div>
         </div>
     </div>
 </form>