Add email subscription button (#1538)

Co-authored-by: Thierry Berger <contact@thierryberger.com>
Co-authored-by: Tau Gärtli <git@tau.garden>

Author: 3 people

content/news/052/index.md

@@ -65,7 +65,16 @@ If needed, a section can be split into subsections with a "------" delimiter.
 
 ## Announcements
 
-TODO: I'll be working on adding an email subscription this weekend, so I'll write about it here once that's done :) - Jan
+For years, our readers have asked for a way to subscribe to this newsletter by email. This again came up in our [recent survey][survey].
+We're happy to announce that this feature is now available! When you visit our [homepage],
+you can now scroll down and find an email subscription form. 
+We'll send you an email whenever a new post is published, which currently is once per month.
+
+The emails are currently sent from [gamedev-rs@proton.me](mailto:gamedev-rs@proton.me). 
+We will switch this to an actual @gamedev.rs address in the future. Please tell us if you encounter any issues with the emails.
+
+[survey]: https://gamedev.rs/blog/survey-02/
+[homepage]: https://gamedev.rs/
 
 ## Game Updates
 

sass/_extra.scss

@@ -10,7 +10,7 @@ li {
     margin: 15px 0;
 }
 
-pre > code {
+pre>code {
     // To avoid grey background on code blocks.
     background-color: inherit;
 }
@@ -99,31 +99,90 @@ h6:hover .anchor {
     margin-bottom: 0;
 }
 
-a.btn {
+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,
-a:first-child + em:last-child,
-video + em {
+img+em,
+a:first-child+em:last-child,
+video+em {
     display: block;
     text-align: center;
     color: $grey-color;
 }
+
+.email-form {
+    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-form__description {
+        max-width: 18em;
+    }
+
+    .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

@@ -0,0 +1,22 @@
+<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">
+        <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-form__input email-input">
+            <label for="email-input">Email Address</label>
+            <input type="email" inputmode="email" name="EMAIL" id="email-input" placeholder="hello@example.com" required>
+            <button type="submit" name="subscribe" class="btn">Subscribe</button>
+
+            <div style="position: absolute; left: -5000px;" aria-hidden="true">
+                <input type="text" name="b_3b2317bf9350c11e252162541_aaf37783ec" tabindex="-1" value="">
+            </div>
+        </div>
+    </div>
+</form>
+    

templates/includes/email_signup.html

@@ -39,6 +39,7 @@ <h2 class="post-list-heading">{{ section.title | default(value="Latest Blog Post
         <a class="btn" id="all-blog-posts" href="{{ get_url(path='blog/') }}">All Blog Posts</a>
         <a href="{{ get_url(path='rss.xml') }}">
             <svg class="svg-icon orange"><use xlink:href="{{ get_url(path='minima-social-icons.svg#rss') }}"></use></svg><span>Subscribe</span>
-        </a>
+        </a>                
+        {% include "includes/email_signup.html" %}
     </p>
 </div>