Extract variable for SDG text color

We were using `#fff` in some places and `$white` in others. We're
choosing `#fff` because it has a better contrast against the lighter SDG
colors and because it's the one officially used by the United Nations.
This commit is contained in:
Javi Martín
2022-10-13 20:57:31 +02:00
parent 3aa73110c5
commit 5845dd46d9
4 changed files with 5 additions and 4 deletions

View File

@@ -124,6 +124,7 @@ $off-screen-left: -1000rem !default;
$sdg-icon-min-width: 45px !default; $sdg-icon-min-width: 45px !default;
$sdg-text: #fff;
$sdg-colors: ( $sdg-colors: (
1: #e5243b, 1: #e5243b,
2: #dda63a, 2: #dda63a,

View File

@@ -4,7 +4,7 @@
> header { > header {
align-items: center; align-items: center;
color: #fff; color: $sdg-text;
display: flex; display: flex;
margin: $line-height / 2 0; margin: $line-height / 2 0;
text-shadow: 0 0 1px $black; text-shadow: 0 0 1px $black;

View File

@@ -6,7 +6,7 @@
} }
.amsify-suggestags-area .amsify-select-tag { .amsify-suggestags-area .amsify-select-tag {
color: $white; color: $sdg-text;
@each $code, $color in $sdg-colors { @each $code, $color in $sdg-colors {
&[data-val^="#{$code}"] { &[data-val^="#{$code}"] {
@@ -72,7 +72,7 @@
} }
.remove-tag { .remove-tag {
color: $white; color: $sdg-text;
} }
h3 { h3 {

View File

@@ -13,7 +13,7 @@
a:not(.more-targets), a:not(.more-targets),
span { span {
color: $white; color: $sdg-text;
} }
@each $code, $color in $sdg-colors { @each $code, $color in $sdg-colors {