Skip to content

Fix homepage hero layout, theme flash, and Sony logo visibility. #181

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cederom merged 1 commit into from
Jul 16, 2026
Merged

Fix homepage hero layout, theme flash, and Sony logo visibility. #181

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion _includes/themes/apache/_navigation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()).
Expand Down
43 changes: 20 additions & 23 deletions _includes/themes/apache/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}">
Expand All @@ -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 %}
Expand Down Expand Up @@ -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) {
Expand All @@ -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');
}
})();

Expand Down
8 changes: 4 additions & 4 deletions assets/themes/apache/css/fonts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}

Expand All @@ -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');
}

Expand All @@ -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');
}

Expand All @@ -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');
}

Expand Down
84 changes: 63 additions & 21 deletions assets/themes/apache/css/modern.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,24 +54,36 @@

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 {
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
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 ===== */
Expand All @@ -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%;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down
Loading