Added greek pattern, edited colors, minor UI fixes

site/src/css/custom.css

@@ -4,21 +4,26 @@
  * work well for content-centric websites.
  */
 
+ /*@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Quicksand:[email protected]&display=swap");
+*/
+
 /* You can override the default Infima variables here. */
 :root {
+ /* --ifm-font-family-base: "Quicksand", sans-serif; */
+
   --ifm-background-color: #f1f6f8;
 
-  --ifm-color-primary: #3c647c;
-  --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: #326C85;
+  --ifm-color-primary-dark: #29586C;
+  --ifm-color-primary-darker: #275468;
+  --ifm-color-primary-darkest: #224859;
+  --ifm-color-primary-light: #97C3D8;
+  --ifm-color-primary-lighter: #A6CCDD;
+  --ifm-color-primary-lightest: #B5D4E3;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 
-  --ifm-footer-background-color: #3c647c;
+  --ifm-footer-background-color: #29586C;
   --ifm-footer-title-color: #fff;
   --ifm-footer-link-color: #ffffffaa;
   --ifm-footer-color:  #ffffffaa;
@@ -28,12 +33,12 @@
 
 /* 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: #6BA8C7;
+  --ifm-color-primary-dark: #5CA0C1;
+  --ifm-color-primary-darker: #4E97BC;
   --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary-lighter:#438DB1;
+  --ifm-color-primary-lighter: #A6CCDD;
+  --ifm-color-primary-lightest: #B5D4E3;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }

site/src/pages/index.module.css

@@ -1,14 +1,14 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
 .heroBanner {
-  background: var(--ifm-color-primary);
   padding: 4rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
+  background-image: url("/static/img/wave-pattern-flipped.svg"),url("/static/img/wave-pattern.svg"); 
+  background-repeat: repeat-x, repeat-x;
+  background-position: top, bottom;
+
+  background-size: 50px 50px; 
+
 }
 
 @media screen and (max-width: 996px) {

site/src/pages/index.tsx

@@ -21,9 +21,6 @@ function HomepageHeader() {
 
     return (
         <>
-         <div style={{width: "100%", display: "flex"}}>
-        {isDarkTheme ? <HeaderBorderTopDark style={{height: "auto", width: "inherit", marginBottom: "-1px"}} /> : <HeaderBorderTop style={{height: "auto", width: "inherit", marginBottom: "-1px"}}/>}
-        </div>
         <header className={clsx('hero hero--primary', styles.heroBanner)}>
             <div className="container">
                 <Heading as="h1" className="hero__title">
@@ -39,9 +36,6 @@ function HomepageHeader() {
                 </div>
             </div>
         </header>
-            <div style={{width: "100%", display: "flex"}}>
-                {isDarkTheme ? <HeaderBorderBottomDark style={{height: "auto", width: "inherit",  marginTop: "-1px"}} /> : <HeaderBorderBottom style={{height: "auto", width: "inherit",  marginTop: "-1px"}}/>}
-            </div>
         </>
     );
 }

site/src/theme/Footer/index.module.css

@@ -0,0 +1,14 @@
+
+.preFooter{
+    height: 50px;
+    background-color: transparent;
+
+    /* This fixes some overalp due to the bottom of the wave pattern not being perfectly straight*/
+    margin-bottom: -3px;
+
+    background-image: url("/static/img/wave-pattern.svg"); 
+    background-repeat: repeat-x;
+    background-position: bottom;
+
+    background-size: 50px 50px;
+}

site/src/theme/Footer/index.tsx

@@ -2,21 +2,17 @@ import React from 'react';
 import Footer from '@theme-original/Footer';
 import type FooterType from '@theme/Footer';
 import type {WrapperProps} from '@docusaurus/types';
-import { useColorMode } from '@docusaurus/theme-common';
+import styles from './index.module.css';
+import clsx from 'clsx';
 
-import Prefooter from '@site/static/img/prefooter.svg';
-import PrefooterDark from '@site/static/img/prefooter.svg';
 
 type Props = WrapperProps<typeof FooterType>;
 
 export default function FooterWrapper(props: Props): JSX.Element {
-  const { isDarkTheme } = useColorMode();  
   return (
-    <>
-      <div style={{width: "100%", display: "flex"}}>
-        {isDarkTheme ? <PrefooterDark style={{height: "auto", width: "inherit"}} /> : <Prefooter style={{height: "auto", width: "inherit"}}/>}
-      </div>
+    <div  className={clsx(styles.footerWrapper)}>
+      <div className={clsx(styles.preFooter)} />
       <Footer {...props} />
-    </>
+    </div>
   );
 }