Refactor code structure for improved readability and maintainability

docs/.vitepress/theme/styles/custom.css

@@ -56,14 +56,16 @@
 /* ============================================
  * Layout Container Adjustments
  * ============================================ */
-.VPDoc .content-container {
-  max-width: var(--vp-content-width);
+.VPDoc .content-container,
+.VPDoc.has-aside .content-container {
+  max-width: 90% !important;
   padding: 0 32px;
 }
 
 /* Adjust sidebar and content layout */
-.VPDoc {
-  padding-left: var(--vp-sidebar-width);
+.VPDoc,
+.VPDoc[data-v-343c73d6] {
+  padding-left: var(--vp-sidebar-width) !important;
 }
 
 /* Right side outline (TOC) adjustments */
@@ -84,6 +86,28 @@
   padding-bottom: 0;
 }
 
+/* Remove horizontal padding for home page only (has .VPHome class) */
+.VPHome .VPDoc {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.VPHome .VPDoc .content-container {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  max-width: 100% !important;
+}
+
+.VPHome .VPDoc .content {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.VPHome .VPContent {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
 .VPHomeHero {
   padding: 80px 24px;
   background: linear-gradient(180deg, var(--vp-c-bg-soft) 0%, var(--vp-c-bg) 100%);

docs/.vitepress/theme/styles/mobile.css

@@ -183,7 +183,7 @@
 
   .VPDoc .content-container {
     padding: 0 24px;
-    max-width: var(--vp-content-width);
+    max-width: 90% !important;
   }
 
   .VPHomeHero {
@@ -225,7 +225,7 @@
   }
 
   .VPDoc .content-container {
-    max-width: var(--vp-content-width);
+    max-width: 90% !important;
     padding: 0 40px;
   }
 
@@ -272,6 +272,7 @@
   }
 
   .VPDoc .content-container {
+    max-width: 90% !important;
     padding: 0 48px;
   }
 

docs/.vitepress/theme/styles/variables.css

@@ -9,6 +9,10 @@
    * Color Scheme: Blue (Default)
    * ============================================ */
 
+  /* Logo Colors - follow theme */
+  --logo-line-color: currentColor;
+  --logo-dot-color: var(--vp-c-primary);
+
   /* Primary Colors */
   --vp-c-primary-50: #eff6ff;
   --vp-c-primary-100: #dbeafe;
@@ -38,14 +42,18 @@
   --vp-c-secondary-900: #064e3b;
   --vp-c-secondary: var(--vp-c-secondary-500);
 
-  /* Accent Colors */
-  --vp-c-accent-50: #fef3c7;
-  --vp-c-accent-100: #fde68a;
-  --vp-c-accent-200: #fcd34d;
-  --vp-c-accent-300: #fbbf24;
-  --vp-c-accent-400: #f59e0b;
-  --vp-c-accent-500: #d97706;
-  --vp-c-accent: var(--vp-c-accent-400);
+  /* Accent Colors (Orange) */
+  --vp-c-accent-50: #fffbeb;
+  --vp-c-accent-100: #fef3c7;
+  --vp-c-accent-200: #fde68a;
+  --vp-c-accent-300: #fcd34d;
+  --vp-c-accent-400: #fbbf24;
+  --vp-c-accent-500: #f59e0b;
+  --vp-c-accent-600: #d97706;
+  --vp-c-accent-700: #b45309;
+  --vp-c-accent-800: #92400e;
+  --vp-c-accent-900: #78350f;
+  --vp-c-accent: var(--vp-c-accent-500);
 
   /* Background Colors (Light Mode) */
   --vp-c-bg: #ffffff;
@@ -99,8 +107,8 @@
   /* Shadows */
   --vp-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --vp-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-  --vp-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-  --vp-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+  --vp-shadow-lg: 0 10px 15px -3 rgb(0 0 0 / 0.1);
+  --vp-shadow-xl: 0 20px 25px -5 rgb(0 0 0 / 0.1);
 
   /* Transitions */
   --vp-transition-color: 0.2s ease;
@@ -120,6 +128,9 @@
  * Dark Mode
  * ============================================ */
 .dark {
+  /* Logo Colors (Dark Mode) - follow theme */
+  --logo-dot-color: var(--vp-c-primary);
+
   /* Background Colors (Dark Mode) */
   --vp-c-bg: #111827;
   --vp-c-bg-soft: #1f2937;
@@ -172,41 +183,136 @@
   --vp-c-secondary-800: #d1fae5;
   --vp-c-secondary-900: #ecfdf5;
   --vp-c-secondary: var(--vp-c-secondary-400);
+
+  /* Accent Colors (adjusted for dark mode) */
+  --vp-c-accent-50: #451a03;
+  --vp-c-accent-100: #78350f;
+  --vp-c-accent-200: #92400e;
+  --vp-c-accent-300: #b45309;
+  --vp-c-accent-400: #d97706;
+  --vp-c-accent-500: #f59e0b;
+  --vp-c-accent-600: #fbbf24;
+  --vp-c-accent-700: #fcd34d;
+  --vp-c-accent-800: #fde68a;
+  --vp-c-accent-900: #fef3c7;
+  --vp-c-accent: var(--vp-c-accent-400);
 }
 
 /* ============================================
  * Color Scheme: Green
  * ============================================ */
+
+/* Green - Light Mode */
 [data-theme="green"] {
-  --vp-c-primary: var(--vp-c-secondary-500);
+  --vp-c-primary-50: #ecfdf5;
+  --vp-c-primary-100: #d1fae5;
+  --vp-c-primary-200: #a7f3d0;
+  --vp-c-primary-300: #6ee7b7;
+  --vp-c-primary-400: #34d399;
+  --vp-c-primary-500: #22c55e;
+  --vp-c-primary-600: #10b981;
+  --vp-c-primary-700: #059669;
+  --vp-c-primary-800: #047857;
+  --vp-c-primary-900: #065f46;
+  --vp-c-primary: var(--vp-c-primary-500);
+  --vp-c-brand-1: var(--vp-c-primary-500);
+  --vp-c-brand-soft: rgba(34, 197, 94, 0.1);
 }
+
+/* Green - Dark Mode */
+.dark[data-theme="green"],
 [data-theme="green"].dark {
-  --vp-c-primary: var(--vp-c-secondary-400);
+  --vp-c-primary-50: #064e3b;
+  --vp-c-primary-100: #065f46;
+  --vp-c-primary-200: #047857;
+  --vp-c-primary-300: #059669;
+  --vp-c-primary-400: #10b981;
+  --vp-c-primary-500: #34d399;
+  --vp-c-primary-600: #6ee7b7;
+  --vp-c-primary-700: #a7f3d0;
+  --vp-c-primary-800: #d1fae5;
+  --vp-c-primary-900: #ecfdf5;
+  --vp-c-primary: var(--vp-c-primary-400);
+  --vp-c-brand-1: var(--vp-c-primary-400);
+  --vp-c-brand-soft: rgba(52, 211, 153, 0.2);
 }
 
 /* ============================================
  * Color Scheme: Orange
  * ============================================ */
+
+/* Orange - Light Mode */
 [data-theme="orange"] {
-  --vp-c-primary: var(--vp-c-accent-500);
+  --vp-c-primary-50: #fffbeb;
+  --vp-c-primary-100: #fef3c7;
+  --vp-c-primary-200: #fde68a;
+  --vp-c-primary-300: #fcd34d;
+  --vp-c-primary-400: #fbbf24;
+  --vp-c-primary-500: #f59e0b;
+  --vp-c-primary-600: #d97706;
+  --vp-c-primary-700: #b45309;
+  --vp-c-primary-800: #92400e;
+  --vp-c-primary-900: #78350f;
+  --vp-c-primary: var(--vp-c-primary-500);
+  --vp-c-brand-1: var(--vp-c-primary-500);
+  --vp-c-brand-soft: rgba(245, 158, 11, 0.1);
 }
+
+/* Orange - Dark Mode */
+.dark[data-theme="orange"],
 [data-theme="orange"].dark {
-  --vp-c-primary: var(--vp-c-accent-400);
+  --vp-c-primary-50: #451a03;
+  --vp-c-primary-100: #78350f;
+  --vp-c-primary-200: #92400e;
+  --vp-c-primary-300: #b45309;
+  --vp-c-primary-400: #d97706;
+  --vp-c-primary-500: #f59e0b;
+  --vp-c-primary-600: #fbbf24;
+  --vp-c-primary-700: #fcd34d;
+  --vp-c-primary-800: #fde68a;
+  --vp-c-primary-900: #fef3c7;
+  --vp-c-primary: var(--vp-c-primary-400);
+  --vp-c-brand-1: var(--vp-c-primary-400);
+  --vp-c-brand-soft: rgba(251, 191, 36, 0.2);
 }
 
 /* ============================================
  * Color Scheme: Purple
  * ============================================ */
+
+/* Purple - Light Mode */
 [data-theme="purple"] {
-  --vp-c-primary-500: #8b5cf6;
-  --vp-c-primary-600: #7c3aed;
-  --vp-c-primary-700: #6d28d9;
-  --vp-c-primary: var(--vp-c-primary-500);
+  --vp-c-primary-50: #faf5ff;
+  --vp-c-primary-100: #f3e8ff;
+  --vp-c-primary-200: #e9d5ff;
+  --vp-c-primary-300: #d8b4fe;
+  --vp-c-primary-400: #c084fc;
+  --vp-c-primary-500: #a855f7;
+  --vp-c-primary-600: #8b5cf6;
+  --vp-c-primary-700: #7c3aed;
+  --vp-c-primary-800: #6d28d9;
+  --vp-c-primary-900: #5b21b6;
+  --vp-c-primary: var(--vp-c-primary-600);
+  --vp-c-brand-1: var(--vp-c-primary-600);
+  --vp-c-brand-soft: rgba(139, 92, 246, 0.1);
 }
+
+/* Purple - Dark Mode */
+.dark[data-theme="purple"],
 [data-theme="purple"].dark {
-  --vp-c-primary-400: #a78bfa;
+  --vp-c-primary-50: #2e1065;
+  --vp-c-primary-100: #3b0764;
+  --vp-c-primary-200: #581c87;
+  --vp-c-primary-300: #6d28d9;
+  --vp-c-primary-400: #7c3aed;
   --vp-c-primary-500: #8b5cf6;
+  --vp-c-primary-600: #a78bfa;
+  --vp-c-primary-700: #c4b5fd;
+  --vp-c-primary-800: #ddd6fe;
+  --vp-c-primary-900: #f3e8ff;
   --vp-c-primary: var(--vp-c-primary-400);
+  --vp-c-brand-1: var(--vp-c-primary-400);
+  --vp-c-brand-soft: rgba(167, 139, 250, 0.2);
 }
 
 /* ============================================