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 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + 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 @@ +
+ +
+ \ 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 @@

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