N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 26 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
_sass/minimal-mistakes/_notices.scss
View file

@ -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, $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(#fff, $notice-color, 95%)
background-color: mix($background-color, $notice-color, $code-notice-background-mix)
}
pre code {

4
_sass/minimal-mistakes/_variables.scss
View file

@ -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;

4
_sass/minimal-mistakes/skins/_aqua.scss
View file

@ -28,3 +28,7 @@ $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;
/* notices */
$notice-background-mix: 90% !default;
$code-notice-background-mix: 95% !default;

4
_sass/minimal-mistakes/skins/_neon.scss
View file

@ -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;

4
_sass/minimal-mistakes/skins/_plum.scss
View file

@ -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;

3
_sass/minimal-mistakes/skins/_sunrise.scss
View file

@ -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;