diff --git a/docs/index.js b/docs/index.js new file mode 100644 index 00000000..e69de29b diff --git a/docs/readme.md b/docs/index.md similarity index 100% rename from docs/readme.md rename to docs/index.md diff --git a/docusaurus.config.js b/docusaurus.config.js index f5b22d39..7bf49237 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -12,6 +12,7 @@ module.exports = { favicon: 'img/favicon.ico', organizationName: 'facebook', // Usually your GitHub org/user name. projectName: 'docusaurus', // Usually your repo name. + plugins: ['docusaurus-plugin-sass'], themeConfig: { navbar: { title: 'Dashy', @@ -73,7 +74,11 @@ module.exports = { 'https://github.com/facebook/docusaurus/edit/master/website/blog/', }, theme: { - customCss: require.resolve('./src/css/custom.css'), + customCss: [ + require.resolve('./src/styles/Colors.scss'), + require.resolve('./src/styles/Typography.scss'), + require.resolve('./src/styles/custom.scss'), + ] }, }, ], diff --git a/package.json b/package.json index 2426318a..d279f01a 100644 --- a/package.json +++ b/package.json @@ -19,10 +19,12 @@ "@mdx-js/react": "^1.6.21", "@svgr/webpack": "^5.5.0", "clsx": "^1.1.1", + "docusaurus-plugin-sass": "^0.2.1", "file-loader": "^6.2.0", "prism-react-renderer": "^1.2.1", "react": "^17.0.1", "react-dom": "^17.0.1", + "sass": "^1.35.1", "url-loader": "^4.1.1" }, "browserslist": { @@ -37,4 +39,4 @@ "last 1 safari version" ] } -} \ No newline at end of file +} diff --git a/src/components/Button.js b/src/components/Button.js new file mode 100644 index 00000000..0541c1f4 --- /dev/null +++ b/src/components/Button.js @@ -0,0 +1,14 @@ +import React from 'react'; +import clsx from 'clsx'; +import Link from '@docusaurus/Link'; +import './../styles/Button.scss'; + +export default function Button({ children, to, color }) { + return ( + + + + ); +} diff --git a/src/pages/index.js b/src/pages/index.js index 27c21e8f..0b86341b 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -3,37 +3,33 @@ import clsx from 'clsx'; import Layout from '@theme/Layout'; import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import styles from './index.module.css'; -import HomepageFeatures from '../components/HomepageFeatures'; +import styles from './index.module.scss'; +import Button from './../components/Button'; function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); + const { siteConfig } = useDocusaurusContext(); return ( -
-
-

{siteConfig.title}

-

{siteConfig.tagline}

-
- - Docusaurus Tutorial - 5min ⏱️ - -
+
+

{siteConfig.title}

+

{siteConfig.tagline}

+
+ + + +
); } export default function Home() { - const {siteConfig} = useDocusaurusContext(); + const { siteConfig } = useDocusaurusContext(); return (
-
); diff --git a/src/pages/index.module.css b/src/pages/index.module.css deleted file mode 100644 index 5c0d4f6e..00000000 --- a/src/pages/index.module.css +++ /dev/null @@ -1,25 +0,0 @@ -/* stylelint-disable docusaurus/copyright-header */ - -/** - * 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: 966px) { - .heroBanner { - padding: 2rem; - } -} - -.buttons { - display: flex; - align-items: center; - justify-content: center; -} diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss new file mode 100644 index 00000000..597a7893 --- /dev/null +++ b/src/pages/index.module.scss @@ -0,0 +1,45 @@ +/* stylelint-disable docusaurus/copyright-header */ + +html { + &[data-theme='dark'] { + --heading-shadow: -5px 4px 0px #000000; + --sub-heading-shadow: -3px 3px 1px #000000; + } + &[data-theme='light'] { + --heading-shadow: -2px 3px 2px #a2a1a1; + --sub-heading-shadow: -1px 1px 1px #a2a1a1; + } +} + +header.heroBanner { + padding: 4rem 0; + text-align: center; + position: relative; + overflow: hidden; + background: var(--hero-background); + h1.heroTitle { + font-size: 6rem; + font-family: 'Racing Sans One', cursive; + text-shadow: var(--heading-shadow); + } + h3.heroSubTitle { + text-shadow: var(--sub-heading-shadow); + } +} + + + +@media screen and (max-width: 966px) { + .heroBanner { + padding: 2rem; + } +} + +.buttons { + display: flex; + align-items: center; + justify-content: center; + @media screen and (max-width: 966px) { + flex-direction: column; + } +} diff --git a/src/styles/Button.scss b/src/styles/Button.scss new file mode 100644 index 00000000..63789026 --- /dev/null +++ b/src/styles/Button.scss @@ -0,0 +1,62 @@ + +.button { + border-radius: 4px; + cursor: pointer; + display: inline-block; + font-weight: 600; + position: relative; + transition: none; + border: none; + min-width: 12rem; + font-weight: bold; + font-size: 1.3rem; + padding: 0.75rem 1rem; + margin: 0.5rem; + color: var(--black); + + &.color-btn:hover { + color: #000000b3; + top: 2px; + } + &.color-btn:active { + color: #00000080; + top: 4px; + box-shadow: none !important; + } + + &.color-btn.btn-pink { + background: #db78fc; + box-shadow: 0 4px #b83ddd; + &:hover { + box-shadow: 0 2px #b83ddd; + } + } + &.color-btn.btn-purple { + background: #9083ed; + box-shadow: 0 4px #6b3cd6; + &:hover { + box-shadow: 0 2px #6b3cd6; + } + } + &.color-btn.btn-blue { + background: #5c85f7; + box-shadow: 0 4px #3d48dd; + &:hover { + box-shadow: 0 2px #3d48dd; + } + } + &.color-btn.btn-green { + background: #41ef90; + box-shadow: 0 4px #1e9554; + &:hover { + box-shadow: 0 2px #1e9554; + } + } + &.color-btn.btn-yellow { + background: #dcff5a; + box-shadow: 0 4px #ceb73f; + &:hover { + box-shadow: 0 2px #ceb73f; + } + } +} diff --git a/src/styles/Colors.scss b/src/styles/Colors.scss new file mode 100644 index 00000000..77a78399 --- /dev/null +++ b/src/styles/Colors.scss @@ -0,0 +1,33 @@ +/* Global Color Palette */ +:root { + /* Greyscale */ + --bright-white: #ffffff; + --white: #d8d8d8; + --pale-grey: #e9e9e8; + --mid-grey: #a9a9a9; + --dark-grey: #3a3939; + --black: #121212; + --pitch-black: #000000; + + /* Action Colors */ + --info: #35c9fa; + --success: #88ff88; + --warning: #ece715; + --danger: #f80363; +} + +/* Themed Color Palette */ + +html { /* Light Theme */ + --primary: #54bff7; + --background: var(--white); + --text-color: var(--black); + --hero-background: var(--pale-grey); +} + +html[data-theme='dark'] { /* Dark Theme */ + --primary: #a324fb; + --background: var(--black); + --text-color: var(--white); + --hero-background: var(--black); +} diff --git a/src/styles/Typography.scss b/src/styles/Typography.scss new file mode 100644 index 00000000..92b44250 --- /dev/null +++ b/src/styles/Typography.scss @@ -0,0 +1,16 @@ +@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&family=Roboto+Mono:wght@500&display=swap'); + + +h1, h2, h3, h4, h5, button { + font-family: 'Roboto Mono', monospace; +} + +h1 { + font-size: 4rem; +} +h2 { + font-size: 3rem; +} +h3 { + font-size: 2rem; +} \ No newline at end of file diff --git a/src/css/custom.css b/src/styles/custom.scss similarity index 79% rename from src/css/custom.css rename to src/styles/custom.scss index b3d3c3c8..7293c6aa 100644 --- a/src/css/custom.css +++ b/src/styles/custom.scss @@ -7,7 +7,7 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #25c2a0; + --ifm-color-primary: var(--background); --ifm-color-primary-dark: rgb(33, 175, 144); --ifm-color-primary-darker: rgb(31, 165, 136); --ifm-color-primary-darkest: rgb(26, 136, 112); @@ -15,15 +15,18 @@ --ifm-color-primary-lighter: rgb(102, 212, 189); --ifm-color-primary-lightest: rgb(146, 224, 208); --ifm-code-font-size: 95%; + --ifm-navbar-background-color: var(--background-darken); } +.hero { + --ifm-hero-background-color: var(--hero-background); + --ifm-hero-text-color: var(--text-color); +} + + .docusaurus-highlight-code-line { background-color: rgba(0, 0, 0, 0.1); display: block; margin: 0 calc(-1 * var(--ifm-pre-padding)); padding: 0 var(--ifm-pre-padding); -} - -html[data-theme='dark'] .docusaurus-highlight-code-line { - background-color: rgba(0, 0, 0, 0.3); -} +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index fe03bba2..79e176e7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2606,6 +2606,21 @@ cheerio@^0.22.0: lodash.reject "^4.4.0" lodash.some "^4.4.0" +"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.1: + version "3.5.2" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75" + integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ== + dependencies: + anymatch "~3.1.2" + braces "~3.0.2" + glob-parent "~5.1.2" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.6.0" + optionalDependencies: + fsevents "~2.3.2" + chokidar@^2.1.8: version "2.1.8" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917" @@ -2625,21 +2640,6 @@ chokidar@^2.1.8: optionalDependencies: fsevents "^1.2.7" -chokidar@^3.5.1: - version "3.5.2" - resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75" - integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ== - dependencies: - anymatch "~3.1.2" - braces "~3.0.2" - glob-parent "~5.1.2" - is-binary-path "~2.1.0" - is-glob "~4.0.1" - normalize-path "~3.0.0" - readdirp "~3.6.0" - optionalDependencies: - fsevents "~2.3.2" - chrome-trace-event@^1.0.2: version "1.0.3" resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac" @@ -3384,6 +3384,13 @@ dns-txt@^2.0.2: dependencies: buffer-indexof "^1.0.0" +docusaurus-plugin-sass@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.1.tgz#673c6b6ac00b581e8fb0baab22f2b3766735aafc" + integrity sha512-cRugbRWnKLjFPQTo1k2cyn/AANYkXAPHv+DaLs7bkOfOofEgTSrMdpNidt3oZ0ltQcjUUbvmSRRjH9R1ifdRMA== + dependencies: + sass-loader "^10.1.1" + dom-converter@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768" @@ -7316,6 +7323,24 @@ safe-regex@^1.1.0: resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a" integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== +sass-loader@^10.1.1: + version "10.2.0" + resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.2.0.tgz#3d64c1590f911013b3fa48a0b22a83d5e1494716" + integrity sha512-kUceLzC1gIHz0zNJPpqRsJyisWatGYNFRmv2CKZK2/ngMJgLqxTbXwe/hJ85luyvZkgqU3VlJ33UVF2T/0g6mw== + dependencies: + klona "^2.0.4" + loader-utils "^2.0.0" + neo-async "^2.6.2" + schema-utils "^3.0.0" + semver "^7.3.2" + +sass@^1.35.1: + version "1.35.1" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.35.1.tgz#90ecf774dfe68f07b6193077e3b42fb154b9e1cd" + integrity sha512-oCisuQJstxMcacOPmxLNiLlj4cUyN2+8xJnG7VanRoh2GOLr9RqkvI4AxA4a6LHVg/rsu+PmxXeGhrdSF9jCiQ== + dependencies: + chokidar ">=3.0.0 <4.0.0" + sax@^1.2.4, sax@~1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" @@ -7403,7 +7428,7 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0: resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw== -semver@^7.3.4, semver@^7.3.5: +semver@^7.3.2, semver@^7.3.4, semver@^7.3.5: version "7.3.5" resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7" integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==