From 7a9ec72fc4e56af0eac6dd789924ff1b9bfac588 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tau=20G=C3=A4rtli?= Date: Mon, 1 Jul 2024 15:04:18 +0200 Subject: [PATCH 1/3] Fix button color --- sass/_extra.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/sass/_extra.scss b/sass/_extra.scss index b92c17bfb..11c9c6ec0 100644 --- a/sass/_extra.scss +++ b/sass/_extra.scss @@ -99,6 +99,7 @@ h6:hover .anchor { margin-bottom: 0; } +a.btn, // Trick to increase the specificity and win against rules such as a:visited .btn { text-decoration: none; border-radius: 3px; @@ -138,4 +139,4 @@ video+em { .email-submit { margin-left: 0px; } -} \ No newline at end of file +} From f08788563e6b12de22e18525aa5120033bd4b540 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tau=20G=C3=A4rtli?= Date: Mon, 1 Jul 2024 15:56:15 +0200 Subject: [PATCH 2/3] Improve styling of buttons --- sass/_extra.scss | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/sass/_extra.scss b/sass/_extra.scss index 11c9c6ec0..5151020a0 100644 --- a/sass/_extra.scss +++ b/sass/_extra.scss @@ -99,15 +99,20 @@ h6:hover .anchor { margin-bottom: 0; } +input, button { + font-size: inherit; +} + 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; @@ -115,7 +120,11 @@ a.btn, // Trick to increase the specificity and win against rules such as a:visi &:hover { color: lighten($background-color, 10); - border-color: $brand-color; + background-color: lighten($brand-color, 5); + } + + &:active { + background-color: darken($brand-color, 5); } } From 5c946ad15e5cf98c940a66a41e89e0e7418fc0ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tau=20G=C3=A4rtli?= Date: Mon, 1 Jul 2024 15:56:44 +0200 Subject: [PATCH 3/3] Style email signup form --- sass/_extra.scss | 47 +++++++++++++++++++++++++--- static/intro-icons.svg | 18 ++++++++++- templates/includes/email_signup.html | 21 ++++++++----- 3 files changed, 73 insertions(+), 13 deletions(-) diff --git a/sass/_extra.scss b/sass/_extra.scss index 5151020a0..c9cfc4ea0 100644 --- a/sass/_extra.scss +++ b/sass/_extra.scss @@ -103,6 +103,10 @@ 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; @@ -128,6 +132,13 @@ a.btn, // Trick to increase the specificity and win against rules such as a:visi } } +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, @@ -139,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; + } +} + +.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 @@