Skip to content

Commit 075695c

Browse files
authored
Add cross-navigation footer (#141)
## Summary - Adds a shared cross-navigation toolbar above the existing footer on aimock.copilotkit.dev - Pill-shaped links to all 5 copilotkit.dev sub-properties (vscode, aimock, oversight, pathfinder, outpost) with colored dots - Current page (aimock) highlighted with accent border/glow, non-clickable - Responsive: pills wrap naturally, shrink below 640px, label hidden below 480px ## Test plan - [ ] Verify toolbar renders correctly at desktop width - [ ] Verify pills wrap properly on mobile - [ ] Verify active pill (aimock) is highlighted and non-clickable - [ ] Verify other pills link to correct URLs - [ ] Verify no visual regression to existing footer
2 parents a24e2db + 9329a70 commit 075695c

1 file changed

Lines changed: 95 additions & 0 deletions

File tree

docs/index.html

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1069,6 +1069,66 @@
10691069
text-decoration: none;
10701070
}
10711071

1072+
/* --- Cross-Nav Footer -------------------------------------------- */
1073+
.cross-nav-footer {
1074+
padding: 2rem 0;
1075+
border-top: 1px solid var(--border);
1076+
}
1077+
.cross-nav-toolbar {
1078+
max-width: 1120px;
1079+
margin: 0 auto;
1080+
padding: 0 2rem;
1081+
display: flex;
1082+
align-items: center;
1083+
justify-content: center;
1084+
gap: 0.5rem;
1085+
flex-wrap: wrap;
1086+
}
1087+
.cn-label {
1088+
font-family: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
1089+
font-size: 0.8rem;
1090+
color: var(--text-dim);
1091+
margin-right: 0.25rem;
1092+
white-space: nowrap;
1093+
}
1094+
.cn-pill {
1095+
display: inline-flex;
1096+
align-items: center;
1097+
gap: 0.4rem;
1098+
padding: 0.35rem 0.85rem;
1099+
border: 1px solid var(--border);
1100+
border-radius: 100px;
1101+
font-family: "JetBrains Mono", "SF Mono", "Fira Code", monospace;
1102+
font-size: 0.75rem;
1103+
font-weight: 500;
1104+
color: var(--text-secondary);
1105+
text-decoration: none;
1106+
transition:
1107+
border-color 0.2s,
1108+
background 0.2s,
1109+
color 0.2s;
1110+
white-space: nowrap;
1111+
}
1112+
.cn-pill:hover {
1113+
border-color: #3a3a50;
1114+
color: var(--text-primary);
1115+
text-decoration: none;
1116+
background: rgba(255, 255, 255, 0.03);
1117+
}
1118+
.cn-pill.active {
1119+
border-color: var(--accent);
1120+
background: var(--accent-glow);
1121+
color: var(--text-primary);
1122+
cursor: default;
1123+
pointer-events: none;
1124+
}
1125+
.cn-dot {
1126+
width: 6px;
1127+
height: 6px;
1128+
border-radius: 50%;
1129+
flex-shrink: 0;
1130+
}
1131+
10721132
/* ─── Mobile ──────────────────────────────────────────────────── */
10731133
@media (max-width: 768px) {
10741134
.nav-links {
@@ -1111,6 +1171,16 @@
11111171
}
11121172
}
11131173

1174+
@media (max-width: 640px) {
1175+
.cross-nav-toolbar {
1176+
gap: 0.4rem;
1177+
}
1178+
.cn-pill {
1179+
font-size: 0.7rem;
1180+
padding: 0.3rem 0.7rem;
1181+
}
1182+
}
1183+
11141184
@media (max-width: 480px) {
11151185
.hero {
11161186
padding: 8rem 0 4rem;
@@ -1121,6 +1191,9 @@
11211191
.nav-brand .powered-by {
11221192
display: none;
11231193
}
1194+
.cn-label {
1195+
display: none;
1196+
}
11241197
}
11251198
</style>
11261199
</head>
@@ -1922,6 +1995,28 @@ <h2 class="fade-in">Built for production</h2>
19221995
</div>
19231996
</section>
19241997

1998+
<!-- Cross-navigation toolbar -->
1999+
<div class="cross-nav-footer">
2000+
<div class="cross-nav-toolbar">
2001+
<span class="cn-label">copilotkit.dev /</span>
2002+
<a class="cn-pill" href="https://vscode.copilotkit.dev">
2003+
<span class="cn-dot" style="background: #aa66ff"></span>vscode
2004+
</a>
2005+
<a class="cn-pill active" href="https://aimock.copilotkit.dev">
2006+
<span class="cn-dot" style="background: #00ff88"></span>aimock
2007+
</a>
2008+
<a class="cn-pill" href="https://oversight.copilotkit.dev">
2009+
<span class="cn-dot" style="background: #ff6688"></span>oversight
2010+
</a>
2011+
<a class="cn-pill" href="https://pathfinder.copilotkit.dev">
2012+
<span class="cn-dot" style="background: #00ccff"></span>pathfinder
2013+
</a>
2014+
<a class="cn-pill" href="https://outpost.copilotkit.dev">
2015+
<span class="cn-dot" style="background: #f97316"></span>outpost
2016+
</a>
2017+
</div>
2018+
</div>
2019+
19252020
<!-- ─── Section 8: Footer ────────────────────────────────────── -->
19262021
<footer>
19272022
<div class="container">

0 commit comments

Comments
 (0)