@@ -50,36 +50,29 @@ const labActive = (href: string) =>
5050 <body >
5151 <nav class =" site-nav" >
5252 <div class =" shell nav-inner" >
53- <a href =" / " class =" brand mono" >
53+ <a href ={ isLab ? " /lab " : " / " } class =" brand mono" >
5454 <img src ={ isLab ? " /icons/foillab-128.png" : " /icons/foilsuite-128.png" } alt =" " width =" 24" height =" 24" />
5555 foil<span class =" slash" >/</span >{ isLab ? " lab" : " suite" }
5656 </a >
57- <div class =" nav-links mono" >
58- <a href =" /#modules" >modules</a >
59- <a href =" /lab" >lab</a >
60- <a href =" /blog" >blog</a >
61- <a href ={ repo } class =" nav-cta" target =" _blank" rel =" noopener" >github ↗</a >
62- </div >
57+ { isLab ? (
58+ <div class = " nav-links mono" >
59+ <a href = " /lab/challenges" class :list = { [{ ' nav-active' : labActive (' /lab/challenges' ) }]} >challenges</a >
60+ <a href = " /lab/scoreboard" class :list = { [{ ' nav-active' : labActive (' /lab/scoreboard' ) }]} >scoreboard</a >
61+ <a href = " /lab/certificate" class :list = { [{ ' nav-active' : labActive (' /lab/certificate' ) }]} >certificate</a >
62+ <a href = " /lab/about" class :list = { [{ ' nav-active' : labActive (' /lab/about' ) }]} >about</a >
63+ <a href = { repo } class = " nav-cta" target = " _blank" rel = " noopener" >github ↗</a >
64+ </div >
65+ ) : (
66+ <div class = " nav-links mono" >
67+ <a href = " /#modules" >modules</a >
68+ <a href = " /lab" >lab</a >
69+ <a href = " /blog" >blog</a >
70+ <a href = { repo } class = " nav-cta" target = " _blank" rel = " noopener" >github ↗</a >
71+ </div >
72+ )}
6373 </div >
6474 </nav >
6575
66- { isLab && (
67- <nav class = " lab-subnav" >
68- <div class = " shell lab-subnav-inner mono" >
69- <a href = " /lab" class :list = { [' lab-sub-brand' , { ' lab-sub-active' : labActive (' /lab' ) }]} >
70- <img src = " /icons/foillab-128.png" width = " 16" height = " 16" alt = " " />
71- foil/lab
72- </a >
73- <span class = " lab-sub-sep" >·</span >
74- <a href = " /lab/challenges" class :list = { [' lab-sub-link' , { ' lab-sub-active' : labActive (' /lab/challenges' ) }]} >challenges</a >
75- <a href = " /lab/scoreboard" class :list = { [' lab-sub-link' , { ' lab-sub-active' : labActive (' /lab/scoreboard' ) }]} >scoreboard</a >
76- <a href = " /lab/certificate" class :list = { [' lab-sub-link' , { ' lab-sub-active' : labActive (' /lab/certificate' ) }]} >certificate</a >
77- <a href = " /lab/about" class :list = { [' lab-sub-link' , { ' lab-sub-active' : labActive (' /lab/about' ) }]} >about</a >
78- <a href = { repo } class = " lab-sub-link lab-sub-cta" target = " _blank" rel = " noopener" >github ↗</a >
79- </div >
80- </nav >
81- )}
82-
8376 <slot />
8477
8578 <footer class =" site-footer" >
@@ -180,6 +173,7 @@ const labActive = (href: string) =>
180173 }
181174 .nav-links a { text-decoration: none; transition: color 0.15s; }
182175 .nav-links a:hover { color: var(--text); }
176+ .nav-active { color: var(--text) !important; }
183177 .nav-cta {
184178 color: #08090d !important;
185179 background: var(--text);
@@ -275,48 +269,6 @@ const labActive = (href: string) =>
275269 .post-footer a:hover { color: var(--accent); }
276270 .post-footer .cta-link { color: var(--accent); font-weight: 600; margin-left: auto; }
277271
278- /* ── Lab sub-nav ── */
279- .lab-subnav {
280- border-bottom: 1px solid rgba(255, 255, 255, 0.06);
281- background: rgba(8, 9, 13, 0.5);
282- }
283- .lab-subnav-inner {
284- display: flex;
285- align-items: center;
286- gap: 22px;
287- padding-top: 10px;
288- padding-bottom: 10px;
289- overflow-x: auto;
290- }
291- .lab-sub-brand {
292- display: inline-flex;
293- align-items: center;
294- gap: 7px;
295- font-size: 13px;
296- font-weight: 600;
297- color: var(--muted);
298- text-decoration: none;
299- transition: color 0.15s;
300- flex-shrink: 0;
301- }
302- .lab-sub-brand img { border-radius: 4px; }
303- .lab-sub-brand:hover { color: var(--text); }
304- .lab-sub-sep {
305- color: var(--hair);
306- font-size: 12px;
307- flex-shrink: 0;
308- }
309- .lab-sub-link {
310- font-size: 12px;
311- color: var(--dim);
312- text-decoration: none;
313- transition: color 0.15s;
314- white-space: nowrap;
315- }
316- .lab-sub-link:hover { color: var(--muted); }
317- .lab-sub-active { color: var(--text) !important; }
318- .lab-sub-cta { margin-left: auto; }
319-
320272 /* ── Badge chips (used in challenge pages) ── */
321273 .badge {
322274 display: inline-flex;
0 commit comments