Skip to content

Commit

Permalink
Eliminate hardcoded color values from the scss files (syslog-ng#35)
Browse files Browse the repository at this point in the history
- tooltip and menu item colors are added to the base _variable.scss
- using white and black predefined color names instead of hex values
- updated midnight and aqua skins according to the latest common changes
Signed-off-by: Hofi <hofione@gmail.com>
  • Loading branch information
mrgarris0n authored May 14, 2024
2 parents 030f57e + 2966f3b commit 26ae5c1
Showing 11 changed files with 104 additions and 83 deletions.
2 changes: 1 addition & 1 deletion _config.yml
Original file line number Diff line number Diff line change
@@ -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
4 changes: 2 additions & 2 deletions _sass/minimal-mistakes/minimal-mistakes/_archive.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
4 changes: 2 additions & 2 deletions _sass/minimal-mistakes/minimal-mistakes/_forms.scss
Original file line number Diff line number Diff line change
@@ -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;
}

69 changes: 32 additions & 37 deletions _sass/minimal-mistakes/minimal-mistakes/_navigation.scss
Original file line number Diff line number Diff line change
@@ -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,15 +166,18 @@
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;
margin-right: 0;
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,17 +829,17 @@

.toc {
font-family: $sans-serif-narrow;
color: $gray;
color: $menuitem-color;
background-color: $background-color;
border: 1px solid $border-color;
border-radius: $border-radius;
-webkit-box-shadow: $box-shadow;
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;
8 changes: 4 additions & 4 deletions _sass/minimal-mistakes/minimal-mistakes/_page.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
12 changes: 6 additions & 6 deletions _sass/minimal-mistakes/minimal-mistakes/_print.scss
Original file line number Diff line number Diff line change
@@ -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
}
}

4 changes: 2 additions & 2 deletions _sass/minimal-mistakes/minimal-mistakes/_reset.scss
Original file line number Diff line number Diff line change
@@ -33,8 +33,8 @@ body { margin: 0; }
/* Selected elements */

::-moz-selection {
color: #fff;
background: #000;
color: $selection-color;
background: $selection-background-color;
}

::selection {
4 changes: 2 additions & 2 deletions _sass/minimal-mistakes/minimal-mistakes/_utilities.scss
Original file line number Diff line number Diff line change
@@ -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 {
Loading

0 comments on commit 26ae5c1

Please sign in to comment.