From 659aeff39ded6bf6bd0dfc40ccc5ff07ffc10f51 Mon Sep 17 00:00:00 2001 From: Nikita Tchayka Date: Sun, 27 Aug 2023 13:01:29 +0100 Subject: Update --- src/components/HomepageFeatures/index.tsx | 70 ++++++++++++++ src/components/HomepageFeatures/styles.module.css | 11 +++ src/css/custom.css | 108 ++++++++++++++++++++++ src/pages/index.module.css | 23 +++++ src/pages/index.tsx | 47 ++++++++++ src/pages/markdown-page.md | 7 ++ 6 files changed, 266 insertions(+) create mode 100644 src/components/HomepageFeatures/index.tsx create mode 100644 src/components/HomepageFeatures/styles.module.css create mode 100644 src/css/custom.css create mode 100644 src/pages/index.module.css create mode 100644 src/pages/index.tsx create mode 100644 src/pages/markdown-page.md (limited to 'src') diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx new file mode 100644 index 0000000..91ef460 --- /dev/null +++ b/src/components/HomepageFeatures/index.tsx @@ -0,0 +1,70 @@ +import React from 'react'; +import clsx from 'clsx'; +import styles from './styles.module.css'; + +type FeatureItem = { + title: string; + Svg: React.ComponentType>; + description: JSX.Element; +}; + +const FeatureList: FeatureItem[] = [ + { + title: 'Easy to Use', + Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, + description: ( + <> + Docusaurus was designed from the ground up to be easily installed and + used to get your website up and running quickly. + + ), + }, + { + title: 'Focus on What Matters', + Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, + description: ( + <> + Docusaurus lets you focus on your docs, and we'll do the chores. Go + ahead and move your docs into the docs directory. + + ), + }, + { + title: 'Powered by React', + Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, + description: ( + <> + Extend or customize your website layout by reusing React. Docusaurus can + be extended while reusing the same header and footer. + + ), + }, +]; + +function Feature({title, Svg, description}: FeatureItem) { + return ( +
+
+ +
+
+

{title}

+

{description}

+
+
+ ); +} + +export default function HomepageFeatures(): JSX.Element { + return ( +
+
+
+ {FeatureList.map((props, idx) => ( + + ))} +
+
+
+ ); +} diff --git a/src/components/HomepageFeatures/styles.module.css b/src/components/HomepageFeatures/styles.module.css new file mode 100644 index 0000000..b248eb2 --- /dev/null +++ b/src/components/HomepageFeatures/styles.module.css @@ -0,0 +1,11 @@ +.features { + display: flex; + align-items: center; + padding: 2rem 0; + width: 100%; +} + +.featureSvg { + height: 200px; + width: 200px; +} diff --git a/src/css/custom.css b/src/css/custom.css new file mode 100644 index 0000000..4537517 --- /dev/null +++ b/src/css/custom.css @@ -0,0 +1,108 @@ +/** + * Any CSS included here will be global. The classic template + * bundles Infima by default. Infima is a CSS framework designed to + * work well for content-centric websites. + */ + +@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@900&family=Ubuntu&display=swap'); +@tailwind base; +@tailwind components; +@tailwind utilities; + +body { + background-color: theme('colors.background'); +} + +h1, h2, h3, h4, h5, h6 { + font-family: 'Lexend Mega', sans-serif; +} + +* { + font-family: 'Ubuntu', sans-serif; +} + +.navbar { + flex: auto; + background-color: theme('colors.background'); + border: 0; + box-shadow: none; +} + +.navbar__item { + background-color: #A6FAFF; + border-color: black; + border-width: 2px; + border-radius: 10px; + margin: 0 0.5rem; + padding: 10px 15px; +} + +.navbar__item:hover { + background-color: #79F7FF; + box-shadow: 2px 2px 0px 0px black; + border-color: black; + color: black; + font-weight: bold; + border-width: 2px; + margin: 0 0.5rem; +} + +.navbar__items--right > .navbar__item { + background-color: yellow; + border-color: black; + border-width: 2px; + border-radius: 10px; + margin: 0 0.5rem; + padding: 10px 15px; +} + +.navbar__items--right > .navbar__item:hover { + background-color: #E3A018; + box-shadow: 2px 2px 0px 0px black; + border-color: black; + color: black; + font-weight: bold; + border-width: 2px; + margin: 0 0.5rem; +} + +.navbar__logo { + margin: 0; + background-color: white; + border-radius: 100%; + height: 64px; +} + +.navbar__logo > img { + padding: 12px; +} + +.navbar__items--right > .navbar__item > svg { + display: none; +} + +/* 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-code-font-size: 95%; + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); +} + +/* 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-darkest: #1a8870; + --ifm-color-primary-light: #29d5b0; + --ifm-color-primary-lighter: #32d8b4; + --ifm-color-primary-lightest: #4fddbf; + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); +} +*/ diff --git a/src/pages/index.module.css b/src/pages/index.module.css new file mode 100644 index 0000000..9f71a5d --- /dev/null +++ b/src/pages/index.module.css @@ -0,0 +1,23 @@ +/** + * CSS files with the .module.css suffix will be treated as CSS modules + * and scoped locally. + */ + +.heroBanner { + padding: 4rem 0; + text-align: center; + position: relative; + overflow: hidden; +} + +@media screen and (max-width: 996px) { + .heroBanner { + padding: 2rem; + } +} + +.buttons { + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx new file mode 100644 index 0000000..8762287 --- /dev/null +++ b/src/pages/index.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import clsx from "clsx"; +import Link from "@docusaurus/Link"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import Layout from "@theme/Layout"; +import HomepageFeatures from "@site/src/components/HomepageFeatures"; + +import styles from "./index.module.css"; + +function HomepageHeader() { + const { siteConfig } = useDocusaurusContext(); + return ( +
+
+
+ logo +

{siteConfig.title}

+
+

{siteConfig.tagline}

+
+ + + +
+
+
+
+ ); +} + +export default function Home(): JSX.Element { + const { siteConfig } = useDocusaurusContext(); + return ( + <> + + +
+ +
+ + + ); +} diff --git a/src/pages/markdown-page.md b/src/pages/markdown-page.md new file mode 100644 index 0000000..9756c5b --- /dev/null +++ b/src/pages/markdown-page.md @@ -0,0 +1,7 @@ +--- +title: Markdown page example +--- + +# Markdown page example + +You don't need React to write simple standalone pages. -- cgit