Skip to content

Commit 8e33788

Browse files
tanvirislam-metamergennachinCopilot
authored
Fixes for reactive rendering of webpage (#15566)
Fixed issues with reactive sizing of banners and updated nav menu for mobile/reactive rendering. ### Summary The nav bar didn't have any title for reactive rendering, <img width="493" height="1013" alt="Screenshot 2025-11-04 at 10 19 41 AM" src="https://github.com/user-attachments/assets/42bf6d6d-4eaf-4b1f-8bb6-b1d9f2f1769d" /> <img width="492" height="1020" alt="Screenshot 2025-11-04 at 10 21 01 AM" src="https://github.com/user-attachments/assets/af41531d-7ecc-42b4-b678-d46b1ce87efd" /> updated reactive rendering to include search and title. <img width="486" height="1018" alt="Screenshot 2025-11-04 at 10 22 15 AM" src="https://github.com/user-attachments/assets/4cd06ade-e8bc-446a-8e1b-e5c88d066a45" /> Updated the menu hamburger to be left aligned same as the menu and fixed multimodal example API window for that was being clipped. ### Test plan Manually tested multiple screen resolutions including mobile screen sizes for appropriate rendering. --------- Co-authored-by: Mergen Nachin <[email protected]> Co-authored-by: Copilot <[email protected]>
1 parent e7eea58 commit 8e33788

File tree

2 files changed

+129
-87
lines changed

2 files changed

+129
-87
lines changed

‎website/index.html‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,25 @@
2525
<nav>
2626
<div class="container">
2727
<div class="nav-content">
28-
<div class="logo">
29-
<img src="https://raw.githubusercontent.com/dbort/executorch-logos/main/img/executorch-chip-logo.svg" alt="ExecuTorch Logo" height="40">
30-
<span style="color:#e0f2fe;">ExecuTorch</span>
31-
</div>
32-
<ul class="nav-links" id="navLinks">
33-
<li><a href="#why-ondevice">Why On-Device</a></li>
34-
<li><a href="#challenges">Challenges</a></li>
35-
<li><a href="#features">Solution</a></li>
36-
<li><a href="#performance">Backends</a></li>
37-
<li><a href="#partners">Partners</a></li>
38-
<li><a href="https://github.com/pytorch/executorch" target="_blank">GitHub</a></li>
39-
</ul>
40-
<form class="nav-search" action="https://docs.pytorch.org/executorch/1.0/search.html" method="get">
41-
<input type="text" placeholder="Search docs…" name="q" style="padding: 0.5rem 1rem; border-radius: 6px; border: 1px solid #e2e8f0;">
42-
</form>
43-
<button class="nav-toggle" onclick="toggleNav()" aria-label="Toggle navigation">☰</button>
28+
<div>
29+
<button class="nav-toggle" onclick="toggleNav()" aria-label="Toggle navigation"> &#9776;</button>
30+
</div>
31+
<div class="nav-logo">
32+
<img src="https://raw.githubusercontent.com/dbort/executorch-logos/main/img/executorch-chip-logo.svg" alt="ExecuTorch Logo" height="40">
33+
<span style="color:#e0f2fe;">ExecuTorch</span>
34+
</div>
35+
<ul class="nav-links" id="navLinks">
36+
<li class="nav-overview"><a href="#overview">Overview</a></li>
37+
<li><a href="#why-ondevice">Why On-Device</a></li>
38+
<li><a href="#challenges">Challenges</a></li>
39+
<li><a href="#features">Solution</a></li>
40+
<li><a href="#performance">Backends</a></li>
41+
<li><a href="#partners">Partners</a></li>
42+
<li><a href="https://github.com/pytorch/executorch" target="_blank">GitHub</a></li>
43+
</ul>
44+
<form class="nav-search" action="https://docs.pytorch.org/executorch/1.0/search.html" method="get">
45+
<input type="text" placeholder="Search docs…" name="q" style="padding: 0.5rem 1rem; border-radius: 6px; border: 1px solid #e2e8f0;">
46+
</form>
4447
</div>
4548
</div>
4649
</nav>
@@ -54,7 +57,7 @@
5457
</div>
5558
</div>
5659
</section>
57-
<section class="hero">
60+
<section class="hero" id="overview">
5861
<div class="container">
5962
<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>
6063
<div class="stats">
@@ -661,7 +664,7 @@ <h2 class="section-title" style="font-size: 2.5rem; margin-bottom: 0.5rem;">High
661664
<p class="section-subtitle" style="margin-bottom: 2rem;">Run complex multimodal LLMs with simplified C++ interfaces</p>
662665

663666
<div style="background: #1e293b; border-radius: 12px; padding: 1.5rem; margin-top: 1.5rem;">
664-
<div style="display: grid; grid-template-columns: 1fr; gap: 1.5rem;">
667+
<div style="display: flex; flex-direction: column; gap: 1.5rem;">
665668
<div>
666669
<h3 style="color: #06d6a0; font-size: 1.2rem; margin-bottom: 1rem; font-weight: 600;">
667670
Multimodal Runner - Text + Vision + Audio in One API

‎website/style.css‎

Lines changed: 108 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -92,12 +92,12 @@ nav {
9292
display: flex;
9393
justify-content: space-between;
9494
align-items: center;
95-
padding: 1rem 0;
95+
padding: 0.75rem 0;
9696
position: relative;
9797
z-index: 1;
9898
}
9999

100-
.logo {
100+
.nav-logo {
101101
display: flex;
102102
align-items: center;
103103
gap: 0.75rem;
@@ -106,11 +106,15 @@ nav {
106106
color: var(--text-dark);
107107
}
108108

109-
.logo img {
109+
.nav-logo img {
110110
height: 40px;
111111
filter: drop-shadow(0 0 2px var(--bg-gray));
112112
}
113113

114+
.nav-logo span {
115+
padding-right: 1rem;
116+
}
117+
114118
.nav-links {
115119
display: flex;
116120
gap: 2rem;
@@ -132,6 +136,10 @@ nav {
132136
border-bottom: 2px solid var(--primary);
133137
}
134138

139+
.nav-overview {
140+
display: none;
141+
}
142+
135143
/* nav search */
136144
.nav-search {
137145
margin-left: 2rem;
@@ -181,7 +189,7 @@ section.alt {
181189

182190
.title_banner-container {
183191
position: absolute;
184-
left:150px;
192+
left: 150px;
185193
bottom: 60px;
186194
display: flex;
187195
gap: 12px;
@@ -199,7 +207,7 @@ section.alt {
199207
font-weight: 800;
200208
display: flex;
201209
align-items: center;
202-
gap: 12px;
210+
gap: 8px;
203211
}
204212

205213
/* Hero */
@@ -1014,36 +1022,61 @@ footer a {
10141022
}
10151023

10161024
/* Responsive */
1017-
@media (max-width: 900px) {
1025+
@media (max-width: 1024px) {
10181026
.container {
10191027
padding: 0 1rem;
10201028
}
1021-
.nav-search {
1022-
display: none;
1023-
}
1029+
10241030
.grid-2x2 {
10251031
grid-template-columns: 1fr;
10261032
}
1027-
.title_banner {
1028-
height: 300px;
1029-
}
1030-
.title_banner-container {
1031-
left: 32%;
1032-
transform: translateX(-50%);
1033-
padding: 1rem;
1033+
.nav-toggle {
1034+
display: block;
1035+
margin-left: auto;
1036+
flex-shrink: 0;
10341037
}
1035-
.logo-text-container {
1036-
font-size: 3rem;
1038+
.nav-links {
1039+
display: none;
10371040
}
1038-
.title_banner-logo {
1041+
.nav-links {
10391042
display: none;
1043+
flex-direction: column;
1044+
background: rgba(48,48,48,0.98);
1045+
position: fixed;
1046+
top: 62px;
1047+
left: 0;
1048+
width: 100%;
1049+
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
1050+
padding: 0;
1051+
gap: 0;
1052+
z-index: 9999;
1053+
max-height: calc(100vh - 62px);
1054+
overflow-y: auto;
1055+
}
1056+
.nav-links li {
1057+
width: 100%;
1058+
border-bottom: 1px solid rgba(255,255,255,0.1);
1059+
}
1060+
.nav-links li a {
1061+
padding: 1rem 1.5rem;
1062+
min-height: 48px;
1063+
display: flex;
1064+
align-items: center;
1065+
width: 100%;
1066+
border-bottom: none;
1067+
}
1068+
.nav-links li:last-child {
1069+
border-bottom: none;
1070+
}
1071+
.nav-links.open {
1072+
display: flex;
1073+
}
1074+
.nav-logo {
1075+
gap: 0.5rem;
10401076
}
10411077
}
10421078

10431079
@media (max-width: 768px) {
1044-
.container {
1045-
padding: 0 1rem;
1046-
}
10471080
section {
10481081
padding: 3rem 0;
10491082
}
@@ -1104,25 +1137,6 @@ footer a {
11041137
.flow-arrow {
11051138
transform: rotate(90deg);
11061139
}
1107-
.nav-links {
1108-
display: none;
1109-
}
1110-
.nav-search {
1111-
display: none;
1112-
}
1113-
.title_banner {
1114-
height: 250px;
1115-
}
1116-
.title_banner-container {
1117-
left: 32%;
1118-
transform: translateX(-50%);
1119-
}
1120-
.logo-text-container {
1121-
font-size: 2.5rem;
1122-
}
1123-
.title_banner-logo {
1124-
display: none;
1125-
}
11261140
.card-text {
11271141
font-size: 1rem;
11281142
}
@@ -1139,6 +1153,13 @@ footer a {
11391153
code {
11401154
font-size: 0.8rem !important;
11411155
}
1156+
.logo-text-container {
1157+
font-size: 3rem;
1158+
position: absolute;
1159+
left: -100%;
1160+
bottom: 50%;
1161+
gap: 6px;
1162+
}
11421163
}
11431164

11441165
@media (max-width: 700px) {
@@ -1150,22 +1171,9 @@ footer a {
11501171
}
11511172
.nav-content {
11521173
flex-wrap: nowrap;
1153-
gap: 0.5rem;
1154-
padding: 0.75rem 0;
1174+
padding: 0.25rem 0;
11551175
overflow: visible;
11561176
}
1157-
.logo {
1158-
font-size: 1.2rem;
1159-
gap: 0.5rem;
1160-
flex-shrink: 1;
1161-
min-width: 0;
1162-
}
1163-
.logo span {
1164-
display: none;
1165-
}
1166-
.logo img {
1167-
height: 32px;
1168-
}
11691177
.nav-links {
11701178
display: none;
11711179
flex-direction: column;
@@ -1199,20 +1207,38 @@ footer a {
11991207
.nav-links.open {
12001208
display: flex;
12011209
}
1202-
.nav-toggle {
1203-
display: block;
1204-
margin-left: auto;
1205-
flex-shrink: 0;
1210+
.nav-logo {
1211+
font-size: 1.2rem;
1212+
gap: 0.25rem;
1213+
flex-shrink: 1;
12061214
}
1207-
.nav-search {
1208-
display: none;
1215+
.nav-logo img {
1216+
height: 32px;
12091217
}
12101218
.logo-text-container {
1211-
font-size: 2rem;
1212-
gap: 8px;
1219+
position: absolute;
1220+
left: -150%;
1221+
bottom: 60%;
1222+
font-size: 2.75rem;
1223+
gap: 4px;
1224+
}
1225+
}
1226+
1227+
@media (max-width: 650px) {
1228+
.title_banner {
1229+
height: 300px;
12131230
}
12141231
.title_banner-logo {
1215-
height: 40px;
1232+
height: 68px;
1233+
}
1234+
.logo-text-container {
1235+
display: flex;
1236+
align-items: center;
1237+
position: absolute;
1238+
left: -175%;
1239+
bottom: 25%;
1240+
font-size: 2.5rem;
1241+
font-weight: 800;
12161242
}
12171243
}
12181244

@@ -1232,14 +1258,21 @@ footer a {
12321258
font-size: 1.2rem;
12331259
padding: 1rem;
12341260
}
1235-
.title_banner {
1236-
height: 200px;
1261+
.nav-overview {
1262+
display: block;
12371263
}
1238-
.logo-text-container {
1239-
font-size: 1.5rem;
1264+
.nav-logo {
1265+
gap: 0rem;
1266+
}
1267+
/* Banner and logo sizing */
1268+
.title_banner {
1269+
height: 275px;
12401270
}
12411271
.title_banner-logo {
1242-
display: none;
1272+
height: 64px;
1273+
}
1274+
.logo-text-container {
1275+
font-size: 2.25rem;
12431276
}
12441277
.btn {
12451278
padding: 0.75rem 1.5rem;
@@ -1275,3 +1308,9 @@ footer a {
12751308
padding: 0 0.5rem;
12761309
}
12771310
}
1311+
1312+
@media (max-width: 400px) {
1313+
.nav-logo span {
1314+
display: none;
1315+
}
1316+
}

0 commit comments

Comments
 (0)