Skip to content

Commit 52351b0

Browse files
drorhilmandrorhilman
committed
style
1 parent 724aa15 commit 52351b0

File tree

4 files changed

+174
-64
lines changed

4 files changed

+174
-64
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
.DS_Store
22
todo.md
33
AQUA_REPRODUCE_ALL_CAPSULES_PROMPT.md
4+
NANO-BANAN-CHALLENGES-infogrphic-prompt.md

‎Aqua-nautilex-process.png‎

5.12 MB
Loading

‎index.html‎

Lines changed: 78 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,17 @@ <h1 style="font-size: 3rem; max-width: none;">Code Ocean Submission for the Alle
6262
</div>
6363
</header>
6464

65+
<section class="process-band" aria-label="Aqua to capsule process">
66+
<div class="surface-card process-card">
67+
<img
68+
class="process-image"
69+
src="./Aqua-nautilex-process.png"
70+
alt="Infographic showing the Aqua to capsule workflow for the Allen Institute Nautilex 2026 challenge submissions."
71+
loading="lazy"
72+
/>
73+
</div>
74+
</section>
75+
6576
<main class="site-layout">
6677
<aside class="sidebar">
6778
<div class="sidebar-panel stats-panel">
@@ -93,65 +104,74 @@ <h1 style="font-size: 3rem; max-width: none;">Code Ocean Submission for the Alle
93104
<p class="section-note" id="results-note"></p>
94105
</div>
95106

96-
<div class="toolbar">
97-
<label class="search-field">
98-
<span class="visually-hidden">Search capsules</span>
99-
<input
100-
id="search-input"
101-
type="search"
102-
placeholder="Search by challenge, challenge, result artifact, data asset, or prompt"
103-
/>
104-
</label>
105-
106-
<div class="button-row" id="status-filters" aria-label="Status filters"></div>
107-
<div class="button-row" id="flag-filters" aria-label="Capability filters"></div>
108-
</div>
107+
<details class="overview-foldable" open>
108+
<summary class="overview-summary">
109+
<span class="overview-summary-title">Overview table and filters</span>
110+
<span class="overview-summary-hint">Collapse or expand</span>
111+
</summary>
109112

110-
<div class="table-wrap">
111-
<table class="capsule-table">
112-
<thead>
113-
<tr>
114-
<th scope="col" aria-sort="ascending">
115-
<button class="sort-button" type="button" data-sort-key="challenge">
116-
<span>Challenge</span>
117-
<span class="sort-indicator" aria-hidden="true"></span>
118-
</button>
119-
</th>
120-
<th scope="col" aria-sort="none">
121-
<button class="sort-button" type="button" data-sort-key="status">
122-
<span>Status</span>
123-
<span class="sort-indicator" aria-hidden="true"></span>
124-
</button>
125-
</th>
126-
<th scope="col" aria-sort="none">
127-
<button class="sort-button" type="button" data-sort-key="useCase">
128-
<span>challenge</span>
129-
<span class="sort-indicator" aria-hidden="true"></span>
130-
</button>
131-
</th>
132-
<th scope="col" aria-sort="none">
133-
<button class="sort-button" type="button" data-sort-key="usage">
134-
<span>How to run</span>
135-
<span class="sort-indicator" aria-hidden="true"></span>
136-
</button>
137-
</th>
138-
<th scope="col" aria-sort="none">
139-
<button class="sort-button" type="button" data-sort-key="result">
140-
<span>Key result</span>
141-
<span class="sort-indicator" aria-hidden="true"></span>
142-
</button>
143-
</th>
144-
<th scope="col" aria-sort="none">
145-
<button class="sort-button" type="button" data-sort-key="docs">
146-
<span>Docs and artifacts</span>
147-
<span class="sort-indicator" aria-hidden="true"></span>
148-
</button>
149-
</th>
150-
</tr>
151-
</thead>
152-
<tbody id="overview-body"></tbody>
153-
</table>
154-
</div>
113+
<div class="overview-foldable-body">
114+
<div class="toolbar">
115+
<label class="search-field">
116+
<span class="visually-hidden">Search capsules</span>
117+
<input
118+
id="search-input"
119+
type="search"
120+
placeholder="Search by challenge, challenge, result artifact, data asset, or prompt"
121+
/>
122+
</label>
123+
124+
<div class="button-row" id="status-filters" aria-label="Status filters"></div>
125+
<div class="button-row" id="flag-filters" aria-label="Capability filters"></div>
126+
</div>
127+
128+
<div class="table-wrap">
129+
<table class="capsule-table">
130+
<thead>
131+
<tr>
132+
<th scope="col" aria-sort="ascending">
133+
<button class="sort-button" type="button" data-sort-key="challenge">
134+
<span>Challenge</span>
135+
<span class="sort-indicator" aria-hidden="true"></span>
136+
</button>
137+
</th>
138+
<th scope="col" aria-sort="none">
139+
<button class="sort-button" type="button" data-sort-key="status">
140+
<span>Status</span>
141+
<span class="sort-indicator" aria-hidden="true"></span>
142+
</button>
143+
</th>
144+
<th scope="col" aria-sort="none">
145+
<button class="sort-button" type="button" data-sort-key="useCase">
146+
<span>challenge</span>
147+
<span class="sort-indicator" aria-hidden="true"></span>
148+
</button>
149+
</th>
150+
<th scope="col" aria-sort="none">
151+
<button class="sort-button" type="button" data-sort-key="usage">
152+
<span>How to run</span>
153+
<span class="sort-indicator" aria-hidden="true"></span>
154+
</button>
155+
</th>
156+
<th scope="col" aria-sort="none">
157+
<button class="sort-button" type="button" data-sort-key="result">
158+
<span>Key result</span>
159+
<span class="sort-indicator" aria-hidden="true"></span>
160+
</button>
161+
</th>
162+
<th scope="col" aria-sort="none">
163+
<button class="sort-button" type="button" data-sort-key="docs">
164+
<span>Docs and artifacts</span>
165+
<span class="sort-indicator" aria-hidden="true"></span>
166+
</button>
167+
</th>
168+
</tr>
169+
</thead>
170+
<tbody id="overview-body"></tbody>
171+
</table>
172+
</div>
173+
</div>
174+
</details>
155175
</section>
156176

