🎨 Use Hackney colour scheme

Author: spikeheap

src/css/custom.css

@@ -5,26 +5,32 @@
  */
 
 /* You can override the default Infima variables here. */
+
+/**
+ * We define Hackney's corporate colour and then calculate darker and lighter 
+ * variants by mixing the colour with white and black using color-mix
+ */
 :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;
+  --hackney-green: #00513F;
+  --ifm-color-primary: var(--hackney-green);
+  --ifm-color-primary-dark: color-mix(in srgb, var(--hackney-green) 80%, black);
+  --ifm-color-primary-darker: color-mix(in srgb, var(--hackney-green) 60%, black);
+  --ifm-color-primary-darkest: color-mix(in srgb, var(--hackney-green) 40%, black);
+  --ifm-color-primary-light: color-mix(in srgb, var(--hackney-green) 80%, white);
+  --ifm-color-primary-lighter: color-mix(in srgb, var(--hackney-green) 60%, white);
+  --ifm-color-primary-lightest: color-mix(in srgb, var(--hackney-green) 40%, white);
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
-/* For readability concerns, you should choose a lighter palette in dark mode. */
+/* For readability concerns, we use 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: color-mix(in srgb, var(--hackney-green) 50%, white);
+  --ifm-color-primary-dark: color-mix(in srgb, var(--hackney-green) 60%, white);
+  --ifm-color-primary-darker: color-mix(in srgb, var(--hackney-green) 70%, white);
+  --ifm-color-primary-darkest: color-mix(in srgb, var(--hackney-green) 80%, white);
+  --ifm-color-primary-light: color-mix(in srgb, var(--hackney-green) 40%, white);
+  --ifm-color-primary-lighter: color-mix(in srgb, var(--hackney-green) 30%, white);
+  --ifm-color-primary-lightest: color-mix(in srgb, var(--hackney-green) 20%, white);
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

src/pages/index.js

@@ -15,6 +15,7 @@ function HomepageHeader() {
         <Heading as="h1" className="hero__title">
           {siteConfig.title}
         </Heading>
+        <img src="img/logoHackney.png" alt="Hackney logo"></img>
         <p className="hero__subtitle">{siteConfig.tagline}</p>
         <div className={styles.buttons}>
           <Link