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.

.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
 
 ...

.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

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">
+<link rel="mask-icon" href="{{ "favicon/safari-pinned-tab.svg" | relURL }}" color="#efefef">
-<meta name="msapplication-TileColor" content="#2f333e">
+<meta name="msapplication-TileColor" content="#efefef">
-<meta name="theme-color" content="#2f333e">
+<meta name="theme-color" content="#efefef">
 ```
 
 Happy customizing!

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-background: #efefef;
-  --footer-font-color: #ffffff;
+  --footer-font-color: #efefef;
-  --footer-link-color: #ffcc5c;
+  --footer-link-color: #efefef;
-  --footer-link-color-visited: #ffcc5c;
+  --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: #f66b0e;
-    --footer-link-color-visited: #ffcc5c;
+    --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: #f66b0e;
-  --footer-link-color-visited: #ffcc5c;
+  --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: #f66b0e;
-    --footer-link-color-visited: #ffcc5c;
+    --footer-link-color-visited: #f66b0e;
   }
 }

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,

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;
+$main-color: rgba(32, 83, 117, 1) !default;
-$second-color: rgba(47, 51, 62, 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;

src/sass/_markdown.scss

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

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/"
+   fill="#000000"
-   xmlns:cc="http://creativecommons.org/ns#"
+   width="695"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   height="695"
-   xmlns:svg="http://www.w3.org/2000/svg"
+   viewBox="0 0 20.85 20.85"
-   xmlns="http://www.w3.org/2000/svg"
+   id="agenda-pencil"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   data-name="Line Color"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   class="icon line-color"
-   width="128.54926mm"
-   height="128.54977mm"
-   viewBox="0 0 128.54926 128.54977"
    version="1.1"
-   id="svg4543"
+   sodipodi:docname="brand.svg"
-   inkscape:export-filename="/home/rknet/rkau2905/Bilder/favicon-32.png"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
-   inkscape:export-xdpi="6.3228416"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   inkscape:export-ydpi="6.3228416"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   inkscape:version="0.92.4 (unknown)"
+   xmlns="http://www.w3.org/2000/svg"
-   sodipodi:docname="geekdoc_invert.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:pagecheckerboard="0"
-     inkscape:zoom="1.1503906"
+     inkscape:deskcolor="#d1d1d1"
-     inkscape:cx="159.02327"
-     inkscape:cy="275.63348"
-     inkscape:document-units="mm"
-     inkscape:current-layer="g5186"
      showgrid="false"
-     inkscape:window-width="1600"
+     inkscape:zoom="0.3958404"
-     inkscape:window-height="844"
+     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-y="32"
-     inkscape:window-maximized="1" />
+     inkscape:window-maximized="1"
-  <metadata
+     inkscape:current-layer="agenda-pencil" />
-     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>
   <g
-     inkscape:label="Ebene 1"
+     id="g157"
-     inkscape:groupmode="layer"
+     transform="translate(0.06082949)">
-     id="layer1"
+    <path
-     transform="translate(-39.442039,-40.637613)">
+       id="secondary"
-    <g
+       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"
-       inkscape:groupmode="layer"
+       style="fill:none;stroke:#f66b0e;stroke-width:2.55;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" />
-       id="layer2"
+    <path
-       inkscape:label="Layer 1"
+       id="primary"
-       style="display:none">
+       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"
-      <rect
+       style="fill:none;stroke:#efefef;stroke-width:2.76437;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" />
-         style="fill:#666666;fill-opacity:1;stroke-width:0.27813107"
+    <path
-         id="rect831"
+       id="primary-2"
-         width="142.59648"
+       data-name="primary"
-         height="143.05647"
+       d="m 1.5,6.425001 h 2 m -2,4 h 2 m -2,4 h 2"
-         x="36.912102"
+       style="fill:none;stroke:#efefef;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" />
-         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>
   </g>
 </svg>

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/"
+   fill="#000000"
-   xmlns:cc="http://creativecommons.org/ns#"
+   width="695"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   height="695.00006"
-   xmlns:svg="http://www.w3.org/2000/svg"
+   viewBox="0 0 20.85 20.850002"
-   xmlns="http://www.w3.org/2000/svg"
+   id="agenda-pencil"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   data-name="Line Color"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   class="icon line-color"
-   width="128.54926mm"
-   height="128.54977mm"
-   viewBox="0 0 128.54926 128.54977"
    version="1.1"
-   id="svg4543"
+   sodipodi:docname="favicon.svg"
-   inkscape:export-filename="/home/rknet/rkau2905/Bilder/favicon-32.png"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
-   inkscape:export-xdpi="6.3228416"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   inkscape:export-ydpi="6.3228416"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   inkscape:version="0.92.4 (unknown)"
+   xmlns="http://www.w3.org/2000/svg"
-   sodipodi:docname="geekdoc.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:pagecheckerboard="0"
-     inkscape:zoom="0.70710678"
+     inkscape:deskcolor="#d1d1d1"
-     inkscape:cx="216.85928"
-     inkscape:cy="202.61667"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
      showgrid="false"
-     inkscape:window-width="1600"
+     inkscape:zoom="0.3958404"
-     inkscape:window-height="844"
+     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-y="32"
-     inkscape:window-maximized="1" />
+     inkscape:window-maximized="1"
-  <metadata
+     inkscape:current-layer="agenda-pencil" />
-     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>
   <g
-     inkscape:label="Ebene 1"
+     id="g157"
-     inkscape:groupmode="layer"
+     transform="translate(0.06082953)">
-     id="layer1"
+    <path
-     transform="translate(-39.442039,-40.637613)">
+       id="secondary"
-    <g
+       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"
-       id="g5186"
+       style="fill:none;stroke:#f66b0e;stroke-width:2.55;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" />
-       transform="translate(1.0583346,1.851866)">
+    <path
-      <path
+       id="primary"
-         transform="scale(0.26458333)"
+       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"
-         id="path5105"
+       style="fill:none;stroke:#112b3c;stroke-width:2.76437;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" />
-         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"
+    <path
-         style="fill:#7dacda;fill-opacity:1;stroke-width:1.12989867"
+       id="primary-2"
-         inkscape:connector-curvature="0" />
+       data-name="primary"
-      <path
+       d="m 1.5,6.425001 h 2 m -2,4 h 2 m -2,4 h 2"
-         style="fill:#4186c9;fill-opacity:1;stroke-width:1.08338702"
+       style="fill:none;stroke:#112b3c;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" />
-         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>
   </g>
 </svg>

webpack.config.js

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