157177
<section class="story-intro">

‎styles.css‎

Lines changed: 95 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,26 @@ ol {
125125
align-items: end;
126126
}
127127

128+
.process-band {
129+
max-width: var(--max-width);
130+
margin: 0 auto;
131+
padding: 0 1.4rem 1.25rem;
132+
}
133+
134+
.process-card {
135+
padding: 0.85rem;
136+
}
137+
138+
.process-image {
139+
display: block;
140+
width: 100%;
141+
height: auto;
142+
border-radius: 18px;
143+
border: 1px solid var(--line);
144+
background: #ffffff;
145+
box-shadow: var(--shadow-soft);
146+
}
147+
128148
.hero-brand {
129149
display: flex;
130150
align-items: center;
@@ -442,6 +462,41 @@ ol {
442462
margin-bottom: 1rem;
443463
}
444464

465+
.overview-foldable {
466+
border: 1px solid var(--line);
467+
border-radius: 20px;
468+
background: var(--surface-strong);
469+
}
470+
471+
.overview-summary {
472+
display: flex;
473+
align-items: center;
474+
justify-content: space-between;
475+
gap: 1rem;
476+
padding: 0.95rem 1rem;
477+
font-weight: 500;
478+
color: var(--text);
479+
cursor: pointer;
480+
list-style: none;
481+
}
482+
483+
.overview-summary::-webkit-details-marker {
484+
display: none;
485+
}
486+
487+
.overview-summary-title {
488+
color: var(--accent-ink);
489+
}
490+
491+
.overview-summary-hint {
492+
color: var(--muted);
493+
font-size: 12px;
494+
}
495+
496+
.overview-foldable-body {
497+
padding: 0 1rem 1rem;
498+
}
499+
445500
.search-field input {
446501
width: 100%;
447502
padding: 0.95rem 1rem;
@@ -1021,11 +1076,35 @@ ol {
10211076
}
10221077

10231078
.sidebar {
1024-
position: static;
1025-
grid-template-columns: repeat(3, minmax(0, 1fr));
1026-
max-height: none;
1027-
overflow: visible;
1028-
padding-right: 0;
1079+
display: none;
1080+
}
1081+
}
1082+
1083+
@media (max-width: 1024px) {
1084+
.hero,
1085+
.site-layout,
1086+
.footer,
1087+
.process-band {
1088+
padding-left: 1rem;
1089+
padding-right: 1rem;
1090+
}
1091+
1092+
.surface-card,
1093+
.hero-card {
1094+
padding: 1.1rem;
1095+
}
1096+
1097+
.process-card {
1098+
padding: 0.7rem;
1099+
}
1100+
1101+
.capsule-table {
1102+
min-width: 780px;
1103+
}
1104+
1105+
.capsule-table th,
1106+
.capsule-table td {
1107+
padding: 0.8rem;
10291108
}
10301109
}
10311110

@@ -1044,12 +1123,22 @@ ol {
10441123
flex-direction: column;
10451124
align-items: start;
10461125
}
1126+
1127+
.overview-summary {
1128+
flex-direction: column;
1129+
align-items: flex-start;
1130+
}
1131+
1132+
.capsule-table {
1133+
min-width: 700px;
1134+
}
10471135
}
10481136

10491137
@media (max-width: 640px) {
10501138
.hero,
10511139
.site-layout,
1052-
.footer {
1140+
.footer,
1141+
.process-band {
10531142
padding-left: 1rem;
10541143
padding-right: 1rem;
10551144
}

0 commit comments

Comments
 (0)