Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 22 additions & 19 deletions website/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,22 +25,25 @@
<nav>
<div class="container">
<div class="nav-content">
<div class="logo">
<img src="https://raw.githubusercontent.com/dbort/executorch-logos/main/img/executorch-chip-logo.svg" alt="ExecuTorch Logo" height="40">
<span style="color:#e0f2fe;">ExecuTorch</span>
</div>
<ul class="nav-links" id="navLinks">
<li><a href="#why-ondevice">Why On-Device</a></li>
<li><a href="#challenges">Challenges</a></li>
<li><a href="#features">Solution</a></li>
<li><a href="#performance">Backends</a></li>
<li><a href="#partners">Partners</a></li>
<li><a href="https://github.com/pytorch/executorch" target="_blank">GitHub</a></li>
</ul>
<form class="nav-search" action="https://docs.pytorch.org/executorch/1.0/search.html" method="get">
<input type="text" placeholder="Search docs…" name="q" style="padding: 0.5rem 1rem; border-radius: 6px; border: 1px solid #e2e8f0;">
</form>
<button class="nav-toggle" onclick="toggleNav()" aria-label="Toggle navigation">☰</button>
<div>
<button class="nav-toggle" onclick="toggleNav()" aria-label="Toggle navigation"> &#9776;</button>
</div>
<div class="nav-logo">
<img src="https://raw.githubusercontent.com/dbort/executorch-logos/main/img/executorch-chip-logo.svg" alt="ExecuTorch Logo" height="40">
<span style="color:#e0f2fe;">ExecuTorch</span>
</div>
<ul class="nav-links" id="navLinks">
<li class="nav-overview"><a href="#overview">Overview</a></li>
<li><a href="#why-ondevice">Why On-Device</a></li>
<li><a href="#challenges">Challenges</a></li>
<li><a href="#features">Solution</a></li>
<li><a href="#performance">Backends</a></li>
<li><a href="#partners">Partners</a></li>
<li><a href="https://github.com/pytorch/executorch" target="_blank">GitHub</a></li>
</ul>
<form class="nav-search" action="https://docs.pytorch.org/executorch/1.0/search.html" method="get">
<input type="text" placeholder="Search docs…" name="q" style="padding: 0.5rem 1rem; border-radius: 6px; border: 1px solid #e2e8f0;">
</form>
</div>
</div>
</nav>
Expand All @@ -54,7 +57,7 @@
</div>
</div>
</section>
<section class="hero">
<section class="hero" id="overview">
<div class="container">
<p class="hero-subtitle">Deploy PyTorch models directly to edge devices. Text, vision, and audio AI with privacy-preserving, real-time inference — no cloud required.</p>
<div class="stats">
Expand Down Expand Up @@ -661,7 +664,7 @@ <h2 class="section-title" style="font-size: 2.5rem; margin-bottom: 0.5rem;">High
<p class="section-subtitle" style="margin-bottom: 2rem;">Run complex multimodal LLMs with simplified C++ interfaces</p>

<div style="background: #1e293b; border-radius: 12px; padding: 1.5rem; margin-top: 1.5rem;">
<div style="display: grid; grid-template-columns: 1fr; gap: 1.5rem;">
<div style="display: flex; flex-direction: column; gap: 1.5rem;">
<div>
<h3 style="color: #06d6a0; font-size: 1.2rem; margin-bottom: 1rem; font-weight: 600;">
Multimodal Runner - Text + Vision + Audio in One API
Expand All @@ -670,7 +673,7 @@ <h3 style="color: #06d6a0; font-size: 1.2rem; margin-bottom: 1rem; font-weight:
Choose your platform to see the multimodal API supporting text, images, and audio:
</p>

<div class="platform-switcher-multimodal">
<div class="platform-switcher-multimodal" >
<div class="code-instruction">Unified API across mobile platforms:</div>
<div class="platform-cards">
<div class="platform-card active" onclick="switchMultimodalPlatform('cpp', event)">
Expand Down
177 changes: 108 additions & 69 deletions website/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -92,12 +92,12 @@ nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
padding: 0.75rem 0;
position: relative;
z-index: 1;
}

