style: update docusaurus styles and images (#450)

[skip ci]
* chore: replace docusaurus logos with Zaakbrug logos

* style: update docusaurus colors to reflect zaakbrug

All text and buttons remain readable on both dark and light mode. Closes #404

---------

Co-authored-by: MLenterman <[email protected]>

docusaurus/docusaurus.config.ts

@@ -8,7 +8,7 @@ const projectName: String = 'zaakbrug';
 const config: Config = {
   title: 'ZaakBrug',
   tagline: '',
-  favicon: 'img/waf-logo-favicon-16x16.png',
+  favicon: 'img/zaakbrug-icon.png',
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
@@ -53,12 +53,12 @@ const config: Config = {
 
   themeConfig: {
     // Replace with your project's social card
-    image: 'img/waf-logo-192x192.png',
+    image: 'img/zaakbrug-icon.png',
     navbar: {
       title: 'ZaakBrug',
       logo: {
         alt: 'WeAreFrank',
-        src: 'img/waf-logo-192x192.png',
+        src: 'img/zaakbrug-icon.png',
       },
       items: [
         {

docusaurus/src/css/custom.css

@@ -6,35 +6,31 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #fdc300;
-  --ifm-color-primary-dark: #e4b000;
-  --ifm-color-primary-darker: #d7a600;
-  --ifm-color-primary-darkest: #b18900;
-  --ifm-color-primary-light: #ffca17;
-  --ifm-color-primary-lighter: #ffcd24;
-  --ifm-color-primary-lightest: #ffd54a;
+  --zaakbrug-color: rgb(0,255,194);
+  --zaakbrug-color-darker: rgb(0, 215, 143);
+  --ifm-color-primary: var(--zaakbrug-color-darker);
   --ifm-footer-background-color: #1e1e1e;
   --ifm-footer-color: var(--ifm-footer-link-color);
-  --ifm-footer-link-color: var(--ifm-color-white);
-  --ifm-footer-title-color: var(--ifm-color-white);
+  --ifm-footer-link-color: var(--zaakbrug-color);
+  --ifm-footer-title-color: var(--zaakbrug-color);
   --ifm-code-font-size: 95%;
   --ifm-hero-background-color: var(--ifm-color-primary-darkest);
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --ifm-link-hover-color: var(--zaakbrug-color  );
+  --ifm-button-color: var(--zaakbrug-color);
+  --ifm-toc-border-color: var(--zaakbrug-color);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #fdc300;
-  --ifm-color-primary-dark: #e4b000;
-  --ifm-color-primary-darker: #d7a600;
-  --ifm-color-primary-darkest: #b18900;
-  --ifm-color-primary-light: #ffca17;
-  --ifm-color-primary-lighter: #ffcd24;
-  --ifm-color-primary-lightest: #ffd54a;
+  --ifm-color-primary: var(--zaakbrug-color);
+  --zaakbrug-color-darker: rgb(0, 215, 143);
   --ifm-background-color: #1e1e1e;
-  --ifm-footer-background-color: #fdc300;
+  --ifm-footer-background-color: var(--zaakbrug-color);
   --ifm-footer-color: var(--ifm-footer-link-color);
   --ifm-footer-link-color: var(--ifm-color-black);
   --ifm-footer-title-color: var(--ifm-color-black);
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-link-hover-color: rgb(0, 168, 129);
+  --ifm-toc-border-color: var(--zaakbrug-color);
 }