This is an automated email from the ASF dual-hosted git repository. acassis pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/nuttx-website.git
commit fde506f9aa92398dd1616326fdbf5b2fbcce9311 Author: abhishek mishra <[email protected]> AuthorDate: Tue Feb 17 22:12:04 2026 +0530 Refactor: Remove pill/capsule terminology and unused CSS classes --- _includes/themes/apache/_navigation.html | 34 ++++++++++++------------- _includes/themes/apache/default.html | 10 ++++---- assets/themes/apache/css/modern.css | 43 +++++++++++++++----------------- 3 files changed, 42 insertions(+), 45 deletions(-) diff --git a/_includes/themes/apache/_navigation.html b/_includes/themes/apache/_navigation.html index 4ab8b194e3..af5aac8014 100644 --- a/_includes/themes/apache/_navigation.html +++ b/_includes/themes/apache/_navigation.html @@ -1,4 +1,4 @@ - <nav class="capsule-navbar" role="navigation"> + <nav class="navbar" role="navigation"> <div class="navbar-container"> <!-- Logo Section --> <div class="navbar-logo"> @@ -8,39 +8,39 @@ </a> </div> - <!-- Center Pill Navigation --> - <div class="navbar-pill"> - <div class="pill-menu"> - <div class="pill-item dropdown"> - <button class="pill-link" aria-expanded="false">Community</button> - <div class="pill-dropdown"> + <!-- Navigation Menu --> + <div class="navbar-menu-wrapper"> + <div class="navbar-menu"> + <div class="menu-item dropdown"> + <button class="menu-link" aria-expanded="false">Community</button> + <div class="dropdown-menu"> <a href="{{ site.baseurl }}/community" class="dropdown-link">Get Involved</a> <a href="{{ site.baseurl }}/community-members" class="dropdown-link">Who we are</a> <a href="{{ site.data.project.community_events }}" class="dropdown-link" target="_blank" rel="noopener noreferrer">Events</a> </div> </div> - <div class="pill-item dropdown"> - <button class="pill-link" aria-expanded="false">Read</button> - <div class="pill-dropdown"> + <div class="menu-item dropdown"> + <button class="menu-link" aria-expanded="false">Read</button> + <div class="dropdown-menu"> <a href="https://nuttx.apache.org/docs/latest"; class="dropdown-link" target="_blank" rel="noopener noreferrer">Documentation</a> <a href="{{ site.baseurl }}/articles" class="dropdown-link">Articles & Publications</a> <a href="https://nuttx.apache.org/docs/latest/security.html"; class="dropdown-link" target="_blank" rel="noopener noreferrer">Security</a> </div> </div> - <div class="pill-item dropdown"> - <button class="pill-link" aria-expanded="false">Code</button> - <div class="pill-dropdown"> + <div class="menu-item dropdown"> + <button class="menu-link" aria-expanded="false">Code</button> + <div class="dropdown-menu"> <a href="{{ site.baseurl }}/download" class="dropdown-link">Releases</a> <a href="{{ site.data.project.source_repository_os_mirror }}" class="dropdown-link" target="_blank" rel="noopener noreferrer">RTOS source code</a> <a href="{{ site.data.project.source_repository_apps_mirror }}" class="dropdown-link" target="_blank" rel="noopener noreferrer">APPS source code</a> </div> </div> - <div class="pill-item dropdown"> - <button class="pill-link" aria-expanded="false">Apache</button> - <div class="pill-dropdown"> + <div class="menu-item dropdown"> + <button class="menu-link" aria-expanded="false">Apache</button> + <div class="dropdown-menu"> <a href="https://www.apache.org/foundation/how-it-works.html"; class="dropdown-link" target="_blank" rel="noopener noreferrer">Apache Software Foundation</a> <a href="https://www.apache.org/licenses/"; class="dropdown-link" target="_blank" rel="noopener noreferrer">License</a> <a href="https://www.apache.org/security/"; class="dropdown-link" target="_blank" rel="noopener noreferrer">Security</a> @@ -52,7 +52,7 @@ </div> <!-- Theme Toggle in Navbar --> - <div class="pill-item"> + <div class="menu-item"> <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode"> <img class="theme-icon sun-icon" src="{{ site.baseurl }}/static/icons/sun.svg" alt="Light mode" width="20" height="20"> <img class="theme-icon moon-icon" src="{{ site.baseurl }}/static/icons/moon.svg" alt="Dark mode" width="20" height="20"> diff --git a/_includes/themes/apache/default.html b/_includes/themes/apache/default.html index 131b87322b..5823c8302e 100644 --- a/_includes/themes/apache/default.html +++ b/_includes/themes/apache/default.html @@ -107,10 +107,10 @@ // Dropdown Toggle (function() { - const dropdowns = document.querySelectorAll('.pill-item.dropdown'); + const dropdowns = document.querySelectorAll('.menu-item.dropdown'); dropdowns.forEach(function(dropdown) { - const button = dropdown.querySelector('.pill-link'); + const button = dropdown.querySelector('.menu-link'); button.addEventListener('click', function(e) { e.stopPropagation(); @@ -119,7 +119,7 @@ dropdowns.forEach(function(other) { if (other !== dropdown) { other.classList.remove('active'); - const otherButton = other.querySelector('.pill-link'); + const otherButton = other.querySelector('.menu-link'); if (otherButton) otherButton.setAttribute('aria-expanded', 'false'); } }); @@ -132,10 +132,10 @@ // Close dropdowns when clicking outside document.addEventListener('click', function(e) { - if (!e.target.closest('.pill-item.dropdown')) { + if (!e.target.closest('.menu-item.dropdown')) { dropdowns.forEach(function(dropdown) { dropdown.classList.remove('active'); - const button = dropdown.querySelector('.pill-link'); + const button = dropdown.querySelector('.menu-link'); if (button) button.setAttribute('aria-expanded', 'false'); }); } diff --git a/assets/themes/apache/css/modern.css b/assets/themes/apache/css/modern.css index fad07610f4..fdb141b015 100644 --- a/assets/themes/apache/css/modern.css +++ b/assets/themes/apache/css/modern.css @@ -70,8 +70,8 @@ body { -moz-osx-font-smoothing: grayscale; } -/* ===== CAPSULE NAVBAR ===== */ -.capsule-navbar { +/* ===== NAVBAR ===== */ +.navbar { position: fixed; top: 0; left: 0; @@ -86,7 +86,7 @@ body { padding: 0; } -[data-theme="dark"] .capsule-navbar { +[data-theme="dark"] .navbar { background: #020617; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } @@ -135,14 +135,14 @@ body { font-family: 'Patua One', cursive; } -/* Right Navigation Section */ -.navbar-pill { +/* Navigation Menu Section */ +.navbar-menu-wrapper { display: flex; align-items: center; gap: 12px; } -.pill-menu { +.navbar-menu { display: flex; align-items: center; gap: 4px; @@ -152,11 +152,11 @@ body { border: none; } -.pill-item { +.menu-item { position: relative; } -.pill-link { +.menu-link { display: flex; align-items: center; gap: 6px; @@ -173,24 +173,24 @@ body { text-decoration: none; } -.pill-link:hover { +.menu-link:hover { background: var(--bg-card); color: var(--accent-primary); } -.pill-item.dropdown .pill-link::after { +.menu-item.dropdown .menu-link::after { content: '▾'; font-size: 12px; margin-left: 4px; transition: transform 0.2s ease; } -.pill-item.dropdown.active .pill-link::after { +.menu-item.dropdown.active .menu-link::after { transform: rotate(180deg); } /* Dropdown Menu */ -.pill-dropdown { +.dropdown-menu { position: absolute; top: calc(100% + 0.5rem); left: 50%; @@ -210,15 +210,15 @@ body { z-index: 1001; } -[data-theme="light"] .pill-dropdown { +[data-theme="light"] .dropdown-menu { background: #ffffff; } -[data-theme="dark"] .pill-dropdown { +[data-theme="dark"] .dropdown-menu { background: #0b0c0c; } -.pill-item.dropdown.active .pill-dropdown { +.menu-item.dropdown.active .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; @@ -249,8 +249,7 @@ body { gap: 8px; } -.theme-toggle, -.doc-mode-toggle { +.theme-toggle { width: 36px; height: 36px; border-radius: 8px; @@ -264,14 +263,12 @@ body { position: relative; } -.theme-toggle:hover, -.doc-mode-toggle:hover { +.theme-toggle:hover { background: var(--bg-card); border-color: var(--accent-primary); } -.theme-icon, -.doc-icon { +.theme-icon { width: 16px; height: 16px; color: var(--text-primary); @@ -367,13 +364,13 @@ body { display: none !important; } -[data-doc-mode="true"] .capsule-navbar { +[data-doc-mode="true"] .navbar { background: rgba(255, 255, 255, 0.95); border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-sm); } -[data-theme="dark"][data-doc-mode="true"] .capsule-navbar { +[data-theme="dark"][data-doc-mode="true"] .navbar { background: rgba(10, 10, 10, 0.95); }
