Add SASS support and convert CSS files to SCSS

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 (

src/css/custom.css

@@ -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);
-}

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);
+}

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";

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;
   }
 }