From 4796204b9a74d0a44aa300921eca8f8b342efa55 Mon Sep 17 00:00:00 2001 From: Hans Date: Mon, 17 Jun 2024 19:03:15 +0300 Subject: [PATCH] Minor UI improvements (#5) * Added wave patterns, adjusted primary color, minor UI tweaks * Added greek pattern, edited colors, minor UI fixes --- site/docusaurus.config.ts | 1 - site/src/css/custom.css | 40 ++++++++++++++++-------- site/src/pages/index.module.css | 12 +++---- site/src/pages/index.tsx | 12 +++++++ site/src/theme/Footer/index.module.css | 14 +++++++++ site/src/theme/Footer/index.tsx | 18 +++++++++++ site/static/img/prefooter.svg | 1 + site/static/img/wave-pattern-flipped.svg | 8 +++++ site/static/img/wave-pattern.svg | 8 +++++ 9 files changed, 94 insertions(+), 20 deletions(-) create mode 100644 site/src/theme/Footer/index.module.css create mode 100644 site/src/theme/Footer/index.tsx create mode 100644 site/static/img/prefooter.svg create mode 100644 site/static/img/wave-pattern-flipped.svg create mode 100644 site/static/img/wave-pattern.svg 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 ( + <>
@@ -25,6 +36,7 @@ function HomepageHeader() {
+ ); } 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 @@ + + + + + + + +