Update style

Author: axelrindle

docs/docusaurus.config.js

@@ -142,7 +142,13 @@ const config = {
         ],
       },
       footer: {
-        style: 'dark',
+        style: 'light',
+        logo: {
+          alt: 'github-version-checker logo',
+          src: 'img/logo.svg',
+          href: '/',
+          height: 32,
+        },
         copyright: `Copyright © ${new Date().getFullYear()} Axel Rindle & Contributors. Built with Docusaurus.`,
       },
       prism: {

docs/src/components/Home/Header.tsx

@@ -15,7 +15,7 @@ export default function HomepageHeader() {
                 <Content />
                 <div className={styles.buttons}>
                     <Link
-                        className="button button--secondary button--lg"
+                        className="button button--info button--outline button--lg"
                         to="/docs/">
                         Jump right in 🤸‍♂️
                     </Link>

docs/src/components/Home/header.module.css

@@ -1,18 +1,15 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
 .heroBanner {
-  padding: 4rem 0;
+  padding: 8rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
+  color: white;
+  background-color: #5E1B82;
 }
 
 @media screen and (max-width: 996px) {
   .heroBanner {
-    padding: 2rem;
+    padding: 4rem .25rem;
   }
 }
 

docs/src/css/custom.css

@@ -4,17 +4,22 @@
  * work well for content-centric websites.
  */
 
-/* You can override the default Infima variables here. */
+@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Lato&display=swap');
+
 :root {
-  --ifm-color-primary: #134094;
-  --ifm-color-secondary: #6cc0ba;
+  --ifm-font-family-base: 'Lato', sans-serif;
+  --ifm-color-primary: #C457FF;
+  /* --ifm-color-secondary: #542344; */
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
+.hero__title,
+.navbar__title {
+    font-family: 'Audiowide', cursive;
+}
+
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #4269b1;
-  --ifm-color-secondary: #368F8B;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }