steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

Color notices based on skin colors instead of fixed values (#2887)

Browse Source 
* Made notice Sass color mixing in based on $background-color and $text-color instead of hard-coded black and white values.

* 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.

* Adjusted sunrise $notice-background-mix to 75%

* Adjusted dark theme notice background mix colors back to the default

Co-authored-by: Tom Manner <tsmanner@us.ibm.com>
This commit is contained in:
Tom Manner
2021-04-13 16:00:24 -04:00
committed by GitHub
parent b1e4881c50
commit 5ffad0d956
7 changed files with 26 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
_sass/minimal-mistakes/skins/_aqua.scss
View File

@@ -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;
$masthead-link-color-hover : mix(#000, $primary-color, 25%) !default;
/* notices */
$notice-background-mix: 90% !default;
$code-notice-background-mix: 95% !default;