diff --git a/site/docusaurus.config.ts b/site/docusaurus.config.ts
index 63621db..5144764 100644
--- a/site/docusaurus.config.ts
+++ b/site/docusaurus.config.ts
@@ -83,7 +83,6 @@ const config: Config = {
],
},
footer: {
- style: 'dark',
links: [
{
title: 'Docs',
diff --git a/site/src/css/custom.css b/site/src/css/custom.css
index 2bc6a4c..dcbbbf7 100644
--- a/site/src/css/custom.css
+++ b/site/src/css/custom.css
@@ -4,27 +4,41 @@
* 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:wght@300..700&display=swap");
+*/
+
/* 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-font-family-base: "Quicksand", sans-serif; */
+
+ --ifm-background-color: #f1f6f8;
+
+ --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: #29586C;
+ --ifm-footer-title-color: #fff;
+ --ifm-footer-link-color: #ffffffaa;
+ --ifm-footer-color: #ffffffaa;
+
+ --ifm-footer-link-hover-color: #ffffffdd;
}
/* 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);
}
diff --git a/site/src/pages/index.module.css b/site/src/pages/index.module.css
index 14337c2..2dd1ba9 100644
--- a/site/src/pages/index.module.css
+++ b/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: #4391B2;
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) {
diff --git a/site/src/pages/index.tsx b/site/src/pages/index.tsx
index b9509fc..9653b3e 100644
--- a/site/src/pages/index.tsx
+++ b/site/src/pages/index.tsx
@@ -4,12 +4,23 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import HomepageFeatures from '@site/src/components/HomepageFeatures';
import Heading from '@theme/Heading';
+import { useColorMode } from '@docusaurus/theme-common';
+
import styles from './index.module.css';
+import HeaderBorderTop from '@site/static/img/hero-border-top.svg';
+import HeaderBorderBottom from '@site/static/img/hero-border-bottom.svg';
+
+import HeaderBorderTopDark from '@site/static/img/hero-border-top.svg';
+import HeaderBorderBottomDark from '@site/static/img/hero-border-bottom.svg';
+
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
+ const { isDarkTheme } = useColorMode();
+
return (
+ <>
+ >
);
}
diff --git a/site/src/theme/Footer/index.module.css b/site/src/theme/Footer/index.module.css
new file mode 100644
index 0000000..35b4b89
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/site/src/theme/Footer/index.tsx b/site/src/theme/Footer/index.tsx
new file mode 100644
index 0000000..b039cd3
--- /dev/null
+++ b/site/src/theme/Footer/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import Footer from '@theme-original/Footer';
+import type FooterType from '@theme/Footer';
+import type {WrapperProps} from '@docusaurus/types';
+import styles from './index.module.css';
+import clsx from 'clsx';
+
+
+type Props = WrapperProps;
+
+export default function FooterWrapper(props: Props): JSX.Element {
+ return (
+
+ );
+}
diff --git a/site/static/img/prefooter.svg b/site/static/img/prefooter.svg
new file mode 100644
index 0000000..98e6a90
--- /dev/null
+++ b/site/static/img/prefooter.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/site/static/img/wave-pattern-flipped.svg b/site/static/img/wave-pattern-flipped.svg
new file mode 100644
index 0000000..d642405
--- /dev/null
+++ b/site/static/img/wave-pattern-flipped.svg
@@ -0,0 +1,8 @@
+
diff --git a/site/static/img/wave-pattern.svg b/site/static/img/wave-pattern.svg
new file mode 100644
index 0000000..70c4577
--- /dev/null
+++ b/site/static/img/wave-pattern.svg
@@ -0,0 +1,8 @@
+