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 71dab4f82758f84d499ff6354ef0a0f473d07650 Author: abhishek mishra <[email protected]> AuthorDate: Sat Feb 21 21:42:36 2026 +0530 Separate content from theme and modernize website - Refactored homepage to use data-driven architecture with _data/homepage.yml - Created modular theme sections in _includes/themes/apache/sections/ - Reduced index.md from 416 to 39 lines (93% reduction) - Fixed Gemfile.lock to be platform-agnostic (removed mingw-specific packages) - Removed minimalistic UI switch - Implemented system theme detection (dark/light mode auto-detection) - Updated event info for NuttX International Workshop 2026 (Glasgow) - Enhanced responsive design with clamp() for fluid typography - Added GitHub integration with stats badges and repository links - Improved mobile navigation with hamburger menu - Updated demo page styling and metadata This enables easy theme switching without touching content files. --- Gemfile.lock | 16 +- _data/homepage.yml | 155 ++++ _includes/themes/apache/_doc_minimal.html | 35 - _includes/themes/apache/_navigation.html | 262 +++--- _includes/themes/apache/default.html | 101 +-- _includes/themes/apache/demo.html | 6 +- _includes/themes/apache/sections/_community.html | 43 + _includes/themes/apache/sections/_companies.html | 25 + _includes/themes/apache/sections/_demo.html | 31 + .../themes/apache/sections/_documentation.html | 23 + _includes/themes/apache/sections/_features.html | 23 + _includes/themes/apache/sections/_technical.html | 29 + assets/themes/apache/css/demo.css | 27 + assets/themes/apache/css/modern.css | 933 +++++++++++---------- demo.md | 10 +- index.md | 389 +-------- 16 files changed, 1044 insertions(+), 1064 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index d5dc8e5e65..07e0703cd4 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -12,8 +12,12 @@ GEM eventmachine (>= 0.12.9) http_parser.rb (~> 0) eventmachine (1.2.7) + ffi (1.17.3) ffi (1.17.3-x64-mingw-ucrt) forwardable-extended (2.6.0) + google-protobuf (4.33.5) + bigdecimal + rake (>= 13) google-protobuf (4.33.5-x64-mingw-ucrt) bigdecimal rake (>= 13) @@ -67,6 +71,8 @@ GEM rexml (3.4.4) rouge (4.7.0) safe_yaml (1.0.5) + sass-embedded (1.97.3) + google-protobuf (~> 4.31) sass-embedded (1.97.3-x64-mingw-ucrt) google-protobuf (~> 4.31) terminal-table (3.0.2) @@ -75,6 +81,7 @@ GEM webrick (1.9.2) PLATFORMS + ruby x64-mingw-ucrt DEPENDENCIES @@ -92,9 +99,11 @@ CHECKSUMS csv (3.3.5) sha256=6e5134ac3383ef728b7f02725d9872934f523cb40b961479f69cf3afa6c8e73f em-websocket (0.5.3) sha256=f56a92bde4e6cb879256d58ee31f124181f68f8887bd14d53d5d9a292758c6a8 eventmachine (1.2.7) sha256=994016e42aa041477ba9cff45cbe50de2047f25dd418eba003e84f0d16560972 - ffi (1.17.3-x64-mingw-ucrt) sha256=5f1d7d067a9a1058ad183dba25b05557cd51c85fc1768c49338eabc1cf242d7c + ffi (1.17.3) sha256=5f1d7d067a9a1058ad183dba25b05557cd51c85fc1768c49338eabc1cf242d7c + ffi (1.17.3-x64-mingw-ucrt) forwardable-extended (2.6.0) sha256=1bec948c469bbddfadeb3bd90eb8c85f6e627a412a3e852acfd7eaedbac3ec97 - google-protobuf (4.33.5-x64-mingw-ucrt) sha256=2286e8fd91dff6a161c45b66ad2a1a46e9a5eefb2496c68636b31d6e80eb5820 + google-protobuf (4.33.5) sha256=2286e8fd91dff6a161c45b66ad2a1a46e9a5eefb2496c68636b31d6e80eb5820 + google-protobuf (4.33.5-x64-mingw-ucrt) http_parser.rb (0.8.1) sha256=9ae8df145b39aa5398b2f90090d651c67bd8e2ebfe4507c966579f641e11097a i18n (1.14.8) sha256=285778639134865c5e0f6269e0b818256017e8cde89993fdfcbfb64d088824a5 jekyll (4.4.1) sha256=4c1144d857a5b2b80d45b8cf5138289579a9f8136aadfa6dd684b31fe2bc18c1 @@ -116,7 +125,8 @@ CHECKSUMS rexml (3.4.4) sha256=19e0a2c3425dfbf2d4fc1189747bdb2f849b6c5e74180401b15734bc97b5d142 rouge (4.7.0) sha256=dba5896715c0325c362e895460a6d350803dbf6427454f49a47500f3193ea739 safe_yaml (1.0.5) sha256=a6ac2d64b7eb027bdeeca1851fe7e7af0d668e133e8a88066a0c6f7087d9f848 - sass-embedded (1.97.3-x64-mingw-ucrt) sha256=72994dcfacc0559789a3624c78c5fa66962379bb8d8c0d6dea85906c5b6e66ee + sass-embedded (1.97.3) sha256=72994dcfacc0559789a3624c78c5fa66962379bb8d8c0d6dea85906c5b6e66ee + sass-embedded (1.97.3-x64-mingw-ucrt) terminal-table (3.0.2) sha256=f951b6af5f3e00203fb290a669e0a85c5dd5b051b3b023392ccfd67ba5abae91 unicode-display_width (2.6.0) sha256=12279874bba6d5e4d2728cef814b19197dbb10d7a7837a869bab65da943b7f5a webrick (1.9.2) sha256=beb4a15fc474defed24a3bda4ffd88a490d517c9e4e6118c3edce59e45864131 diff --git a/_data/homepage.yml b/_data/homepage.yml new file mode 100644 index 0000000000..f2769223f9 --- /dev/null +++ b/_data/homepage.yml @@ -0,0 +1,155 @@ +# Homepage content data +# This file contains all the content for the homepage sections +# Separating content from theme allows easy theme switching + +# Features Section +features: + title: "Key Features" + subtitle: "A real-time operating system designed for embedded systems" + items: + - icon: "cpu-architecture.svg" + title: "15+ CPU Architectures" + description: "Runs on ARM, RISC-V, x86, Xtensa, and more. Supports multiple CPU architectures and hardware platforms." + - icon: "hardware-boards.svg" + title: "300+ Hardware Boards" + description: "Extensive board support from popular development kits to custom hardware." + - icon: "configuration.svg" + title: "1500+ Configuration Templates" + description: "Pre-configured builds for rapid prototyping and production deployment." + - icon: "community-people.svg" + title: "Open Community" + description: "Developed and maintained by an active open-source community." + +# Documentation Section +documentation: + title: "Documentation" + subtitle: "Complete guides, security information, and research papers" + resources: + - icon: "document-full.svg" + title: "Full Documentation" + description: "Complete API reference, user guides, and developer documentation for Apache NuttX RTOS." + url: "https://nuttx.apache.org/docs/latest"; + external: true + - icon: "security-shield.svg" + title: "Security Documentation" + description: "Security guidelines, best practices, and vulnerability reporting information." + url: "https://nuttx.apache.org/docs/latest/security.html"; + external: true + - icon: "articles-papers.svg" + title: "Scientific Papers & Articles" + description: "Research papers, technical articles, and publications about Apache NuttX." + url: "/articles" + external: false + +# Technical Structure Section +technical: + title: "Technical Structure" + subtitle: "Access source code, releases, and project repositories" + intro: "Release packages are available for download. We use three primary GIT repositories to develop the project: <strong><a href=\"{{ site.data.project.source_repository_os_mirror }}\" target=\"_blank\" rel=\"noopener noreferrer\">RTOS</a></strong>, <strong><a href=\"{{ site.data.project.source_repository_apps_mirror }}\" target=\"_blank\" rel=\"noopener noreferrer\">Applications</a></strong>, and <strong><a href=\"https://github.com/apache/nuttx-website\"; target=\"_blank\" rel=\"noo [...] + resources: + - icon: "download.svg" + title: "Release Packages" + description: "Download official Apache NuttX releases with verified signatures and checksums." + url: "/download" + external: false + - icon: "code-repos.svg" + title: "RTOS Repository" + description: "Core RTOS code, kernel, drivers, and documentation sources." + url_key: "source_repository_os_mirror" + external: true + - icon: "code-repos.svg" + title: "Applications Repository" + description: "Sample applications, examples, and utilities for NuttX." + url_key: "source_repository_apps_mirror" + external: true + - icon: "website-globe.svg" + title: "Website Repository" + description: "Source code for the Apache NuttX project website." + url: "https://github.com/apache/nuttx-website"; + external: true + - icon: "video-play.svg" + title: "Video Tutorials" + description: "Step-by-step video guides and workshops on YouTube." + url: "https://www.youtube.com/@nuttxchannel"; + external: true + - icon: "code-examples.svg" + title: "Code Examples" + description: "Browse hundreds of sample applications and code examples." + url: "https://github.com/apache/nuttx-apps"; + external: true + +# Demo Section +demo: + title: "Try NuttX Shell" + description: "Experience NuttX POSIX-compliant shell environment. Click to launch the interactive WebAssembly demo." + terminal_title: "NuttShell (NSH)" + terminal_version: "NuttX-12.4.0" + url: "/demo" + +# Community Section +community: + title: "Join the Apache NuttX Community" + description: "NuttX is developed and maintained by an international <a href=\"{{ site.baseurl }}/community-members\">group of volunteers</a> from all around the world. We welcome developers of all skill levels to contribute to the project. View our <a href=\"https://github.com/apache/nuttx/graphs/contributors\"; target=\"_blank\" rel=\"noopener noreferrer\">full contributor list on GitHub</a>." + channels_title: "Connect With Us" + channels: + - name: "Mailing List (Main)" + icon: "mailing-list.svg" + url_key: "dev_list_archive_mailarchive" + - name: "Discord" + icon: "discord.svg" + url_key: "socialmedia_discord" + - name: "Hackster" + icon: "hackster.svg" + url_key: "socialmedia_hackster" + - name: "LinkedIn" + icon: "linkedin.svg" + url_key: "socialmedia_linkedin_company" + - name: "Reddit" + icon: "reddit.svg" + url_key: "socialmedia_reddit" + - name: "YouTube" + icon: "youtube.svg" + url_key: "socialmedia_youtube" + +# Event Information +event: + title: "NuttX International Workshop 2026" + date: "October 11-14, 2026" + location: "Hilton Glasgow, Scotland" + description: "Join us at Community Over Code Glasgow 2026 for the NuttX International Workshop. Four in-person days of sessions focusing on Search, Big Data, IoT, Community, and more." + links: + - text: "Community Over Code" + url: "https://communityovercode.org/"; + external: true + - text: "NuttX Events" + url_key: "community_events" + external: false + +# Companies Section +companies: + title: "Trusted by teams everywhere" + logos: + - name: "Sony" + image: "sony.svg" + url: "https://www.sony.com"; + - name: "Samsung" + image: "samsung.svg" + url: "https://www.samsung.com"; + - name: "Xiaomi" + image: "xiaomi.svg" + url: "https://www.mi.com"; + - name: "Google" + image: "google.svg" + url: "https://www.google.com"; + - name: "Motorola" + image: "motorola.svg" + url: "https://www.motorola.com"; + - name: "Fitbit" + image: "fitbit.svg" + url: "https://www.fitbit.com"; + - name: "Seeed Studio" + image: "seeed.png" + url: "https://www.seeedstudio.com"; + - name: "InSpace" + image: "inspace.png" + url: "https://www.cuinspace.ca/"; diff --git a/_includes/themes/apache/_doc_minimal.html b/_includes/themes/apache/_doc_minimal.html deleted file mode 100644 index 155c117dfc..0000000000 --- a/_includes/themes/apache/_doc_minimal.html +++ /dev/null @@ -1,35 +0,0 @@ -<!-- Minimal Documentation Mode Content --> -<div class="doc-content-section" style="display: none;"> - <h2>Apache NuttX</h2> - <p>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 [...] - - <h3>Get NuttX</h3> - <p>Release packages are available <a href="{{ site.baseurl }}/download">here</a>. We use three GIT repositories to develop the project: <a href="{{ site.data.project.source_repository_os_mirror }}" target="_blank" rel="noopener noreferrer">RTOS</a>, <a href="{{ site.data.project.source_repository_apps_mirror }}" target="_blank" rel="noopener noreferrer">Applications</a>, and <a href="https://github.com/apache/nuttx-website"; target="_blank" rel="noopener noreferrer">Website</a>. Documen [...] - - <h3>Join Us</h3> - <p>NuttX is developed and maintained by an international group of volunteers from all around the world. Please take a look at our <a href="{{ site.baseurl }}/community">community page</a> to see how to join us and contribute to the project.</p> - - <p><a href="{{ site.data.project.mailing_list }}" target="_blank" rel="noopener noreferrer">Mailing list</a> is our main communication channel, but we are also present on various social media platforms such as <a href="https://discord.gg/nuttx"; target="_blank" rel="noopener noreferrer">Discord</a>, <a href="https://www.hackster.io/nuttx"; target="_blank" rel="noopener noreferrer">Hackster</a>, <a href="https://www.linkedin.com/groups/8528179/"; target="_blank" rel="noopener noreferrer">L [...] - - <p><a href="https://www.youtube.com/@nuttxchannel"; target="_blank" rel="noopener noreferrer">NuttX Channel on YouTube</a> contains many demos, tutorials, and hands-on exercises, as well as events videos.</p> - - <h3>Documentation</h3> - <p>Full project documentation can be found <a href="https://nuttx.apache.org/docs/latest"; target="_blank" rel="noopener noreferrer">here</a>. Security documentation is <a href="https://nuttx.apache.org/docs/latest/security.html"; target="_blank" rel="noopener noreferrer">here</a>. NuttX related articles and scientific papers are <a href="{{ site.baseurl }}/articles">here</a>.</p> - - <h3>Online Demo</h3> - <p>NuttX is incredibly portable. It runs on over 15 different CPU architectures, over 300 popular embedded hardware boards and development kits, provides more than 1500 ready to use firmware configuration templates for your project. See yourself, try out the <a href="{{ site.baseurl }}/demo">NuttX WebAssembly demo</a>.</p> - - <h3>Community Events</h3> - <h4>International Workshop 2025</h4> - <p>The Apache NuttX International Workshop is organized every year. You can attend online or in person for free. This year we meet on 16-17th October 2025 in Costa Rica. We hope to meet with Gregory Nutt on site. See you there!</p> - - <p>Please visit <a href="{{ site.data.project.community_events }}" target="_blank" rel="noopener noreferrer">events website</a> for more details. You can join the event at <a href="https://www.linkedin.com/events/"; target="_blank" rel="noopener noreferrer">LinkedIn</a>. Call For Papers is now open!</p> - - <p>The scope of the workshop is the Apache Nuttx® Real Time Operating System, the tools used for its design, development, deployment, debugging, and maintenance, the applications that use it, and the hardware on which it typically runs. The target audience is embedded systems practitioners across both industry and academia.</p> -</div> - -<style> -[data-doc-mode="true"] .doc-content-section { - display: block !important; -} -</style> diff --git a/_includes/themes/apache/_navigation.html b/_includes/themes/apache/_navigation.html index d70cc73362..4973fe1633 100644 --- a/_includes/themes/apache/_navigation.html +++ b/_includes/themes/apache/_navigation.html @@ -1,115 +1,98 @@ - <nav class="navbar" role="navigation"> - <div class="navbar-container"> - <!-- Logo Section --> - <div class="navbar-logo"> - <a href="{{ site.baseurl }}/" class="logo-link"> - <img src="{{ site.baseurl }}/assets/themes/apache/img/logo.png" alt="NuttX Logo" class="logo-img"> - <span class="logo-text">Apache NuttX®</span> - </a> + <nav class="navbar"> + <div class="navbar-container"> + <a href="{{ site.baseurl }}/" class="navbar-logo"> + <img src="{{ site.baseurl }}/assets/themes/apache/img/logo.png" alt="NuttX" class="logo-img"> + <span class="logo-text">Apache NuttX®</span> + </a> + + <button class="mobile-toggle" id="mobileToggle" aria-label="Menu"> + <span class="hamburger-line"></span> + <span class="hamburger-line"></span> + <span class="hamburger-line"></span> + </button> + + <div class="navbar-nav" id="navbarNav"> + <div class="nav-item"> + <button class="nav-btn" type="button"> + Community + <svg width="10" height="6" viewBox="0 0 10 6"> + <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" fill="none"/> + </svg> + </button> + <div class="nav-dropdown"> + <a href="{{ site.baseurl }}/community">Get Involved</a> + <a href="{{ site.baseurl }}/community-members">Who we are</a> + <a href="{{ site.data.project.community_events }}" target="_blank">Events</a> </div> - - <!-- Navigation Menu --> - <div class="navbar-menu-wrapper"> - <nav class="navbar-menu"> - <!-- Community Dropdown --> - <div class="nav-item has-dropdown"> - <button class="nav-link" type="button"> - Community - <svg class="dropdown-arrow" width="10" height="6" viewBox="0 0 10 6" fill="none"> - <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> - </svg> - </button> - <div class="dropdown-content"> - <a href="{{ site.baseurl }}/community" class="dropdown-item">Get Involved</a> - <a href="{{ site.baseurl }}/community-members" class="dropdown-item">Who we are</a> - <a href="{{ site.data.project.community_events }}" class="dropdown-item" target="_blank" rel="noopener noreferrer">Events</a> - </div> - </div> - - <!-- Read Dropdown --> - <div class="nav-item has-dropdown"> - <button class="nav-link" type="button"> - Read - <svg class="dropdown-arrow" width="10" height="6" viewBox="0 0 10 6" fill="none"> - <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> - </svg> - </button> - <div class="dropdown-content"> - <a href="https://nuttx.apache.org/docs/latest"; class="dropdown-item" target="_blank" rel="noopener noreferrer">Documentation</a> - <a href="{{ site.baseurl }}/articles" class="dropdown-item">Articles & Publications</a> - <a href="https://nuttx.apache.org/docs/latest/security.html"; class="dropdown-item" target="_blank" rel="noopener noreferrer">Security</a> - </div> - </div> - - <!-- Code Dropdown --> - <div class="nav-item has-dropdown"> - <button class="nav-link" type="button"> - Code - <svg class="dropdown-arrow" width="10" height="6" viewBox="0 0 10 6" fill="none"> - <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> - </svg> - </button> - <div class="dropdown-content"> - <a href="{{ site.baseurl }}/download" class="dropdown-item">Releases</a> - <a href="{{ site.data.project.source_repository_os_mirror }}" class="dropdown-item" target="_blank" rel="noopener noreferrer">RTOS source code</a> - <a href="{{ site.data.project.source_repository_apps_mirror }}" class="dropdown-item" target="_blank" rel="noopener noreferrer">APPS source code</a> - </div> - </div> - - <!-- Apache Dropdown --> - <div class="nav-item has-dropdown"> - <button class="nav-link" type="button"> - Apache - <svg class="dropdown-arrow" width="10" height="6" viewBox="0 0 10 6" fill="none"> - <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> - </svg> - </button> - <div class="dropdown-content"> - <a href="https://www.apache.org/foundation/how-it-works.html"; class="dropdown-item" target="_blank" rel="noopener noreferrer">Apache Software Foundation</a> - <a href="https://www.apache.org/licenses/"; class="dropdown-item" target="_blank" rel="noopener noreferrer">License</a> - <a href="https://www.apache.org/security/"; class="dropdown-item" target="_blank" rel="noopener noreferrer">Security</a> - <a href="https://privacy.apache.org/policies/privacy-policy-public.html"; class="dropdown-item" target="_blank" rel="noopener noreferrer">Privacy</a> - <a href="https://www.apache.org/events/current-event.html"; class="dropdown-item" target="_blank" rel="noopener noreferrer">Events</a> - <a href="https://www.apache.org/foundation/sponsorship.html"; class="dropdown-item" target="_blank" rel="noopener noreferrer">Sponsorship</a> - <a href="https://www.apache.org/foundation/thanks.html"; class="dropdown-item" target="_blank" rel="noopener noreferrer">Thanks</a> - </div> - </div> - </nav> - - <!-- Theme Toggle --> - <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode" type="button"> - <svg class="theme-icon sun-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> - <circle cx="12" cy="12" r="5"/> - <line x1="12" y1="1" x2="12" y2="3"/> - <line x1="12" y1="21" x2="12" y2="23"/> - <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/> - <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/> - <line x1="1" y1="12" x2="3" y2="12"/> - <line x1="21" y1="12" x2="23" y2="12"/> - <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/> - <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/> - </svg> - <svg class="theme-icon moon-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> - <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/> - </svg> - </button> - - {% if page.title == "Home" %} - <!-- Minimalistic UI Toggle --> - <button class="doc-mode-toggle-navbar" id="docModeToggle" aria-label="Toggle minimalistic UI" title="Toggle minimalistic documentation view" type="button"> - <span class="toggle-label">Minimalistic</span> - </button> - {% endif %} + </div> + + <div class="nav-item"> + <button class="nav-btn" type="button"> + Read + <svg width="10" height="6" viewBox="0 0 10 6"> + <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" fill="none"/> + </svg> + </button> + <div class="nav-dropdown"> + <a href="https://nuttx.apache.org/docs/latest"; target="_blank">Documentation</a> + <a href="{{ site.baseurl }}/articles">Articles & Publications</a> + <a href="https://nuttx.apache.org/docs/latest/security.html"; target="_blank">Security</a> + </div> + </div> + + <div class="nav-item"> + <button class="nav-btn" type="button"> + Code + <svg width="10" height="6" viewBox="0 0 10 6"> + <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" fill="none"/> + </svg> + </button> + <div class="nav-dropdown"> + <a href="{{ site.baseurl }}/download">Releases</a> + <a href="{{ site.data.project.source_repository_os_mirror }}" target="_blank">RTOS source code</a> + <a href="{{ site.data.project.source_repository_apps_mirror }}" target="_blank">APPS source code</a> </div> </div> - </nav> + + <div class="nav-item"> + <button class="nav-btn" type="button"> + Apache + <svg width="10" height="6" viewBox="0 0 10 6"> + <path d="M1 1L5 5L9 1" stroke="currentColor" stroke-width="1.5" fill="none"/> + </svg> + </button> + <div class="nav-dropdown"> + <a href="https://www.apache.org/foundation/how-it-works.html"; target="_blank">Apache Software Foundation</a> + <a href="https://www.apache.org/licenses/"; target="_blank">License</a> + <a href="https://www.apache.org/security/"; target="_blank">Security</a> + <a href="https://privacy.apache.org/policies/privacy-policy-public.html"; target="_blank">Privacy</a> + <a href="https://www.apache.org/events/current-event.html"; target="_blank">Events</a> + <a href="https://www.apache.org/foundation/sponsorship.html"; target="_blank">Sponsorship</a> + <a href="https://www.apache.org/foundation/thanks.html"; target="_blank">Thanks</a> + </div> + </div> + </div> + + <button class="theme-btn" id="themeBtn" aria-label="Toggle theme"> + <svg class="sun" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> + <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/> + <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/> + <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/> + <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/> + </svg> + <svg class="moon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> + <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/> + </svg> + </button> + </div> +</nav> {% if page.title == "Home" %} <section class="hero-section"> <div class="hero-grid-background"></div> <div class="hero-content"> - <h1 class="hero-title" style="white-space: nowrap; text-align: center;">{{ site.data.project.name }}<sup>®</sup></h1> + <h1 class="hero-title">{{ site.data.project.name }}<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()). @@ -128,45 +111,46 @@ </a> </div> - <!-- GitHub Stats --> + <!-- GitHub Stats - Static Shields.io Badges --> <div class="hero-stats"> - <div class="stats-label">GitHub Stats</div> - <div class="stats-container"> - <a href="https://github.com/apache/nuttx/stargazers"; target="_blank" rel="noopener noreferrer" class="hero-stat"> - <img class="hero-stat-icon" src="{{ site.baseurl }}/static/icons/star.svg" alt="Stars" width="16" height="16"> - <span class="hero-stat-value" id="heroStars">-</span> - <span>Stars</span> - </a> - <a href="https://github.com/apache/nuttx/fork"; target="_blank" rel="noopener noreferrer" class="hero-stat"> - <img class="hero-stat-icon" src="{{ site.baseurl }}/static/icons/fork.svg" alt="Forks" width="16" height="16"> - <span class="hero-stat-value" id="heroForks">-</span> - <span>Forks</span> - </a> + <div class="github-stats-pill"> + <div class="stats-repo-group"> + <a href="{{ site.data.project.source_repository_os_mirror }}" class="repo-link" target="_blank" rel="noopener noreferrer"> + <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> + <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.40 [...] + </svg> + <span class="repo-name">RTOS</span> + </a> + <div class="repo-stats"> + <a href="https://github.com/apache/nuttx/stargazers"; target="_blank" rel="noopener noreferrer"> + <img src="https://img.shields.io/github/stars/apache/nuttx?style=flat&logo=github&label=Stars&labelColor=2d3748&color=3b82f6"; alt="RTOS Stars"> + </a> + <a href="https://github.com/apache/nuttx/network/members"; target="_blank" rel="noopener noreferrer"> + <img src="https://img.shields.io/github/forks/apache/nuttx?style=flat&logo=github&label=Forks&labelColor=2d3748&color=3b82f6"; alt="RTOS Forks"> + </a> + </div> + </div> + + <div class="stats-divider"></div> + + <div class="stats-repo-group"> + <a href="{{ site.data.project.source_repository_apps_mirror }}" class="repo-link" target="_blank" rel="noopener noreferrer"> + <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"> + <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.40 [...] + </svg> + <span class="repo-name">Apps</span> + </a> + <div class="repo-stats"> + <a href="https://github.com/apache/nuttx-apps/stargazers"; target="_blank" rel="noopener noreferrer"> + <img src="https://img.shields.io/github/stars/apache/nuttx-apps?style=flat&logo=github&label=Stars&labelColor=2d3748&color=3b82f6"; alt="Apps Stars"> + </a> + <a href="https://github.com/apache/nuttx-apps/network/members"; target="_blank" rel="noopener noreferrer"> + <img src="https://img.shields.io/github/forks/apache/nuttx-apps?style=flat&logo=github&label=Forks&labelColor=2d3748&color=3b82f6"; alt="Apps Forks"> + </a> + </div> + </div> </div> </div> </div> </section> - -<!-- Minimal Documentation Mode Content --> -<div class="doc-content-section" style="display: none;"> - <h2>Apache NuttX</h2> - <p>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 [...] - - <h3>Get NuttX</h3> - <p>Release packages are available <a href="{{ site.baseurl }}/download">for download</a>. We use three primary GIT repositories to develop the project: <a href="{{ site.data.project.source_repository_os_mirror }}" target="_blank" rel="noopener noreferrer">RTOS</a>, <a href="{{ site.data.project.source_repository_apps_mirror }}" target="_blank" rel="noopener noreferrer">Applications</a>, and <a href="https://github.com/apache/nuttx-website"; target="_blank" rel="noopener noreferrer">Webs [...] - - <h3>Documentation</h3> - <p>Full project documentation can be found <a href="https://nuttx.apache.org/docs/latest"; target="_blank" rel="noopener noreferrer">here</a>. Security documentation is <a href="https://nuttx.apache.org/docs/latest/security.html"; target="_blank" rel="noopener noreferrer">here</a>. NuttX related articles and scientific papers are <a href="{{ site.baseurl }}/articles">here</a>.</p> - - <h3>Online Demo</h3> - <p>NuttX is incredibly portable. It runs on over 15 different CPU architectures, over 300 popular embedded hardware boards and development kits, provides more than 1500 ready to use firmware configuration templates for your project. See yourself, try out the <a href="{{ site.baseurl }}/demo">NuttX WebAssembly demo</a>.</p> - - <h3>Community Events</h3> - <h4>International Workshop 2026</h4> - <p>The Apache NuttX International Workshop is organized every year. You can attend online or in person for free. This year we meet on 16-17th October 2026 in Costa Rica. We hope to meet with Gregory Nutt on site. See you there!</p> - - <p>Please visit <a href="{{ site.data.project.community_events }}" target="_blank" rel="noopener noreferrer">events website</a> for more details. You can join the event at <a href="https://www.linkedin.com/events/"; target="_blank" rel="noopener noreferrer">LinkedIn</a>. Call For Papers is now open!</p> - - <p>The scope of the workshop is the Apache Nuttx® Real Time Operating System, the tools used for its design, development, deployment, debugging, and maintenance, the applications that use it, and the hardware on which it typically runs. The target audience is embedded systems practitioners across both industry and academia.</p> -</div> {% endif %} diff --git a/_includes/themes/apache/default.html b/_includes/themes/apache/default.html index c8cd770063..cb7dd1a0be 100644 --- a/_includes/themes/apache/default.html +++ b/_includes/themes/apache/default.html @@ -56,30 +56,26 @@ <script src="{{ ASSET_PATH }}/bootstrap/js/bootstrap.min.js"></script> <script> - // GitHub Stats Fetcher + // Theme Toggle with System Preference (function() { - fetch('https://api.github.com/repos/apache/nuttx') - .then(response => response.json()) - .then(data => { - const heroStars = document.getElementById('heroStars'); - const heroForks = document.getElementById('heroForks'); - if (heroStars) heroStars.textContent = (data.stargazers_count || 0).toLocaleString(); - if (heroForks) heroForks.textContent = (data.forks_count || 0).toLocaleString(); - }) - .catch(err => { - console.log('GitHub stats loading error:', err); - }); - })(); - - // Theme Toggle - (function() { - const themeToggle = document.getElementById('themeToggle'); + const themeBtn = document.getElementById('themeBtn'); const html = document.documentElement; - const currentTheme = localStorage.getItem('theme') || 'light'; + + // 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'; + } + html.setAttribute('data-theme', currentTheme); - if (themeToggle) { - themeToggle.addEventListener('click', function() { + if (themeBtn) { + themeBtn.addEventListener('click', function() { const theme = html.getAttribute('data-theme'); const newTheme = theme === 'dark' ? 'light' : 'dark'; html.setAttribute('data-theme', newTheme); @@ -88,62 +84,53 @@ } })(); - // Doc Mode Toggle + // Mobile Menu Toggle (function() { - const docModeToggle = document.getElementById('docModeToggle'); - const html = document.documentElement; - const currentDocMode = localStorage.getItem('docMode') || 'false'; - html.setAttribute('data-doc-mode', currentDocMode); + const mobileToggle = document.getElementById('mobileToggle'); + const navbarNav = document.getElementById('navbarNav'); - if (docModeToggle) { - docModeToggle.addEventListener('click', function() { - const docMode = html.getAttribute('data-doc-mode'); - const newDocMode = docMode === 'true' ? 'false' : 'true'; - html.setAttribute('data-doc-mode', newDocMode); - localStorage.setItem('docMode', newDocMode); + if (mobileToggle && navbarNav) { + mobileToggle.addEventListener('click', function(e) { + e.stopPropagation(); + mobileToggle.classList.toggle('active'); + navbarNav.classList.toggle('active'); + }); + + // Close on outside click + document.addEventListener('click', function(e) { + if (!e.target.closest('.navbar')) { + mobileToggle.classList.remove('active'); + navbarNav.classList.remove('active'); + // Close all dropdowns + document.querySelectorAll('.nav-item').forEach(item => { + item.classList.remove('open'); + }); + } }); } })(); // Dropdown Toggle (function() { - const navItems = document.querySelectorAll('.nav-item.has-dropdown'); + const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(function(item) { - const button = item.querySelector('.nav-link'); + const btn = item.querySelector('.nav-btn'); - if (button) { - button.addEventListener('click', function(e) { + if (btn) { + btn.addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); - // Close all other dropdowns + // Close other dropdowns navItems.forEach(function(otherItem) { if (otherItem !== item) { - otherItem.classList.remove('active'); + otherItem.classList.remove('open'); } }); - // Toggle current dropdown - item.classList.toggle('active'); - }); - } - }); - - // Close dropdowns when clicking outside - document.addEventListener('click', function(e) { - if (!e.target.closest('.nav-item.has-dropdown')) { - navItems.forEach(function(item) { - item.classList.remove('active'); - }); - } - }); - - // Close on escape key - document.addEventListener('keydown', function(e) { - if (e.key === 'Escape') { - navItems.forEach(function(item) { - item.classList.remove('active'); + // Toggle current + item.classList.toggle('open'); }); } }); diff --git a/_includes/themes/apache/demo.html b/_includes/themes/apache/demo.html index 53836b0bf9..194424ba8a 100644 --- a/_includes/themes/apache/demo.html +++ b/_includes/themes/apache/demo.html @@ -1,7 +1,7 @@ -<!--<div class="hero-unit {{ page.title | lowercase }}"> - <h1>{% if page.tagline %} <small>{{ page.tagline }}</small>{% endif %}</h1> +<div class="hero-unit {{ page.title | lowercase }}"> + <h1>{{ page.title }}</h1> + {% if page.tagline %}<p class="subtitle">Enter <span class="command">help</span> to see the available commands.</p>{% endif %} </div> ---> <div class="row"> <div class="col-md-12"> diff --git a/_includes/themes/apache/sections/_community.html b/_includes/themes/apache/sections/_community.html new file mode 100644 index 0000000000..da1c9375b8 --- /dev/null +++ b/_includes/themes/apache/sections/_community.html @@ -0,0 +1,43 @@ +<!-- COMMUNITY & EVENTS SECTION --> +<section class="community-section"> + <div class="section-container"> + <div class="community-grid"> + <div class="community-main"> + <h2 class="community-title">{{ site.data.homepage.community.title }}</h2> + <p class="community-description">{{ site.data.homepage.community.description }}</p> + + <div class="community-channels"> + <h3>{{ site.data.homepage.community.channels_title }}</h3> + <div class="channel-list"> + {% for channel in site.data.homepage.community.channels %} + <a href="{{ site.data.project[channel.url_key] }}" class="channel-item" target="_blank" rel="noopener noreferrer"> + <img src="{{ site.baseurl }}/static/icons/{{ channel.icon }}" width="24" height="24" alt="{{ channel.name }}"> + <span>{{ channel.name }}</span> + </a> + {% endfor %} + </div> + </div> + </div> + + <div class="community-events"> + <div class="events-card"> + <h3 class="events-title">{{ site.data.homepage.event.title }}</h3> + <div class="event-date"> + <img src="{{ site.baseurl }}/static/icons/calendar.svg" width="20" height="20" alt="Calendar"> + <span>{{ site.data.homepage.event.date }}</span> + </div> + <div class="event-location"> + <img src="{{ site.baseurl }}/static/icons/location-pin.svg" width="20" height="20" alt="Location"> + <span>{{ site.data.homepage.event.location }}</span> + </div> + <p class="event-description">{{ site.data.homepage.event.description }}</p> + <div class="event-links"> + {% for link in site.data.homepage.event.links %} + <a href="{% if link.url_key %}{{ site.data.project[link.url_key] }}{% else %}{{ link.url }}{% endif %}" class="event-link"{% if link.external %} target="_blank" rel="noopener noreferrer"{% endif %}>{{ link.text }}</a> + {% endfor %} + </div> + </div> + </div> + </div> + </div> +</section> diff --git a/_includes/themes/apache/sections/_companies.html b/_includes/themes/apache/sections/_companies.html new file mode 100644 index 0000000000..7cb2b97da3 --- /dev/null +++ b/_includes/themes/apache/sections/_companies.html @@ -0,0 +1,25 @@ +<!-- COMPANIES CAROUSEL SECTION --> +<section class="companies-section"> + <div class="section-container"> + <h2 class="section-title-center">{{ site.data.homepage.companies.title }}</h2> + <div class="carousel-wrapper"> + <div class="carousel-track"> + {% for company in site.data.homepage.companies.logos %} + <div class="carousel-slide"> + <a href="{{ company.url }}" target="_blank" rel="noopener noreferrer" class="company-logo-container"> + <img src="{{ site.baseurl }}/static/companies/{{ company.image }}" alt="{{ company.name }}" class="company-logo-img"> + </a> + </div> + {% endfor %} + <!-- Duplicate slides for seamless loop --> + {% for company in site.data.homepage.companies.logos %} + <div class="carousel-slide"> + <a href="{{ company.url }}" target="_blank" rel="noopener noreferrer" class="company-logo-container"> + <img src="{{ site.baseurl }}/static/companies/{{ company.image }}" alt="{{ company.name }}" class="company-logo-img"> + </a> + </div> + {% endfor %} + </div> + </div> + </div> +</section> diff --git a/_includes/themes/apache/sections/_demo.html b/_includes/themes/apache/sections/_demo.html new file mode 100644 index 0000000000..58575ba825 --- /dev/null +++ b/_includes/themes/apache/sections/_demo.html @@ -0,0 +1,31 @@ +<!-- DEMO SHOWCASE SECTION --> +<section class="demo-section-static"> + <div class="section-container"> + <div class="demo-static-grid"> + <div class="demo-static-content"> + <h2 class="demo-title">{{ site.data.homepage.demo.title }}</h2> + <p class="demo-description">{{ site.data.homepage.demo.description }}</p> + </div> + <a href="{{ site.baseurl }}{{ site.data.homepage.demo.url }}" class="demo-static-preview"> + <div class="terminal-window"> + <div class="terminal-header"> + <div class="terminal-buttons"> + <span class="terminal-button"></span> + <span class="terminal-button"></span> + <span class="terminal-button"></span> + </div> + <div class="terminal-title">{{ site.data.homepage.demo.terminal_title }}</div> + </div> + <div class="terminal-body"> + <pre class="terminal-code">NuttShell (NSH) {{ site.data.homepage.demo.terminal_version }} +nsh> <span class="cursor">█</span></pre> + </div> + <div class="demo-overlay"> + <img src="{{ site.baseurl }}/static/icons/play.svg" class="play-icon" width="32" height="32" alt="Play"> + <span class="overlay-text">Launch Interactive Demo</span> + </div> + </div> + </a> + </div> + </div> +</section> diff --git a/_includes/themes/apache/sections/_documentation.html b/_includes/themes/apache/sections/_documentation.html new file mode 100644 index 0000000000..7fdd5ca89b --- /dev/null +++ b/_includes/themes/apache/sections/_documentation.html @@ -0,0 +1,23 @@ +<!-- DOCUMENTATION SECTION --> +<section class="resources-section"> + <div class="section-container"> + <div class="section-header"> + <h2 class="section-title">{{ site.data.homepage.documentation.title }}</h2> + <p class="section-subtitle">{{ site.data.homepage.documentation.subtitle }}</p> + </div> + + <div class="resource-grid"> + {% for resource in site.data.homepage.documentation.resources %} + <a href="{% if resource.external %}{{ resource.url }}{% else %}{{ site.baseurl }}{{ resource.url }}{% endif %}" class="resource-card"{% if resource.external %} target="_blank" rel="noopener noreferrer"{% endif %}> + <div class="resource-card-header"> + <div class="resource-icon"> + <img src="{{ site.baseurl }}/static/icons/{{ resource.icon }}" alt="{{ resource.title }}" width="24" height="24"> + </div> + <h3 class="resource-title">{{ resource.title }}</h3> + </div> + <p class="resource-description">{{ resource.description }}</p> + </a> + {% endfor %} + </div> + </div> +</section> diff --git a/_includes/themes/apache/sections/_features.html b/_includes/themes/apache/sections/_features.html new file mode 100644 index 0000000000..3718d1213d --- /dev/null +++ b/_includes/themes/apache/sections/_features.html @@ -0,0 +1,23 @@ +<!-- FEATURE HIGHLIGHTS SECTION --> +<section class="features-section"> + <div class="section-container"> + <div class="section-header"> + <h2 class="section-title">{{ site.data.homepage.features.title }}</h2> + <p class="section-subtitle">{{ site.data.homepage.features.subtitle }}</p> + </div> + + <div class="feature-grid"> + {% for feature in site.data.homepage.features.items %} + <div class="feature-card"> + <div class="feature-card-header"> + <div class="feature-icon"> + <img src="{{ site.baseurl }}/static/icons/{{ feature.icon }}" alt="{{ feature.title }}" width="24" height="24"> + </div> + <h3 class="feature-title">{{ feature.title }}</h3> + </div> + <p class="feature-description">{{ feature.description }}</p> + </div> + {% endfor %} + </div> + </div> +</section> diff --git a/_includes/themes/apache/sections/_technical.html b/_includes/themes/apache/sections/_technical.html new file mode 100644 index 0000000000..b15bcecfe1 --- /dev/null +++ b/_includes/themes/apache/sections/_technical.html @@ -0,0 +1,29 @@ +<!-- TECHNICAL STRUCTURE SECTION --> +<section class="technical-section"> + <div class="section-container"> + <div class="section-header"> + <h2 class="section-title">{{ site.data.homepage.technical.title }}</h2> + <p class="section-subtitle">{{ site.data.homepage.technical.subtitle }}</p> + </div> + + <div class="technical-content"> + <div class="technical-intro"> + <p>{{ site.data.homepage.technical.intro }}</p> + </div> + + <div class="resource-grid"> + {% for resource in site.data.homepage.technical.resources %} + <a href="{% if resource.url_key %}{{ site.data.project[resource.url_key] }}{% elsif resource.external %}{{ resource.url }}{% else %}{{ site.baseurl }}{{ resource.url }}{% endif %}" class="resource-card"{% if resource.external %} target="_blank" rel="noopener noreferrer"{% endif %}> + <div class="resource-card-header"> + <div class="resource-icon"> + <img src="{{ site.baseurl }}/static/icons/{{ resource.icon }}" alt="{{ resource.title }}" width="24" height="24"> + </div> + <h3 class="resource-title">{{ resource.title }}</h3> + </div> + <p class="resource-description">{{ resource.description }}</p> + </a> + {% endfor %} + </div> + </div> + </div> +</section> diff --git a/assets/themes/apache/css/demo.css b/assets/themes/apache/css/demo.css index 06e148f598..07ece179b4 100644 --- a/assets/themes/apache/css/demo.css +++ b/assets/themes/apache/css/demo.css @@ -1,3 +1,30 @@ +/* Demo page title styling */ +.hero-unit { + padding: 30px 0; + margin-bottom: 30px; + border-bottom: 1px solid #e5e5e5; + text-align: left; +} + +.hero-unit h1 { + font-size: 48px; + font-weight: bold; + line-height: 1.2; + color: #2c3e50; + margin: 0 0 10px 0; +} + +.hero-unit .subtitle { + font-size: 18px; + color: #666; + margin: 0; +} + +.hero-unit .subtitle .command { + color: #0066cc; + font-weight: 500; +} + #os_table { border: 1px solid; border-collapse: collapse; diff --git a/assets/themes/apache/css/modern.css b/assets/themes/apache/css/modern.css index ad14047e01..a08c988db9 100644 --- a/assets/themes/apache/css/modern.css +++ b/assets/themes/apache/css/modern.css @@ -54,6 +54,8 @@ html { scroll-behavior: smooth; + overflow-x: hidden; + max-width: 100vw; } body { @@ -68,26 +70,20 @@ body { font-size: 18px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + overflow-x: hidden; + max-width: 100vw; } -/* ===== NAVBAR ===== */ +/* ===== NAVBAR - CLEAN REBUILD ===== */ .navbar { position: fixed; top: 0; left: 0; right: 0; - width: 100%; height: var(--navbar-height); - background: #ffffff; + background: var(--bg-secondary); border-bottom: 1px solid var(--border-color); z-index: 1000; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); -} - -[data-theme="dark"] .navbar { - background: #191a1a; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); - border-bottom: 1px solid rgba(255, 255, 255, 0.15); } .navbar-container { @@ -96,423 +92,285 @@ body { display: flex; align-items: center; justify-content: space-between; - padding: 0 40px; + padding: 0 2rem; + gap: 0.5rem; } -/* Logo */ .navbar-logo { display: flex; align-items: center; - flex-shrink: 0; -} - -.logo-link { - display: flex; - align-items: center; - gap: 12px; + gap: 0.75rem; text-decoration: none; - transition: opacity 0.2s ease; -} - -.logo-link:hover { - opacity: 0.85; + color: var(--text-primary); + font-weight: 600; + font-size: 1.125rem; + flex-shrink: 0; + order: 0; } .logo-img { width: 32px; height: 32px; - object-fit: contain; } .logo-text { - color: var(--text-primary); - font-size: 18px; - font-weight: 300; - letter-spacing: -0.01em; - font-family: 'Patua One', cursive; white-space: nowrap; + font-family: sans-serif; + font-weight: 700; } -/* Navigation Menu Wrapper */ -.navbar-menu-wrapper { - display: flex; - align-items: center; - gap: 24px; +.mobile-toggle { + display: none; + position: relative; + width: 40px; + height: 40px; + background: none; + border: none; + cursor: pointer; + z-index: 1001; + order: 2; +} + +.hamburger-line { + position: absolute; + left: 50%; + width: 22px; + height: 2px; + background: var(--text-primary); + transform: translateX(-50%); + transition: all 0.25s ease; +} + +.hamburger-line:nth-child(1) { top: 12px; } +.hamburger-line:nth-child(2) { top: 19px; } +.hamburger-line:nth-child(3) { top: 26px; } + +.mobile-toggle.active .hamburger-line:nth-child(1) { + top: 19px; + transform: translateX(-50%) rotate(45deg); +} + +.mobile-toggle.active .hamburger-line:nth-child(2) { + opacity: 0; } -.navbar-menu { +.mobile-toggle.active .hamburger-line:nth-child(3) { + top: 19px; + transform: translateX(-50%) rotate(-45deg); +} + +.navbar-nav { display: flex; align-items: center; gap: 4px; + flex: 1; + justify-content: flex-end; + margin-right: 1rem; + order: 1; } -/* Navigation Items */ .nav-item { position: relative; } -.nav-link { +.nav-btn { display: flex; align-items: center; gap: 4px; padding: 10px 16px; - background: transparent; + background: none; border: none; color: var(--text-primary); font-size: 14px; font-weight: 500; cursor: pointer; - transition: color 0.2s ease; white-space: nowrap; - text-decoration: none; + transition: color 0.2s; } -.nav-link:hover { +.nav-btn:hover { color: var(--accent-primary); } -/* Dropdown Arrow */ -.dropdown-arrow { - transition: transform 0.2s ease; +.nav-btn svg { + transition: transform 0.2s; opacity: 0.6; } -.nav-item.active .dropdown-arrow { +.nav-item.open .nav-btn svg { transform: rotate(180deg); } -/* Dropdown Content */ -.dropdown-content { +.nav-dropdown { position: absolute; - top: calc(100% + 12px); + top: 100%; left: 50%; - transform: translateX(-50%) translateY(-10px); - background: #ffffff; + transform: translateX(-50%); + min-width: 200px; + background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - min-width: 200px; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); + padding: 8px 0; + margin-top: 8px; opacity: 0; visibility: hidden; pointer-events: none; - transition: all 0.2s ease; - z-index: 1001; + transition: all 0.2s; } -[data-theme="dark"] .dropdown-content { - background: #1e293b; - border-color: rgba(255, 255, 255, 0.1); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); +[data-theme="dark"] .nav-dropdown { + box-shadow: 0 4px 12px rgba(0,0,0,0.4); } -.nav-item.active .dropdown-content { +.nav-item.open .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; - transform: translateX(-50%) translateY(0); } -/* Dropdown Items */ -.dropdown-item { +.nav-dropdown a { display: block; padding: 10px 16px; color: var(--text-primary); text-decoration: none; font-size: 14px; - transition: all 0.15s ease; + transition: all 0.15s; border-left: 2px solid transparent; } -.dropdown-item:hover { +.nav-dropdown a:hover { background: var(--bg-card); color: var(--accent-primary); border-left-color: var(--accent-primary); padding-left: 18px; - text-decoration: none; } -.dropdown-item:first-child { - border-top-left-radius: 8px; - border-top-right-radius: 8px; -} - -.dropdown-item:last-child { - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; -} - -/* Theme Toggle */ -.theme-toggle { +.theme-btn { position: relative; width: 40px; height: 40px; - padding: 0; - background: transparent; + background: none; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; - transition: all 0.2s ease; + transition: all 0.2s; + flex-shrink: 0; + order: 3; } -.theme-toggle:hover { +.theme-btn:hover { background: rgba(59, 130, 246, 0.1); border-color: var(--accent-primary); } -.theme-icon { +.theme-btn svg { position: absolute; - width: 18px; - height: 18px; color: var(--text-primary); - transition: all 0.3s ease; + transition: all 0.3s; } -.sun-icon { +.theme-btn .sun { opacity: 0; transform: rotate(90deg) scale(0.8); } -.moon-icon { +.theme-btn .moon { opacity: 1; - transform: rotate(0deg) scale(1); + transform: rotate(0) scale(1); } -[data-theme="dark"] .sun-icon { +[data-theme="dark"] .theme-btn .sun { opacity: 1; - transform: rotate(0deg) scale(1); + transform: rotate(0) scale(1); } -[data-theme="dark"] .moon-icon { +[data-theme="dark"] .theme-btn .moon { opacity: 0; transform: rotate(-90deg) scale(0.8); } -/* Doc Mode Toggle in Navbar */ -.doc-mode-toggle-navbar { - height: 40px; - padding: 0 1rem; - background: transparent; - border: 1px solid var(--border-color); - border-radius: 6px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.2s ease; - font-size: 0.9rem; - font-weight: 500; - color: var(--text-primary); - white-space: nowrap; -} - -.doc-mode-toggle-navbar:hover { - background: rgba(59, 130, 246, 0.1); - border-color: var(--accent-primary); -} - -[data-doc-mode="true"] .doc-mode-toggle-navbar { - background: rgba(59, 130, 246, 0.15); - border-color: var(--accent-primary); -} - -/* Responsive Navbar */ -@media (max-width: 992px) { +/* Mobile Responsive */ +@media (max-width: 768px) { .navbar-container { - padding: 0 24px; + padding: 0 1rem; + gap: 0.5rem; } - .navbar-menu { - gap: 0; + .logo-text { + display: none; } - .nav-link { - padding: 10px 12px; - font-size: 13px; + .navbar-nav { + position: fixed; + top: var(--navbar-height); + left: 0; + right: 0; + flex-direction: column; + align-items: stretch; + background: var(--bg-secondary); + border-bottom: 1px solid var(--border-color); + margin: 0; + padding: 0; + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease; + z-index: 999; } -} - -@media (max-width: 768px) { - .logo-text { - display: none; + + .mobile-toggle { + display: block; + order: 2; } - .navbar-menu { - gap: 0; + .theme-btn { + order: 3; + margin-left: 0.5rem; } - .nav-link { - padding: 10px 8px; - font-size: 13px; + .navbar-nav.active { + max-height: 100vh; } - .dropdown-content { - left: 0; - transform: translateX(0) translateY(-10px); + .nav-item { + border-bottom: 1px solid var(--border-color); } - .nav-item.active .dropdown-content { - transform: translateX(0) translateY(0); + .nav-btn { + width: 100%; + justify-content: space-between; + padding: 16px 20px; } -} - -@media (max-width: 640px) { - .navbar-container { - padding: 0 16px; + + .nav-dropdown { + position: static; + transform: none; + border: none; + border-radius: 0; + box-shadow: none; + margin: 0; + padding: 0; + background: rgba(0,0,0,0.02); + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease; } - .navbar-menu-wrapper { - gap: 12px; + [data-theme="dark"] .nav-dropdown { + background: rgba(255,255,255,0.02); + } + + .nav-item.open .nav-dropdown { + max-height: 500px; + } + + .nav-dropdown a { + padding: 14px 20px 14px 40px; + border-left: none; } -} - -/* Minimalistic UI Toggle - Top Right Corner */ -.doc-mode-toggle-corner { - position: fixed; - top: calc(var(--navbar-height) + 20px); - right: 20px; - z-index: 999; - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.6rem 1rem; - background: rgba(59, 130, 246, 0.15); - border: 1px solid rgba(59, 130, 246, 0.3); - border-radius: 8px; - cursor: pointer; - transition: all 0.3s ease; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); -} - -.doc-mode-toggle-corner:hover { - background: rgba(59, 130, 246, 0.25); - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); -} - -.doc-mode-toggle-corner .toggle-label { - font-size: 0.9rem; - font-weight: 500; - color: var(--text-primary); - white-space: nowrap; -} - -[data-theme="light"] .doc-mode-toggle-corner { - background: rgba(59, 130, 246, 0.1); - border: 1px solid rgba(59, 130, 246, 0.25); -} - -/* Doc Mode Active State */ -[data-doc-mode="true"] .doc-mode-toggle-corner { - background: rgba(59, 130, 246, 0.3); - border: 1px solid var(--accent-primary); -} - -/* Doc Mode Styles - Minimal UI */ -[data-doc-mode="true"] body { - font-size: 16px; - line-height: 1.8; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica', Arial, sans-serif; -} - -/* Hide all fancy elements in doc mode */ -[data-doc-mode="true"] .hero-section, -[data-doc-mode="true"] .hero-grid-background, -[data-doc-mode="true"] .hero-actions, -[data-doc-mode="true"] .hero-stats, -[data-doc-mode="true"] .hero-content, -[data-doc-mode="true"] .feature-section, -[data-doc-mode="true"] .features-section, -[data-doc-mode="true"] .resources-section, -[data-doc-mode="true"] .technical-section, -[data-doc-mode="true"] .demo-section-static, -[data-doc-mode="true"] .events-showcase, -[data-doc-mode="true"] .companies-section, -[data-doc-mode="true"] .community-section, -[data-doc-mode="true"] .resource-icon svg, -[data-doc-mode="true"] .section-header { - display: none !important; -} - -[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"] .navbar { - background: rgba(10, 10, 10, 0.95); -} - -/* Doc Mode Content Sections */ -[data-doc-mode="true"] .doc-content-section { - display: block !important; - max-width: 1200px; - margin: 0 auto; - padding: 4rem 2rem; - background: var(--bg-primary); - padding-top: calc(var(--navbar-height) + 4rem); -} - -[data-doc-mode="true"] .doc-content-section h2 { - font-size: 3.5rem; - font-weight: 700; - margin-bottom: 3rem; - color: var(--text-primary); - border-bottom: 2px solid var(--border-color); - padding-bottom: 1.5rem; -} - -[data-doc-mode="true"] .doc-content-section h3 { - font-size: 3.75rem; - font-weight: 600; - margin-top: 4.5rem; - margin-bottom: 2.25rem; - color: var(--text-primary); -} - -[data-doc-mode="true"] .doc-content-section h4 { - font-size: 3rem; - font-weight: 600; - margin-top: 3rem; - margin-bottom: 1.5rem; - color: var(--text-primary); -} - -[data-doc-mode="true"] .doc-content-section p { - font-size: 2rem; - line-height: 1.8; - margin-bottom: 3rem; - color: var(--text-primary); -} - -[data-doc-mode="true"] .doc-content-section a { - color: var(--accent-primary); - text-decoration: underline; - font-size: 1.8rem; -} - -[data-doc-mode="true"] .doc-content-section a:hover { - color: var(--accent-secondary); -} - -[data-doc-mode="true"] .doc-content-section ul { - margin: 3rem 0; - padding-left: 6rem; -} - -[data-doc-mode="true"] .doc-content-section li { - margin-bottom: 1.5rem; - line-height: 1.8; - font-size: 3rem; -} - -/* Hide animations and transitions */ -[data-doc-mode="true"] * { - animation: none !important; - transition: none !important; } /* ===== HERO SECTION ===== */ @@ -521,7 +379,7 @@ body { display: flex; align-items: center; justify-content: center; - padding: calc(var(--navbar-height) + 2rem) 2rem 6rem; + padding: calc(var(--navbar-height) + 2rem) 2rem 3rem; background-color: var(--bg-secondary); position: relative; overflow: hidden; @@ -553,36 +411,50 @@ body { .hero-content { max-width: 1000px; + width: 100%; text-align: center; position: relative; z-index: 1; + padding: 0 clamp(1rem, 3vw, 2rem); + margin: 0 auto; } .hero-title { - font-size: 17rem; + font-size: clamp(4rem, 15vw, 17rem); font-weight: 700; color: var(--text-primary); margin-bottom: 2rem; - margin-top: 6.5rem; - font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + margin-top: clamp(2rem, 5vw, 4rem); + font-family: 'DM Sans', sans-serif; animation: fadeInUp 0.6s ease-out; letter-spacing: -0.03em; line-height: 1; + text-align: center; + width: 100%; + position: relative; + left: -2rem; + white-space: nowrap; +} + +.hero-title sup { + font-size: 0.4em; + vertical-align: super; } .hero-subtitle { - font-size: 2.5rem; - font-weight: 600; + font-size: clamp(1.5rem, 4vw, 2.5rem); + font-weight: 300; color: var(--text-primary); margin-bottom: 2rem; animation: fadeInUp 0.7s ease-out; letter-spacing: -0.01em; line-height: 1.3; font-family: 'DM Sans', sans-serif; + text-align: center; } .hero-description { - font-size: 1.65rem; + font-size: clamp(1.1rem, 2.5vw, 1.65rem); color: var(--text-secondary); margin-bottom: 3rem; line-height: 1.8; @@ -597,17 +469,18 @@ body { .hero-actions { display: flex; - gap: 1.5rem; + gap: clamp(0.75rem, 2vw, 1.5rem); justify-content: center; margin-bottom: 0; animation: fadeInUp 1.2s ease-out; + flex-wrap: wrap; } /* ===== HERO FEATURES ===== */ .hero-features { display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 3rem; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: clamp(1.5rem, 3vw, 3rem); max-width: 900px; margin: 0 auto; animation: fadeInUp 1.4s ease-out; @@ -730,64 +603,213 @@ body { border-color: var(--accent-primary); } +.hero-btn-github { + background-color: #24292f; + color: white; + border: 1px solid #24292f; + padding: 0.9rem 2rem; + border-radius: 12px; + font-weight: 500; + font-size: 1rem; + letter-spacing: 0; + transition: all 0.2s ease; +} + +[data-theme="dark"] .hero-btn-github { + background-color: #2d333b; + border-color: #444c56; +} + +.hero-btn-github:hover { + background-color: #57606a; + color: white; + text-decoration: none; + border-color: #57606a; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +[data-theme="dark"] .hero-btn-github:hover { + background-color: #444c56; + border-color: #636e7b; +} + .hero-stats { display: flex; flex-direction: column; align-items: center; justify-content: center; - gap: 1rem; - margin-top: 2rem; + gap: 0.75rem; + margin-top: 1.5rem; animation: fadeInUp 1.3s ease-out; } -.stats-label { - font-size: 0.875rem; - font-weight: 600; - color: var(--text-secondary); - text-transform: uppercase; - letter-spacing: 0.05em; +.github-stats-pill { + display: flex; + align-items: center; + gap: 1rem; + background: var(--bg-card); + border: 1px solid var(--border-color); + border-radius: 12px; + padding: 0.75rem 1.25rem; + max-width: 100%; + width: auto; + transition: all 0.3s ease; } -.stats-container { +.github-stats-pill:hover { + border-color: var(--accent-primary); + box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15); +} + +.stats-repo-group { display: flex; + flex-direction: row; align-items: center; - gap: 2rem; + gap: 0.5rem; + flex: 0 0 auto; } -.hero-stat { +.repo-link { display: flex; align-items: center; - gap: 0.5rem; - padding: 0.75rem 1.5rem; - background: var(--bg-primary); - border: 1px solid var(--border-color); - border-radius: 50px; - text-decoration: none; + gap: 0.4rem; color: var(--text-primary); - transition: all 0.3s ease; - font-size: 0.95rem; - font-weight: 500; + text-decoration: none !important; + font-weight: 600; + font-size: 0.9rem; + transition: color 0.2s ease; + white-space: nowrap; } -.hero-stat:hover { - transform: translateY(-2px); - box-shadow: var(--shadow-md); - border-color: var(--accent-primary); - text-decoration: none; +.repo-link:hover { + color: var(--accent-primary); + text-decoration: none !important; } -.hero-stat-icon { - width: 18px; - height: 18px; - color: var(--accent-primary); +.repo-link svg { + color: var(--text-secondary); + transition: color 0.2s ease; } -.hero-stat-value { - font-family: 'JetBrains Mono', 'Fira Code', monospace; - font-weight: 600; +.repo-link:hover svg { color: var(--accent-primary); } +.repo-name { + font-family: 'JetBrains Mono', monospace; +} + +.repo-stats { + display: flex; + gap: 0.6rem; + align-items: center; +} + +.repo-stats a { + display: inline-flex; + text-decoration: none !important; + border-radius: 8px; + overflow: hidden; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + position: relative; + animation: badgeShine 3s ease-in-out infinite; +} + +.repo-stats a::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(16, 185, 129, 0.1)); + opacity: 0; + transition: opacity 0.3s ease; + z-index: -1; +} + +.repo-stats a:hover { + transform: translateY(-3px) scale(1.03); + box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25), 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.repo-stats a:hover::before { + opacity: 1; +} + +.repo-stats a:active { + transform: translateY(-1px) scale(1.01); +} + +.repo-stats img { + height: 20px; + display: block; + transition: filter 0.3s ease; +} + +[data-theme="dark"] .repo-stats a { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +[data-theme="dark"] .repo-stats a:hover { + box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3); +} + +.stats-divider { + width: 1px; + align-self: stretch; + background: var(--border-color); +} + +@media (max-width: 768px) { + .github-stats-pill { + flex-direction: column; + gap: 1rem; + padding: 1rem; + justify-content: center; + } + + .stats-divider { + display: none; + } + + .stats-repo-group { + flex-direction: row; + flex-wrap: wrap; + align-items: center; + gap: 0.75rem; + width: 100%; + justify-content: space-between; + } + + .repo-link { + flex-shrink: 0; + } + + .repo-stats { + display: flex; + gap: 0.5rem; + flex-wrap: nowrap; + } + + .repo-stats a { + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + } + + .repo-stats img { + height: 18px; + } +} + +@media (max-width: 480px) { + .stats-repo-group { + width: 100%; + } + + .repo-stats { + gap: 0.4rem; + } +} + @keyframes fadeInUp { from { opacity: 0; @@ -799,6 +821,15 @@ body { } } +@keyframes badgeShine { + 0%, 100% { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + } + 50% { + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08); + } +} + /* ===== MAIN CONTENT ===== */ @@ -1042,13 +1073,45 @@ pre code { /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { - .cards-grid { - grid-template-columns: 1fr; + /* Hero Section Mobile Optimizations */ + .hero-section { + padding: calc(var(--navbar-height) + 1rem) 1.5rem 2rem; } - .content-section { - aspect-ratio: auto; - min-height: auto; + .hero-grid-background { + opacity: 0.3; + } + + .hero-content { + max-width: 500px; + } + + .hero-title { + font-size: 2.4rem; + margin-top: 1.5rem; + margin-bottom: 1rem; + line-height: 1.1; + letter-spacing: -0.01em; + left: 0; + } + + .hero-description { + font-size: 1rem; + line-height: 1.6; + max-width: 90%; + margin: 0 auto 1.8rem auto; + } + + .hero-actions { + flex-direction: column; + gap: 1rem; + } + + .hero-btn { + width: 100%; + justify-content: center; + padding: 0.9rem; + font-size: 0.95rem; } .hero-features { @@ -1070,27 +1133,14 @@ pre code { font-size: 1.8rem; } - .hero-title { - font-size: 2.8rem; - margin-bottom: 1.5rem; - } - - .hero-description { - font-size: 1.15rem; - text-align: center; - margin-bottom: 2rem; - } - - .hero-actions { - flex-direction: column; - align-items: stretch; - } - - .hero-btn { - justify-content: center; + /* Content Section Mobile Optimizations */ + .cards-grid { + grid-template-columns: 1fr; } .content-section { + aspect-ratio: auto; + min-height: auto; padding: 1.5rem; margin-bottom: 2rem; } @@ -1166,17 +1216,35 @@ li { padding-right: 0; } + /* Community section - tablet/mobile stacking */ .community-grid { - grid-template-columns: 1fr; - gap: 3rem; + grid-template-columns: 1fr !important; + gap: 2.5rem; } .community-main { padding-right: 0; + margin-bottom: 0; + } + + .community-section > .section-container { + padding: 3.5rem 2rem; + box-sizing: border-box; + } + + .community-events { + margin-top: 0; + width: 100%; + } + + .events-card { + width: 100%; + box-sizing: border-box; } .channel-list { grid-template-columns: repeat(2, 1fr); + gap: 1rem; } } @@ -1185,13 +1253,6 @@ li { padding: 0 1.5rem; } - .section-title, - .section-title-center, - .demo-title, - .community-title { - font-size: 1.75rem; - } - .section-subtitle, .demo-description { font-size: 1rem; @@ -1221,14 +1282,6 @@ li { gap: 2rem; } - .channel-list { - grid-template-columns: 1fr; - } - - .hero-title { - font-size: 3rem; - } - .hero-description { font-size: 1rem; } @@ -1265,8 +1318,9 @@ tr:hover { /* ===== SECTION CONTAINER ===== */ .section-container { max-width: 1400px; + width: 100%; margin: 0 auto; - padding: 0 2rem; + padding: 0 clamp(1rem, 3vw, 2rem); } .section-header { @@ -1275,7 +1329,7 @@ tr:hover { } .section-title { - font-size: 5rem; + font-size: clamp(3.5rem, 8vw, 7rem); font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; @@ -1283,7 +1337,7 @@ tr:hover { } .section-title-center { - font-size: 6rem; + font-size: clamp(4rem, 9vw, 8rem); font-weight: 700; color: var(--text-primary); text-align: center; @@ -1292,7 +1346,7 @@ tr:hover { } .section-subtitle { - font-size: 2.5rem; + font-size: clamp(1.25rem, 3vw, 2.5rem); color: var(--text-secondary); max-width: 900px; margin: 0 auto; @@ -1308,8 +1362,8 @@ tr:hover { .logo-grid { display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 3rem; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: clamp(1.5rem, 3vw, 3rem); align-items: center; justify-items: center; } @@ -1542,7 +1596,7 @@ tr:hover { .demo-grid { display: grid; grid-template-columns: 1fr 1fr; - gap: 4rem; + gap: clamp(2rem, 4vw, 4rem); align-items: center; } @@ -1551,7 +1605,7 @@ tr:hover { } .demo-title { - font-size: 5rem; + font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 700; color: var(--text-primary); margin-bottom: 1.5rem; @@ -1559,7 +1613,7 @@ tr:hover { } .demo-description { - font-size: 2.2rem; + font-size: clamp(1.25rem, 3vw, 2.2rem); color: var(--text-secondary); line-height: 1.8; margin-bottom: 2rem; @@ -1575,7 +1629,7 @@ tr:hover { .demo-features li { padding: 0.75rem 0; color: var(--text-primary); - font-size: 2rem; + font-size: clamp(1.1rem, 2.5vw, 2rem); display: flex; align-items: center; gap: 0.75rem; @@ -1780,7 +1834,7 @@ tr:hover { } .technical-intro p { - font-size: 2rem; + font-size: clamp(1.1rem, 2.5vw, 2rem); color: var(--text-secondary); line-height: 1.8; margin: 0; @@ -1804,25 +1858,30 @@ tr:hover { border-radius: 24px; padding: 3rem 2rem; margin: 24px 0; + box-sizing: border-box; } .community-grid { display: grid; grid-template-columns: 1.5fr 1fr; - gap: 4rem; + gap: clamp(2rem, 4vw, 4rem); align-items: start; + width: 100%; + box-sizing: border-box; } .community-main { padding-right: 2rem; + box-sizing: border-box; } .community-events { align-self: center; + box-sizing: border-box; } .community-title { - font-size: 7rem; + font-size: clamp(4rem, 10vw, 9rem); font-weight: 700; color: var(--text-primary); margin-bottom: 1.5rem; @@ -1830,7 +1889,7 @@ tr:hover { } .community-description { - font-size: 2rem; + font-size: clamp(1.1rem, 2.5vw, 2rem); color: var(--text-secondary); line-height: 1.8; margin-bottom: 3rem; @@ -1850,7 +1909,7 @@ tr:hover { } .community-channels h3 { - font-size: 2.6rem; + font-size: clamp(1.5rem, 3vw, 2.6rem); font-weight: 600; color: var(--text-primary); margin-bottom: 1.5rem; @@ -1874,6 +1933,11 @@ tr:hover { text-decoration: none !important; font-weight: 500; transition: all 0.2s ease; + overflow: hidden; + word-wrap: break-word; + min-width: 0; + flex-wrap: wrap; + box-sizing: border-box; } .channel-item:hover { @@ -1905,6 +1969,7 @@ tr:hover { padding: 2.5rem; position: relative; overflow: hidden; + box-sizing: border-box; } .events-card::before { @@ -2167,43 +2232,26 @@ tr:hover { } /* ===== TERMINAL STYLES ===== */ -#term_wrap { - width: 100%; - height: 100%; - min-height: 400px; - background: #000000; - border-radius: 12px; - overflow: hidden; - border: 2px solid var(--border-color); - box-shadow: var(--shadow-lg); - display: flex; - flex-direction: column; -} - -#term_container { - flex: 1; - overflow: auto; - padding: 0.5rem; -} - -#term_bar { - background: #0a0a0a; - padding: 0.5rem; - border-top: 1px solid #333; -} +/* Main terminal styles are in demo.css */ +/* This section only contains preview/demo page overrides */ #net_progress { width: 100%; height: 4px; } +/* Terminal preview on demo page - ensure full width */ .demo-preview #term_wrap { width: 100% !important; - max-width: 100%; + max-width: 100% !important; + margin: 0 !important; } /* ===== LEGACY STYLES REMOVED ===== */ -/* Bento Grid and Sidebar Layout styles removed - now using Superset-inspired section-based layout */\n border: 1px solid #1f1f1f; +/* Bento Grid and Sidebar Layout styles removed - now using Superset-inspired section-based layout */ + +.bento-item { + border: 1px solid #1f1f1f; border-radius: 20px; padding: 2rem; display: flex; @@ -2391,11 +2439,13 @@ tr:hover { min-height: 100vh; margin-top: 0; position: relative; + max-width: 100%; + overflow-x: hidden; } .sidebar-nav { - width: 30%; - min-width: 300px; + width: clamp(250px, 25%, 320px); + flex-shrink: 0; background-color: #050505; position: sticky; left: 0; @@ -2545,9 +2595,9 @@ tr:hover { .sidebar-content { flex: 1; - width: 70%; + min-width: 0; background-color: #0a0a0a; - padding: 3rem; + padding: clamp(1.5rem, 3vw, 3rem); min-height: 100vh; } @@ -2690,9 +2740,9 @@ tr:hover { .logo-text { font-size: 1.8rem; - font-weight: 400; + font-weight: 600; color: var(--text-primary); - font-family: 'Patua One', cursive; + font-family: sans-serif; letter-spacing: 0.05em; } @@ -2720,21 +2770,21 @@ tr:hover { .demo-static-grid { display: grid; grid-template-columns: 1fr 2fr; - gap: 4rem; + gap: clamp(2rem, 4vw, 4rem); max-width: 1200px; margin: 0 auto; align-items: center; } .demo-static-content h2.demo-title { - font-size: 5rem; + font-size: clamp(2.5rem, 6vw, 5rem); margin-bottom: 1rem; color: var(--text-primary); font-weight: 600; } .demo-static-content p.demo-description { - font-size: 1.6rem; + font-size: clamp(1.1rem, 2.5vw, 1.6rem); color: var(--text-secondary); line-height: 1.7; font-family: 'DM Sans', sans-serif; @@ -2872,7 +2922,7 @@ tr:hover { /* ===== RESPONSIVE UPDATES ===== */ @media (max-width: 1200px) { .hero-title { - font-size: 12rem; + font-size: clamp(4rem, 12vw, 12rem); } .real-world-grid { @@ -2886,11 +2936,14 @@ tr:hover { @media (max-width: 768px) { .hero-title { - font-size: 8rem; + font-size: clamp(2.5rem, 12vw, 6rem); + letter-spacing: -0.02em; + word-break: break-word; + hyphens: auto; } .hero-description { - font-size: 1.3rem; + font-size: clamp(1rem, 3.5vw, 1.3rem); } .real-world-grid { @@ -2901,6 +2954,16 @@ tr:hover { body { font-size: 16px; } + + .channel-list { + grid-template-columns: repeat(2, 1fr); + gap: 1rem; + } + + .community-description { + font-size: clamp(1rem, 2.5vw, 1.3rem); + margin-bottom: 2rem; + } } /* ===== COMMUNITY MEMBERS TABLE FIX ===== */ @@ -2923,7 +2986,7 @@ tr:hover { } .content-wrapper h2 { - font-size: 4rem; + font-size: clamp(3.5rem, 4vw, 2.5rem); font-weight: 700; margin-top: 3rem; margin-bottom: 1rem; @@ -2952,7 +3015,7 @@ tr:hover { } .content-wrapper p { - font-size: 1.59rem; + font-size: clamp(1.1rem, 2vw, 1.59rem); line-height: 1.7; margin-bottom: 1.25rem; color: var(--text-secondary); @@ -3032,5 +3095,3 @@ tr:hover { .articles-page li { margin-bottom: 0.5em; } - -} diff --git a/demo.md b/demo.md index 55fbea787b..4e3017517f 100644 --- a/demo.md +++ b/demo.md @@ -1,7 +1,7 @@ --- layout: demo -title: Demo -tagline: Apache Project ! +title: NuttX Online Demo +tagline: Enter help to see the available commands. --- <!-- @@ -22,9 +22,3 @@ See the License for the specific language governing permissions and limitations under the License. {% endcomment %} --> - -{% include JB/setup %} - -## NuttX Online Demo - -Enter `help` to see the available commands. diff --git a/index.md b/index.md index 46589df9fa..c6eb76ec85 100644 --- a/index.md +++ b/index.md @@ -25,391 +25,14 @@ limitations under the License. {% include JB/setup %} -<!-- FEATURE HIGHLIGHTS SECTION --> -<section class="features-section"> - <div class="section-container"> - <div class="section-header"> - <h2 class="section-title">Key Features</h2> - <p class="section-subtitle">A real-time operating system designed for embedded systems</p> - </div> - - <div class="feature-grid"> - <div class="feature-card"> - <div class="feature-card-header"> - <div class="feature-icon"> - <img src="{{ site.baseurl }}/static/icons/cpu-architecture.svg" alt="CPU Architecture" width="24" height="24"> - </div> - <h3 class="feature-title">15+ CPU Architectures</h3> - </div> - <p class="feature-description">Runs on ARM, RISC-V, x86, Xtensa, and more. Supports multiple CPU architectures and hardware platforms.</p> - </div> - - <div class="feature-card"> - <div class="feature-card-header"> - <div class="feature-icon"> - <img src="{{ site.baseurl }}/static/icons/hardware-boards.svg" alt="Hardware Boards" width="24" height="24"> - </div> - <h3 class="feature-title">300+ Hardware Boards</h3> - </div> - <p class="feature-description">Extensive board support from popular development kits to custom hardware.</p> - </div> - - <div class="feature-card"> - <div class="feature-card-header"> - <div class="feature-icon"> - <img src="{{ site.baseurl }}/static/icons/configuration.svg" alt="Configuration Templates" width="24" height="24"> - </div> - <h3 class="feature-title">1500+ Configuration Templates</h3> - </div> - <p class="feature-description">Pre-configured builds for rapid prototyping and production deployment.</p> - </div> - - <div class="feature-card"> - <div class="feature-card-header"> - <div class="feature-icon"> - <img src="{{ site.baseurl }}/static/icons/community-people.svg" alt="Open Community" width="24" height="24"> - </div> - <h3 class="feature-title">Open Community</h3> - </div> - <p class="feature-description">Developed and maintained by an active open-source community.</p> - </div> - </div> - </div> -</section> +{% include themes/apache/sections/_features.html %} -<!-- DOCUMENTATION SECTION --> -<section class="resources-section"> - <div class="section-container"> - <div class="section-header"> - <h2 class="section-title">Documentation</h2> - <p class="section-subtitle">Complete guides, security information, and research papers</p> - </div> - - <div class="resource-grid"> - <a href="https://nuttx.apache.org/docs/latest"; class="resource-card" target="_blank" rel="noopener noreferrer"> - <div class="resource-card-header"> - <div class="resource-icon"> - <img src="{{ site.baseurl }}/static/icons/document-full.svg" alt="Full Documentation" width="24" height="24"> - </div> - <h3 class="resource-title">Full Documentation</h3> - </div> - <p class="resource-description"> - Complete API reference, user guides, and developer documentation for Apache NuttX RTOS. - </p> - </a> - - <a href="https://nuttx.apache.org/docs/latest/security.html"; class="resource-card" target="_blank" rel="noopener noreferrer"> - <div class="resource-card-header"> - <div class="resource-icon"> - <img src="{{ site.baseurl }}/static/icons/security-shield.svg" alt="Security Documentation" width="24" height="24"> - </div> - <h3 class="resource-title">Security Documentation</h3> - </div> - <p class="resource-description"> - Security guidelines, best practices, and vulnerability reporting information. - </p> - </a> - - <a href="{{ site.baseurl }}/articles" class="resource-card"> - <div class="resource-card-header"> - <div class="resource-icon"> - <img src="{{ site.baseurl }}/static/icons/articles-papers.svg" alt="Scientific Papers & Articles" width="24" height="24"> - </div> - <h3 class="resource-title">Scientific Papers & Articles</h3> - </div> - <p class="resource-description"> - Research papers, technical articles, and publications about Apache NuttX. - </p> - </a> - </div> - </div> -</section> +{% include themes/apache/sections/_documentation.html %} -<!-- TECHNICAL STRUCTURE SECTION --> -<section class="technical-section"> - <div class="section-container"> - <div class="section-header"> - <h2 class="section-title">Technical Structure</h2> - <p class="section-subtitle">Access source code, releases, and project repositories</p> - </div> - - <div class="technical-content"> - <div class="technical-intro"> - <p> - Release packages are available for download. We use three primary GIT repositories to develop the project: - <strong><a href="{{ site.data.project.source_repository_os_mirror }}" target="_blank" rel="noopener noreferrer">RTOS</a></strong>, <strong><a href="{{ site.data.project.source_repository_apps_mirror }}" target="_blank" rel="noopener noreferrer">Applications</a></strong>, and <strong><a href="https://github.com/apache/nuttx-website"; target="_blank" rel="noopener noreferrer">Website</a></strong>. - Documentation is part of the RTOS repository and then built and hosted online. - </p> - </div> - - <div class="resource-grid"> - <a href="{{ site.baseurl }}/download" class="resource-card"> - <div class="resource-card-header"> - <div class="resource-icon"> - <img src="{{ site.baseurl }}/static/icons/download.svg" alt="Release Packages" width="24" height="24"> - </div> - <h3 class="resource-title">Release Packages</h3> - </div> - <p class="resource-description"> - Download official Apache NuttX releases with verified signatures and checksums. - </p> - </a> - - <a href="{{ site.data.project.source_repository_os_mirror }}" class="resource-card" target="_blank" rel="noopener noreferrer"> - <div class="resource-card-header"> - <div class="resource-icon"> - <img src="{{ site.baseurl }}/static/icons/code-repos.svg" alt="RTOS Repository" width="24" height="24"> - </div> - <h3 class="resource-title">RTOS Repository</h3> - </div> - <p class="resource-description"> - Core RTOS code, kernel, drivers, and documentation sources. - </p> - </a> - - <a href="{{ site.data.project.source_repository_apps_mirror }}" class="resource-card" target="_blank" rel="noopener noreferrer"> - <div class="resource-card-header"> - <div class="resource-icon"> - <img src="{{ site.baseurl }}/static/icons/code-repos.svg" alt="Applications Repository" width="24" height="24"> - </div> - <h3 class="resource-title">Applications Repository</h3> - </div> - <p class="resource-description"> - Sample applications, examples, and utilities for NuttX. - </p> - </a> - - <a href="https://github.com/apache/nuttx-website"; class="resource-card" target="_blank" rel="noopener noreferrer"> - <div class="resource-card-header"> - <div class="resource-icon"> - <img src="{{ site.baseurl }}/static/icons/website-globe.svg" alt="Website Repository" width="24" height="24"> - </div> - <h3 class="resource-title">Website Repository</h3> - </div> - <p class="resource-description"> - Source code for the Apache NuttX project website. - </p> - </a> - - <a href="https://www.youtube.com/@nuttxchannel"; class="resource-card" target="_blank" rel="noopener noreferrer"> - <div class="resource-card-header"> - <div class="resource-icon"> - <img src="{{ site.baseurl }}/static/icons/video-play.svg" alt="Video Tutorials" width="24" height="24"> - </div> - <h3 class="resource-title">Video Tutorials</h3> - </div> - <p class="resource-description"> - Step-by-step video guides and workshops on YouTube. - </p> - </a> - - <a href="https://github.com/apache/nuttx-apps"; class="resource-card" target="_blank" rel="noopener noreferrer"> - <div class="resource-card-header"> - <div class="resource-icon"> - <img src="{{ site.baseurl }}/static/icons/code-examples.svg" alt="Code Examples" width="24" height="24"> - </div> - <h3 class="resource-title">Code Examples</h3> - </div> - <p class="resource-description"> - Browse hundreds of sample applications and code examples. - </p> - </a> - </div> - </div> - </div> -</section> +{% include themes/apache/sections/_technical.html %} -<!-- DEMO SHOWCASE SECTION --> -<section class="demo-section-static"> - <div class="section-container"> - <div class="demo-static-grid"> - <div class="demo-static-content"> - <h2 class="demo-title">Try NuttX Shell</h2> - <p class="demo-description"> - Experience NuttX POSIX-compliant shell environment. Click to launch the interactive WebAssembly demo. - </p> - </div> - <a href="{{ site.baseurl }}/demo" class="demo-static-preview"> - <div class="terminal-window"> - <div class="terminal-header"> - <div class="terminal-buttons"> - <span class="terminal-button"></span> - <span class="terminal-button"></span> - <span class="terminal-button"></span> - </div> - <div class="terminal-title">NuttShell (NSH)</div> - </div> - <div class="terminal-body"> - <pre class="terminal-code">NuttShell (NSH) NuttX-12.4.0 -nsh> <span class="cursor">█</span></pre> - </div> - <div class="demo-overlay"> - <img src="{{ site.baseurl }}/static/icons/play.svg" class="play-icon" width="32" height="32" alt="Play"> - <span class="overlay-text">Launch Interactive Demo</span> - </div> - </div> - </a> - </div> - </div> -</section> +{% include themes/apache/sections/_demo.html %} -<!-- COMMUNITY & EVENTS SECTION --> -<section class="community-section"> - <div class="section-container"> - <div class="community-grid"> - <div class="community-main"> - <h2 class="community-title">Join the Apache NuttX Community</h2> - <p class="community-description"> - NuttX is developed and maintained by an international - <a href="{{ site.baseurl }}/community-members">group of volunteers</a> from all around the world. - We welcome developers of all skill levels to contribute to the project. - View our <a href="https://github.com/apache/nuttx/graphs/contributors"; target="_blank" rel="noopener noreferrer">full contributor list on GitHub</a>. - </p> - - <div class="community-channels"> - <h3>Connect With Us</h3> - <div class="channel-list"> - <a href="{{ site.data.project.dev_list_archive_mailarchive }}" class="channel-item"> - <img src="{{ site.baseurl }}/static/icons/mailing-list.svg" width="24" height="24" alt="Mailing List"> - <span>Mailing List (Main)</span> - </a> - <a href="{{ site.data.project.socialmedia_discord }}" class="channel-item"> - <img src="{{ site.baseurl }}/static/icons/discord.svg" width="24" height="24" alt="Discord"> - <span>Discord</span> - </a> - <a href="{{ site.data.project.socialmedia_hackster }}" class="channel-item"> - <img src="{{ site.baseurl }}/static/icons/hackster.svg" width="24" height="24" alt="Hackster"> - <span>Hackster</span> - </a> - <a href="{{ site.data.project.socialmedia_linkedin_company }}" class="channel-item"> - <img src="{{ site.baseurl }}/static/icons/linkedin.svg" width="24" height="24" alt="LinkedIn"> - <span>LinkedIn</span> - </a> - <a href="{{ site.data.project.socialmedia_reddit }}" class="channel-item"> - <img src="{{ site.baseurl }}/static/icons/reddit.svg" width="24" height="24" alt="Reddit"> - <span>Reddit</span> - </a> - <a href="{{ site.data.project.socialmedia_youtube }}" class="channel-item"> - <img src="{{ site.baseurl }}/static/icons/youtube.svg" width="24" height="24" alt="YouTube"> - <span>YouTube</span> - </a> - </div> - </div> - </div> - - <div class="community-events"> - <div class="events-card"> - <h3 class="events-title">International Workshop 2026</h3> - <div class="event-date"> - <img src="{{ site.baseurl }}/static/icons/calendar.svg" width="20" height="20" alt="Calendar"> - <span>October 16-17, 2026</span> - </div> - <div class="event-location"> - <img src="{{ site.baseurl }}/static/icons/location-pin.svg" width="20" height="20" alt="Location"> - <span>Costa Rica</span> - </div> - <p class="event-description"> - Join us for the annual Apache NuttX International Workshop. - Attend online or in person for free! We hope to meet with Gregory Nutt on site. - </p> - <div class="event-links"> - <a href="{{ site.data.project.community_events }}" class="event-link">Event Website</a> - <a href="{{ site.data.project.community_events_workshop_2025_cfp }}" class="event-link">Submit Paper</a> - </div> - </div> - </div> - </div> - </div> -</section> +{% include themes/apache/sections/_community.html %} -<!-- COMPANIES CAROUSEL SECTION --> -<section class="companies-section"> - <div class="section-container"> - <h2 class="section-title-center">Trusted by teams everywhere</h2> - <div class="carousel-wrapper"> - <div class="carousel-track"> - <div class="carousel-slide"> - <a href="https://www.sony.com"; target="_blank" rel="noopener noreferrer" class="company-logo-container"> - <img src="{{ site.baseurl }}/static/companies/sony.svg" alt="Sony" class="company-logo-img"> - </a> - </div> - <div class="carousel-slide"> - <a href="https://www.samsung.com"; target="_blank" rel="noopener noreferrer" class="company-logo-container"> - <img src="{{ site.baseurl }}/static/companies/samsung.svg" alt="Samsung" class="company-logo-img"> - </a> - </div> - <div class="carousel-slide"> - <a href="https://www.mi.com"; target="_blank" rel="noopener noreferrer" class="company-logo-container"> - <img src="{{ site.baseurl }}/static/companies/xiaomi.svg" alt="Xiaomi" class="company-logo-img"> - </a> - </div> - <div class="carousel-slide"> - <a href="https://www.google.com"; target="_blank" rel="noopener noreferrer" class="company-logo-container"> - <img src="{{ site.baseurl }}/static/companies/google.svg" alt="Google" class="company-logo-img"> - </a> - </div> - <div class="carousel-slide"> - <a href="https://www.motorola.com"; target="_blank" rel="noopener noreferrer" class="company-logo-container"> - <img src="{{ site.baseurl }}/static/companies/motorola.svg" alt="Motorola" class="company-logo-img"> - </a> - </div> - <div class="carousel-slide"> - <a href="https://www.fitbit.com"; target="_blank" rel="noopener noreferrer" class="company-logo-container"> - <img src="{{ site.baseurl }}/static/companies/fitbit.svg" alt="Fitbit" class="company-logo-img"> - </a> - </div> - <div class="carousel-slide"> - <a href="https://www.seeedstudio.com"; target="_blank" rel="noopener noreferrer" class="company-logo-container"> - <img src="{{ site.baseurl }}/static/companies/seeed.png" alt="Seeed Studio" class="company-logo-img"> - </a> - </div> - <div class="carousel-slide"> - <a href="https://www.cuinspace.ca/"; target="_blank" rel="noopener noreferrer" class="company-logo-container"> - <img src="{{ site.baseurl }}/static/companies/inspace.png" alt="InSpace" class="company-logo-img"> - </a> - </div> - <!-- Duplicate slides for seamless loop --> - <div class="carousel-slide"> - <a href="https://www.sony.com"; target="_blank" rel="noopener noreferrer" class="company-logo-container"> - <img src="{{ site.baseurl }}/static/companies/sony.svg" alt="Sony" class="company-logo-img"> - </a> - </div> - <div class="carousel-slide"> - <a href="https://www.samsung.com"; target="_blank" rel="noopener noreferrer" class="company-logo-container"> - <img src="{{ site.baseurl }}/static/companies/samsung.svg" alt="Samsung" class="company-logo-img"> - </a> - </div> - <div class="carousel-slide"> - <a href="https://www.mi.com"; target="_blank" rel="noopener noreferrer" class="company-logo-container"> - <img src="{{ site.baseurl }}/static/companies/xiaomi.svg" alt="Xiaomi" class="company-logo-img"> - </a> - </div> - <div class="carousel-slide"> - <a href="https://www.google.com"; target="_blank" rel="noopener noreferrer" class="company-logo-container"> - <img src="{{ site.baseurl }}/static/companies/google.svg" alt="Google" class="company-logo-img"> - </a> - </div> - <div class="carousel-slide"> - <a href="https://www.motorola.com"; target="_blank" rel="noopener noreferrer" class="company-logo-container"> - <img src="{{ site.baseurl }}/static/companies/motorola.svg" alt="Motorola" class="company-logo-img"> - </a> - </div> - <div class="carousel-slide"> - <a href="https://www.fitbit.com"; target="_blank" rel="noopener noreferrer" class="company-logo-container"> - <img src="{{ site.baseurl }}/static/companies/fitbit.svg" alt="Fitbit" class="company-logo-img"> - </a> - </div> - <div class="carousel-slide"> - <a href="https://www.seeedstudio.com"; target="_blank" rel="noopener noreferrer" class="company-logo-container"> - <img src="{{ site.baseurl }}/static/companies/seeed.png" alt="Seeed Studio" class="company-logo-img"> - </a> - </div> - <div class="carousel-slide"> - <a href="https://www.cuinspace.ca/"; target="_blank" rel="noopener noreferrer" class="company-logo-container"> - <img src="{{ site.baseurl }}/static/companies/inspace.png" alt="InSpace" class="company-logo-img"> - </a> - </div> - </div> - </div> - </div> -</section> +{% include themes/apache/sections/_companies.html %}
