scssをつけるようにし、規約文のフォントサイズを変更

docusaurus.config.js

@@ -105,9 +105,10 @@ module.exports = {
             'https://github.com/yukyu30/yukyu-document/edit/master/',
         },
         theme: {
-          customCss: require.resolve('./src/css/custom.css'),
+          customCss: require.resolve('./src/css/custom.scss'),
         },
       },
     ],
   ],
+  plugins: ['docusaurus-plugin-sass'],
 };

package.json

@@ -19,9 +19,11 @@
     "@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",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "sass": "^1.45.2",
     "url-loader": "^4.1.1"
   },
   "browserslist": {

src/css/custom.scss

@@ -0,0 +1,57 @@
+/* stylelint-disable docusaurus/copyright-header */
+/**
+ * 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: rgb(39, 100, 255);
+    --ifm-color-primary-dark: rgb(36, 92, 235);
+    --ifm-color-primary-darker: rgb(30, 78, 201);
+    --ifm-color-primary-darkest: rgb(25, 66, 171);
+    --ifm-color-primary-light: rgb(64, 118, 255);
+    --ifm-color-primary-lighter: rgb(67, 120, 255);
+    --ifm-color-primary-lightest: rgb(83, 132, 255);
+
+    --ifm-code-font-size: 95%;
+    --ifm-custom-h1-font-size: 1.9rem;
+    --ifm-custom-h2-font-size: 1.5rem;
+    --ifm-custom-h3-font-size: 1.3rem;
+    --ifm-custom-h4-font-size: 1.1rem;
+    --ifm-custom-h5-font-size: 1.0rem;
+    --ifm-custom-h6-font-size: 0.85rem;
+
+  }
+  .markdown {
+    h1{
+        font-size: var(--ifm-custom-h1-font-size);
+    }
+    h2 {
+        font-size: var(--ifm-custom-h2-font-size);
+    }
+    h3 {
+        font-size: var(--ifm-custom-h3-font-size);
+    }
+    h4 {
+        font-size: var(--ifm-custom-h4-font-size);
+    }
+    h5 {
+        font-size: var(--ifm-custom-h5-font-size);
+    }
+    h6 {
+        font-size: var(--ifm-custom-h6-font-size);
+    }
+
+  }
+
+
+  .docusaurus-highlight-code-line {
+    background-color: rgb(72, 77, 91);
+    display: block;
+    margin: 0 calc(-1 * var(--ifm-pre-padding));
+    padding: 0 var(--ifm-pre-padding);
+  }
+