.logo {
.nav-logo {
display: flex;
align-items: center;
gap: 0.75rem;
Expand All @@ -106,11 +106,15 @@ nav {
color: var(--text-dark);
}

.logo img {
.nav-logo img {
height: 40px;
filter: drop-shadow(0 0 2px var(--bg-gray));
}

.nav-logo span {
padding-right: 1rem;
}

.nav-links {
display: flex;
gap: 2rem;
Expand All @@ -132,6 +136,10 @@ nav {
border-bottom: 2px solid var(--primary);
}

.nav-overview {
display: none;
}

/* nav search */
.nav-search {
margin-left: 2rem;
Expand Down Expand Up @@ -181,7 +189,7 @@ section.alt {

.title_banner-container {
position: absolute;
left:150px;
left: 150px;
bottom: 60px;
display: flex;
gap: 12px;
Expand All @@ -199,7 +207,7 @@ section.alt {
font-weight: 800;
display: flex;
align-items: center;
gap: 12px;
gap: 8px;
}

/* Hero */
Expand Down Expand Up @@ -1014,36 +1022,61 @@ footer a {
}

/* Responsive */
@media (max-width: 900px) {
@media (max-width: 1024px) {
.container {
padding: 0 1rem;
}
.nav-search {
display: none;
}

.grid-2x2 {
grid-template-columns: 1fr;
}
.title_banner {
height: 300px;
}
.title_banner-container {
left: 32%;
transform: translateX(-50%);
padding: 1rem;
.nav-toggle {
display: block;
margin-left: auto;
flex-shrink: 0;
}
.logo-text-container {
font-size: 3rem;
.nav-links {
display: none;
}
.title_banner-logo {
.nav-links {
display: none;
flex-direction: column;
Comment on lines +1038 to +1043
Copy link

Copilot AI Nov 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Duplicate .nav-links selector with conflicting styles. Lines 1038-1040 set only display: none, while lines 1041-1055 define the complete mobile menu styles. Remove the duplicate at lines 1038-1040 as it's redundant and makes the code harder to maintain.

Copilot uses AI. Check for mistakes.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot open a new pull request to apply changes based on this feedback

background: rgba(48,48,48,0.98);
position: fixed;
top: 62px;
left: 0;
width: 100%;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
padding: 0;
gap: 0;
z-index: 9999;
max-height: calc(100vh - 62px);
overflow-y: auto;
}
.nav-links li {
width: 100%;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nav-links li a {
padding: 1rem 1.5rem;
min-height: 48px;
display: flex;
align-items: center;
width: 100%;
border-bottom: none;
}
.nav-links li:last-child {
border-bottom: none;
}
.nav-links.open {
display: flex;
}
.nav-logo {
gap: 0.5rem;
}
}

@media (max-width: 768px) {
.container {
padding: 0 1rem;
}
section {
padding: 3rem 0;
}
Expand Down Expand Up @@ -1104,25 +1137,6 @@ footer a {
.flow-arrow {
transform: rotate(90deg);
}
.nav-links {
display: none;
}
.nav-search {
display: none;
}
.title_banner {
height: 250px;
}
.title_banner-container {
left: 32%;
transform: translateX(-50%);
}
.logo-text-container {
font-size: 2.5rem;
}
.title_banner-logo {
display: none;
}
.card-text {
font-size: 1rem;
}
Expand All @@ -1139,6 +1153,13 @@ footer a {
code {
font-size: 0.8rem !important;
}
.logo-text-container {
font-size: 3rem;
position: absolute;
left: -100%;
bottom: 50%;
gap: 6px;
}
}

@media (max-width: 700px) {
Expand All @@ -1150,22 +1171,9 @@ footer a {
}
.nav-content {
flex-wrap: nowrap;
gap: 0.5rem;
padding: 0.75rem 0;
padding: 0.25rem 0;
overflow: visible;
}
.logo {
font-size: 1.2rem;
gap: 0.5rem;
flex-shrink: 1;
min-width: 0;
}
.logo span {
display: none;
}
.logo img {
height: 32px;
}
.nav-links {
display: none;
flex-direction: column;
Expand Down Expand Up @@ -1199,20 +1207,38 @@ footer a {
.nav-links.open {
display: flex;
}
.nav-toggle {
display: block;
margin-left: auto;
flex-shrink: 0;
.nav-logo {
font-size: 1.2rem;
gap: 0.25rem;
flex-shrink: 1;
}
.nav-search {
display: none;
.nav-logo img {
height: 32px;
}
.logo-text-container {
font-size: 2rem;
gap: 8px;
position: absolute;
left: -150%;
bottom: 60%;
font-size: 2.75rem;
gap: 4px;
}
}

@media (max-width: 650px) {
.title_banner {
height: 300px;
}
.title_banner-logo {
height: 40px;
height: 68px;
}
.logo-text-container {
display: flex;
align-items: center;
position: absolute;
left: -175%;
bottom: 25%;
font-size: 2.5rem;
font-weight: 800;
}
}

Expand All @@ -1232,14 +1258,21 @@ footer a {
font-size: 1.2rem;
padding: 1rem;
}
.title_banner {
height: 200px;
.nav-overview {
display: block;
}
.logo-text-container {
font-size: 1.5rem;
.nav-logo {
gap: 0rem;
}
/* Banner and logo sizing */
.title_banner {
height: 275px;
}
.title_banner-logo {
display: none;
height: 64px;
}
.logo-text-container {
font-size: 2.25rem;
}
.btn {
padding: 0.75rem 1.5rem;
Expand Down Expand Up @@ -1275,3 +1308,9 @@ footer a {
padding: 0 0.5rem;
}
}

@media (max-width: 400px) {
.nav-logo span {
display: none;
}
}
Loading