Refactor Website CSS: eliminate duplication, add CSS variables (#3262)

* Initial plan

* Consolidate duplicate color values with CSS variables

Co-authored-by: BornToBeRoot <[email protected]>

* Remove unused duplicate CSS file and import

Co-authored-by: BornToBeRoot <[email protected]>

* Add CSS variable for content max-width to eliminate duplication

Co-authored-by: BornToBeRoot <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: BornToBeRoot <[email protected]>

Author: Copilot

Website/docs/introduction.mdx

@@ -2,8 +2,6 @@
 sidebar_position: 0
 ---
 
-import styles from "./styles.module.css";
-
 # Introduction
 
 NETworkManager is a powerful tool for managing networks and troubleshoot network problems!

Website/docs/styles.module.css

@@ -16,6 +16,12 @@
 
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+
+  /* Custom color variables */
+  --ifm-background-dark: #2b3137;
+
+  /* Custom layout variables */
+  --content-max-width: 1060px;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -33,11 +39,11 @@
 */
 
 .footer--dark {
-  --ifm-footer-background-color: #2b3137;
+  --ifm-footer-background-color: var(--ifm-background-dark);
 }
 
 .image {
   display: block;
   margin: auto;
-  max-width: 1060px;  
+  max-width: var(--content-max-width);
 }

Website/src/css/custom.css

@@ -14,7 +14,7 @@ table {
   position: relative;
   overflow: hidden;
 
-  background-color: #2b3137;
+  background-color: var(--ifm-background-dark);
 }
 
 @media screen and (max-width: 996px) {
@@ -30,7 +30,7 @@ table {
 }
 
 .hero {
-  background-color: #2b3137;
+  background-color: var(--ifm-background-dark);
   padding: 48px;
 }
 
@@ -97,7 +97,7 @@ table {
 .imageScreenshot {
   display: block;
   margin: auto;
-  max-width: 1060px;
+  max-width: var(--content-max-width);
   width: 100%;
   height: auto;
 }