fix: adjust default color scheme to fix some contrast issues (#610)

BREAKING CHANGE: This change has adjusted the default color scheme and brand icon. There is no real functional break, but since the look and feel has changed, you might consider this as such.
This commit is contained in:
Robert Kaussow 2023-04-19 16:28:08 +02:00 committed by GitHub
parent 4ea6acc9d4
commit 80ddd27307
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 125 additions and 172 deletions

View file

@ -45,7 +45,7 @@ steps:
LINK_VALIDATOR_RETRIES: 3
- name: page-validation
image: thegeeklab/lhci
image: thegeeklab/lhci:0.11
commands:
- lhci autorun
environment:
@ -287,6 +287,6 @@ depends_on:
---
kind: signature
hmac: f1a7b521c40a3571acfafe30268d628a4c0fc359988917bcc63953cc1a311707
hmac: da9896c5892fff7425a4594cea8576d065aeacae177ffa2d411782721e61a1fb
...

View file

@ -2,21 +2,20 @@
ci:
collect:
numberOfRuns: 3
psiStrategy: desktop
staticDistDir: exampleSite/public
url:
- http://localhost/
- http://localhost/404.html
- http://localhost/posts/
- http://localhost/usage/getting-started/
settings:
chromeFlags: "--no-sandbox"
throttling:
cpuSlowdownMultiplier: "2.0"
assert:
preset: "lighthouse:no-pwa"
assertions:
uses-long-cache-ttl: off
csp-xss: off
# FIXME: https://github.com/GoogleChrome/lighthouse/issues/14957
bf-cache: off
tap-targets: warn
unsized-images: warn
image-size-responsive: warn

View file

@ -53,9 +53,9 @@ If you want to add more Favicon formats you have to [overwrite](https://gohugo.i
<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon/favicon-32x32.png" | relURL }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon/favicon-16x16.png" | relURL }}">
<link rel="manifest" href="{{ "favicon/site.webmanifest" | relURL }}">
<link rel="mask-icon" href="{{ "favicon/safari-pinned-tab.svg" | relURL }}" color="#2f333e">
<meta name="msapplication-TileColor" content="#2f333e">
<meta name="theme-color" content="#2f333e">
<link rel="mask-icon" href="{{ "favicon/safari-pinned-tab.svg" | relURL }}" color="#efefef">
<meta name="msapplication-TileColor" content="#efefef">
<meta name="theme-color" content="#efefef">
```
Happy customizing!

View file

@ -21,12 +21,12 @@
--link-color: #518169;
--link-color-visited: #c54e8a;
--code-background: #f5f6f8;
--code-background: #f8f9fa;
--code-accent-color: #e3e7eb;
--code-accent-color-lite: #eff1f3;
--code-font-color: #5f5f5f;
--code-copy-background: #f5f6f8;
--code-copy-background: #f8f9fa;
--code-copy-font-color: #6b7784;
--code-copy-border-color: #adb4bc;
--code-copy-success-color: #00c853;
@ -36,10 +36,10 @@
--control-icons: #b2bac1;
--footer-background: #2f333e;
--footer-font-color: #ffffff;
--footer-link-color: #ffcc5c;
--footer-link-color-visited: #ffcc5c;
--footer-background: #efefef;
--footer-font-color: #efefef;
--footer-link-color: #efefef;
--footer-link-color-visited: #efefef;
}
@media (prefers-color-scheme: light) {
:root {
@ -57,12 +57,12 @@
--link-color: #518169;
--link-color-visited: #c54e8a;
--code-background: #f5f6f8;
--code-background: #f8f9fa;
--code-accent-color: #e3e7eb;
--code-accent-color-lite: #eff1f3;
--code-font-color: #5f5f5f;
--code-copy-background: #f5f6f8;
--code-copy-background: #f8f9fa;
--code-copy-font-color: #6b7784;
--code-copy-border-color: #adb4bc;
--code-copy-success-color: #00c853;
@ -72,10 +72,10 @@
--control-icons: #b2bac1;
--footer-background: #2f333e;
--footer-background: #112b3c;
--footer-font-color: #ffffff;
--footer-link-color: #ffcc5c;
--footer-link-color-visited: #ffcc5c;
--footer-link-color: #f66b0e;
--footer-link-color-visited: #f66b0e;
}
}
@ -110,10 +110,10 @@
--control-icons: #b2bac1;
--footer-background: #2f333e;
--footer-background: #112b3c;
--footer-font-color: #ffffff;
--footer-link-color: #ffcc5c;
--footer-link-color-visited: #ffcc5c;
--footer-link-color: #f66b0e;
--footer-link-color-visited: #f66b0e;
}
@media (prefers-color-scheme: dark) {
:root {
@ -146,9 +146,9 @@
--control-icons: #b2bac1;
--footer-background: #2f333e;
--footer-background: #112b3c;
--footer-font-color: #ffffff;
--footer-link-color: #ffcc5c;
--footer-link-color-visited: #ffcc5c;
--footer-link-color: #f66b0e;
--footer-link-color-visited: #f66b0e;
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 225 KiB

After

Width:  |  Height:  |  Size: 201 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 508 KiB

After

Width:  |  Height:  |  Size: 257 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 KiB

After

Width:  |  Height:  |  Size: 127 KiB

View file

@ -162,7 +162,7 @@ img {
width: 100%;
max-width: $container-max-width;
margin: 0 auto;
padding: $padding-16;
padding: $padding-20;
}
svg.gdoc-icon {
@ -272,7 +272,7 @@ svg.gdoc-icon {
}
li {
margin: $padding-8 0;
margin: $padding-12 0;
}
svg.gdoc-icon {
@ -749,6 +749,10 @@ svg.gdoc-icon {
.gdoc-toc {
margin: $padding-16 0;
li {
margin: $padding-4 0;
}
// Classes to hide nested levels of ToC/Menu
&__level--1 ul ul,
&__level--2 ul ul ul,

View file

@ -2,6 +2,7 @@
$padding-2: 0.125rem !default;
$padding-4: 0.25rem !default;
$padding-8: 0.5rem !default;
$padding-12: 0.75rem !default;
$padding-16: 1rem !default;
$padding-20: 1.25rem !default;
$padding-24: 1.5rem !default;
@ -42,7 +43,7 @@ $black: rgba(0, 0, 0, 1) !default;
$link-color: rgba(10, 83, 154, 1) !default;
$link-color-visited: rgba(119, 73, 191, 1) !default;
$link-color-footer: rgba(255, 163, 30, 1) !default;
$link-color-footer: rgba(246, 107, 14, 1) !default;
$body-background: white !default;
$body-font-color: $gray-800 !default;
@ -52,21 +53,20 @@ $body-min-width: 20rem !default;
$code-font-color: rgba(70, 70, 70, 1) !default;
$code-font-color-dark: rgba(185, 185, 185, 1) !default;
$body-background-dark: $gray-800 !default;
$body-font-color-dark: $gray-100 !default;
$container-max-width: 82rem !default;
$main-color: rgba(65, 134, 201, 1) !default;
$second-color: rgba(47, 51, 62, 1) !default;
$main-color: rgba(32, 83, 117, 1) !default;
$second-color: rgba(17, 43, 60, 1) !default;
$mark-color: rgba(255, 171, 0, 1) !default;
$body-background-dark: mix(invert($body-background, 75%), $second-color) !default;
$body-font-color-dark: $gray-100 !default;
$link-color-dark: rgba(110, 168, 212, 1) !default;
$link-color-visited-dark: rgba(186, 142, 240) !default;
$code-background: $gray-100 !default;
$code-background-dark: darken($body-background-dark, 2) !default;
$code-background-dark: darken($body-background-dark, 3) !default;
$header-height: 3.5rem !default;
$menu-width: 18rem !default;

View file

@ -1,5 +1,5 @@
.gdoc-markdown {
line-height: $padding-24;
line-height: 1.6rem;
h1,
h2,

View file

@ -1,88 +1,57 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="128.54926mm"
height="128.54977mm"
viewBox="0 0 128.54926 128.54977"
fill="#000000"
width="695"
height="695"
viewBox="0 0 20.85 20.85"
id="agenda-pencil"
data-name="Line Color"
class="icon line-color"
version="1.1"
id="svg4543"
inkscape:export-filename="/home/rknet/rkau2905/Bilder/favicon-32.png"
inkscape:export-xdpi="6.3228416"
inkscape:export-ydpi="6.3228416"
inkscape:version="0.92.4 (unknown)"
sodipodi:docname="geekdoc_invert.svg">
sodipodi:docname="brand.svg"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs4537" />
id="defs1499" />
<sodipodi:namedview
id="base"
id="namedview1497"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.1503906"
inkscape:cx="159.02327"
inkscape:cy="275.63348"
inkscape:document-units="mm"
inkscape:current-layer="g5186"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="false"
inkscape:window-width="1600"
inkscape:window-height="844"
inkscape:zoom="0.3958404"
inkscape:cx="437.04483"
inkscape:cy="915.77312"
inkscape:window-width="2560"
inkscape:window-height="1371"
inkscape:window-x="0"
inkscape:window-y="28"
inkscape:window-maximized="1" />
<metadata
id="metadata4540">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
inkscape:window-y="32"
inkscape:window-maximized="1"
inkscape:current-layer="agenda-pencil" />
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-39.442039,-40.637613)">
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="Layer 1"
style="display:none">
<rect
style="fill:#666666;fill-opacity:1;stroke-width:0.27813107"
id="rect831"
width="142.59648"
height="143.05647"
x="36.912102"
y="37.170635" />
</g>
<g
id="g5186"
transform="translate(1.0583346,1.851866)">
<path
id="path5105"
d="M 388,146.5918 A 242.92773,242.92871 0 0 0 145.07227,389.51953 242.92773,242.92871 0 0 0 388,632.44922 242.92773,242.92871 0 0 0 630.92773,389.51953 242.92773,242.92871 0 0 0 388,146.5918 Z m 0,10 A 232.92773,232.92871 0 0 1 620.92773,389.51953 232.92773,232.92871 0 0 1 388,622.44922 232.92773,232.92871 0 0 1 155.07227,389.51953 232.92773,232.92871 0 0 1 388,156.5918 Z"
style="fill:#ffffff;fill-opacity:1;stroke-width:1.12989867"
inkscape:connector-curvature="0"
transform="scale(0.26458333)" />
<path
style="fill:#ffffff;fill-opacity:1;stroke-width:0.29306456"
d="m 102.65833,40.051097 a 63.008755,63.00902 0 0 0 -63.008753,63.009283 63.008755,63.00902 0 0 0 63.008753,63.00876 63.008755,63.00902 0 0 0 63.00876,-63.00876 63.008755,63.00902 0 0 0 -63.00876,-63.009283 z m -39.513148,32.79431 h 79.026298 a 4.3907643,6.0435574 0 1 1 0,12.086202 H 63.145182 a 4.3907643,6.0435574 0 1 1 0,-12.086202 z m 0,24.171874 h 79.026298 a 4.3907643,6.0435574 0 1 1 0,12.086199 H 63.145182 a 4.3907643,6.0435574 0 1 1 0,-12.086199 z m -0.594905,24.171869 h 53.247233 a 3.8037628,6.0435574 0 1 1 0,12.08621 H 62.550277 a 3.8037628,6.0435574 0 1 1 0,-12.08621 z"
id="ellipse5130"
inkscape:connector-curvature="0" />
</g>
id="g157"
transform="translate(0.06082949)">
<path
id="secondary"
d="M 19.08741,5.6462257 17.258775,3.8175911 a 1.3061676,1.3061676 0 0 0 -1.828634,0 L 9.016858,10.230874 v 3.657269 h 3.657269 L 19.08741,7.4748603 a 1.3061676,1.3061676 0 0 0 0,-1.8286346 z"
style="fill:none;stroke:#f66b0e;stroke-width:2.55;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" />
<path
id="primary"
d="m 15.566162,16.453545 v 2.009515 a 0.93635558,1.0047573 0 0 1 -0.936355,1.004757 H 3.3935396 A 0.93635558,1.0047573 0 0 1 2.457184,18.46306 V 2.3869423 A 0.93635558,1.0047573 0 0 1 3.3935396,1.382185 h 9.3635554"
style="fill:none;stroke:#efefef;stroke-width:2.76437;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" />
<path
id="primary-2"
data-name="primary"
d="m 1.5,6.425001 h 2 m -2,4 h 2 m -2,4 h 2"
style="fill:none;stroke:#efefef;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

@ -1,76 +1,57 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="128.54926mm"
height="128.54977mm"
viewBox="0 0 128.54926 128.54977"
fill="#000000"
width="695"
height="695.00006"
viewBox="0 0 20.85 20.850002"
id="agenda-pencil"
data-name="Line Color"
class="icon line-color"
version="1.1"
id="svg4543"
inkscape:export-filename="/home/rknet/rkau2905/Bilder/favicon-32.png"
inkscape:export-xdpi="6.3228416"
inkscape:export-ydpi="6.3228416"
inkscape:version="0.92.4 (unknown)"
sodipodi:docname="geekdoc.svg">
sodipodi:docname="favicon.svg"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs4537" />
id="defs1499" />
<sodipodi:namedview
id="base"
id="namedview1497"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.70710678"
inkscape:cx="216.85928"
inkscape:cy="202.61667"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="false"
inkscape:window-width="1600"
inkscape:window-height="844"
inkscape:zoom="0.3958404"
inkscape:cx="437.04483"
inkscape:cy="915.77312"
inkscape:window-width="2560"
inkscape:window-height="1371"
inkscape:window-x="0"
inkscape:window-y="28"
inkscape:window-maximized="1" />
<metadata
id="metadata4540">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
inkscape:window-y="32"
inkscape:window-maximized="1"
inkscape:current-layer="agenda-pencil" />
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-39.442039,-40.637613)">
<g
id="g5186"
transform="translate(1.0583346,1.851866)">
<path
transform="scale(0.26458333)"
id="path5105"
d="M 388,146.5918 A 242.92773,242.92871 0 0 0 145.07227,389.51953 242.92773,242.92871 0 0 0 388,632.44922 242.92773,242.92871 0 0 0 630.92773,389.51953 242.92773,242.92871 0 0 0 388,146.5918 Z m 0,10 A 232.92773,232.92871 0 0 1 620.92773,389.51953 232.92773,232.92871 0 0 1 388,622.44922 232.92773,232.92871 0 0 1 155.07227,389.51953 232.92773,232.92871 0 0 1 388,156.5918 Z"
style="fill:#7dacda;fill-opacity:1;stroke-width:1.12989867"
inkscape:connector-curvature="0" />
<path
style="fill:#4186c9;fill-opacity:1;stroke-width:1.08338702"
d="M 392,163.58984 A 232.92773,232.92871 0 0 0 159.07227,396.51953 232.92773,232.92871 0 0 0 392,629.44727 232.92773,232.92871 0 0 0 624.92773,396.51953 232.92773,232.92871 0 0 0 392,163.58984 Z M 245.92969,284.82227 h 292.14062 a 16.231566,22.341532 0 1 1 0,44.67968 H 245.92969 a 16.231566,22.341532 0 1 1 0,-44.67968 z m 0,89.35742 h 292.14062 a 16.231566,22.341532 0 1 1 0,44.67969 H 245.92969 a 16.231566,22.341532 0 1 1 0,-44.67969 z m -2.19922,89.35742 h 196.8418 a 14.061567,22.341532 0 1 1 0,44.67969 h -196.8418 a 14.061567,22.341532 0 1 1 0,-44.67969 z"
transform="matrix(0.26458333,0,0,0.26458333,-1.0583346,-1.851866)"
id="ellipse5130"
inkscape:connector-curvature="0" />
</g>
id="g157"
transform="translate(0.06082953)">
<path
id="secondary"
d="M 19.08741,5.6462257 17.258775,3.8175911 a 1.3061676,1.3061676 0 0 0 -1.828634,0 L 9.016858,10.230874 v 3.657269 h 3.657269 L 19.08741,7.4748603 a 1.3061676,1.3061676 0 0 0 0,-1.8286346 z"
style="fill:none;stroke:#f66b0e;stroke-width:2.55;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" />
<path
id="primary"
d="m 15.566162,16.453545 v 2.009515 a 0.93635558,1.0047573 0 0 1 -0.936355,1.004757 H 3.3935396 A 0.93635558,1.0047573 0 0 1 2.457184,18.46306 V 2.3869423 A 0.93635558,1.0047573 0 0 1 3.3935396,1.382185 h 9.3635554"
style="fill:none;stroke:#112b3c;stroke-width:2.76437;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" />
<path
id="primary-2"
data-name="primary"
d="m 1.5,6.425001 h 2 m -2,4 h 2 m -2,4 h 2"
style="fill:none;stroke:#112b3c;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

@ -60,8 +60,8 @@ var config = {
new WebpackFavicons({
src: path.resolve("src", "static", "favicon", "favicon.svg"),
path: "favicon/",
background: "#2f333e",
theme_color: "#2f333e",
background: "#efefef",
theme_color: "#efefef",
icons: {
android: { offset: 10 },
appleIcon: { offset: 10 },