🐢 Made a start on the docs route

src/pages/docs.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Button from '../components/Button';
+
+import './docs.scss';
+
+import getColor from '../utils/ui-helpers';
+import IconShortcuts from '../../static/icons/features_shortcuts.svg';
+
+const DocsLinks = [
+  {
+    title: 'Deployment',
+    description: '',
+    link: '',
+    icon: (<IconShortcuts />),
+  },
+  {
+    title: 'Configuring',
+    description: '',
+    link: '',
+    icon: (<IconShortcuts />),
+  },
+  {
+    title: 'Management',
+    description: '',
+    link: '',
+    icon: (<IconShortcuts />),
+  },
+  {
+    title: 'Troubleshooting',
+    description: '',
+    link: '',
+    icon: (<IconShortcuts />),
+  },
+];
+
+function DocsLink({ title, description, icon, link, index }) {
+  const color = getColor(index);
+  return (
+    <Button to={link} className="docs-link" color={color}>
+      <div className="docs-icon">{icon}</div>
+      <div className="docs-text">
+        <p>{title}</p>
+        <p>{description}</p>
+      </div>
+    </Button>
+  );
+}
+
+export default function Docs() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout
+      title={siteConfig.title}
+      description="Documentation | Dashy, a self-hosted dashboard for your homelab">
+      <main className="docs">
+        <h1>Docs</h1>
+        <div className="docs-contents">
+          {DocsLinks.map((props, index) => (
+            <DocsLink key={index} index={index} {...props} />
+          )
+          )}
+        </div>
+      </main>
+    </Layout>
+  );
+}

src/pages/docs.scss

@@ -0,0 +1,26 @@
+
+main.docs {
+  max-width: 1000px;
+  margin: 1rem auto;
+  padding: 1rem;
+
+  div.docs-contents {
+    color: var(--text-color);
+    a {
+      max-width: 5rem;
+      padding: 0.25rem 0.5rem;
+      p {
+        margin: 0;
+      }
+    }
+    a.docs-link {
+      max-width: 5rem;
+      p {
+        color: var(--text-color);
+      }
+      .docs-icon svg {
+        width: 2rem;
+      }
+    }
+  }
+}

src/styles/Colors.scss

@@ -2,7 +2,7 @@
 :root {
   /* Greyscale */
   --bright-white: #ffffff;
-  --white: #d8d8d8;
+  --white: #e5e5e5;
   --pale-grey: #e9e9e8;
   --mid-grey: #a9a9a9;
   --dark-grey: ##18191a;
@@ -22,13 +22,13 @@ html { /* Light Theme */
   --primary: #54bff7;
   --background: var(--white);
   --text-color: var(--black);
-  --hero-background: var(--pale-grey);
+  --hero-background: var(--white);
   --kinda-transparent: #ffffffd9;
   --feature-img-shadow: 4px 4px 6px #a9a9a980, -2px -2px 4px rgb(0 0 0 / 40%);
 }
 
 html[data-theme='dark'] { /* Dark Theme */
-  --primary: #a324fb;
+  --primary: #202020;
   --background: var(--dark-grey);
   --text-color: var(--white);
   --hero-background: var(--black);

src/styles/custom.scss

@@ -16,7 +16,7 @@
   --ifm-color-primary-lightest: rgb(146, 224, 208);
   --ifm-code-font-size: 95%;
   --ifm-navbar-background-color: var(--primary);
-  --ifm-navbar-link-color: var(--black);
+  --ifm-navbar-link-color: var(--text-color);
 }
 
 .hero {