Updated styling (custom.css)

fearlessly-dev · Apr 7, 2022 · f2e1fdf · f2e1fdf
1 parent c9c30e3
commit f2e1fdf
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -32,6 +32,7 @@ This is a [Docusaurus-powered](https://docusaurus.io) site to host tutorials and
 | Add `2021-01-17-hello.md` under `www/blog` | Creates a blog post timestamped `January 17, 2021` accessible under `/blog/hello`, with blog index at `blog/` |
 | Edit site  settings in `www/docusaurus.config.js` | Customize [various parameters](https://docusaurus.io/docs/configuration) for site metadata, deployment, themes, plugins and more. |
 | Edit docs sidebar settings in `www/sidebars.js` | Customize [sidebar configuration](https://docusaurus.io/docs/sidebar/items) or learn to use auto-generated versions more effectively. |
+| Update [styling and layout](https://docusaurus.io/docs/next/styling-layout) and validate for light & dark theme | Use [colorbox.io](https://colorbox.io/) and [guide](https://justtheskills.com/colorbox/) to define color palette. Create [style variables](https://docusaurus.io/docs/next/styling-layout#styling-your-site-with-infima) to update `custom.css` (based on  the [infima](https://infima.dev/) styling framework) |
 | Add [supported plugins](https://docusaurus.io/docs/api/plugins) for enhanced content or behaviors | Default plugins used are [plugin-content-docs](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs) (for `docs/` pages) , [plugin-content-blog](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog) (for `blog/`) and [plugin-content-pages](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-pages) for default pages. Check out [plugin-sitemap](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-sitemap), [plugin-ideal-image](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-ideal-image) and [plugin-pwa](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-pwa) for other useful features. |
 | | |
 

diff --git a/www/src/css/custom.css b/www/src/css/custom.css
@@ -6,25 +6,25 @@
 
 /* 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-color-primary: #b31919;
+  --ifm-color-primary-dark: #a11717;
+  --ifm-color-primary-darker: #981515;
+  --ifm-color-primary-darkest: #7d1212;
+  --ifm-color-primary-light: #c51c1c;
+  --ifm-color-primary-lighter: #ce1d1d;
+  --ifm-color-primary-lightest: #e12828;
   --ifm-code-font-size: 95%;
 }
 
 /* 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;
+  --ifm-color-primary: #ffc800;
+  --ifm-color-primary-dark: #e6b400;
+  --ifm-color-primary-darker: #d9aa00;
+  --ifm-color-primary-darkest: #b38c00;
+  --ifm-color-primary-light: #ffce1a;
+  --ifm-color-primary-lighter: #ffd026;
+  --ifm-color-primary-lightest: #ffd94d;
 }
 
 .docusaurus-highlight-code-line {