This is an automated email from the ASF dual-hosted git repository.
cederom pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/nuttx-website.git
The following commit(s) were added to refs/heads/master by this push:
new c6242b5c60 Fix homepage hero layout, theme flash, and Sony logo
visibility.
c6242b5c60 is described below
commit c6242b5c60feea00895eb86c3dc709e73343ea29
Author: abhishek mishra <[email protected]>
AuthorDate: Wed Jul 15 19:02:06 2026 +0000
Fix homepage hero layout, theme flash, and Sony logo visibility.
Apply theme before first paint, preload DM Sans, center the hero title with
a proper ® mark, align section backgrounds, and show the Sony logo correctly in
light mode.
---
_includes/themes/apache/_navigation.html | 2 +-
_includes/themes/apache/default.html | 43 ++++++++--------
assets/themes/apache/css/fonts.css | 8 +--
assets/themes/apache/css/modern.css | 84 ++++++++++++++++++++++++--------
4 files changed, 88 insertions(+), 49 deletions(-)
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 @@
<section class="hero-section">
<div class="hero-grid-background"></div>
<div class="hero-content">
- <h1 class="hero-title">{{ site.data.project.name }}<sup>®</sup></h1>
+ <h1 class="hero-title"><span class="hero-title-text">{{
site.data.project.name }}</span><sup>®</sup></h1>
<h2 class="hero-subtitle">Apache NuttX is a free and open-source (FOSS)
real-time operating system (RTOS)</h2>
<p class="hero-description">
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 @@
<html lang="en">
<head>
<meta charset="utf-8">
+ <script>
+ (function () {
+ var savedTheme = localStorage.getItem('theme');
+ var theme = savedTheme || (window.matchMedia('(prefers-color-scheme:
dark)').matches ? 'dark' : 'light');
+ document.documentElement.setAttribute('data-theme', theme);
+ document.documentElement.style.backgroundColor = theme === 'dark' ?
'#191a1a' : '#f8fafc';
+ document.documentElement.style.colorScheme = theme;
+ })();
+ </script>
<title>{{ page.title }}</title>
{% if page.description %}<meta name="description" content="{{
page.description }}">{% endif %}
<meta name="author" content="{{ site.author.name }}">
@@ -14,12 +23,16 @@
<script
src="http://html5shim.googlecode.com/svn/trunk/html5.js";></script>
<![endif]-->
+ <!-- Local Fonts (load before other styles to avoid font swap on refresh)
-->
+ <link rel="preload" href="{{ site.baseurl
}}/assets/themes/apache/fonts/DMSans-Regular.ttf" as="font" type="font/ttf"
crossorigin>
+ <link rel="preload" href="{{ site.baseurl
}}/assets/themes/apache/fonts/DMSans-Medium.ttf" as="font" type="font/ttf"
crossorigin>
+ <link rel="preload" href="{{ site.baseurl
}}/assets/themes/apache/fonts/DMSans-Bold.ttf" as="font" type="font/ttf"
crossorigin>
+ <link href="{{ site.baseurl }}/assets/themes/apache/css/fonts.css"
rel="stylesheet" type="text/css">
+
<!-- Le styles -->
<link href="{{ site.baseurl
}}/assets/themes/apache/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="{{ site.baseurl }}/assets/themes/apache/css/modern.css"
rel="stylesheet" type="text/css">
<link href="{{ site.baseurl }}/assets/themes/apache/css/syntax.css"
rel="stylesheet" type="text/css" media="screen" />
- <!-- Local Fonts (CSP compliant) -->
- <link href="{{ site.baseurl }}/assets/themes/apache/css/fonts.css"
rel="stylesheet" type="text/css">
{% if page.title == "Home" %}
<link href="{{ site.baseurl }}/assets/themes/apache/css/demo.css"
rel="stylesheet" type="text/css">
{% 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 <head> 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 {
