From 91701b7156c40589b6ccc0f8a84740a7e54d7a12 Mon Sep 17 00:00:00 2001 From: Tom Manner Date: Wed, 24 Mar 2021 23:45:54 -0400 Subject: [PATCH 1/4] Made notice Sass color mixing in based on $background-color and $text-color instead of hard-coded black and white values. --- _sass/minimal-mistakes/_notices.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/_sass/minimal-mistakes/_notices.scss b/_sass/minimal-mistakes/_notices.scss index 5c087ed5b5d2..6dcd35369564 100644 --- a/_sass/minimal-mistakes/_notices.scss +++ b/_sass/minimal-mistakes/_notices.scss @@ -13,11 +13,11 @@ @mixin notice($notice-color) { margin: 2em 0 !important; /* override*/ padding: 1em; - color: $dark-gray; + color: $text-color; font-family: $global-font-family; font-size: $type-size-6 !important; text-indent: initial; /* override*/ - background-color: mix(#fff, $notice-color, 90%); + background-color: mix($background-color, $notice-color, 90%); border-radius: $border-radius; box-shadow: 0 1px 1px rgba($notice-color, 0.25); @@ -54,7 +54,7 @@ } code { - background-color: mix(#fff, $notice-color, 95%) + background-color: mix($background-color, $notice-color, 95%) } pre code { From 08ace246c526a3230203b38e003198017bf2debd Mon Sep 17 00:00:00 2001 From: Tom Manner Date: Sun, 28 Mar 2021 21:47:06 -0400 Subject: [PATCH 2/4] Made some style adjustments to notices to improve readability. Notice links are slightly darkened from the notice color, mostly because the gray-on-gray default notice links were very hard to read. Rather than being $notice-color, they are `mix(#000, $notice-color, 10%)`. The notice background mix and code-background mix can now be set with the SCSS variables $notice-background-mix and $code-notice-background-mix. The default mix for background was adjusted to 80%, from 90%. The default mix for code-background was adjusted to 90%, from 95%. Skins that still didn't read well were adjusted individually. --- _sass/minimal-mistakes/_notices.scss | 8 ++++---- _sass/minimal-mistakes/_variables.scss | 4 ++++ _sass/minimal-mistakes/skins/_aqua.scss | 6 +++++- _sass/minimal-mistakes/skins/_dark.scss | 6 +++++- _sass/minimal-mistakes/skins/_neon.scss | 4 ++++ _sass/minimal-mistakes/skins/_plum.scss | 4 ++++ 6 files changed, 26 insertions(+), 6 deletions(-) diff --git a/_sass/minimal-mistakes/_notices.scss b/_sass/minimal-mistakes/_notices.scss index 6dcd35369564..3a9b5e606eaf 100644 --- a/_sass/minimal-mistakes/_notices.scss +++ b/_sass/minimal-mistakes/_notices.scss @@ -17,7 +17,7 @@ font-family: $global-font-family; font-size: $type-size-6 !important; text-indent: initial; /* override*/ - background-color: mix($background-color, $notice-color, 90%); + background-color: mix($background-color, $notice-color, $notice-background-mix); border-radius: $border-radius; box-shadow: 0 1px 1px rgba($notice-color, 0.25); @@ -46,15 +46,15 @@ } a { - color: $notice-color; + color: mix(#000, $notice-color, 10%); &:hover { - color: mix(#000, $notice-color, 40%); + color: mix(#000, $notice-color, 50%); } } code { - background-color: mix($background-color, $notice-color, 95%) + background-color: mix($background-color, $notice-color, $code-notice-background-mix) } pre code { diff --git a/_sass/minimal-mistakes/_variables.scss b/_sass/minimal-mistakes/_variables.scss index 4065a0ebca4c..81a3acf7b88f 100644 --- a/_sass/minimal-mistakes/_variables.scss +++ b/_sass/minimal-mistakes/_variables.scss @@ -118,6 +118,10 @@ $masthead-link-color: $primary-color !default; $masthead-link-color-hover: mix(#000, $primary-color, 25%) !default; $navicon-link-color-hover: mix(#fff, $primary-color, 75%) !default; +/* notices */ +$notice-background-mix: 80% !default; +$code-notice-background-mix: 90% !default; + /* syntax highlighting (base16) */ $base00: #263238 !default; $base01: #2e3c43 !default; diff --git a/_sass/minimal-mistakes/skins/_aqua.scss b/_sass/minimal-mistakes/skins/_aqua.scss index f5a69af5c690..7c3944e07173 100644 --- a/_sass/minimal-mistakes/skins/_aqua.scss +++ b/_sass/minimal-mistakes/skins/_aqua.scss @@ -27,4 +27,8 @@ $link-color : $info-color !default; $link-color-hover : mix(#000, $link-color, 25%) !default; $link-color-visited : mix(#fff, $link-color, 25%) !default; $masthead-link-color : $primary-color !default; -$masthead-link-color-hover : mix(#000, $primary-color, 25%) !default; \ No newline at end of file +$masthead-link-color-hover : mix(#000, $primary-color, 25%) !default; + +/* notices */ +$notice-background-mix: 90% !default; +$code-notice-background-mix: 95% !default; diff --git a/_sass/minimal-mistakes/skins/_dark.scss b/_sass/minimal-mistakes/skins/_dark.scss index d3d24ef76259..7c2d14a7a668 100644 --- a/_sass/minimal-mistakes/skins/_dark.scss +++ b/_sass/minimal-mistakes/skins/_dark.scss @@ -18,6 +18,10 @@ $masthead-link-color: $text-color !default; $masthead-link-color-hover: mix(#000, $text-color, 20%) !default; $navicon-link-color-hover: mix(#000, $background-color, 30%) !default; +/* notices */ +$notice-background-mix: 90% !default; +$code-notice-background-mix: 95% !default; + .author__urls.social-icons i, .author__urls.social-icons .svg-inline--fa, .page__footer-follow .social-icons i, @@ -27,4 +31,4 @@ $navicon-link-color-hover: mix(#000, $background-color, 30%) !default; .ais-search-box .ais-search-box--input { background-color: $form-background-color; -} \ No newline at end of file +} diff --git a/_sass/minimal-mistakes/skins/_neon.scss b/_sass/minimal-mistakes/skins/_neon.scss index 737e6b4005ff..a4f2ef5d9d8d 100644 --- a/_sass/minimal-mistakes/skins/_neon.scss +++ b/_sass/minimal-mistakes/skins/_neon.scss @@ -18,6 +18,10 @@ $masthead-link-color: $text-color !default; $masthead-link-color-hover: mix(#000, $text-color, 20%) !default; $navicon-link-color-hover: mix(#000, $background-color, 30%) !default; +/* notices */ +$notice-background-mix: 90% !default; +$code-notice-background-mix: 95% !default; + /* neon syntax highlighting (base16) */ $base00: #ffffff !default; $base01: #e0e0e0 !default; diff --git a/_sass/minimal-mistakes/skins/_plum.scss b/_sass/minimal-mistakes/skins/_plum.scss index 135db9004d0f..defa69cde796 100644 --- a/_sass/minimal-mistakes/skins/_plum.scss +++ b/_sass/minimal-mistakes/skins/_plum.scss @@ -18,6 +18,10 @@ $masthead-link-color: $text-color !default; $masthead-link-color-hover: mix(#000, $text-color, 20%) !default; $navicon-link-color-hover: mix(#000, $background-color, 30%) !default; +/* notices */ +$notice-background-mix: 70% !default; +$code-notice-background-mix: 80% !default; + /* plum syntax highlighting (base16) */ $base00: #ffffff !default; $base01: #e0e0e0 !default; From 59aa6e7853d22e964ecce54aec5540156dccea85 Mon Sep 17 00:00:00 2001 From: Tom Manner Date: Sun, 28 Mar 2021 22:16:46 -0400 Subject: [PATCH 3/4] Adjusted sunrise $notice-background-mix to 75% --- _sass/minimal-mistakes/skins/_sunrise.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/_sass/minimal-mistakes/skins/_sunrise.scss b/_sass/minimal-mistakes/skins/_sunrise.scss index f23d4f96cfd1..bc259f6d8d3d 100644 --- a/_sass/minimal-mistakes/skins/_sunrise.scss +++ b/_sass/minimal-mistakes/skins/_sunrise.scss @@ -20,6 +20,9 @@ $masthead-link-color: $text-color !default; $masthead-link-color-hover: mix(#000, $text-color, 20%) !default; $navicon-link-color-hover: mix(#000, $background-color, 30%) !default; +/* notices */ +$notice-background-mix: 75% !default; + /* sunrise syntax highlighting (base16) */ $base00: #1d1f21 !default; $base01: #282a2e !default; From 73f5442375de1606135ce405696adb2071c7c051 Mon Sep 17 00:00:00 2001 From: Tom Manner Date: Sun, 28 Mar 2021 22:19:06 -0400 Subject: [PATCH 4/4] Adjusted dark theme notice background mix colors back to the default --- _sass/minimal-mistakes/skins/_dark.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/_sass/minimal-mistakes/skins/_dark.scss b/_sass/minimal-mistakes/skins/_dark.scss index 7c2d14a7a668..38053493779f 100644 --- a/_sass/minimal-mistakes/skins/_dark.scss +++ b/_sass/minimal-mistakes/skins/_dark.scss @@ -18,10 +18,6 @@ $masthead-link-color: $text-color !default; $masthead-link-color-hover: mix(#000, $text-color, 20%) !default; $navicon-link-color-hover: mix(#000, $background-color, 30%) !default; -/* notices */ -$notice-background-mix: 90% !default; -$code-notice-background-mix: 95% !default; - .author__urls.social-icons i, .author__urls.social-icons .svg-inline--fa, .page__footer-follow .social-icons i,