diff --git a/content/news/052/index.md b/content/news/052/index.md
index e8df5f4a3..0653363ad 100644
--- a/content/news/052/index.md
+++ b/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
diff --git a/sass/_extra.scss b/sass/_extra.scss
index 82192f638..c9cfc4ea0 100644
--- a/sass/_extra.scss
+++ b/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,14 +99,24 @@ 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;
@@ -114,16 +124,65 @@ a.btn {
&: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;
+ }
+}
diff --git a/static/intro-icons.svg b/static/intro-icons.svg
index 1cdf37b2a..dbbbe1470 100644
--- a/static/intro-icons.svg
+++ b/static/intro-icons.svg
@@ -56,4 +56,20 @@
<circle fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="36" cy="17" r="10"/>
</g>
</symbol>
-</svg>
\ No newline at end of file
+
+<symbol id="incoming-envelope" viewBox="0 0 72 72">
+ <g id="color">
+ <rect x="27.5987" y="23.8185" rx="1.5627" width="37.5107" height="23.4538" fill="var(--icon-fill-color)"/>
+ <path fill="var(--icon-fill-color)" d="M65.1522,24.5967V44.5922a4.1748,4.1748,0,0,1-.3759,1.729L56.282,38.5034l-.7517.0751-3.082-2.8565Z"/>
+ </g>
+ <g id="line">
+ <line x1="5.7967" x2="22.1067" y1="41.904" y2="41.904" fill="none" stroke="var(--icon-stroke-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <line x1="9.2917" x2="22.1067" y1="34.914" y2="34.914" fill="none" stroke="var(--icon-stroke-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+ <path fill="none" stroke="var(--icon-stroke-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M36.512,38.5785l-8.4192,7.7427a3.9028,3.9028,0,0,1-.451-1.729v-19.92"/>
+ <path fill="none" stroke="var(--icon-stroke-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M57.5383,39.399,64.83,46.11a3.5861,3.5861,0,0,0,.3226-1.4841V24.5967"/>
+ <path fill="none" stroke="var(--icon-stroke-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M55.4551,37.7517l9.2461,8.4943a1.6075,1.6075,0,0,1-1.3531.9772H29.3707a1.78,1.78,0,0,1-1.3531-.902l9.0957-8.344"/>
+ <path fill="none" stroke="var(--icon-stroke-color)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M65.1522,24.5967l-12.0274,11.05-3.3827,3.1572c-.15.15-.3759.3006-.5262.451a4.6338,4.6338,0,0,1-5.7882,0c-.15-.15-.3758-.3007-.5262-.451L39.5188,35.722l-11.877-11.05c0-.0752.0751-.0752.0751-.15A1.5333,1.5333,0,0,1,28.92,23.77H63.8743a1.6558,1.6558,0,0,1,1.2027.6766C65.077,24.5215,65.1522,24.5215,65.1522,24.5967Z"/>
+ </g>
+</symbol>
+
+</svg>
diff --git a/templates/includes/email_signup.html b/templates/includes/email_signup.html
new file mode 100644
index 000000000..66cd0797a
--- /dev/null
+++ b/templates/includes/email_signup.html
@@ -0,0 +1,22 @@
+<form action="https://gamedev.us22.list-manage.com/subscribe/post?u=3b2317bf9350c11e252162541&id=aaf37783ec&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>
+
\ No newline at end of file
diff --git a/templates/includes/home.html b/templates/includes/home.html
index 4c1674503..fd33ea712 100644
--- a/templates/includes/home.html
+++ b/templates/includes/home.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>