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.
2023-04-19 16:28:08 +02:00 · 2023-04-19 16:28:08 +02:00 · 80ddd27307
parent 4ea6acc9d4
commit 80ddd27307
13 changed files with 125 additions and 172 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -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

 ...
--- a/.lighthouserc.yml
+++ b/.lighthouserc.yml
@ -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
--- a/exampleSite/content/en/features/theming/_index.md
+++ b/exampleSite/content/en/features/theming/_index.md
@ -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!
--- a/exampleSite/static/custom.css.example
+++ b/exampleSite/static/custom.css.example
@ -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;
  }
 }
--- a/images/readme.png
+++ b/images/readme.png
--- a/images/screenshot.png
+++ b/images/screenshot.png
--- a/images/tn.png
+++ b/images/tn.png
--- a/src/sass/_base.scss
+++ b/src/sass/_base.scss
@ -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,
--- a/src/sass/_defaults.scss
+++ b/src/sass/_defaults.scss
@ -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;
--- a/src/sass/_markdown.scss
+++ b/src/sass/_markdown.scss
@ -1,5 +1,5 @@
 .gdoc-markdown {
-  line-height: $padding-24;
+  line-height: 1.6rem;

  h1,
  h2,
--- a/src/static/brand.svg
+++ b/src/static/brand.svg
@ -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>
--- a/src/static/favicon/favicon.svg
+++ b/src/static/favicon/favicon.svg
@ -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>
--- a/webpack.config.js
+++ b/webpack.config.js
@ -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 },