diff --git a/_config.yml b/_config.yml index 05d7b86c..ab048846 100644 --- a/_config.yml +++ b/_config.yml @@ -2,7 +2,7 @@ remote_theme: mmistakes/minimal-mistakes@4.24.0 #theme: minimal-mistakes-jekyll -minimal_mistakes_skin: "midnight" # "default" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise" +minimal_mistakes_skin: "midnight" # "default", "air", "aqua", "contrast", "dark", "dirt", "midnight", "mint", "neon", "plum", "sunrise" # Disable caching of content to disk in order to skip creating a .jekyll-cache or similar directory disable_disk_cache: true diff --git a/_sass/minimal-mistakes/minimal-mistakes/_archive.scss b/_sass/minimal-mistakes/minimal-mistakes/_archive.scss index b4610683..7db60872 100644 --- a/_sass/minimal-mistakes/minimal-mistakes/_archive.scss +++ b/_sass/minimal-mistakes/minimal-mistakes/_archive.scss @@ -101,7 +101,7 @@ right: 0; margin: 0 auto; padding: 2px 5px; - color: #fff; + color: #fff; // FIXME: archive is not used, add to _variables,scss if used font-family: $caption-font-family; font-size: $type-size-8; background: #000; @@ -115,7 +115,7 @@ } a { - color: #fff; + color: #fff;// FIXME: archive is not used, add to _variables,scss if used text-decoration: none; } } diff --git a/_sass/minimal-mistakes/minimal-mistakes/_forms.scss b/_sass/minimal-mistakes/minimal-mistakes/_forms.scss index 8a8c63e5..4973ce2a 100644 --- a/_sass/minimal-mistakes/minimal-mistakes/_forms.scss +++ b/_sass/minimal-mistakes/minimal-mistakes/_forms.scss @@ -148,7 +148,7 @@ input[type="file"] { select { width: auto; - background-color: #fff; + background-color: red; // FIXME: forms is not used, add to _variables,scss if used } select[multiple], @@ -346,7 +346,7 @@ select:focus { left: 0; width: 100%; height: 100%; - background-color: rgba(255, 255, 255, 0.7); + background-color: rgba(255, 255, 255, 0.7); // FIXME: forms is not used, add to _variables,scss if used z-index: 10; } diff --git a/_sass/minimal-mistakes/minimal-mistakes/_navigation.scss b/_sass/minimal-mistakes/minimal-mistakes/_navigation.scss index 9db1b045..70950147 100644 --- a/_sass/minimal-mistakes/minimal-mistakes/_navigation.scss +++ b/_sass/minimal-mistakes/minimal-mistakes/_navigation.scss @@ -89,7 +89,7 @@ text-align: center; text-decoration: none; color: $link-color; - border: 1px solid mix(#000, $border-color, 25%); + border: 1px solid $darker-border-color; border-radius: 0; &:hover { @@ -98,12 +98,12 @@ &.current, &.current.disabled { - color: #fff; - background: $primary-color; + color: $menuitem-hovered-color; + background-color: $menuitem-hovered-background-color; } &.disabled { - color: rgba($muted-text-color, 0.5); + color: $semi-transparent-muted-text-color; pointer-events: none; cursor: not-allowed; } @@ -166,7 +166,7 @@ text-decoration: none; color: $link-color; - border: 1px solid mix(#000, $border-color, 25%); + border: 1px solid $darker-border-color; border-radius: $border-radius; padding: 16px; @@ -174,7 +174,10 @@ margin-left: 0px; &:hover { - @include yiq-contrasted($muted-text-color); + //@include yiq-contrasted($muted-text-color); + // This one is confor to the other menu item colors + color: $menuitem-hovered-color; + background-color: $menuitem-hovered-background-color; } &:first-child { @@ -190,7 +193,7 @@ } &.disabled { - color: rgba($muted-text-color, 0.5); + color: $semi-transparent-muted-text-color; pointer-events: none; cursor: not-allowed; } @@ -479,13 +482,13 @@ } &:hover { - color: #fff; + color: $menuitem-hovered-color; border-color: $gray; - background-color: mix(white, #000, 20%); + background-color: $menuitem-hovered-background-color; &:before, &:after { - background-color: #fff; + background-color: $menuitem-background-color; } } } @@ -526,6 +529,7 @@ .nav__list .nav__items { /* Also could set the identation of the embedded menu items this way */ margin-left: $sidebar-nav-item-left-margin; + padding-left: 0.5em; font-size: $type-size-4; /* Style for the top-level ul */ @@ -565,6 +569,7 @@ transition: 0.2s ease-out; cursor: pointer; + // Menu item fold/unfold right + - &:before, &:after { content: ""; @@ -585,13 +590,13 @@ margin-left: -0.5em; padding-left: 0.5em; padding-right: 0.5em; - color: #fff; + color: $menuitem-hovered-color; border-color: $gray; - background-color: mix(white, #000, 20%); + background-color: $menuitem-hovered-background-color; &:before, &:after { - background-color: #fff; + background-color: $menuitem-background-color; } } } @@ -625,17 +630,6 @@ transform: rotate(0); } - // un-folded - background - // input:checked + label { - // color: white; - // background-color: mix(white, #000, 20%); - // - // &:before, - // &:after { - // background-color: #fff; - // } - // } - a { &:not(.nav__sub-title), &:not(.nav__sub-title) { margin-right: 3em; @@ -644,7 +638,7 @@ color: inherit; } .active { - @include yiq-contrasted($active-color); + @include yiq-contrasted($menuitem-selected-background-color); } &:hover { text-decoration: underline; @@ -657,7 +651,7 @@ padding-left: 0.5em; padding-right: 0.5em; - @include yiq-contrasted($active-color); + @include yiq-contrasted($menuitem-selected-background-color); &:not(.nav__sub-title) { margin-left: -0.25em; @@ -752,11 +746,11 @@ z-index: 99; /* Higher than anything else */ opacity: 0; - color: #c0c0c0; + color: $tooltip-color; // #c0c0c0; font-size: $type-size-7; text-align: left; - text-shadow: 1px 1px 2px #111; - background: rgba(51, 51, 51, 0.9); + //text-shadow: 1px 1px 2px $tooltip-text-shadow-color; // #111 + background: $tooltip-background-color; // rgba(51, 51, 51, 0.9); // FIXME: Get rid of the dependency on size of the container width: 500%; @@ -785,8 +779,9 @@ padding-right: 15px; border-radius: 5px; - border: 1px solid rgba(34, 34, 34, 0.9); - box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); + box-shadow: 0 0 3px $tooltip-box-shadow-color; // rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 0 0 3px $tooltip-box-shadow-color; + //border: 1px solid $tooltip-border-color; // rgba(34, 34, 34, 0.9); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; @@ -811,7 +806,7 @@ top: var(--tooltip-arrow-top, -10px); left: var(--tooltip-arrow-left, 0px); - border-bottom: var(--tooltip-arrow-border-bottom, 10px) solid rgba(51, 51, 51, 0.9); + border-bottom: var(--tooltip-arrow-border-bottom, 10px) solid $tooltip-arrow-background-color; // rgba(51, 51, 51, 0.9); border-left: var(--tooltip-arrow-border-left, 10px) solid transparent; border-right: var(--tooltip-arrow-border-right, 10px) solid transparent; } @@ -834,7 +829,7 @@ .toc { font-family: $sans-serif-narrow; - color: $gray; + color: $menuitem-color; background-color: $background-color; border: 1px solid $border-color; border-radius: $border-radius; @@ -842,9 +837,9 @@ box-shadow: $box-shadow; .nav__title { - color: #fff; font-size: $type-size-6; - background: $primary-color; + color: $menuitem-hovered-color; + background: $menuitem-hovered-background-color; border: 0px; border-top-left-radius: $border-radius; border-top-right-radius: $border-radius; @@ -856,7 +851,7 @@ // Scrollspy marks toc items as .active when they are in focus .active a { - @include yiq-contrasted($active-color); + @include yiq-contrasted($menuitem-selected-background-color); } h4 { @@ -882,7 +877,7 @@ a { display: block; padding: 0.25rem 0.75rem; - color: $muted-text-color; + color: $menuitem-color; font-weight: bold; line-height: 1.5; border-bottom: 1px solid $border-color; diff --git a/_sass/minimal-mistakes/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/minimal-mistakes/_page.scss index 667c6624..c4ff67e2 100644 --- a/_sass/minimal-mistakes/minimal-mistakes/_page.scss +++ b/_sass/minimal-mistakes/minimal-mistakes/_page.scss @@ -227,7 +227,7 @@ body { animation-delay: 0.25s; a { - color: #fff; + color: #fff; // FIXME: page__hero is not used, add to _variables,scss if used } .wrapper { @@ -243,7 +243,7 @@ body { .page__meta, .page__lead, .btn { - color: #fff; + color: #fff; // FIXME: page__hero is not used, add to _variables,scss if used text-shadow: 1px 1px 4px rgba(#000, 0.5); } @@ -273,7 +273,7 @@ body { right: 0; margin: 0 auto; padding: 2px 5px; - color: #fff; + color: #fff; // FIXME: page__hero is not used, add to _variables,scss if used font-family: $caption-font-family; font-size: $type-size-7; background: #000; @@ -287,7 +287,7 @@ body { } a { - color: #fff; + color: #fff; // FIXME: page__hero is not used, add to _variables,scss if used text-decoration: none; } } diff --git a/_sass/minimal-mistakes/minimal-mistakes/_print.scss b/_sass/minimal-mistakes/minimal-mistakes/_print.scss index b93f1d40..98ee3a79 100644 --- a/_sass/minimal-mistakes/minimal-mistakes/_print.scss +++ b/_sass/minimal-mistakes/minimal-mistakes/_print.scss @@ -23,8 +23,8 @@ body { margin: 0 auto; - background: #fff !important; - color: #000 !important; + background: #fff !important; // FIXME: print is not used, add to _variables,scss if used + color: #000 !important; // FIXME: print is not used, add to _variables,scss if used font-size: 1rem; line-height: 1.5; -moz-osx-font-smoothing: grayscale; @@ -38,7 +38,7 @@ h4, h5, h6 { - color: #000; + color: #000; // FIXME: print is not used, add to _variables,scss if used line-height: 1.2; margin-bottom: 0.75rem; margin-top: 0; @@ -70,7 +70,7 @@ a, a:visited { - color: #000; + color: #000; // FIXME: print is not used, add to _variables,scss if used text-decoration: underline; word-wrap: break-word; } @@ -219,12 +219,12 @@ } .page__hero-caption { - color: #000 !important; + color: #000 !important; // FIXME: print is not used, add to _variables,scss if used background: #fff !important; opacity: 1; a { - color: #000 !important; + color: #000 !important; // FIXME: print is not used, add to _variables,scss if used } } diff --git a/_sass/minimal-mistakes/minimal-mistakes/_reset.scss b/_sass/minimal-mistakes/minimal-mistakes/_reset.scss index e08e5981..35218523 100644 --- a/_sass/minimal-mistakes/minimal-mistakes/_reset.scss +++ b/_sass/minimal-mistakes/minimal-mistakes/_reset.scss @@ -33,8 +33,8 @@ body { margin: 0; } /* Selected elements */ ::-moz-selection { - color: #fff; - background: #000; + color: $selection-color; + background: $selection-background-color; } ::selection { diff --git a/_sass/minimal-mistakes/minimal-mistakes/_utilities.scss b/_sass/minimal-mistakes/minimal-mistakes/_utilities.scss index 1c127d36..a1293de9 100644 --- a/_sass/minimal-mistakes/minimal-mistakes/_utilities.scss +++ b/_sass/minimal-mistakes/minimal-mistakes/_utilities.scss @@ -451,7 +451,7 @@ body:hover .visually-hidden button { min-height: 20px; padding: 19px; margin-bottom: 20px; - background-color: #f5f5f5; + background-color: red; border: 1px solid #e3e3e3; border-radius: $border-radius; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); @@ -473,7 +473,7 @@ body:hover .visually-hidden button { width: 100%; height: 100%; z-index: 999; - background-color: rgba(255, 255, 255, 0.85); + background-color: rgba($white, 0.85); } .modal { diff --git a/_sass/minimal-mistakes/minimal-mistakes/_variables.scss b/_sass/minimal-mistakes/minimal-mistakes/_variables.scss index 54b08cf8..b46c67cc 100644 --- a/_sass/minimal-mistakes/minimal-mistakes/_variables.scss +++ b/_sass/minimal-mistakes/minimal-mistakes/_variables.scss @@ -55,22 +55,26 @@ $h-size-6: 1em !default; // ~16px Colors ========================================================================== */ +$white: white !default; +$black: black !default; $gray: #7a8288 !default; -$dark-gray: mix(#000, $gray, 50%) !default; -$darker-gray: mix(#000, $gray, 60%) !default; -$light-gray: mix(#fff, $gray, 50%) !default; -$lighter-gray: mix(#fff, $gray, 90%) !default; +$dark-gray: mix($black, $gray, 50%) !default; +$darker-gray: mix($black, $gray, 60%) !default; +$light-gray: mix($white, $gray, 50%) !default; +$lighter-gray: mix($white, $gray, 90%) !default; -$background-color: #fff !default; +$background-color: $white !default; $text-color: $dark-gray !default; -$muted-text-color: mix(#fff, $text-color, 20%) !default; -$selection-color: #fff !default; -$selection-background-color: #000 !default; +$muted-text-color: mix($white, $text-color, 20%) !default; +$semi-transparent-muted-text-color: rgba($muted-text-color, 0.5) !default; +$selection-color: $white !default; +$selection-background-color: $black !default; $form-background-color: $lighter-gray !default; $footer-background-color: $lighter-gray !default; $code-background-color: #fafafa !default; $code-background-color-dark: $light-gray !default; $border-color: $lighter-gray !default; +$darker-border-color: mix(#000, $border-color, 25%) !default; $primary-color: #6f777d !default; $success-color: #3fa63f !default; @@ -78,11 +82,27 @@ $warning-color: #d67f05 !default; $danger-color: #ee5f5b !default; $info-color: #3b9cba !default; $focus-color: $primary-color !default; -$active-color: mix(#fff, $primary-color, 80%) !default; +$active-color: mix($white, $primary-color, 80%) !default; + +$menuitem-color: $muted-text-color !default; +$menuitem-background-color: $background-color !default; +$menuitem-selected-background-color: $active-color !default; +$menuitem-hovered-background-color: $primary-color !default; // mix($active-color, $gray) !default; +$menuitem-hovered-color: $lighter-gray !default; + +$border-color: $lighter-gray !default; +$box-shadow-color: rgba(mix($black, $background-color), 0.5) !default; //rgba(0, 0, 0, 0.125) !default; + +$tooltip-background-color: rgba(mix($white, $background-color, 7%), 0.925) !default; +$tooltip-arrow-background-color: $tooltip-background-color !default; +$tooltip-color: mix($gray, $text-color, 50%) !default; +//$tooltip-text-shadow-color: #111 !default; +$tooltip-box-shadow-color: $box-shadow-color !default; // rgba(mix($black, $background-color, 70%), 0.5) !default; +//$tooltip-border-color: $border-color !default; // rgba(mix($black, $background-color, 80%), 0.9) !default; /* YIQ color contrast */ $yiq-contrasted-dark-default: $dark-gray !default; -$yiq-contrasted-light-default: #fff !default; +$yiq-contrasted-light-default: $white !default; $yiq-contrasted-threshold: 175 !default; $yiq-debug: false !default; @@ -113,13 +133,13 @@ $youtube-color: #bb0000 !default; $xing-color: #006567 !default; /* links */ -$link-color: mix(#000, $info-color, 20%) !default; -$link-color-hover: mix(#000, $link-color, 25%) !default; -$link-color-visited: mix(#fff, $link-color, 15%) !default; +$link-color: mix($black, $info-color, 20%) !default; +$link-color-hover: mix($black, $link-color, 25%) !default; +$link-color-visited: mix($white, $link-color, 15%) !default; $link-color-selected: $selection-color !default; $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; +$masthead-link-color-hover: mix($black, $primary-color, 25%) !default; +$navicon-link-color-hover: mix($white, $primary-color, 75%) !default; /* notices */ $notice-background-mix: 80% !default; @@ -171,7 +191,7 @@ $left-sidebar-width-wide: 500px !default; ========================================================================== */ $border-radius: 4px !default; -$box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125) !default; +$box-shadow: 0 1px 1px $box-shadow-color !default; $nav-height: 2em !default; $nav-toggle-height: 2rem !default; $navicon-width: 1.5rem !default; diff --git a/_sass/minimal-mistakes/minimal-mistakes/skins/_aqua.scss b/_sass/minimal-mistakes/minimal-mistakes/skins/_aqua.scss index 7c3944e0..c7aca4af 100644 --- a/_sass/minimal-mistakes/minimal-mistakes/skins/_aqua.scss +++ b/_sass/minimal-mistakes/minimal-mistakes/skins/_aqua.scss @@ -16,6 +16,10 @@ $code-background-color-dark : $light-gray !default; $text-color : $dark-gray !default; $border-color : $lighter-gray !default; +$tooltip-color : mix($gray, $text-color, 50%) !default; +$tooltip-background-color : rgba(mix($light-gray, $background-color, 7%), 0.925) !default; +$tooltip-arrow-background-color : rgba(mix($tooltip-background-color, $tooltip-color, 90%), 0.925) !default; + $primary-color : $gray !default; $success-color : #27ae60 !default; $warning-color : #e67e22 !default; @@ -30,5 +34,5 @@ $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; +$notice-background-mix : 90% !default; +$code-notice-background-mix : 95% !default; diff --git a/_sass/minimal-mistakes/minimal-mistakes/skins/_midnight.scss b/_sass/minimal-mistakes/minimal-mistakes/skins/_midnight.scss index c2f48e9c..a7821336 100644 --- a/_sass/minimal-mistakes/minimal-mistakes/skins/_midnight.scss +++ b/_sass/minimal-mistakes/minimal-mistakes/skins/_midnight.scss @@ -8,18 +8,20 @@ $text-color: #f0e7d5 !default; $selection-color: mix($text-color, $background-color, 20%) !default; $selection-background-color: mix($text-color, $background-color, 80%) !default; $primary-color: #e8ba00 !default; -$border-color: mix(#fff, $background-color, 20%) !default; +$border-color: mix(white, $background-color, 20%) !default; $code-background-color: #1e1e1e !default; -$code-background-color-dark: mix(#000, $code-background-color, 25%) !default; -$form-background-color: mix(#000, $background-color, 15%) !default; -$footer-background-color: mix(#000, $background-color, 30%) !default; +$code-background-color-dark: mix(black, $code-background-color, 25%) !default; +$form-background-color: mix(black, $background-color, 15%) !default; +$footer-background-color: mix(black, $background-color, 30%) !default; + $link-color: $primary-color !default; -$link-color-visited: mix(#fff, $link-color, 40%) !default; -$link-color-hover: mix(#fff, $link-color, 60%) !default; +$link-color-visited: mix(white, $link-color, 40%) !default; +$link-color-hover: mix(white, $link-color, 60%) !default; $link-color-selected: $selection-color !default; + $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; +$masthead-link-color-hover: mix(black, $text-color, 20%) !default; +$navicon-link-color-hover: mix(black, $background-color, 30%) !default; /* sunrise syntax highlighting (base16) */ $base00: $code-background-color !default; @@ -29,7 +31,7 @@ $base03: #969896 !default; $base04: #888 !default; $base05: #d0d0d0 !default; $base06: #e0e0e0 !default; -$base07: #ffffff !default; +$base07: white !default; $base08: #ac4142 !default; $base09: #90a959 !default; $base0a: #f0c674 !default;