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

2023-04-21 22:39:18 +02:00 · 2023-04-21 22:39:18 +02:00 · 81b2674778
parent 457260033f
commit 81b2674778
19 changed files with 125 additions and 163 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:
@ -288,6 +288,6 @@ depends_on:

 ---
 kind: signature
-hmac: 8cd0be1e342f0c4630d15fff1b5ee18451b3ac678be2ddbad54443f60c99ef70
+hmac: b0245c09ecaa41a3fbbb9b085f4f08ad4b8997be4c932769a7791d4f7a94ee6b

 ...
--- 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/posts/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
      # FIXME: https://github.com/GoogleChrome/lighthouse/issues/11460
--- a/README.md
+++ b/README.md
@ -6,8 +6,6 @@
 [![GitHub contributors](https://img.shields.io/github/contributors/thegeeklab/hugo-geekblog)](https://github.com/thegeeklab/hugo-geekblog/graphs/contributors)
 [![License: MIT](https://img.shields.io/github/license/thegeeklab/hugo-geekblog)](https://github.com/thegeeklab/hugo-geekblog/blob/main/LICENSE)

-> **Important:** We have switched to 'main' as default branch. The 'master' branch is no longer maintained and will be removed after June 30, 2021!
-
 Geekblog is a simple Hugo theme for personal blogs. It is intentionally designed as a fast and lean theme and may not fit the requirements of complex projects. If a more feature-complete theme is required there are a lot of got alternatives out there. You can find a demo and the full documentation at [https://hugo-geekblog.geekdocs.de](https://hugo-geekblog.geekdocs.de).

 ![Desktop and mobile preview](https://github.com/thegeeklab/hugo-geekblog/blob/main/images/readme.png)
--- a/exampleSite/content/posts/features/dark-mode/images/geekblog-dark.png
+++ b/exampleSite/content/posts/features/dark-mode/images/geekblog-dark.png
--- a/exampleSite/content/posts/features/theming/images/theme-example.png
+++ b/exampleSite/content/posts/features/theming/images/theme-example.png
--- a/exampleSite/content/posts/features/theming/index.md
+++ b/exampleSite/content/posts/features/theming/index.md
@ -14,7 +14,7 @@ tags:

 If you want to customize the theme's color scheme to give it your individual touch, you are only a few lines of CSS away. Generally, you need to override the default settings. The easiest way to do this is to create a file named `static/custom.css` right at the root of your site.

-All the necessary CSS customization properties are listed below. If you want to customize elements that don't use these properties, you can always look up the class name and override it directly. For inspiration, you can also take a look at [https://www.color-hex.com/color-palettes/](https://www.color-hex.com/). In this simple example, we'll use the [_Beach_](https://www.color-hex.com/color-palette/895) color palette.
+All the necessary CSS customization properties are listed below. If you want to customize elements that don't use these properties, you can always look up the class name and override it directly. For inspiration, you can also take a look at [https://www.color-hex.com](https://www.color-hex.com/color-palettes/). In this simple example, we'll use the [_Beach_](https://www.color-hex.com/color-palette/895) color palette.

 [![Beach Color Palette](images/theme-example.png)](images/theme-example.png)

@ -59,9 +59,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/content/posts/usage/getting-started.md
+++ b/exampleSite/content/posts/usage/getting-started.md
@ -67,9 +67,9 @@ To prepare your new site environment just a few steps are required:
   cd demosite
   ```

-3. Install the Geekblog theme from a [release bundle](#option-1-download-pre-build-release-bundle) (recommended) or form [Git branch](#option-2-clone-the-github-repository).
+3. Install the Geekblog theme from a [release bundle](#option-1-download-pre-build-release-bundle) (recommended) or from [Git branch](#option-2-clone-the-github-repository).

-4. Create the minimal required Hugo configuration `config.toml`. For all configuration options see [here](/posts/usage/configuration/#site-configuration).
+4. Create the minimal required Hugo configuration `config.toml`. For all configuration options take a look at the [configuration](/posts/usage/configuration/) page.

   ```Toml
   baseURL = "http://localhost"
--- a/exampleSite/static/custom.css.example
+++ b/exampleSite/static/custom.css.example
@ -26,7 +26,7 @@
  --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;
@ -37,7 +37,7 @@

  --control-icons: #b2bac1;

-  --footer-background: #2f333e;
+  --footer-background: #112b3c;
  --footer-font-color: #ffffff;
  --footer-link-color: #ffcc5c;
  --footer-link-color-visited: #ffcc5c;
@ -63,7 +63,7 @@
    --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;
@ -74,7 +74,7 @@

    --control-icons: #b2bac1;

-    --footer-background: #2f333e;
+    --footer-background: #112b3c;
    --footer-font-color: #ffffff;
    --footer-link-color: #ffcc5c;
    --footer-link-color-visited: #ffcc5c;
@ -97,7 +97,7 @@
  --link-color: #7ac29e;
  --link-color-visited: #c27a9e;

-  --code-background: #2f353a;
+  --code-background: #f5f6f8;
  --code-accent-color: #262b2f;
  --code-accent-color-lite: #2b3035;
  --code-font-color: #b9b9b9;
@ -113,7 +113,7 @@

  --control-icons: #b2bac1;

-  --footer-background: #2f333e;
+  --footer-background: #112b3c;
  --footer-font-color: #ffffff;
  --footer-link-color: #ffcc5c;
  --footer-link-color-visited: #ffcc5c;
@ -134,7 +134,7 @@
    --link-color: #7ac29e;
    --link-color-visited: #c27a9e;

-    --code-background: #2f353a;
+    --code-background: #f5f6f8;
    --code-accent-color: #262b2f;
    --code-accent-color-lite: #2b3035;
    --code-font-color: #b9b9b9;
@ -150,7 +150,7 @@

    --control-icons: #b2bac1;

-    --footer-background: #2f333e;
+    --footer-background: #112b3c;
    --footer-font-color: #ffffff;
    --footer-link-color: #ffcc5c;
    --footer-link-color-visited: #ffcc5c;
--- a/exampleSite/static/socialmedia2.png
+++ b/exampleSite/static/socialmedia2.png
--- 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
@ -174,7 +174,7 @@ img {
  width: 100%;
  max-width: $container-max-width;
  margin: 0 auto;
-  padding: $padding-16;
+  padding: $padding-20;
 }

 svg.gblog-icon {
@ -503,16 +503,16 @@ svg.gblog-icon {
  }

  &__link {
-    color: var(--link-color-footer);
+    color: var(--footer-link-color);

    &:hover,
    &:visited:hover {
-      background: var(--link-color-footer);
+      background: var(--footer-link-color);
      color: $body-font-color;
    }

    &:visited {
-      color: var(--link-color-footer);
+      color: var(--footer-link-color);
    }
  }
 }
@ -578,6 +578,10 @@ svg.gblog-icon {
 .gblog-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/_color_mode.scss
+++ b/src/sass/_color_mode.scss
@ -12,7 +12,6 @@

  --link-color: #{$link-color};
  --link-color-visited: #{$link-color-visited};
-  --link-color-footer: #{$link-color-footer};

  --hint-link-color: #{$link-color};
  --hint-link-color-visited: #{$link-color-visited};
@ -55,7 +54,6 @@

  --link-color: #{$link-color-dark};
  --link-color-visited: #{$link-color-visited-dark};
-  --link-color-footer: #{$link-color-footer};

  --hint-link-color: #{$link-color};
  --hint-link-color-visited: #{$link-color-visited};
--- a/src/sass/_defaults.scss
+++ b/src/sass/_defaults.scss
@ -2,7 +2,9 @@
 $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;
 $padding-32: 2rem !default;
 $padding-64: 4rem !default;
@ -40,7 +42,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;
@ -50,21 +52,20 @@ $body-min-width: 20rem !default;
 $code-font-color: rgba(95, 95, 95, 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: 60rem !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: lighten($gray-200, 4) !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: 16rem !default;
--- a/src/sass/_markdown.scss
+++ b/src/sass/_markdown.scss
@ -1,5 +1,5 @@
 .gblog-markdown {
-  line-height: $padding-24;
+  line-height: 1.6rem;

  h1,
  h2,
--- a/src/static/brand.svg
+++ b/src/static/brand.svg
@ -1,72 +1,57 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- 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"
-   inkscape:export-ydpi="6.3200002"
-   inkscape:export-xdpi="6.3200002"
-   inkscape:export-filename="/home/rknet/rkau2905/Bilder/geeklab-favicon-32.png"
-   sodipodi:docname="geeklab_invert.svg"
-   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
-   id="svg8"
+   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"
-   viewBox="0 0 128.54926 128.54977"
-   height="128.54977mm"
-   width="128.54926mm">
+   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="defs2" />
+     id="defs1499" />
  <sodipodi:namedview
-     inkscape:document-rotation="0"
-     inkscape:window-maximized="1"
-     inkscape:window-y="27"
-     inkscape:window-x="0"
-     inkscape:window-height="845"
-     inkscape:window-width="1600"
-     showguides="true"
-     inkscape:snap-text-baseline="false"
-     showgrid="false"
-     inkscape:current-layer="layer1"
-     inkscape:document-units="mm"
-     inkscape:cy="276.14727"
-     inkscape:cx="224.41157"
-     inkscape:zoom="0.9556962"
-     inkscape:pageshadow="2"
-     inkscape:pageopacity="0.0"
-     borderopacity="1.0"
-     bordercolor="#666666"
+     id="namedview1497"
     pagecolor="#ffffff"
-     id="base">
-    <inkscape:grid
-       originy="-126.48947"
-       originx="-33.356623"
-       id="grid817"
-       type="xygrid" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata5">
-    <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>
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     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="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="agenda-pencil" />
  <g
-     transform="translate(-33.356621,-41.960747)"
-     id="layer1"
-     inkscape:groupmode="layer"
-     inkscape:label="Ebene 1">
+     id="g157"
+     transform="translate(0.06082949)">
    <path
-       inkscape:connector-curvature="0"
-       id="circle923"
-       d="M 97.631249,42.025425 A 64.609326,64.21017 0 0 0 33.022157,106.23536 64.609326,64.21017 0 0 0 97.631249,170.44584 64.609326,64.21017 0 0 0 162.24034,106.23536 64.609326,64.21017 0 0 0 97.631249,42.025425 Z m -9.264543,18.173944 h 18.529084 a 9.2644455,9.2072099 0 0 1 9.26454,9.207307 v 4.603384 a 4.6322228,4.603605 0 0 1 -4.63254,4.603922 v 8.332397 l 25.47709,44.010511 c 1.48237,2.16379 2.31654,4.7416 2.31654,7.50378 a 13.896668,13.810815 0 0 1 -13.89708,13.81069 H 69.838161 A 13.896668,13.810815 0 0 1 55.941077,138.46067 c 0,-2.76218 0.834138,-5.33999 2.316542,-7.50378 L 83.734706,86.946379 V 78.613982 A 4.6322228,4.603605 0 0 1 79.102163,74.01006 v -4.603384 a 9.2644455,9.2072099 0 0 1 9.264543,-9.207307 z m 4.632001,9.207307 V 89.432203 L 66.03938,135.83647 c -0.509649,0.736 -0.83376,1.6566 -0.83376,2.6242 a 4.6322228,4.603605 0 0 0 4.632541,4.60338 h 55.586179 a 4.6322228,4.603605 0 0 0 4.63254,-4.60338 c 0,-0.96741 -0.32412,-1.88767 -0.83376,-2.6242 L 102.26325,89.432203 V 69.406676 Z m 6.948542,36.828684 a 2.3161114,2.3018025 0 0 1 2.316001,2.30169 2.3161114,2.3018025 0 0 1 -2.316001,2.3017 2.3161114,2.3018025 0 0 1 -2.316,-2.3017 2.3161114,2.3018025 0 0 1 2.316,-2.30169 z m -9.773792,6.39898 12.089793,12.01564 6.20742,-6.16908 8.94003,15.37638 H 77.851794 Z"
-       style="fill:#ffffff;fill-opacity:1;stroke-width:1.3164" />
+       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,80 +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="svg8"
-   inkscape:version="0.92.4 (unknown)"
-   sodipodi:docname="geeklab.svg"
-   inkscape:export-filename="/home/rknet/rkau2905/Bilder/geeklab-favicon-32.png"
-   inkscape:export-xdpi="6.3200002"
-   inkscape:export-ydpi="6.3200002">
+   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="defs2" />
+     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="67.90943"
-     inkscape:cy="149.84628"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
     showgrid="false"
-     inkscape:snap-text-baseline="false"
-     showguides="true"
-     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">
-    <inkscape:grid
-       type="xygrid"
-       id="grid817"
-       originx="-33.356623"
-       originy="-126.48947" />
-  </sodipodi:namedview>
-  <metadata
-     id="metadata5">
-    <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 />
-      </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(-33.356621,-41.960747)">
+     id="g157"
+     transform="translate(0.06082953)">
    <path
-       style="fill:#7dacda;fill-opacity:1;stroke-width:4.96496391"
-       d="M 369,158.5918 A 242.92856,242.92856 0 0 0 126.07227,401.51953 242.92856,242.92856 0 0 0 369,644.44922 242.92856,242.92856 0 0 0 611.92773,401.51953 242.92856,242.92856 0 0 0 369,158.5918 Z m 0,10 A 232.92857,232.92857 0 0 1 601.92773,401.51953 232.92857,232.92857 0 0 1 369,634.44922 232.92857,232.92857 0 0 1 136.07227,401.51953 232.92857,232.92857 0 0 1 369,168.5918 Z"
-       transform="scale(0.26458333)"
-       id="path10"
-       inkscape:connector-curvature="0" />
+       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
-       style="fill:#4186c9;fill-opacity:1;stroke-width:4.76058388"
-       d="M 369,168.5918 A 232.92857,232.92857 0 0 0 136.07227,401.51953 232.92857,232.92857 0 0 0 369,634.44922 232.92857,232.92857 0 0 0 601.92773,401.51953 232.92857,232.92857 0 0 0 369,168.5918 Z m -33.40039,65.92773 h 66.80078 a 33.40004,33.40004 0 0 1 33.40039,33.40039 v 16.69922 a 16.70002,16.70002 0 0 1 -16.70117,16.70117 v 30.22657 l 91.84961,159.65234 c 5.34421,7.84936 8.35156,17.20065 8.35156,27.2207 a 50.10006,50.10006 0 0 1 -50.10156,50.09961 H 268.80078 a 50.10006,50.10006 0 0 1 -50.10156,-50.09961 c 0,-10.02005 3.00722,-19.37134 8.35156,-27.2207 l 91.84961,-159.65234 v -30.22657 a 16.70002,16.70002 0 0 1 -16.70117,-16.70117 v -16.69922 a 33.40004,33.40004 0 0 1 33.40039,-33.40039 z m 16.69922,33.40039 v 72.64453 l -97.19336,168.33594 c -1.83738,2.6699 -3.00586,6.00948 -3.00586,9.51953 a 16.70002,16.70002 0 0 0 16.70117,16.69922 h 200.39844 a 16.70002,16.70002 0 0 0 16.70117,-16.69922 c 0,-3.50937 -1.16848,-6.84771 -3.00586,-9.51953 L 385.69922,340.56445 v -72.64453 z m 25.05078,133.59961 a 8.3500101,8.3500101 0 0 1 8.34961,8.34961 8.3500101,8.3500101 0 0 1 -8.34961,8.34961 8.3500101,8.3500101 0 0 1 -8.34961,-8.34961 8.3500101,8.3500101 0 0 1 8.34961,-8.34961 z m -35.23633,23.21289 43.58594,43.58789 22.3789,-22.3789 32.23047,55.77929 H 297.69141 Z"
-       id="circle923"
-       transform="scale(0.26458333)"
-       inkscape:connector-curvature="0" />
+       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
@ -59,8 +59,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 },