diff --git a/.idea/jeddunk-xyz.iml b/.idea/jeddunk-xyz.iml index 1bbd4b6..ba188c7 100644 --- a/.idea/jeddunk-xyz.iml +++ b/.idea/jeddunk-xyz.iml @@ -4,6 +4,7 @@ + diff --git a/docusaurus.config.js b/docusaurus.config.js index 67367db..21fbbfe 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -55,7 +55,7 @@ const config = { // 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/', }, theme: { - customCss: './src/css/custom.css', + customCss: './src/css/custom.scss', }, }), ], @@ -145,6 +145,8 @@ const config = { respectPrefersColorScheme: false } }), + + plugins: ['docusaurus-plugin-sass'], }; export default config; diff --git a/package-lock.json b/package-lock.json index 57f3b5a..fd9fe95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,9 +12,11 @@ "@docusaurus/preset-classic": "3.4.0", "@mdx-js/react": "^3.0.0", "clsx": "^2.0.0", + "docusaurus-plugin-sass": "^0.2.5", "prism-react-renderer": "^2.3.0", "react": "^18.0.0", - "react-dom": "^18.0.0" + "react-dom": "^18.0.0", + "sass": "^1.77.8" }, "devDependencies": { "@docusaurus/module-type-aliases": "3.4.0", @@ -5984,6 +5986,19 @@ "node": ">=6" } }, + "node_modules/docusaurus-plugin-sass": { + "version": "0.2.5", + "resolved": "https://registry.npmjs.org/docusaurus-plugin-sass/-/docusaurus-plugin-sass-0.2.5.tgz", + "integrity": "sha512-Z+D0fLFUKcFpM+bqSUmqKIU+vO+YF1xoEQh5hoFreg2eMf722+siwXDD+sqtwU8E4MvVpuvsQfaHwODNlxJAEg==", + "license": "MIT", + "dependencies": { + "sass-loader": "^10.1.1" + }, + "peerDependencies": { + "@docusaurus/core": "^2.0.0-beta || ^3.0.0-alpha", + "sass": "^1.30.0" + } + }, "node_modules/dom-converter": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz", @@ -8011,6 +8026,12 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/immutable": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.7.tgz", + "integrity": "sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==", + "license": "MIT" + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -8605,6 +8626,15 @@ "node": ">=6" } }, + "node_modules/klona": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz", + "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==", + "license": "MIT", + "engines": { + "node": ">= 8" + } + }, "node_modules/latest-version": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-7.0.0.tgz", @@ -13525,6 +13555,109 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "license": "MIT" }, + "node_modules/sass": { + "version": "1.77.8", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.8.tgz", + "integrity": "sha512-4UHg6prsrycW20fqLGPShtEvo/WyHRVRHwOP4DzkUrObWoWI05QBSfzU71TVB7PFaL104TwNaHpjlWXAZbQiNQ==", + "license": "MIT", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-loader": { + "version": "10.5.2", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.5.2.tgz", + "integrity": "sha512-vMUoSNOUKJILHpcNCCyD23X34gve1TS7Rjd9uXHeKqhvBG39x6XbswFDtpbTElj6XdMFezoWhkh5vtKudf2cgQ==", + "license": "MIT", + "dependencies": { + "klona": "^2.0.4", + "loader-utils": "^2.0.0", + "neo-async": "^2.6.2", + "schema-utils": "^3.0.0", + "semver": "^7.3.2" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "fibers": ">= 3.1.0", + "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0", + "sass": "^1.3.0", + "webpack": "^4.36.0 || ^5.0.0" + }, + "peerDependenciesMeta": { + "fibers": { + "optional": true + }, + "node-sass": { + "optional": true + }, + "sass": { + "optional": true + } + } + }, + "node_modules/sass-loader/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "license": "MIT", + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/sass-loader/node_modules/ajv-keywords": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "license": "MIT", + "peerDependencies": { + "ajv": "^6.9.1" + } + }, + "node_modules/sass-loader/node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "license": "MIT" + }, + "node_modules/sass-loader/node_modules/schema-utils": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz", + "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==", + "license": "MIT", + "dependencies": { + "@types/json-schema": "^7.0.8", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, "node_modules/sax": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz", diff --git a/package.json b/package.json index 9d9f8df..893beca 100644 --- a/package.json +++ b/package.json @@ -18,9 +18,11 @@ "@docusaurus/preset-classic": "3.4.0", "@mdx-js/react": "^3.0.0", "clsx": "^2.0.0", + "docusaurus-plugin-sass": "^0.2.5", "prism-react-renderer": "^2.3.0", "react": "^18.0.0", - "react-dom": "^18.0.0" + "react-dom": "^18.0.0", + "sass": "^1.77.8" }, "devDependencies": { "@docusaurus/module-type-aliases": "3.4.0", diff --git a/src/components/HomepageContent/index.js b/src/components/HomepageContent/index.js index da8d281..df03f9e 100644 --- a/src/components/HomepageContent/index.js +++ b/src/components/HomepageContent/index.js @@ -1,5 +1,5 @@ import clsx from 'clsx'; -import styles from './styles.module.css'; +import styles from './styles.module.scss'; export default function HomepageContent() { return ( diff --git a/src/components/HomepageContent/styles.module.css b/src/components/HomepageContent/styles.module.scss similarity index 100% rename from src/components/HomepageContent/styles.module.css rename to src/components/HomepageContent/styles.module.scss diff --git a/src/css/custom.css b/src/css/custom.css deleted file mode 100644 index 2bc6a4c..0000000 --- a/src/css/custom.css +++ /dev/null @@ -1,30 +0,0 @@ -/** - * 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. - */ - -/* 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/css/custom.scss b/src/css/custom.scss new file mode 100644 index 0000000..c01a4bb --- /dev/null +++ b/src/css/custom.scss @@ -0,0 +1,34 @@ +/** + * 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. + */ + +/* You can override the default Infima variables here. */ +:root { + $primary-color: #2e5a85; + + --ifm-color-primary: #{$primary-color}; + --ifm-color-primary-dark: #{darken($primary-color, 10%)}; + --ifm-color-primary-darker: #{darken($primary-color, 15%)}; + --ifm-color-primary-darkest: #{darken($primary-color, 25%)}; + --ifm-color-primary-light: #{lighten($primary-color, 5%)}; + --ifm-color-primary-lighter: #{lighten($primary-color, 10%)}; + --ifm-color-primary-lightest: #{lighten($primary-color, 20%)}; + --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'] { + $primary-color-dark: #488bcf; + + --ifm-color-primary: #{$primary-color-dark}; + --ifm-color-primary-dark: #{darken($primary-color-dark, 10%)}; + --ifm-color-primary-darker: #{darken($primary-color-dark, 15%)}; + --ifm-color-primary-darkest: #{darken($primary-color-dark, 25%)}; + --ifm-color-primary-light: #{lighten($primary-color-dark, 5%)}; + --ifm-color-primary-lighter: #{lighten($primary-color-dark, 10%)}; + --ifm-color-primary-lightest: #{lighten($primary-color-dark, 20%)}; + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); +} diff --git a/src/pages/index.js b/src/pages/index.js index 3cbc5c2..c367e65 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -7,7 +7,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Layout from '@theme/Layout'; import Heading from '@theme/Heading'; -import styles from './index.module.css'; +import styles from './index.module.scss'; import jeddunkxyzlogo from '@site/static/img/jeddunkxyz.png' import HomepageContent from "@site/src/components/HomepageContent"; diff --git a/src/pages/index.module.css b/src/pages/index.module.scss similarity index 75% rename from src/pages/index.module.css rename to src/pages/index.module.scss index cdab5c5..a1df13b 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.scss @@ -7,28 +7,23 @@ -ms-interpolation-mode: nearest-neighbor; image-rendering: -moz-crisp-edges; image-rendering: pixelated; -} -@media screen and (min-width: 768px){ - .logo { + + @media screen and (min-width: 768px) { height: 5.65rem; } -} -@media screen and (max-width: 767px){ - .logo { + + @media screen and (max-width: 767px) { width: 100%; } } - .heroBanner { padding: 4rem 0; text-align: center; position: relative; overflow: hidden; -} -@media screen and (max-width: 996px) { - .heroBanner { + @media screen and (max-width: 996px) { padding: 2rem; } }