diff --git a/_includes/themes/apache/_navigation.html b/_includes/themes/apache/_navigation.html index 15741e29bc..e337d503c7 100644 --- a/_includes/themes/apache/_navigation.html +++ b/_includes/themes/apache/_navigation.html @@ -108,7 +108,7 @@
-

{{ site.data.project.name }}®

+

{{ site.data.project.name }}®

Apache NuttX is a free and open-source (FOSS) real-time operating system (RTOS)

With an emphasis on standards compliance and small footprint. Scalable from 8-bit to 64-bit microcontroller environments, the primary governing standards in NuttX are POSIX and ANSI standards. Additional standard APIs from Unix and other common RTOS's (such as VxWorks) are adopted for functionality not available under these standards, or for functionality that is not appropriate for deeply-embedded environments (such as fork()). diff --git a/_includes/themes/apache/default.html b/_includes/themes/apache/default.html index 8615ba4d70..8d8e3dc8b8 100644 --- a/_includes/themes/apache/default.html +++ b/_includes/themes/apache/default.html @@ -2,6 +2,15 @@ + {{ page.title }} {% if page.description %}{% endif %} @@ -14,12 +23,16 @@ + + + + + + - - {% if page.title == "Home" %} {% endif %} @@ -60,20 +73,9 @@ const mobileThemeBtn = document.getElementById('themeBtn'); const desktopThemeBtn = document.getElementById('desktopThemeBtn'); - // Check for saved theme preference or default to system preference - const savedTheme = localStorage.getItem('theme'); - let currentTheme; - - if (savedTheme) { - currentTheme = savedTheme; - } else { - // Use system preference - currentTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; - } - - // Set initial theme - html.setAttribute('data-theme', currentTheme); - document.body.style.transition = 'background-color 0.3s ease, color 0.3s ease'; + // Theme is applied in before first paint to avoid flash. + const currentTheme = html.getAttribute('data-theme') || 'light'; + html.classList.add('theme-ready'); // Function to toggle theme function toggleTheme(e) { @@ -85,23 +87,18 @@ const theme = html.getAttribute('data-theme'); const newTheme = theme === 'dark' ? 'light' : 'dark'; html.setAttribute('data-theme', newTheme); + html.style.backgroundColor = newTheme === 'dark' ? '#191a1a' : '#f8fafc'; + html.style.colorScheme = newTheme; localStorage.setItem('theme', newTheme); - console.log('Theme toggled to:', newTheme); } // Add click listeners to both buttons if (mobileThemeBtn) { mobileThemeBtn.addEventListener('click', toggleTheme); - console.log('Mobile theme button listener attached'); } if (desktopThemeBtn) { desktopThemeBtn.addEventListener('click', toggleTheme); - console.log('Desktop theme button listener attached'); - } - - if (!mobileThemeBtn && !desktopThemeBtn) { - console.warn('Theme buttons not found'); } })(); diff --git a/assets/themes/apache/css/fonts.css b/assets/themes/apache/css/fonts.css index 7756a15c55..cb612209df 100644 --- a/assets/themes/apache/css/fonts.css +++ b/assets/themes/apache/css/fonts.css @@ -6,7 +6,7 @@ font-family: 'DM Sans'; font-style: normal; font-weight: 400; - font-display: swap; + font-display: fallback; src: url('../fonts/DMSans-Regular.ttf') format('truetype'); } @@ -15,7 +15,7 @@ font-family: 'DM Sans'; font-style: normal; font-weight: 500; - font-display: swap; + font-display: fallback; src: url('../fonts/DMSans-Medium.ttf') format('truetype'); } @@ -24,7 +24,7 @@ font-family: 'DM Sans'; font-style: normal; font-weight: 600; - font-display: swap; + font-display: fallback; src: url('../fonts/DMSans-SemiBold.ttf') format('truetype'); } @@ -33,7 +33,7 @@ font-family: 'DM Sans'; font-style: normal; font-weight: 700; - font-display: swap; + font-display: fallback; src: url('../fonts/DMSans-Bold.ttf') format('truetype'); } diff --git a/assets/themes/apache/css/modern.css b/assets/themes/apache/css/modern.css index 0b4db04efb..599bef35e1 100644 --- a/assets/themes/apache/css/modern.css +++ b/assets/themes/apache/css/modern.css @@ -54,8 +54,18 @@ html { scroll-behavior: smooth; - overflow-x: hidden; - max-width: 100vw; + overflow-x: clip; + background-color: var(--bg-page); + color-scheme: light dark; + scrollbar-gutter: stable; +} + +[data-theme="light"] { + color-scheme: light; +} + +[data-theme="dark"] { + color-scheme: dark; } body { @@ -63,15 +73,17 @@ body { background-color: var(--bg-page); color: var(--text-primary); line-height: 1.7; - transition: background-color 0.3s ease, color 0.3s ease; margin: 0; padding: 0; font-weight: 400; font-size: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - overflow-x: hidden; - max-width: 100vw; + overflow-x: clip; +} + +html.theme-ready body { + transition: background-color 0.3s ease; } /* ===== NAVBAR - CLEAN REBUILD ===== */ @@ -86,6 +98,14 @@ body { z-index: 1000; } +[data-theme="light"] .navbar { + background: var(--bg-page); +} + +[data-theme="dark"] .navbar { + background: var(--bg-page); +} + .navbar-container { max-width: 100%; height: 100%; @@ -420,7 +440,7 @@ body { align-items: center; justify-content: center; padding: calc(var(--navbar-height) + 2rem) 2rem 3rem; - background-color: var(--bg-secondary); + background-color: var(--bg-page); position: relative; overflow: hidden; } @@ -436,7 +456,7 @@ body { /* Light theme grid background - more visible */ [data-theme="light"] .hero-grid-background { - background-color: #f8f9fb; + background-color: var(--bg-page); background-image: linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, 0.03) 25%, rgba(0, 0, 0, 0.03) 26%, transparent 27%,transparent 74%, rgba(0, 0, 0, 0.03) 75%, rgba(0, 0, 0, 0.03) 76%, transparent 77%,transparent), linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, 0.03) 25%, rgba(0, 0, 0, 0.03) 26%, transparent 27%,transparent 74%, rgba(0, 0, 0, 0.03) 75%, rgba(0, 0, 0, 0.03) 76%, transparent 77%,transparent); background-size: 55px 55px; @@ -450,17 +470,20 @@ body { } .hero-content { - max-width: 1000px; + max-width: 1400px; width: 100%; text-align: center; position: relative; z-index: 1; padding: 0 clamp(1rem, 3vw, 2rem); margin: 0 auto; + display: flex; + flex-direction: column; + align-items: center; } .hero-title { - font-size: clamp(4rem, 15vw, 17rem); + font-size: clamp(3.5rem, 14vw, 17rem); font-weight: 700; color: var(--text-primary); margin-bottom: 2rem; @@ -471,14 +494,21 @@ body { line-height: 1; text-align: center; width: 100%; - position: relative; - left: -2rem; white-space: nowrap; } +.hero-title-text { + display: inline; +} + .hero-title sup { - font-size: 0.4em; + font-size: 0.35em; + line-height: 0; vertical-align: super; + position: relative; + top: -0.05em; + margin-left: 0.05em; + font-weight: 700; } .hero-subtitle { @@ -491,6 +521,8 @@ body { line-height: 1.3; font-family: 'DM Sans', sans-serif; text-align: center; + width: 100%; + max-width: 950px; } .hero-description { @@ -500,8 +532,7 @@ body { line-height: 1.8; animation: fadeInUp 0.8s ease-out; max-width: 950px; - margin-left: auto; - margin-right: auto; + width: 100%; text-align: center; font-weight: 400; font-family: 'DM Sans', sans-serif; @@ -511,6 +542,8 @@ body { display: flex; gap: clamp(0.75rem, 2vw, 1.5rem); justify-content: center; + align-items: center; + width: 100%; margin-bottom: 0; animation: fadeInUp 1.2s ease-out; flex-wrap: wrap; @@ -942,12 +975,16 @@ pre code { } .hero-title { - font-size: 2.4rem; + font-size: clamp(2.25rem, 10vw, 3.25rem); margin-top: 1.5rem; margin-bottom: 1rem; line-height: 1.1; letter-spacing: -0.01em; - left: 0; + white-space: nowrap; + } + + .hero-title sup { + top: -0.05em; } .hero-description { @@ -2036,7 +2073,13 @@ tr:hover { } /* Specific logo color adjustments for better visibility */ -/* Sony, Fitbit - black logos need to be white in dark mode */ +/* Sony SVG is white-filled: show black in light mode, white in dark mode */ +[data-theme="light"] .company-logo-img[alt="Sony"], +[data-theme="light"] .company-logo-container:hover .company-logo-img[alt="Sony"] { + filter: brightness(0); +} + +/* Fitbit - black logo needs to be white in dark mode */ [data-theme="dark"] .company-logo-img[alt="Sony"], [data-theme="dark"] .company-logo-img[alt="Fitbit"] { filter: brightness(0) invert(1); @@ -2828,7 +2871,7 @@ tr:hover { /* ===== RESPONSIVE UPDATES ===== */ @media (max-width: 1200px) { .hero-title { - font-size: clamp(4rem, 12vw, 12rem); + font-size: clamp(3.5rem, 12vw, 14rem); } .real-world-grid { @@ -2842,10 +2885,9 @@ tr:hover { @media (max-width: 768px) { .hero-title { - font-size: clamp(2.5rem, 12vw, 6rem); + font-size: clamp(2.5rem, 11vw, 5rem); letter-spacing: -0.02em; - word-break: break-word; - hyphens: auto; + white-space: nowrap; } .hero-description {