diff --git a/site/src/css/custom.css b/site/src/css/custom.css index dace290e..dcbbbf75 100644 --- a/site/src/css/custom.css +++ b/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:wght@300..700&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); } diff --git a/site/src/pages/index.module.css b/site/src/pages/index.module.css index d101b4a6..2dd1ba98 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: 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) { diff --git a/site/src/pages/index.tsx b/site/src/pages/index.tsx index 8b01917f..9653b3e8 100644 --- a/site/src/pages/index.tsx +++ b/site/src/pages/index.tsx @@ -21,9 +21,6 @@ function HomepageHeader() { return ( <> -
- {isDarkTheme ? : } -
@@ -39,9 +36,6 @@ function HomepageHeader() {
-
- {isDarkTheme ? : } -
); } diff --git a/site/src/theme/Footer/index.module.css b/site/src/theme/Footer/index.module.css new file mode 100644 index 00000000..35b4b89d --- /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 index f202374c..b039cd3a 100644 --- a/site/src/theme/Footer/index.tsx +++ b/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; export default function FooterWrapper(props: Props): JSX.Element { - const { isDarkTheme } = useColorMode(); return ( - <> -
- {isDarkTheme ? : } -
+
+
- +
); } diff --git a/site/static/img/hero-border-bottom.svg b/site/static/img/hero-border-bottom.svg deleted file mode 100644 index 5891d013..00000000 --- a/site/static/img/hero-border-bottom.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/site/static/img/hero-border-top.svg b/site/static/img/hero-border-top.svg deleted file mode 100644 index d835364e..00000000 --- a/site/static/img/hero-border-top.svg +++ /dev/null @@ -1 +0,0 @@ - \ 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 00000000..d642405f --- /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 00000000..70c4577c --- /dev/null +++ b/site/static/img/wave-pattern.svg @@ -0,0 +1,8 @@ + + + + + + + +