From 2713375342e8a02d26f8a51f9fc917dee93e3b74 Mon Sep 17 00:00:00 2001 From: yuluo-yx Date: Wed, 24 Sep 2025 23:46:33 +0800 Subject: [PATCH 1/3] feat: add theme switching to the document website Signed-off-by: yuluo-yx --- website/docusaurus.config.js | 4 +- .../AcknowledgementsSection/index.module.css | 57 ++++ .../HomepageFeatures/styles.module.css | 61 ++++ website/src/components/ThemeToggle/index.js | 41 +++ .../components/ThemeToggle/index.module.css | 192 +++++++++++++ website/src/css/custom.css | 261 +++++++++++++++++- website/src/pages/index.js | 4 + website/src/pages/index.module.css | 150 +++++++++- 8 files changed, 756 insertions(+), 14 deletions(-) create mode 100644 website/src/components/ThemeToggle/index.js create mode 100644 website/src/components/ThemeToggle/index.module.css diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index f1ccd448..16b79f2d 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -207,8 +207,8 @@ const config = { }, colorMode: { defaultMode: 'light', - disableSwitch: true, - respectPrefersColorScheme: false, + disableSwitch: false, + respectPrefersColorScheme: true, }, }), } diff --git a/website/src/components/AcknowledgementsSection/index.module.css b/website/src/components/AcknowledgementsSection/index.module.css index 49b5252b..2d9dac50 100644 --- a/website/src/components/AcknowledgementsSection/index.module.css +++ b/website/src/components/AcknowledgementsSection/index.module.css @@ -4,6 +4,12 @@ background: linear-gradient(135deg, #F6F8FA 0%, #FFFFFF 50%, #F0F3F6 100%); position: relative; overflow: hidden; + transition: all 0.3s ease; +} + +/* Dark theme acknowledgements section */ +[data-theme='dark'] .acknowledgementsSection { + background: linear-gradient(135deg, #161B22 0%, #21262D 50%, #161B22 100%); } .acknowledgementsSection::before { @@ -19,6 +25,15 @@ radial-gradient(circle at 50% 50%, rgba(130, 80, 223, 0.03) 0%, transparent 50%); pointer-events: none; animation: acknowledgementsBackgroundFlow 15s ease-in-out infinite; + transition: all 0.3s ease; +} + +/* Dark theme acknowledgements background */ +[data-theme='dark'] .acknowledgementsSection::before { + background-image: + radial-gradient(circle at 25% 25%, rgba(88, 166, 255, 0.08) 0%, transparent 50%), + radial-gradient(circle at 75% 75%, rgba(253, 181, 22, 0.08) 0%, transparent 50%), + radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.06) 0%, transparent 50%); } .acknowledgementsContainer { @@ -39,6 +54,15 @@ -webkit-text-fill-color: transparent; background-clip: text; animation: acknowledgementsTitleGlow 4s ease-in-out infinite; + transition: all 0.3s ease; +} + +/* Dark theme title */ +[data-theme='dark'] .acknowledgementsTitle { + background: linear-gradient(135deg, #58A6FF, #FDB516, #A855F7); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; } .acknowledgementsSubtitle { @@ -49,6 +73,12 @@ max-width: 800px; margin-left: auto; margin-right: auto; + transition: color 0.3s ease; +} + +/* Dark theme subtitle */ +[data-theme='dark'] .acknowledgementsSubtitle { + color: #8B949E; } .projectsGrid { @@ -73,6 +103,13 @@ color: inherit; } +/* Dark theme project card */ +[data-theme='dark'] .projectCard { + background: rgba(33, 38, 45, 0.8); + border-color: rgba(88, 166, 255, 0.3); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); +} + .projectCard:hover { background: rgba(255, 255, 255, 0.95); border-color: rgba(88, 166, 255, 0.4); @@ -82,6 +119,13 @@ color: inherit; } +/* Dark theme project card hover */ +[data-theme='dark'] .projectCard:hover { + background: rgba(33, 38, 45, 0.95); + border-color: rgba(88, 166, 255, 0.5); + box-shadow: 0 8px 32px rgba(88, 166, 255, 0.2); +} + .projectLogoWrapper { width: 80px; height: 80px; @@ -92,6 +136,13 @@ border-radius: 12px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 8px rgba(9, 105, 218, 0.1); + transition: all 0.3s ease; +} + +/* Dark theme logo wrapper */ +[data-theme='dark'] .projectLogoWrapper { + background: rgba(48, 54, 61, 0.9); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .projectLogo { @@ -113,6 +164,12 @@ color: #1F2328; text-align: center; line-height: 1.4; + transition: color 0.3s ease; +} + +/* Dark theme project name */ +[data-theme='dark'] .projectName { + color: #F0F6FC; } /* Animations */ diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css index faa46c15..fe15ac61 100644 --- a/website/src/components/HomepageFeatures/styles.module.css +++ b/website/src/components/HomepageFeatures/styles.module.css @@ -8,6 +8,12 @@ backdrop-filter: blur(10px); position: relative; overflow: hidden; + transition: all 0.3s ease; +} + +/* Dark theme features section */ +[data-theme='dark'] .features { + background: linear-gradient(135deg, #161B22 0%, #21262D 50%, #161B22 100%); } .features::before { @@ -22,6 +28,14 @@ radial-gradient(circle at 75% 75%, rgba(253, 181, 22, 0.05) 0%, transparent 50%); pointer-events: none; animation: featuresBackgroundFlow 10s ease-in-out infinite; + transition: all 0.3s ease; +} + +/* Dark theme features background */ +[data-theme='dark'] .features::before { + background-image: + radial-gradient(circle at 25% 25%, rgba(88, 166, 255, 0.08) 0%, transparent 50%), + radial-gradient(circle at 75% 75%, rgba(253, 181, 22, 0.08) 0%, transparent 50%); } .featuresHeader { @@ -48,6 +62,12 @@ max-width: 600px; margin: 0 auto; line-height: 1.6; + transition: color 0.3s ease; +} + +/* Dark theme subtitle */ +[data-theme='dark'] .featuresSubtitle { + color: #8B949E; } .featureCard { @@ -66,6 +86,15 @@ overflow: hidden; } +/* Dark theme feature card */ +[data-theme='dark'] .featureCard { + background: rgba(33, 38, 45, 0.9); + border-color: rgba(88, 166, 255, 0.3); + box-shadow: + 0 8px 32px rgba(0, 0, 0, 0.3), + 0 0 0 1px rgba(88, 166, 255, 0.2); +} + .featureCard::before { content: ''; position: absolute; @@ -92,6 +121,15 @@ border-color: rgba(88, 166, 255, 0.4); } +/* Dark theme feature card hover */ +[data-theme='dark'] .featureCard:hover { + box-shadow: + 0 20px 60px rgba(88, 166, 255, 0.25), + 0 0 0 1px rgba(88, 166, 255, 0.4), + 0 0 40px rgba(88, 166, 255, 0.3); + border-color: rgba(88, 166, 255, 0.5); +} + .featureTitle { color: #1F2328; font-weight: 800; @@ -104,6 +142,16 @@ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; + transition: all 0.3s ease; +} + +/* Dark theme feature title */ +[data-theme='dark'] .featureTitle { + color: #F0F6FC; + background: linear-gradient(45deg, #58A6FF, #FDB516); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; } .featureDescription { @@ -113,12 +161,25 @@ font-size: 1rem; position: relative; z-index: 1; + transition: color 0.3s ease; +} + +/* Dark theme feature description */ +[data-theme='dark'] .featureDescription { + color: #8B949E; } .featureDescription strong { color: #0969DA; font-weight: 700; text-shadow: 0 0 8px rgba(9, 105, 218, 0.2); + transition: color 0.3s ease; +} + +/* Dark theme strong text */ +[data-theme='dark'] .featureDescription strong { + color: #58A6FF; + text-shadow: 0 0 8px rgba(88, 166, 255, 0.3); } /* Animations */ diff --git a/website/src/components/ThemeToggle/index.js b/website/src/components/ThemeToggle/index.js new file mode 100644 index 00000000..c75457f7 --- /dev/null +++ b/website/src/components/ThemeToggle/index.js @@ -0,0 +1,41 @@ +import React from 'react' +import { useColorMode } from '@docusaurus/theme-common' +import styles from './index.module.css' + +export default function ThemeToggle() { + const { colorMode, setColorMode } = useColorMode() + + const toggleTheme = () => { + setColorMode(colorMode === 'dark' ? 'light' : 'dark') + } + + return ( +
+ + + {colorMode === 'dark' ? 'Dark' : 'Light'} + {' '} + Mode + +
+ ) +} diff --git a/website/src/components/ThemeToggle/index.module.css b/website/src/components/ThemeToggle/index.module.css new file mode 100644 index 00000000..c5a42e7a --- /dev/null +++ b/website/src/components/ThemeToggle/index.module.css @@ -0,0 +1,192 @@ +.themeToggle { + display: flex; + align-items: center; + gap: 0.75rem; + margin: 1rem 0; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; +} + +.toggleButton { + position: relative; + width: 60px; + height: 30px; + border: 2px solid var(--tech-border-accent); + border-radius: 15px; + background: linear-gradient(135deg, var(--tech-surface-bg) 0%, var(--tech-card-bg) 100%); + cursor: pointer; + transition: all 0.3s ease; + outline: none; + overflow: hidden; + box-shadow: + inset 0 2px 4px rgba(0, 0, 0, 0.1), + 0 2px 8px rgba(9, 105, 218, 0.15); +} + +.toggleButton:hover { + border-color: var(--tech-primary-blue); + box-shadow: + inset 0 2px 4px rgba(0, 0, 0, 0.15), + 0 4px 12px rgba(9, 105, 218, 0.25); + transform: translateY(-1px); +} + +.toggleButton:active { + transform: translateY(0); + box-shadow: + inset 0 2px 4px rgba(0, 0, 0, 0.2), + 0 2px 6px rgba(9, 105, 218, 0.2); +} + +/* Dark theme button styling */ +[data-theme='dark'] .toggleButton { + background: linear-gradient(135deg, var(--tech-card-bg) 0%, var(--tech-hover-bg) 100%); + border-color: var(--tech-border-accent); + box-shadow: + inset 0 2px 4px rgba(0, 0, 0, 0.3), + 0 2px 8px rgba(88, 166, 255, 0.2); +} + +[data-theme='dark'] .toggleButton:hover { + border-color: var(--tech-primary-blue); + box-shadow: + inset 0 2px 4px rgba(0, 0, 0, 0.4), + 0 4px 12px rgba(88, 166, 255, 0.3); +} + +.toggleSlider { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 4px; + pointer-events: none; +} + +.toggleIcon { + font-size: 12px; + opacity: 0.6; + transition: all 0.3s ease; + z-index: 1; +} + +.sunIcon { + margin-left: 2px; +} + +.moonIcon { + margin-right: 2px; +} + +.toggleButton.light .sunIcon { + opacity: 1; + filter: drop-shadow(0 0 4px rgba(253, 181, 22, 0.6)); + animation: sunGlow 2s ease-in-out infinite; +} + +.toggleButton.dark .moonIcon { + opacity: 1; + filter: drop-shadow(0 0 4px rgba(88, 166, 255, 0.6)); + animation: moonGlow 2s ease-in-out infinite; +} + +.toggleThumb { + position: absolute; + top: 2px; + width: 24px; + height: 24px; + border-radius: 12px; + background: linear-gradient(135deg, #FFFFFF 0%, #F0F6FC 100%); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + display: flex; + align-items: center; + justify-content: center; + box-shadow: + 0 2px 6px rgba(0, 0, 0, 0.2), + 0 1px 3px rgba(0, 0, 0, 0.1); + z-index: 2; +} + +.thumbLight { + left: 2px; + background: linear-gradient(135deg, #FDB516 0%, #FF6B35 100%); +} + +.thumbDark { + left: 32px; + background: linear-gradient(135deg, #58A6FF 0%, #A855F7 100%); +} + +.thumbIcon { + font-size: 10px; + line-height: 1; + filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3)); +} + +.themeLabel { + font-size: 0.85rem; + font-weight: 600; + color: var(--tech-text-primary); + transition: color 0.3s ease; + user-select: none; + letter-spacing: 0.025em; +} + +/* Animations */ +@keyframes sunGlow { + 0%, 100% { + filter: drop-shadow(0 0 4px rgba(253, 181, 22, 0.4)); + } + 50% { + filter: drop-shadow(0 0 8px rgba(253, 181, 22, 0.8)); + transform: scale(1.1); + } +} + +@keyframes moonGlow { + 0%, 100% { + filter: drop-shadow(0 0 4px rgba(88, 166, 255, 0.4)); + } + 50% { + filter: drop-shadow(0 0 8px rgba(88, 166, 255, 0.8)); + transform: scale(1.1); + } +} + +/* Responsive design */ +@media (max-width: 768px) { + .themeToggle { + justify-content: center; + margin: 0.75rem 0; + } + + .toggleButton { + width: 50px; + height: 26px; + } + + .toggleThumb { + width: 20px; + height: 20px; + top: 1px; + } + + .thumbLight { + left: 1px; + } + + .thumbDark { + left: 27px; + } + + .thumbIcon { + font-size: 9px; + } + + .themeLabel { + font-size: 0.8rem; + } +} \ No newline at end of file diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 5041837a..53ab988c 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -40,31 +40,65 @@ --ifm-footer-background-color: var(--tech-surface-bg); } -/* Dark theme variables (if needed) */ +/* Dark theme variables (enhanced) */ [data-theme='dark'] { --ifm-color-primary: #58A6FF; - --ifm-color-primary-dark: #3D8BFF; - --ifm-color-primary-darker: #2E7EFF; - --ifm-color-primary-darkest: #1F6FEB; - --ifm-color-primary-light: #7BB8FF; - --ifm-color-primary-lighter: #8CC5FF; - --ifm-color-primary-lightest: #B6D7FF; - --docusaurus-highlighted-code-line-bg: rgba(88, 166, 255, 0.2); + --ifm-color-primary-dark: #409CFF; + --ifm-color-primary-darker: #2E8CFF; + --ifm-color-primary-darkest: #1C7BFF; + --ifm-color-primary-light: #70B1FF; + --ifm-color-primary-lighter: #88BCFF; + --ifm-color-primary-lightest: #A0C7FF; + --docusaurus-highlighted-code-line-bg: rgba(88, 166, 255, 0.15); /* Dark theme tech colors */ --tech-primary-blue: #58A6FF; --tech-accent-blue: #7BB8FF; --tech-accent-green: #39D353; --tech-accent-purple: #A855F7; + --tech-accent-orange: #FDB516; --tech-light-bg: #0D1117; --tech-surface-bg: #161B22; --tech-card-bg: #21262D; + --tech-hover-bg: #30363D; --tech-border: #30363D; --tech-border-accent: rgba(88, 166, 255, 0.3); --tech-text-primary: #F0F6FC; --tech-text-secondary: #8B949E; + --tech-text-muted: #6E7681; --tech-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); - --tech-gradient: linear-gradient(135deg, #0D1117 0%, #161B22 50%, #21262D 100%); + --tech-shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.6); + --tech-gradient: linear-gradient(135deg, #0D1117 0%, #161B22 25%, #21262D 50%, #161B22 75%, #0D1117 100%); + --tech-hero-gradient: linear-gradient(135deg, #0D1117 0%, #161B22 25%, #21262D 50%, #30363D 75%, #161B22 100%); + + /* Dark theme overrides */ + --ifm-background-color: var(--tech-light-bg); + --ifm-background-surface-color: var(--tech-surface-bg); + --ifm-color-content: var(--tech-text-primary); + --ifm-color-content-secondary: var(--tech-text-secondary); + --ifm-navbar-background-color: rgba(13, 17, 23, 0.95); + --ifm-footer-background-color: var(--tech-surface-bg); + --ifm-card-background-color: var(--tech-card-bg); + + /* Dark theme button colors */ + --ifm-button-background-color: var(--tech-card-bg); + --ifm-button-border-color: var(--tech-border); +} + +/* Global dark theme enforcement */ +[data-theme='dark'] { + background: var(--tech-light-bg) !important; + color: var(--tech-text-primary) !important; +} + +[data-theme='dark'] * { + border-color: var(--tech-border); +} + +/* Ensure all containers have dark background */ +[data-theme='dark'] .container, +[data-theme='dark'] .container-fluid { + background: transparent; } /* Global body styling - Light tech theme */ @@ -73,12 +107,43 @@ body { background-attachment: fixed; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; color: var(--tech-text-primary); + transition: background 0.3s ease, color 0.3s ease; + min-height: 100vh; +} + +/* Dark theme body enhancements */ +[data-theme='dark'] body { + background: var(--tech-hero-gradient); + background-attachment: fixed; +} + +/* Ensure the main wrapper also gets the dark background */ +[data-theme='dark'] .main-wrapper { + background: transparent; +} + +/* Dark theme root background */ +[data-theme='dark'] html { + background: var(--tech-light-bg); +} + +/* Dark theme for the main container */ +[data-theme='dark'] #__docusaurus { + background: var(--tech-hero-gradient); + min-height: 100vh; } /* Navbar enhancements */ .navbar { border-bottom: 1px solid var(--tech-border); box-shadow: var(--tech-shadow); + backdrop-filter: blur(10px); + transition: all 0.3s ease; +} + +[data-theme='dark'] .navbar { + background: rgba(13, 17, 23, 0.98); + border-bottom-color: var(--tech-border); } .navbar__title { @@ -87,6 +152,14 @@ body { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; + transition: all 0.3s ease; +} + +[data-theme='dark'] .navbar__title { + background: linear-gradient(45deg, var(--tech-primary-blue), var(--tech-accent-orange)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; } /* Sidebar enhancements */ @@ -94,6 +167,12 @@ body { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-right: 1px solid var(--tech-border); + transition: all 0.3s ease; +} + +[data-theme='dark'] .theme-doc-sidebar-container { + background: rgba(22, 27, 34, 0.98); + border-right-color: var(--tech-border); } .menu__link { @@ -107,12 +186,22 @@ body { transform: translateX(4px); } +[data-theme='dark'] .menu__link:hover { + background: rgba(88, 166, 255, 0.12); + color: var(--tech-primary-blue); +} + .menu__link--active { background: linear-gradient(90deg, rgba(9, 105, 218, 0.12), transparent); border-left: 3px solid var(--tech-primary-blue); color: var(--tech-primary-blue); } +[data-theme='dark'] .menu__link--active { + background: linear-gradient(90deg, rgba(88, 166, 255, 0.15), transparent); + border-left-color: var(--tech-primary-blue); +} + /* Content area enhancements */ .main-wrapper { background: transparent; @@ -126,6 +215,13 @@ article { padding: 2rem; margin: 1rem 0; box-shadow: var(--tech-shadow); + transition: all 0.3s ease; +} + +[data-theme='dark'] article { + background: var(--tech-card-bg); + border-color: var(--tech-border); + box-shadow: var(--tech-shadow-elevated); } /* Code blocks */ @@ -134,11 +230,18 @@ article { border: 1px solid var(--tech-border); border-radius: 8px; box-shadow: var(--tech-shadow); + transition: all 0.3s ease; +} + +[data-theme='dark'] .prism-code { + background: var(--tech-card-bg) !important; + border-color: var(--tech-border); } /* Headings */ h1, h2, h3, h4, h5, h6 { color: var(--tech-text-primary); + transition: color 0.3s ease; } h1 { @@ -148,6 +251,13 @@ h1 { background-clip: text; } +[data-theme='dark'] h1 { + background: linear-gradient(45deg, var(--tech-primary-blue), var(--tech-accent-orange)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + h2 { border-bottom: 2px solid var(--tech-border); padding-bottom: 0.5rem; @@ -164,6 +274,14 @@ a:hover { text-decoration: none; } +[data-theme='dark'] a { + color: var(--tech-primary-blue); +} + +[data-theme='dark'] a:hover { + color: var(--tech-accent-orange); +} + /* Buttons */ .button { border-radius: 8px; @@ -178,11 +296,19 @@ a:hover { box-shadow: var(--tech-shadow); } +[data-theme='dark'] .button--primary { + background: linear-gradient(45deg, var(--tech-primary-blue), var(--tech-accent-orange)); +} + .button--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(9, 105, 218, 0.25); } +[data-theme='dark'] .button--primary:hover { + box-shadow: 0 12px 32px rgba(88, 166, 255, 0.3); +} + /* Cards and containers */ .card { background: var(--tech-card-bg); @@ -192,16 +318,32 @@ a:hover { transition: all 0.3s ease; } +[data-theme='dark'] .card { + background: var(--tech-card-bg); + border-color: var(--tech-border); +} + .card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(9, 105, 218, 0.15); border-color: var(--tech-border-accent); } +[data-theme='dark'] .card:hover { + box-shadow: 0 16px 48px rgba(88, 166, 255, 0.2); + border-color: var(--tech-border-accent); +} + /* Footer */ .footer { background: var(--tech-surface-bg); border-top: 1px solid var(--tech-border); + transition: all 0.3s ease; +} + +[data-theme='dark'] .footer { + background: var(--tech-surface-bg); + border-top-color: var(--tech-border); } .footer__title { @@ -223,6 +365,10 @@ a:hover { text-decoration: none; } +[data-theme='dark'] .footer__link-item:hover { + color: var(--tech-accent-orange); +} + .footer__copyright { color: var(--tech-text-secondary); } @@ -260,6 +406,12 @@ a:hover { padding: 1rem; border: 1px solid var(--tech-border); box-shadow: var(--tech-shadow); + transition: all 0.3s ease; +} + +[data-theme='dark'] .mermaid { + background: var(--tech-card-bg); + border-color: var(--tech-border); } /* Mermaid light theme customization */ @@ -272,6 +424,14 @@ a:hover { stroke-width: 2px; } +[data-theme='dark'] .mermaid .node rect, +[data-theme='dark'] .mermaid .node circle, +[data-theme='dark'] .mermaid .node ellipse, +[data-theme='dark'] .mermaid .node polygon { + fill: var(--tech-hover-bg); + stroke: var(--tech-primary-blue); +} + .mermaid .node .label { color: var(--tech-text-primary); font-weight: 500; @@ -295,6 +455,12 @@ table { border-radius: 8px; overflow: hidden; border: 1px solid var(--tech-border); + transition: all 0.3s ease; +} + +[data-theme='dark'] table { + background: var(--tech-card-bg); + border-color: var(--tech-border); } th { @@ -303,6 +469,11 @@ th { font-weight: 600; } +[data-theme='dark'] th { + background: var(--tech-hover-bg); + color: var(--tech-primary-blue); +} + td, th { border-color: var(--tech-border); } @@ -312,6 +483,12 @@ td, th { background: var(--tech-card-bg); border-left: 4px solid var(--tech-primary-blue); border-radius: 0 8px 8px 0; + transition: all 0.3s ease; +} + +[data-theme='dark'] .admonition { + background: var(--tech-card-bg); + border-left-color: var(--tech-primary-blue); } .admonition-heading { @@ -319,6 +496,11 @@ td, th { color: var(--tech-primary-blue); } +[data-theme='dark'] .admonition-heading { + background: rgba(88, 166, 255, 0.15); + color: var(--tech-primary-blue); +} + /* Responsive adjustments */ @media (max-width: 768px) { article { @@ -342,6 +524,10 @@ td, th { background: rgba(255, 255, 255, 0.98); } + [data-theme='dark'] .navbar { + background: rgba(13, 17, 23, 0.98); + } + /* Keep only essential mobile fixes */ .navbar { position: sticky; @@ -355,3 +541,60 @@ td, th { padding-top: 2rem; } } + +/* Enhanced color mode toggle in navbar */ +.navbar .colorModeToggle_DEO1 { + padding: 0.5rem; + border-radius: 8px; + transition: all 0.3s ease; + background: rgba(88, 166, 255, 0.1); + border: 1px solid rgba(88, 166, 255, 0.2); +} + +[data-theme='dark'] .navbar .colorModeToggle_DEO1 { + background: rgba(88, 166, 255, 0.15); + border-color: rgba(88, 166, 255, 0.3); +} + +.navbar .colorModeToggle_DEO1:hover { + background: rgba(88, 166, 255, 0.2); + border-color: rgba(88, 166, 255, 0.4); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(88, 166, 255, 0.2); +} + +/* Enhanced toggle button styles */ +.toggle_vylO { + width: 2rem !important; + height: 2rem !important; + border-radius: 50% !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + font-size: 1rem !important; + transition: all 0.3s ease !important; + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)) !important; +} + +.toggle_vylO:hover { + transform: scale(1.1) !important; + filter: drop-shadow(0 4px 8px rgba(88, 166, 255, 0.3)) !important; +} + +/* Custom scrollbar for dark theme */ +[data-theme='dark']::-webkit-scrollbar { + width: 8px; +} + +[data-theme='dark']::-webkit-scrollbar-track { + background: var(--tech-surface-bg); +} + +[data-theme='dark']::-webkit-scrollbar-thumb { + background: var(--tech-border); + border-radius: 4px; +} + +[data-theme='dark']::-webkit-scrollbar-thumb:hover { + background: var(--tech-primary-blue); +} diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 7ac0ef2f..29449d27 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -8,6 +8,7 @@ import TypewriterCode from '@site/src/components/TypewriterCode' import NeuralNetworkBackground from '@site/src/components/NeuralNetworkBackground' import AIChipAnimation from '@site/src/components/AIChipAnimation' import AcknowledgementsSection from '@site/src/components/AcknowledgementsSection' +import ThemeToggle from '@site/src/components/ThemeToggle' import styles from './index.module.css' @@ -59,6 +60,9 @@ function HomepageHeader() { 🚀 Get Started - 5min ⏱️ +
+ +
) diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index 0e545aa6..41acc2ed 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -11,6 +11,13 @@ background: linear-gradient(135deg, #F6F8FA 0%, #FFFFFF 25%, #F0F3F6 50%, #FFFFFF 75%, #F6F8FA 100%); border-bottom: 1px solid var(--tech-border); min-height: 80vh; + transition: all 0.3s ease; +} + +/* Dark theme hero banner */ +[data-theme='dark'] .heroBanner { + background: linear-gradient(135deg, #0D1117 0%, #161B22 25%, #21262D 50%, #161B22 75%, #0D1117 100%); + border-bottom-color: var(--tech-border); } .heroBanner::before { @@ -26,6 +33,15 @@ radial-gradient(circle at 50% 50%, rgba(130, 80, 223, 0.06) 0%, transparent 70%); pointer-events: none; animation: backgroundPulse 8s ease-in-out infinite; + transition: all 0.3s ease; +} + +/* Dark theme hero banner background */ +[data-theme='dark'] .heroBanner::before { + background: + radial-gradient(circle at 20% 30%, rgba(88, 166, 255, 0.15) 0%, transparent 50%), + radial-gradient(circle at 80% 70%, rgba(253, 181, 22, 0.12) 0%, transparent 50%), + radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.1) 0%, transparent 70%); } .heroContent { @@ -137,6 +153,12 @@ transition: all 0.3s ease; } +[data-theme='dark'] .techBadge { + background: rgba(88, 166, 255, 0.15); + border-color: rgba(88, 166, 255, 0.4); + color: #7BB8FF; +} + .techBadge:hover { background: rgba(88, 166, 255, 0.2); border-color: rgba(88, 166, 255, 0.5); @@ -144,6 +166,12 @@ box-shadow: 0 4px 12px rgba(88, 166, 255, 0.2); } +[data-theme='dark'] .techBadge:hover { + background: rgba(88, 166, 255, 0.25); + border-color: rgba(88, 166, 255, 0.6); + box-shadow: 0 4px 12px rgba(88, 166, 255, 0.3); +} + /* Flow Diagram Section */ @@ -152,6 +180,11 @@ background: linear-gradient(135deg, #FFFFFF 0%, #F6F8FA 50%, #FFFFFF 100%); position: relative; overflow: hidden; + transition: all 0.3s ease; +} + +[data-theme='dark'] .flowSection { + background: linear-gradient(135deg, #161B22 0%, #21262D 50%, #161B22 100%); } .flowSection::before { @@ -166,6 +199,14 @@ radial-gradient(circle at 80% 80%, rgba(9, 105, 218, 0.03) 0%, transparent 50%), radial-gradient(circle at 40% 60%, rgba(9, 105, 218, 0.02) 0%, transparent 50%); pointer-events: none; + transition: all 0.3s ease; +} + +[data-theme='dark'] .flowSection::before { + background-image: + radial-gradient(circle at 20% 20%, rgba(88, 166, 255, 0.06) 0%, transparent 50%), + radial-gradient(circle at 80% 80%, rgba(88, 166, 255, 0.06) 0%, transparent 50%), + radial-gradient(circle at 40% 60%, rgba(88, 166, 255, 0.04) 0%, transparent 50%); } .flowContainer { @@ -202,6 +243,13 @@ border: 1px solid rgba(88, 166, 255, 0.1); backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(9, 105, 218, 0.1); + transition: all 0.3s ease; +} + +[data-theme='dark'] .architectureImageWrapper { + background: rgba(33, 38, 45, 0.8); + border-color: rgba(88, 166, 255, 0.2); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); } .architectureImage { @@ -212,17 +260,30 @@ transition: transform 0.3s ease, box-shadow 0.3s ease; } +[data-theme='dark'] .architectureImage { + box-shadow: 0 4px 20px rgba(88, 166, 255, 0.2); +} + .architectureImage:hover { transform: scale(1.02); box-shadow: 0 8px 32px rgba(9, 105, 218, 0.2); } +[data-theme='dark'] .architectureImage:hover { + box-shadow: 0 8px 32px rgba(88, 166, 255, 0.3); +} + /* AI Tech Showcase Section */ .aiTechSection { padding: 4rem 0; background: linear-gradient(135deg, #F6F8FA 0%, #FFFFFF 50%, #F0F3F6 100%); position: relative; overflow: hidden; + transition: all 0.3s ease; +} + +[data-theme='dark'] .aiTechSection { + background: linear-gradient(135deg, #21262D 0%, #161B22 50%, #21262D 100%); } .aiTechSection::before { @@ -238,6 +299,14 @@ radial-gradient(circle at 50% 50%, rgba(130, 80, 223, 0.03) 0%, transparent 50%); pointer-events: none; animation: aiBackgroundFlow 12s ease-in-out infinite; + transition: all 0.3s ease; +} + +[data-theme='dark'] .aiTechSection::before { + background-image: + radial-gradient(circle at 30% 20%, rgba(253, 181, 22, 0.08) 0%, transparent 50%), + radial-gradient(circle at 70% 80%, rgba(88, 166, 255, 0.08) 0%, transparent 50%), + radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.06) 0%, transparent 50%); } .aiTechContainer { @@ -301,6 +370,12 @@ box-shadow: 0 4px 16px rgba(9, 105, 218, 0.08); } +[data-theme='dark'] .aiFeature { + background: rgba(33, 38, 45, 0.8); + border-color: rgba(88, 166, 255, 0.3); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); +} + .aiFeature:hover { background: rgba(255, 255, 255, 0.95); border-color: rgba(88, 166, 255, 0.4); @@ -308,9 +383,10 @@ box-shadow: 0 8px 24px rgba(9, 105, 218, 0.15); } -.aiFeatureIcon { - font-size: 1.5rem; - filter: drop-shadow(0 0 8px rgba(9, 105, 218, 0.3)); +[data-theme='dark'] .aiFeature:hover { + background: rgba(33, 38, 45, 0.95); + border-color: rgba(88, 166, 255, 0.5); + box-shadow: 0 8px 24px rgba(88, 166, 255, 0.2); } .aiFeature span:last-child { @@ -319,6 +395,10 @@ font-size: 0.95rem; } +[data-theme='dark'] .aiFeature span:last-child { + color: #F0F6FC; +} + @@ -528,6 +608,70 @@ } } +/* Additional AI tech styles for dark theme */ +.aiFeatureIcon { + font-size: 1.5rem; + filter: drop-shadow(0 0 8px rgba(9, 105, 218, 0.3)); + transition: filter 0.3s ease; +} + +[data-theme='dark'] .aiFeatureIcon { + filter: drop-shadow(0 0 8px rgba(88, 166, 255, 0.4)); +} + +[data-theme='dark'] .aiTechTitle { + background: linear-gradient(45deg, #58A6FF, #FDB516, #A855F7); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.aiTechDescription { + transition: color 0.3s ease; +} + +[data-theme='dark'] .aiTechDescription { + color: #8B949E; +} + +.architectureTitle { + transition: all 0.3s ease; +} + +[data-theme='dark'] .architectureTitle { + background: linear-gradient(135deg, var(--ifm-color-primary), #A855F7); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +/* Theme toggle container */ +.themeToggleContainer { + display: flex; + justify-content: center; + margin-top: 2rem; + padding: 1rem; + background: rgba(255, 255, 255, 0.7); + border: 1px solid var(--tech-border); + border-radius: 12px; + backdrop-filter: blur(10px); + box-shadow: 0 4px 16px rgba(9, 105, 218, 0.1); + transition: all 0.3s ease; +} + +[data-theme='dark'] .themeToggleContainer { + background: rgba(33, 38, 45, 0.8); + border-color: var(--tech-border); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); +} + +@media (max-width: 768px) { + .themeToggleContainer { + margin: 1rem; + padding: 0.75rem; + } +} + From 6c608560b0cc1a6581abef89dc21ccdfd4c87bdf Mon Sep 17 00:00:00 2001 From: yuluo-yx Date: Sun, 28 Sep 2025 22:01:50 +0800 Subject: [PATCH 2/3] remove theme btn Signed-off-by: yuluo-yx --- website/src/components/ThemeToggle/index.js | 41 ---- .../components/ThemeToggle/index.module.css | 192 ------------------ website/src/pages/index.js | 4 - 3 files changed, 237 deletions(-) delete mode 100644 website/src/components/ThemeToggle/index.js delete mode 100644 website/src/components/ThemeToggle/index.module.css diff --git a/website/src/components/ThemeToggle/index.js b/website/src/components/ThemeToggle/index.js deleted file mode 100644 index c75457f7..00000000 --- a/website/src/components/ThemeToggle/index.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react' -import { useColorMode } from '@docusaurus/theme-common' -import styles from './index.module.css' - -export default function ThemeToggle() { - const { colorMode, setColorMode } = useColorMode() - - const toggleTheme = () => { - setColorMode(colorMode === 'dark' ? 'light' : 'dark') - } - - return ( -
- - - {colorMode === 'dark' ? 'Dark' : 'Light'} - {' '} - Mode - -
- ) -} diff --git a/website/src/components/ThemeToggle/index.module.css b/website/src/components/ThemeToggle/index.module.css deleted file mode 100644 index c5a42e7a..00000000 --- a/website/src/components/ThemeToggle/index.module.css +++ /dev/null @@ -1,192 +0,0 @@ -.themeToggle { - display: flex; - align-items: center; - gap: 0.75rem; - margin: 1rem 0; - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; -} - -.toggleButton { - position: relative; - width: 60px; - height: 30px; - border: 2px solid var(--tech-border-accent); - border-radius: 15px; - background: linear-gradient(135deg, var(--tech-surface-bg) 0%, var(--tech-card-bg) 100%); - cursor: pointer; - transition: all 0.3s ease; - outline: none; - overflow: hidden; - box-shadow: - inset 0 2px 4px rgba(0, 0, 0, 0.1), - 0 2px 8px rgba(9, 105, 218, 0.15); -} - -.toggleButton:hover { - border-color: var(--tech-primary-blue); - box-shadow: - inset 0 2px 4px rgba(0, 0, 0, 0.15), - 0 4px 12px rgba(9, 105, 218, 0.25); - transform: translateY(-1px); -} - -.toggleButton:active { - transform: translateY(0); - box-shadow: - inset 0 2px 4px rgba(0, 0, 0, 0.2), - 0 2px 6px rgba(9, 105, 218, 0.2); -} - -/* Dark theme button styling */ -[data-theme='dark'] .toggleButton { - background: linear-gradient(135deg, var(--tech-card-bg) 0%, var(--tech-hover-bg) 100%); - border-color: var(--tech-border-accent); - box-shadow: - inset 0 2px 4px rgba(0, 0, 0, 0.3), - 0 2px 8px rgba(88, 166, 255, 0.2); -} - -[data-theme='dark'] .toggleButton:hover { - border-color: var(--tech-primary-blue); - box-shadow: - inset 0 2px 4px rgba(0, 0, 0, 0.4), - 0 4px 12px rgba(88, 166, 255, 0.3); -} - -.toggleSlider { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 4px; - pointer-events: none; -} - -.toggleIcon { - font-size: 12px; - opacity: 0.6; - transition: all 0.3s ease; - z-index: 1; -} - -.sunIcon { - margin-left: 2px; -} - -.moonIcon { - margin-right: 2px; -} - -.toggleButton.light .sunIcon { - opacity: 1; - filter: drop-shadow(0 0 4px rgba(253, 181, 22, 0.6)); - animation: sunGlow 2s ease-in-out infinite; -} - -.toggleButton.dark .moonIcon { - opacity: 1; - filter: drop-shadow(0 0 4px rgba(88, 166, 255, 0.6)); - animation: moonGlow 2s ease-in-out infinite; -} - -.toggleThumb { - position: absolute; - top: 2px; - width: 24px; - height: 24px; - border-radius: 12px; - background: linear-gradient(135deg, #FFFFFF 0%, #F0F6FC 100%); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - display: flex; - align-items: center; - justify-content: center; - box-shadow: - 0 2px 6px rgba(0, 0, 0, 0.2), - 0 1px 3px rgba(0, 0, 0, 0.1); - z-index: 2; -} - -.thumbLight { - left: 2px; - background: linear-gradient(135deg, #FDB516 0%, #FF6B35 100%); -} - -.thumbDark { - left: 32px; - background: linear-gradient(135deg, #58A6FF 0%, #A855F7 100%); -} - -.thumbIcon { - font-size: 10px; - line-height: 1; - filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.3)); -} - -.themeLabel { - font-size: 0.85rem; - font-weight: 600; - color: var(--tech-text-primary); - transition: color 0.3s ease; - user-select: none; - letter-spacing: 0.025em; -} - -/* Animations */ -@keyframes sunGlow { - 0%, 100% { - filter: drop-shadow(0 0 4px rgba(253, 181, 22, 0.4)); - } - 50% { - filter: drop-shadow(0 0 8px rgba(253, 181, 22, 0.8)); - transform: scale(1.1); - } -} - -@keyframes moonGlow { - 0%, 100% { - filter: drop-shadow(0 0 4px rgba(88, 166, 255, 0.4)); - } - 50% { - filter: drop-shadow(0 0 8px rgba(88, 166, 255, 0.8)); - transform: scale(1.1); - } -} - -/* Responsive design */ -@media (max-width: 768px) { - .themeToggle { - justify-content: center; - margin: 0.75rem 0; - } - - .toggleButton { - width: 50px; - height: 26px; - } - - .toggleThumb { - width: 20px; - height: 20px; - top: 1px; - } - - .thumbLight { - left: 1px; - } - - .thumbDark { - left: 27px; - } - - .thumbIcon { - font-size: 9px; - } - - .themeLabel { - font-size: 0.8rem; - } -} \ No newline at end of file diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 29449d27..7ac0ef2f 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -8,7 +8,6 @@ import TypewriterCode from '@site/src/components/TypewriterCode' import NeuralNetworkBackground from '@site/src/components/NeuralNetworkBackground' import AIChipAnimation from '@site/src/components/AIChipAnimation' import AcknowledgementsSection from '@site/src/components/AcknowledgementsSection' -import ThemeToggle from '@site/src/components/ThemeToggle' import styles from './index.module.css' @@ -60,9 +59,6 @@ function HomepageHeader() { 🚀 Get Started - 5min ⏱️ -
- -
) From f399134b1922f90cfc37104f9d5f0196f95947d4 Mon Sep 17 00:00:00 2001 From: yuluo-yx Date: Sun, 28 Sep 2025 22:19:09 +0800 Subject: [PATCH 3/3] fix: fix mobile sidecar Signed-off-by: yuluo-yx --- website/docusaurus.config.js | 2 +- website/src/css/custom.css | 163 +++++++++++++++++++++++++++-- website/src/pages/index.module.css | 43 -------- 3 files changed, 158 insertions(+), 50 deletions(-) diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 7aa176d7..24764f6d 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -207,7 +207,7 @@ const config = { prism: { theme: lightCodeTheme, darkTheme: darkCodeTheme, - additionalLanguages: ['bash', 'json', 'yaml', 'go', 'rust'], + additionalLanguages: ['bash', 'json', 'yaml', 'go', 'rust', 'python'], }, colorMode: { defaultMode: 'light', diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 53ab988c..4bb91f7e 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -516,23 +516,105 @@ td, th { font-size: 2.5rem; } - /* Mobile navbar fixes */ + /* Mobile navbar fixes - Higher z-index for proper layering */ .navbar { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, 0.98); + backdrop-filter: blur(12px); } + /* Dark theme mobile navbar */ [data-theme='dark'] .navbar { background: rgba(13, 17, 23, 0.98); + backdrop-filter: blur(12px); } - /* Keep only essential mobile fixes */ - .navbar { - position: sticky; - top: 0; - z-index: 1000; + /* Mobile menu container styling */ + .navbar-sidebar { + background: var(--tech-light-bg) !important; + border-right: 1px solid var(--tech-border); + box-shadow: var(--tech-shadow); + z-index: 1001 !important; + } + + [data-theme='dark'] .navbar-sidebar { + background: var(--tech-surface-bg) !important; + border-right-color: var(--tech-border); + } + + /* Mobile menu content */ + .navbar-sidebar__items { + background: transparent; + } + + /* Mobile menu backdrop */ + .navbar-sidebar__backdrop { + background: rgba(0, 0, 0, 0.6) !important; + backdrop-filter: blur(4px); + z-index: 1000 !important; + } + + /* Mobile menu items */ + .navbar-sidebar .menu__link, + .navbar-sidebar .navbar__item { + padding: 0.75rem 1rem; + border-radius: 8px; + margin: 0.25rem 0.5rem; + transition: all 0.3s ease; + color: var(--tech-text-primary) !important; + } + + .navbar-sidebar .menu__link:hover, + .navbar-sidebar .navbar__item:hover { + background: rgba(9, 105, 218, 0.08) !important; + color: var(--tech-primary-blue) !important; + transform: translateX(4px); + } + + [data-theme='dark'] .navbar-sidebar .menu__link:hover, + [data-theme='dark'] .navbar-sidebar .navbar__item:hover { + background: rgba(88, 166, 255, 0.12) !important; + color: var(--tech-primary-blue) !important; + } + + /* Mobile menu toggle button */ + .navbar__toggle { + color: var(--tech-text-primary) !important; + transition: all 0.3s ease; + z-index: 1002; + } + + .navbar__toggle:hover { + color: var(--tech-primary-blue) !important; + background: rgba(9, 105, 218, 0.08) !important; + } + + [data-theme='dark'] .navbar__toggle:hover { + color: var(--tech-primary-blue) !important; + background: rgba(88, 166, 255, 0.12) !important; + } + + /* Ensure sidebar is visible and properly layered */ + .navbar-sidebar--show { + display: flex !important; + visibility: visible !important; + opacity: 1 !important; + } + + /* Mobile dropdown menu styling */ + .dropdown .dropdown__menu { + background: var(--tech-card-bg) !important; + border: 1px solid var(--tech-border); + border-radius: 8px; + box-shadow: var(--tech-shadow); + z-index: 1003; + } + + [data-theme='dark'] .dropdown .dropdown__menu { + background: var(--tech-card-bg) !important; + border-color: var(--tech-border); } /* Ensure hero content is not hidden behind navbar */ @@ -540,6 +622,23 @@ td, th { margin-top: 0; padding-top: 2rem; } + + /* Fix for mobile navbar links */ + .navbar__link { + color: var(--tech-text-primary) !important; + } + + .navbar__link:hover { + color: var(--tech-primary-blue) !important; + } + + [data-theme='dark'] .navbar__link { + color: var(--tech-text-primary) !important; + } + + [data-theme='dark'] .navbar__link:hover { + color: var(--tech-primary-blue) !important; + } } /* Enhanced color mode toggle in navbar */ @@ -598,3 +697,55 @@ td, th { [data-theme='dark']::-webkit-scrollbar-thumb:hover { background: var(--tech-primary-blue); } + +/* Additional mobile fixes for navbar sidebar */ +@media (max-width: 996px) { + .navbar-sidebar { + position: fixed !important; + top: 0 !important; + left: 0 !important; + width: 280px !important; + height: 100vh !important; + transform: translateX(-100%) !important; + transition: transform 0.3s ease !important; + z-index: 9999 !important; + } + + .navbar-sidebar--show .navbar-sidebar { + transform: translateX(0) !important; + } + + .navbar-sidebar__backdrop { + position: fixed !important; + top: 0 !important; + left: 0 !important; + width: 100vw !important; + height: 100vh !important; + z-index: 9998 !important; + opacity: 0 !important; + visibility: hidden !important; + transition: all 0.3s ease !important; + } + + .navbar-sidebar--show .navbar-sidebar__backdrop { + opacity: 1 !important; + visibility: visible !important; + } + + /* Force display for mobile menu */ + .navbar__toggle { + display: flex !important; + } + + /* Ensure mobile menu items are visible */ + .navbar-sidebar .navbar__items { + display: flex !important; + flex-direction: column !important; + padding: 1rem 0 !important; + } + + .navbar-sidebar .navbar__item { + display: block !important; + width: 100% !important; + } +} diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index 41acc2ed..a1939d95 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -172,8 +172,6 @@ box-shadow: 0 4px 12px rgba(88, 166, 255, 0.3); } - - /* Flow Diagram Section */ .flowSection { padding: 2.5rem 0; @@ -399,16 +397,6 @@ color: #F0F6FC; } - - - - - - - - - - /* Responsive Design */ @media screen and (max-width: 996px) { .architectureContainer { @@ -644,34 +632,3 @@ -webkit-text-fill-color: transparent; background-clip: text; } - -/* Theme toggle container */ -.themeToggleContainer { - display: flex; - justify-content: center; - margin-top: 2rem; - padding: 1rem; - background: rgba(255, 255, 255, 0.7); - border: 1px solid var(--tech-border); - border-radius: 12px; - backdrop-filter: blur(10px); - box-shadow: 0 4px 16px rgba(9, 105, 218, 0.1); - transition: all 0.3s ease; -} - -[data-theme='dark'] .themeToggleContainer { - background: rgba(33, 38, 45, 0.8); - border-color: var(--tech-border); - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); -} - -@media (max-width: 768px) { - .themeToggleContainer { - margin: 1rem; - padding: 0.75rem; - } -} - - - -