From 36890a60098598624de01f36d53078ea9430b315 Mon Sep 17 00:00:00 2001 From: Jan Hohenheim <jan@hohenheim.ch> 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 %} </main> +<div id="mc_embed_signup"> + <form action="https://hohenheim.us18.list-manage.com/subscribe/post?u=ea530715a8887b4b70c833c76&id=78d9b3b77c&f_id=0059c2e1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"> + <div id="mc_embed_signup_scroll"><h2>Subscribe</h2> + <div class="indicates-required"><span class="asterisk">*</span> indicates required</div> + <div class="mc-field-group"><label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label><input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""></div> + <div id="mce-responses" class="clear foot"> + <div class="response" id="mce-error-response" style="display: none;"></div> + <div class="response" id="mce-success-response" style="display: none;"></div> + </div> + <div style="position: absolute; left: -5000px;" aria-hidden="true"> + /* real people should not fill this in and expect good things - do not remove this or risk form bot signups */ + <input type="text" name="b_ea530715a8887b4b70c833c76_78d9b3b77c" tabindex="-1" value=""> + </div> + <div class="optionalParent"> + <div class="clear foot"> + <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Subscribe"> + </div> + </div> + </div> + </form> +</div> + {% include "includes/footer.html" %} </body> </html> From f9b711418cbde7c37bd1e0294587518f34883df6 Mon Sep 17 00:00:00 2001 From: Jan Hohenheim <jan@hohenheim.ch> 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 @@ + <div id="mc_embed_signup"> + <form action="https://gamedev.us22.list-manage.com/subscribe/post?u=3b2317bf9350c11e252162541&id=aaf37783ec&f_id=0011cde1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self" novalidate=""> + <div id="mc_embed_signup_scroll"><h2>Subscribe</h2> + <div class="mc-field-group"><label for="mce-EMAIL">Email Address </label><input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""></div> + <div id="mce-responses" class="clear"> + <div class="response" id="mce-error-response" style="display: none;"></div> + <div class="response" id="mce-success-response" style="display: none;"></div> + </div> + <div style="position: absolute; left: -5000px;" aria-hidden="true"> + <input type="text" name="b_3b2317bf9350c11e252162541_aaf37783ec" tabindex="-1" value=""> + </div> + <div class="clear"> + <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="btn" value="Subscribe"> + </div> + </div> + </form> +</div> + \ 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 @@ <h2 class="footer-heading">{{ config.title | default(value="Minima") }}</h2> {% if config.description %} <p>{{ config.description }}</p> {% endif %} + + {% include "includes/email_signup.html" %} </div> <div class="footer-col one-half"> 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 %} </main> -<div id="mc_embed_signup"> - <form action="https://hohenheim.us18.list-manage.com/subscribe/post?u=ea530715a8887b4b70c833c76&id=78d9b3b77c&f_id=0059c2e1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"> - <div id="mc_embed_signup_scroll"><h2>Subscribe</h2> - <div class="indicates-required"><span class="asterisk">*</span> indicates required</div> - <div class="mc-field-group"><label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label><input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""></div> - <div id="mce-responses" class="clear foot"> - <div class="response" id="mce-error-response" style="display: none;"></div> - <div class="response" id="mce-success-response" style="display: none;"></div> - </div> - <div style="position: absolute; left: -5000px;" aria-hidden="true"> - /* real people should not fill this in and expect good things - do not remove this or risk form bot signups */ - <input type="text" name="b_ea530715a8887b4b70c833c76_78d9b3b77c" tabindex="-1" value=""> - </div> - <div class="optionalParent"> - <div class="clear foot"> - <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Subscribe"> - </div> - </div> - </div> - </form> -</div> - {% include "includes/footer.html" %} </body> </html> From 46a097402de3b1899a4855eadf0ce094bd53eda4 Mon Sep 17 00:00:00 2001 From: Jan Hohenheim <jan@hohenheim.ch> 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 @@ <div id="mc_embed_signup"> <form action="https://gamedev.us22.list-manage.com/subscribe/post?u=3b2317bf9350c11e252162541&id=aaf37783ec&f_id=0011cde1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self" novalidate=""> - <div id="mc_embed_signup_scroll"><h2>Subscribe</h2> - <div class="mc-field-group"><label for="mce-EMAIL">Email Address </label><input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""></div> - <div id="mce-responses" class="clear"> - <div class="response" id="mce-error-response" style="display: none;"></div> - <div class="response" id="mce-success-response" style="display: none;"></div> - </div> - <div style="position: absolute; left: -5000px;" aria-hidden="true"> - <input type="text" name="b_3b2317bf9350c11e252162541_aaf37783ec" tabindex="-1" value=""> + <div id="mc_embed_signup_scroll"> + <div class="mc-field-group"> + <label for="mce-EMAIL">Email Address </label> + <input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""> </div> <div class="clear"> <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="btn" value="Subscribe"> </div> + <div style="position: absolute; left: -5000px;" aria-hidden="true"> + <input type="text" name="b_3b2317bf9350c11e252162541_aaf37783ec" tabindex="-1" value=""> + </div> </div> </form> </div> 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 @@ <h2 class="footer-heading">{{ config.title | default(value="Minima") }}</h2> {% if config.description %} <p>{{ config.description }}</p> {% endif %} - - {% include "includes/email_signup.html" %} </div> <div class="footer-col one-half"> 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> From e4fbaf0a0d68c83370498ed123e0390f2ead4775 Mon Sep 17 00:00:00 2001 From: Jan Hohenheim <jan@hohenheim.ch> 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 @@ - <div id="mc_embed_signup"> - <form action="https://gamedev.us22.list-manage.com/subscribe/post?u=3b2317bf9350c11e252162541&id=aaf37783ec&f_id=0011cde1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self" novalidate=""> - <div id="mc_embed_signup_scroll"> - <div class="mc-field-group"> - <label for="mce-EMAIL">Email Address </label> - <input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""> - </div> - <div class="clear"> - <input type="submit" name="subscribe" id="mc-embedded-subscribe" class="btn" value="Subscribe"> - </div> - <div style="position: absolute; left: -5000px;" aria-hidden="true"> - <input type="text" name="b_3b2317bf9350c11e252162541_aaf37783ec" tabindex="-1" value=""> - </div> +<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"> + <div class="email-input"> + <label for="email-input">Email Address</label> + <input type="email" inputmode="email" name="EMAIL" id="email-input" required> </div> - </form> -</div> + <div class="email-submit"> + <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> + </div> +</form> \ No newline at end of file From 15f7592a8fecc6c6da2b3489c78201216f478bfb Mon Sep 17 00:00:00 2001 From: Jan Hohenheim <jan@hohenheim.ch> 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?= <git@tau.garden> 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 @@ <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 index c0f1ca1cf..66cd0797a 100644 --- 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&id=aaf37783ec&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="hello@example.com" 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> From 854387e324fb0eee62591b1ca8ebf48905926d29 Mon Sep 17 00:00:00 2001 From: Jan Hohenheim <jan@hohenheim.ch> Date: Mon, 1 Jul 2024 16:20:12 +0200 Subject: [PATCH 7/8] Update content/news/052/index.md Co-authored-by: Thierry Berger <contact@thierryberger.com> --- content/news/052/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/news/052/index.md b/content/news/052/index.md index 039b6abe4..be1aa271c 100644 --- a/content/news/052/index.md +++ b/content/news/052/index.md @@ -67,7 +67,7 @@ If needed, a section can be split into subsections with a "------" delimiter. 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. +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). From 086d97347230ffa5cf2721b72d9f57dc9fa80504 Mon Sep 17 00:00:00 2001 From: Jan Hohenheim <jan@hohenheim.ch> Date: Mon, 1 Jul 2024 16:20:47 +0200 Subject: [PATCH 8/8] Update content/news/052/index.md Co-authored-by: Thierry Berger <contact@thierryberger.com> --- content/news/052/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/news/052/index.md b/content/news/052/index.md index be1aa271c..0653363ad 100644 --- a/content/news/052/index.md +++ b/content/news/052/index.md @@ -65,7 +65,7 @@ If needed, a section can be split into subsections with a "------" delimiter. ## Announcements -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]. +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.