Style email signup form

rust-gamedev · Jul 1, 2024 · 5c946ad · 5c946ad
1 parent f087885
commit 5c946ad
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 13 deletions.
diff --git a/sass/_extra.scss b/sass/_extra.scss
@@ -103,6 +103,10 @@ 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;
@@ -128,6 +132,13 @@ a.btn, // Trick to increase the specificity and win against rules such as a:visi
  }
 }
 
+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,
@@ -139,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;
  }
 }
diff --git a/static/intro-icons.svg b/static/intro-icons.svg
diff --git a/templates/includes/email_signup.html b/templates/includes/email_signup.html
@@ -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>