styling

.gitignore

@@ -179,6 +179,5 @@ bun.lockb
 build/
 
 
- pnpm-lock.yaml
+pnpm-lock.yaml
- 
+package-lock.json
- 

install.sh

@@ -61,9 +61,10 @@ fi
 echo "Installing dependencies..."
 export PATH=${BASE}/node_modules/.bin:$PATH
 
-pnpm install @docusaurus/core@3.6.3 @docusaurus/preset-classic@3.6.3 @docusaurus/theme-mermaid@3.6.3
+pnpm install @docusaurus/core @docusaurus/preset-classic @docusaurus/theme-mermaid
 pnpm install react-player
 pnpm install tailwindcss
+pnpm install --save-dev @types/node @docusaurus/types @docusaurus/preset-classic prism-react-renderer redocusaurus
 # pnpm add redocusaurus
 pnpm add tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react
 # #pnpm dlx shadcn@latest init

package.json

@@ -17,7 +17,6 @@
   "dependencies": {
     "@docusaurus/core": "^3.6.3",
     "@docusaurus/plugin-client-redirects": "3.6.3",
-    "@docusaurus/preset-classic": "^3.6.3",
     "@docusaurus/theme-mermaid": "^3.6.3",
     "@hookform/resolvers": "^3.9.1",
     "@mdx-js/react": "^3.0.0",
@@ -53,7 +52,6 @@
     "embla-carousel-react": "^8.5.1",
     "input-otp": "^1.4.1",
     "next-themes": "^0.4.4",
-    "prism-react-renderer": "^2.3.0",
     "raw-loader": "^4.0.2",
     "react": "^18.0.0",
     "react-day-picker": "8.10.1",
@@ -62,7 +60,6 @@
     "react-player": "^2.16.0",
     "react-resizable-panels": "^2.1.7",
     "recharts": "^2.15.0",
-    "redocusaurus": "^2.2.0",
     "sonner": "^1.7.1",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^1.1.2",
@@ -71,11 +68,12 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.6.3",
     "@docusaurus/plugin-content-blog": "^3.6.3",
+    "@docusaurus/preset-classic": "^3.6.3",
     "@docusaurus/theme-common": "^3.6.3",
     "@docusaurus/tsconfig": "3.6.3",
     "@docusaurus/types": "3.6.3",
     "@types/bun": "latest",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.10.5",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
     "autoprefixer": "^10.4.20",
@@ -83,7 +81,9 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.469.0",
     "postcss": "^8.4.49",
-    "tailwind-merge": "^2.5.5",
+    "prism-react-renderer": "^2.4.1",
+    "redocusaurus": "^2.2.0",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.5.2"
   },

src/css/custom.css

@@ -330,22 +330,109 @@ aside.theme-doc-sidebar-container {
   outline: none;
 }
 
-/* Mobile elements */
+/* Enhanced Mobile Responsiveness */
-.navbar__toggle {
+@media screen and (max-width: 768px) {
-  color: #ffffff;
+  /* Improved typography for mobile */
+  body {
+    font-size: 16px;
+    line-height: 1.5;
+  }
+
+  h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); }
+  h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
+  h3 { font-size: clamp(1.25rem, 5vw, 1.75rem); }
+  h4 { font-size: clamp(1rem, 4vw, 1.5rem); }
+
+  /* Better spacing on mobile */
+  .container {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  /* Improved table handling */
+  .table-responsive {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Better image handling */
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+
+  /* Enhanced touch targets */
+  .navbar__item,
+  .menu__link,
+  .table-of-contents__link,
+  .navbar__toggle,
+  button {
+    min-height: 44px;
+    padding: 0.75rem 1rem;
+  }
 }
 
-.navbar-sidebar {
+/* Mobile Navigation */
-  background-color: #131213;
+@media (max-width: 996px) {
+  .navbar__toggle {
+    display: block !important;
+    position: fixed !important;
+    top: 1rem !important;
+    right: 1rem !important;
+    z-index: 9999 !important;
+    width: 44px !important;
+    height: 44px !important;
+    background: #000 !important;
+    color: #fff !important;
+    border-radius: 4px !important;
+    cursor: pointer !important;
+  }
+
+  .navbar__toggle::before {
+    content: '☰' !important;
+    font-size: 24px !important;
+  }
+
+  .navbar-sidebar {
+    display: block !important;
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    bottom: 0 !important;
+    width: 300px !important;
+    background: #000 !important;
+    z-index: 9998 !important;
+  }
+
+  .navbar-sidebar__items {
+    padding: 1rem !important;
+  }
+
+  .navbar-sidebar__backdrop {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    background: rgba(0, 0, 0, 0.5) !important;
+    z-index: 9997 !important;
+  }
 }
 
-.navbar-sidebar__brand {
+/* Prevent body scroll when menu is open */
-  background-color: #131213;
+body.menu-open {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  overflow: hidden;
 }
 
-.navbar-sidebar__items {
+/* Enhanced touch feedback */
-  background-color: #131213;
+@media (hover: none) {
+  .navbar__item:active,
+  .menu__link:active,
+  .table-of-contents__link:active {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
 }
 
 /* Enhanced button styling for shadcn */
@@ -513,13 +600,35 @@ aside.theme-doc-sidebar-container {
   margin: 2rem 0;
 }
 
-/* Enhanced blog styles with modern typography and spacing */
+/* Enhanced blog styles with mobile optimization */
 .blog-post-title,
 .blog-list-title,
 .blog-list-page article header h2 {
   font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
   margin-bottom: 1rem;
   transition: color var(--transition-fast);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  hyphens: auto;
+}
+
+/* Mobile-optimized blog images */
+@media screen and (max-width: 768px) {
+  .blog-post img,
+  article.blog-list-item img {
+    margin: 1.5rem 0;
+    border-radius: 8px;
+  }
+
+  .blog-post-title,
+  .blog-list-title {
+    font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
+  }
+
+  article.margin-bottom--xl {
+    margin-bottom: 2rem;
+    padding-bottom: 2rem;
+  }
 }
 
 .blog-post-title:hover,