From 36890a60098598624de01f36d53078ea9430b315 Mon Sep 17 00:00:00 2001 From: Jan Hohenheim Date: Sun, 30 Jun 2024 01:57:57 +0200 Subject: [PATCH 1/8] Add unstyled subscribe button --- templates/index.html | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/templates/index.html b/templates/index.html index df68c7b1a..033c535ac 100644 --- a/templates/index.html +++ b/templates/index.html @@ -52,6 +52,28 @@ {% endblock content %} +
+
+

Subscribe

+
* indicates required
+
+
+ + +
+ +
+
+ +
+
+
+
+
+ {% include "includes/footer.html" %} From f9b711418cbde7c37bd1e0294587518f34883df6 Mon Sep 17 00:00:00 2001 From: Jan Hohenheim Date: Sun, 30 Jun 2024 14:47:30 +0200 Subject: [PATCH 2/8] Use new campaign --- templates/includes/email_signup.html | 18 ++++++++++++++++++ templates/includes/footer.html | 2 ++ templates/index.html | 22 ---------------------- 3 files changed, 20 insertions(+), 22 deletions(-) create mode 100644 templates/includes/email_signup.html diff --git a/templates/includes/email_signup.html b/templates/includes/email_signup.html new file mode 100644 index 000000000..f5bb3cae0 --- /dev/null +++ b/templates/includes/email_signup.html @@ -0,0 +1,18 @@ +
+
+

Subscribe

+
+
+ + +
+ +
+ +
+
+
+
+ \ No newline at end of file diff --git a/templates/includes/footer.html b/templates/includes/footer.html index b9fb06da0..500ecc0a4 100644 --- a/templates/includes/footer.html +++ b/templates/includes/footer.html @@ -23,6 +23,8 @@

{{ config.title | default(value="Minima") }}

{% if config.description %}

{{ config.description }}

{% endif %} + + {% include "includes/email_signup.html" %}
diff --git a/templates/index.html b/templates/index.html index 033c535ac..df68c7b1a 100644 --- a/templates/index.html +++ b/templates/index.html @@ -52,28 +52,6 @@ {% endblock content %} -
-
-

Subscribe

-
* indicates required
-
-
- - -
- -
-
- -
-
-
-
-
- {% include "includes/footer.html" %} From 46a097402de3b1899a4855eadf0ce094bd53eda4 Mon Sep 17 00:00:00 2001 From: Jan Hohenheim Date: Sun, 30 Jun 2024 16:24:15 +0200 Subject: [PATCH 3/8] Move signup button to similar ones --- sass/_extra.scss | 12 ++++++------ templates/includes/email_signup.html | 15 +++++++-------- templates/includes/footer.html | 2 -- templates/includes/home.html | 3 ++- 4 files changed, 15 insertions(+), 17 deletions(-) diff --git a/sass/_extra.scss b/sass/_extra.scss index 82192f638..c697bbd27 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,7 +99,7 @@ h6:hover .anchor { margin-bottom: 0; } -a.btn { +.btn { text-decoration: none; border-radius: 3px; font-weight: 600; @@ -120,10 +120,10 @@ a.btn { // 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; -} +} \ No newline at end of file diff --git a/templates/includes/email_signup.html b/templates/includes/email_signup.html index f5bb3cae0..b1517e4f2 100644 --- a/templates/includes/email_signup.html +++ b/templates/includes/email_signup.html @@ -1,17 +1,16 @@
-

Subscribe

-
-
- - -
- diff --git a/templates/includes/footer.html b/templates/includes/footer.html index 500ecc0a4..b9fb06da0 100644 --- a/templates/includes/footer.html +++ b/templates/includes/footer.html @@ -23,8 +23,6 @@

{{ config.title | default(value="Minima") }}

{% if config.description %}

{{ config.description }}

{% endif %} - - {% include "includes/email_signup.html" %}
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 @@

{{ section.title | default(value="Latest Blog Post All Blog Posts Subscribe - + + {% include "includes/email_signup.html" %}

From e4fbaf0a0d68c83370498ed123e0390f2ead4775 Mon Sep 17 00:00:00 2001 From: Jan Hohenheim Date: Sun, 30 Jun 2024 16:44:03 +0200 Subject: [PATCH 4/8] Trim down HTML --- sass/_extra.scss | 12 ++++++++++++ templates/includes/email_signup.html | 28 +++++++++++++--------------- 2 files changed, 25 insertions(+), 15 deletions(-) diff --git a/sass/_extra.scss b/sass/_extra.scss index c697bbd27..b92c17bfb 100644 --- a/sass/_extra.scss +++ b/sass/_extra.scss @@ -126,4 +126,16 @@ video+em { display: block; text-align: center; color: $grey-color; +} + +.email-form { + display: flex; + + .email-input { + margin-right: 0px; + } + + .email-submit { + margin-left: 0px; + } } \ No newline at end of file diff --git a/templates/includes/email_signup.html b/templates/includes/email_signup.html index b1517e4f2..c0f1ca1cf 100644 --- a/templates/includes/email_signup.html +++ b/templates/includes/email_signup.html @@ -1,17 +1,15 @@ -
-
-
-
- - -
-
- -
- + + + + +
+ \ No newline at end of file From 15f7592a8fecc6c6da2b3489c78201216f478bfb Mon Sep 17 00:00:00 2001 From: Jan Hohenheim Date: Sun, 30 Jun 2024 17:37:13 +0200 Subject: [PATCH 5/8] Write about email --- content/news/052/index.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/content/news/052/index.md b/content/news/052/index.md index ddecd813d..8e059ea03 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 +Since 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 a bit 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 From 616ab691accf1acfd8f817d834defabc12c7c3a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tau=20G=C3=A4rtli?= Date: Mon, 1 Jul 2024 16:01:11 +0200 Subject: [PATCH 6/8] Style Email Signup Form (#1541) --- sass/_extra.scss | 63 ++++++++++++++++++++++++---- static/intro-icons.svg | 18 +++++++- templates/includes/email_signup.html | 21 ++++++---- 3 files changed, 86 insertions(+), 16 deletions(-) diff --git a/sass/_extra.scss b/sass/_extra.scss index b92c17bfb..c9cfc4ea0 100644 --- a/sass/_extra.scss +++ b/sass/_extra.scss @@ -99,14 +99,24 @@ 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; @@ -114,10 +124,21 @@ h6:hover .anchor { &: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; } -} \ No newline at end of file +} + +.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 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + diff --git a/templates/includes/email_signup.html b/templates/includes/email_signup.html index c0f1ca1cf..66cd0797a 100644 --- a/templates/includes/email_signup.html +++ b/templates/includes/email_signup.html @@ -1,14 +1,21 @@