diff --git a/website/src/components/navigation/SidebarToggle/SidebarToggleButton.jsx b/website/src/components/navigation/SidebarToggle/SidebarToggleButton.jsx index 4be0a0a3..016f0527 100644 --- a/website/src/components/navigation/SidebarToggle/SidebarToggleButton.jsx +++ b/website/src/components/navigation/SidebarToggle/SidebarToggleButton.jsx @@ -21,6 +21,10 @@ export default function SidebarToggleButton({ [onToggle] ); + const iconClass = isHidden + ? styles.sidebarToggleIconHide + : styles.sidebarToggleIconShow; + return ( ); } diff --git a/website/src/components/navigation/SidebarToggle/SidebarToggleButton.module.css b/website/src/components/navigation/SidebarToggle/SidebarToggleButton.module.css index b9d4e797..f9aa4d56 100644 --- a/website/src/components/navigation/SidebarToggle/SidebarToggleButton.module.css +++ b/website/src/components/navigation/SidebarToggle/SidebarToggleButton.module.css @@ -39,8 +39,6 @@ opacity: 0.9; transition: opacity 0.2s ease, background-color 0.2s ease; background-color: currentColor; - -webkit-mask-image: url('/icons/sidebar-left.svg'); - mask-image: url('/icons/sidebar-left.svg'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; @@ -49,6 +47,18 @@ mask-position: center; } +/* Sidebar visible: arrow left = "Hide sidebar" */ +.sidebarToggleIconHide { + -webkit-mask-image: url('/icons/sidebar-arrow-left.svg'); + mask-image: url('/icons/sidebar-arrow-left.svg'); +} + +/* Sidebar hidden: arrow right = "Show sidebar" */ +.sidebarToggleIconShow { + -webkit-mask-image: url('/icons/sidebar-arrow-right.svg'); + mask-image: url('/icons/sidebar-arrow-right.svg'); +} + .sidebarToggleButton:hover .sidebarToggleIcon { opacity: 1; } diff --git a/website/src/css/blog-cards.css b/website/src/css/blog-cards.css index 7d5b9044..3c51a455 100644 --- a/website/src/css/blog-cards.css +++ b/website/src/css/blog-cards.css @@ -3,6 +3,17 @@ * Styles for blog post cards in the blog feed */ +/* Override theme BlogPostItem/Header/Title (.title_xxxx) from 3rem to 2rem */ +.theme-blog-wrapper [class*="title_"] { + font-size: 2.5rem !important; +} + +@media (max-width: 576px) { + .theme-blog-wrapper [class*="title_"] { + font-size: 2rem !important; + } +} + /* Remove any vertical lines/borders from blog article elements */ article.article *, article a, diff --git a/website/src/css/variables.css b/website/src/css/variables.css index 8236741a..881ffe08 100644 --- a/website/src/css/variables.css +++ b/website/src/css/variables.css @@ -203,10 +203,7 @@ main { /* Markdown headings */ .markdown h1 { - background: var(--hero-gradient-alt); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: var(--ifm-heading-color); margin-bottom: 2rem; } @@ -231,14 +228,6 @@ main { color: #ffffff; } -/* Dark mode override for markdown h1 - better contrast with light gradient */ -[data-theme='dark'] .markdown h1 { - background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 50%, #3b82f6 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - /* Dark mode headings - ensure all headings have good contrast */ [data-theme='dark'] .markdown h2, [data-theme='dark'] .markdown h3, diff --git a/website/src/pages/home/codeShowcase.module.css b/website/src/pages/home/codeShowcase.module.css index 9699e614..6df98ecd 100644 --- a/website/src/pages/home/codeShowcase.module.css +++ b/website/src/pages/home/codeShowcase.module.css @@ -1,6 +1,6 @@ /* Code Showcase Section */ -.showcaseSection { padding: 8rem 0; background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); position: relative; overflow: hidden; } +.showcaseSection { padding: 4rem 0; background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); position: relative; overflow: hidden; } .showcaseGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; max-width: 1400px; margin: 0 auto; } diff --git a/website/src/pages/home/ctaSection.module.css b/website/src/pages/home/ctaSection.module.css index 0476dccd..90ca4042 100644 --- a/website/src/pages/home/ctaSection.module.css +++ b/website/src/pages/home/ctaSection.module.css @@ -1,6 +1,6 @@ /* CTA Section */ -.ctaSection { padding: 8rem 0; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); position: relative; } +.ctaSection { padding: 5rem 0; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); position: relative; } .ctaContent { max-width: 800px; margin: 0 auto; text-align: center; padding: 4rem 2rem; background: white; border: 1px solid #e2e8f0; border-radius: 2rem; box-shadow: 0 20px 40px rgba(0,0,0,0.08); } .ctaTitle { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; color: #0f172a; margin-bottom: 1.5rem; text-align: center; } diff --git a/website/src/pages/home/featuresSection.module.css b/website/src/pages/home/featuresSection.module.css index 5e8c655c..b45126fc 100644 --- a/website/src/pages/home/featuresSection.module.css +++ b/website/src/pages/home/featuresSection.module.css @@ -1,11 +1,11 @@ /* Features Section */ -.featuresSection { padding: 8rem 0; background: #ffffff; position: relative; } +.featuresSection { padding: 4rem 0; background: #ffffff; position: relative; } .sectionHeader { text-align: center; max-width: 760px; margin: 0 auto 5rem; } .sectionBadge { display: inline-block; padding: 0.5rem 1rem; background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(37,99,235,0.1)); border: 1px solid rgba(59,130,246,0.2); border-radius: 9999px; color: var(--compose-primary-500); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1.5rem; } -.sectionTitle { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; color: #0f172a; margin-bottom: 1.5rem; } -.sectionSubtitle { font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.7; color: #64748b; margin: 0; } +.sectionTitle { font-size: clamp(2.25rem, 5vw, 2.5rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; color: #0f172a; margin-bottom: 1.5rem; } +.sectionSubtitle { font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.7; color: #64748b; margin: 0; } .featuresGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; max-width: 1280px; margin: 0 auto; } diff --git a/website/static/icons/sidebar-arrow-left.svg b/website/static/icons/sidebar-arrow-left.svg new file mode 100644 index 00000000..1f19822d --- /dev/null +++ b/website/static/icons/sidebar-arrow-left.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/website/static/icons/sidebar-arrow-right.svg b/website/static/icons/sidebar-arrow-right.svg new file mode 100644 index 00000000..126e0623 --- /dev/null +++ b/website/static/icons/sidebar-arrow-right.svg @@ -0,0 +1,8 @@ + + + + + + + +