From 9233078d9e6341dc9e7746c2d6edaac95b737f16 Mon Sep 17 00:00:00 2001
From: Bill Chirico <bill@chirico.dev>
Date: Wed, 8 Nov 2023 06:07:29 -0500
Subject: [PATCH] Add color pallet and logo svg

---
 docusaurus.config.ts       |  5 ++-
 src/css/custom.scss        | 75 +++++++++++++++++++++++++++++++-------
 static/svg/Apollo-Logo.svg | 12 ++++++
 3 files changed, 76 insertions(+), 16 deletions(-)
 create mode 100644 static/svg/Apollo-Logo.svg

diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index c64bad0..f069713 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -59,8 +59,9 @@ const config: Config = {
     navbar: {
       title: 'Volvox.Apollo Docs',
       logo: {
-        alt: 'olvox.Apollo Logo',
-        src: 'img/Apollo-Logo.png',
+        alt: 'Volvox.Apollo Logo',
+        src: 'svg/Apollo-Logo.svg',
+        className: 'logo',
       },
       items: [
         {
diff --git a/src/css/custom.scss b/src/css/custom.scss
index ea09e0f..63e3c1d 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -8,13 +8,13 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #218AFF;
+  --ifm-color-primary-dark: #1D7BE3;
+  --ifm-color-primary-darker: #1A6BC6;
+  --ifm-color-primary-darkest: #165CAA;
+  --ifm-color-primary-light: #3A97FF;
+  --ifm-color-primary-lighter: #52A4FF;
+  --ifm-color-primary-lightest: #6BB1FF;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
   --ifm-font-family-base: 'JetBrains Mono';
@@ -22,13 +22,13 @@
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #218AFF;
+  --ifm-color-primary-dark: #1D7BE3;
+  --ifm-color-primary-darker: #1A6BC6;
+  --ifm-color-primary-darkest: #165CAA;
+  --ifm-color-primary-light: #3A97FF;
+  --ifm-color-primary-lighter: #52A4FF;
+  --ifm-color-primary-lightest: #6BB1FF;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
@@ -170,6 +170,53 @@ html[data-theme='light'] .twitter-link {
   }
 }
 
+
+// Logo Dark Icon
+html[data-theme='dark'] .logo {
+  align-items: center;
+  display: flex;
+
+  &:before {
+    align-self: center;
+    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyODEuMzMzIiBoZWlnaHQ9IjI5NiIgdmVyc2lvbj0iMS4wIiB2aWV3Qm94PSIwIDAgMjExIDIyMiI+PHBhdGggZD0iTTMxLjMgMS41Yy03LjkgMi4yLTEzLjEgNS4yLTE4LjkgMTAuOS0xNSAxNS4xLTE2LjMgMzcuNC0zIDU1LjMgMi4zIDMuMiAxMCAxMi4xIDE3LjEgMTkuOEM1Mi43IDExNiA1NiAxMjMuMyA2MCAxNjAuM2MzLjMgMzAuNiA2IDM5LjMgMTQuOCA0OC41IDIxLjggMjIuOSA1OSAxNC40IDY5LjItMTUuOSAxLjgtNS4zIDIuMS03LjkgMS43LTE0LjctLjgtMTQuMi01LjMtMjEuNC0yOS43LTQ3LjctMjEuOC0yMy42LTI1LjktMzMuMi0zMC03MC0yLjUtMjMuMS00LjgtMzIuOS05LjMtNDAuM0M2Ny40IDQuNiA0OC42LTMuMSAzMS4zIDEuNXoiLz48cGF0aCBkPSJNMTU5IDEuNGMtNi44IDEuOS0xMi44IDUuMy0xOCAxMC4yLTkuNCA4LjgtMTIuOCAxOC45LTE2IDQ4LjItMy4xIDI4LjQtNS4zIDM2LjctMTMuMSA0OS42LTQuMSA2LjgtNC4xIDYuOC0yLjEgOC45IDEgMS4yIDcuOCA4LjcgMTUgMTYuNSAxNS4xIDE2LjcgMTkuNiAyMi45IDIyLjcgMzEuM2wyLjIgNi4yIDEuMi0xMi40YzMuNS0zNC45IDcuOC00NC4yIDMzLjEtNzEuOSAxNS41LTE2LjkgMjEuMy0yNC44IDI0LjItMzIuMyA1LjUtMTQuNCAyLTMxLjEtOC44LTQyLjctMTAtMTAuNy0yNi41LTE1LjQtNDAuNC0xMS42eiIvPjwvc3ZnPg==") 0 0/contain;
+    content: '';
+    display: inline-flex;
+    height: 24px;
+    width: 24px;
+    margin-right: 0.5rem;
+    color: var(--ifm-navbar-link-color);
+  }
+
+  &:hover {
+    &:before {
+      background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyODEuMzMzIiBoZWlnaHQ9IjI5NiIgdmVyc2lvbj0iMS4wIiB2aWV3Qm94PSIwIDAgMjExIDIyMiI+PHBhdGggZD0iTTMxLjMgMS41Yy03LjkgMi4yLTEzLjEgNS4yLTE4LjkgMTAuOS0xNSAxNS4xLTE2LjMgMzcuNC0zIDU1LjMgMi4zIDMuMiAxMCAxMi4xIDE3LjEgMTkuOEM1Mi43IDExNiA1NiAxMjMuMyA2MCAxNjAuM2MzLjMgMzAuNiA2IDM5LjMgMTQuOCA0OC41IDIxLjggMjIuOSA1OSAxNC40IDY5LjItMTUuOSAxLjgtNS4zIDIuMS03LjkgMS43LTE0LjctLjgtMTQuMi01LjMtMjEuNC0yOS43LTQ3LjctMjEuOC0yMy42LTI1LjktMzMuMi0zMC03MC0yLjUtMjMuMS00LjgtMzIuOS05LjMtNDAuM0M2Ny40IDQuNiA0OC42LTMuMSAzMS4zIDEuNXoiLz48cGF0aCBkPSJNMTU5IDEuNGMtNi44IDEuOS0xMi44IDUuMy0xOCAxMC4yLTkuNCA4LjgtMTIuOCAxOC45LTE2IDQ4LjItMy4xIDI4LjQtNS4zIDM2LjctMTMuMSA0OS42LTQuMSA2LjgtNC4xIDYuOC0yLjEgOC45IDEgMS4yIDcuOCA4LjcgMTUgMTYuNSAxNS4xIDE2LjcgMTkuNiAyMi45IDIyLjcgMzEuM2wyLjIgNi4yIDEuMi0xMi40YzMuNS0zNC45IDcuOC00NC4yIDMzLjEtNzEuOSAxNS41LTE2LjkgMjEuMy0yNC44IDI0LjItMzIuMyA1LjUtMTQuNCAyLTMxLjEtOC44LTQyLjctMTAtMTAuNy0yNi41LTE1LjQtNDAuNC0xMS42eiIvPjwvc3ZnPg==") 0 0/contain;
+    }
+  }
+}
+
+// Logo Light Icon
+html[data-theme='light'] .logo {
+  align-items: center;
+  display: flex;
+
+  &:before {
+    align-self: center;
+    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyODEuMzMzIiBoZWlnaHQ9IjI5NiIgdmVyc2lvbj0iMS4wIiB2aWV3Qm94PSIwIDAgMjExIDIyMiI+PHBhdGggZD0iTTMxLjMgMS41Yy03LjkgMi4yLTEzLjEgNS4yLTE4LjkgMTAuOS0xNSAxNS4xLTE2LjMgMzcuNC0zIDU1LjMgMi4zIDMuMiAxMCAxMi4xIDE3LjEgMTkuOEM1Mi43IDExNiA1NiAxMjMuMyA2MCAxNjAuM2MzLjMgMzAuNiA2IDM5LjMgMTQuOCA0OC41IDIxLjggMjIuOSA1OSAxNC40IDY5LjItMTUuOSAxLjgtNS4zIDIuMS03LjkgMS43LTE0LjctLjgtMTQuMi01LjMtMjEuNC0yOS43LTQ3LjctMjEuOC0yMy42LTI1LjktMzMuMi0zMC03MC0yLjUtMjMuMS00LjgtMzIuOS05LjMtNDAuM0M2Ny40IDQuNiA0OC42LTMuMSAzMS4zIDEuNXoiLz48cGF0aCBkPSJNMTU5IDEuNGMtNi44IDEuOS0xMi44IDUuMy0xOCAxMC4yLTkuNCA4LjgtMTIuOCAxOC45LTE2IDQ4LjItMy4xIDI4LjQtNS4zIDM2LjctMTMuMSA0OS42LTQuMSA2LjgtNC4xIDYuOC0yLjEgOC45IDEgMS4yIDcuOCA4LjcgMTUgMTYuNSAxNS4xIDE2LjcgMTkuNiAyMi45IDIyLjcgMzEuM2wyLjIgNi4yIDEuMi0xMi40YzMuNS0zNC45IDcuOC00NC4yIDMzLjEtNzEuOSAxNS41LTE2LjkgMjEuMy0yNC44IDI0LjItMzIuMyA1LjUtMTQuNCAyLTMxLjEtOC44LTQyLjctMTAtMTAuNy0yNi41LTE1LjQtNDAuNC0xMS42eiIvPjwvc3ZnPg==") 0 0/contain;
+    content: '';
+    display: inline-flex;
+    height: 24px;
+    width: 24px;
+    margin-right: 0.5rem;
+    color: var(--ifm-navbar-link-color);
+  }
+
+  &:hover {
+    &:before {
+      background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyODEuMzMzIiBoZWlnaHQ9IjI5NiIgdmVyc2lvbj0iMS4wIiB2aWV3Qm94PSIwIDAgMjExIDIyMiI+PHBhdGggZD0iTTMxLjMgMS41Yy03LjkgMi4yLTEzLjEgNS4yLTE4LjkgMTAuOS0xNSAxNS4xLTE2LjMgMzcuNC0zIDU1LjMgMi4zIDMuMiAxMCAxMi4xIDE3LjEgMTkuOEM1Mi43IDExNiA1NiAxMjMuMyA2MCAxNjAuM2MzLjMgMzAuNiA2IDM5LjMgMTQuOCA0OC41IDIxLjggMjIuOSA1OSAxNC40IDY5LjItMTUuOSAxLjgtNS4zIDIuMS03LjkgMS43LTE0LjctLjgtMTQuMi01LjMtMjEuNC0yOS43LTQ3LjctMjEuOC0yMy42LTI1LjktMzMuMi0zMC03MC0yLjUtMjMuMS00LjgtMzIuOS05LjMtNDAuM0M2Ny40IDQuNiA0OC42LTMuMSAzMS4zIDEuNXoiLz48cGF0aCBkPSJNMTU5IDEuNGMtNi44IDEuOS0xMi44IDUuMy0xOCAxMC4yLTkuNCA4LjgtMTIuOCAxOC45LTE2IDQ4LjItMy4xIDI4LjQtNS4zIDM2LjctMTMuMSA0OS42LTQuMSA2LjgtNC4xIDYuOC0yLjEgOC45IDEgMS4yIDcuOCA4LjcgMTUgMTYuNSAxNS4xIDE2LjcgMTkuNiAyMi45IDIyLjcgMzEuM2wyLjIgNi4yIDEuMi0xMi40YzMuNS0zNC45IDcuOC00NC4yIDMzLjEtNzEuOSAxNS41LTE2LjkgMjEuMy0yNC44IDI0LjItMzIuMyA1LjUtMTQuNCAyLTMxLjEtOC44LTQyLjctMTAtMTAuNy0yNi41LTE1LjQtNDAuNC0xMS42eiIvPjwvc3ZnPg==") 0 0/contain;
+    }
+  }
+}
+
 // Footer
 .designedBy {
   display: inline-flex;
diff --git a/static/svg/Apollo-Logo.svg b/static/svg/Apollo-Logo.svg
new file mode 100644
index 0000000..cd410a3
--- /dev/null
+++ b/static/svg/Apollo-Logo.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="281.333" height="296" version="1.0" viewBox="0 0 211 222">
+    <style>
+        path {
+            fill: black;
+        }
+        @media (prefers-color-scheme: dark) {
+            path { fill: white; }
+        }
+    </style>
+    <path d="M31.3 1.5c-7.9 2.2-13.1 5.2-18.9 10.9-15 15.1-16.3 37.4-3 55.3 2.3 3.2 10 12.1 17.1 19.8C52.7 116 56 123.3 60 160.3c3.3 30.6 6 39.3 14.8 48.5 21.8 22.9 59 14.4 69.2-15.9 1.8-5.3 2.1-7.9 1.7-14.7-.8-14.2-5.3-21.4-29.7-47.7-21.8-23.6-25.9-33.2-30-70-2.5-23.1-4.8-32.9-9.3-40.3C67.4 4.6 48.6-3.1 31.3 1.5z"/>
+    <path d="M159 1.4c-6.8 1.9-12.8 5.3-18 10.2-9.4 8.8-12.8 18.9-16 48.2-3.1 28.4-5.3 36.7-13.1 49.6-4.1 6.8-4.1 6.8-2.1 8.9 1 1.2 7.8 8.7 15 16.5 15.1 16.7 19.6 22.9 22.7 31.3l2.2 6.2 1.2-12.4c3.5-34.9 7.8-44.2 33.1-71.9 15.5-16.9 21.3-24.8 24.2-32.3 5.5-14.4 2-31.1-8.8-42.7-10-10.7-26.5-15.4-40.4-11.6z"/>
+</svg>
\ No newline at end of file