Add screenshots gallery to the VIGIL showcase page

New "Screens" section (3-up phone gallery: active tracker list with
"It's mine" triage, locate-mode searching, and homing at -52 dBm /
ring), plus three optimized app screenshots, a nav anchor, and .shots CSS.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0173RhsXkdMViDR8DMNAG3ms
This commit is contained in:
Kara Zajac
2026-07-15 19:12:21 -04:00
parent b72faea8ce
commit a71a83891a
5 changed files with 64 additions and 0 deletions
+32
View File
@@ -1089,3 +1089,35 @@ pre.code .prompt { color: var(--accent-hot); user-select: none; }
/* VIGIL: logo mark in nav/footer (img instead of a glyph) */
.nav-logo { display: inline-block; vertical-align: middle; border-radius: 7px; }
.nav-brand .nav-logo { margin-right: 3px; }
/* ============================================================
SCREENSHOTS GALLERY
============================================================ */
.shots {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.6rem;
margin-top: 2.8rem;
align-items: start;
}
.shots .shot { margin: 0; display: flex; flex-direction: column; align-items: center; }
.shots .phone { width: 260px; max-width: 100%; }
.shots figcaption {
margin-top: 1.4rem;
max-width: 260px;
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.55;
text-align: center;
}
.shots figcaption strong {
display: block;
color: var(--text);
font-family: var(--display);
font-size: 1rem;
margin-bottom: 0.3rem;
}
@media (max-width: 820px) {
.shots { grid-template-columns: 1fr; gap: 3rem; }
.shots .phone { width: 256px; }
}