visuals: technology marks, area icons, client wall, two diagrams
Phase 7 (AUD-149), cheapest first. - internal/brand: vendored Simple Icons path data (CC0) for 50 marks, looked up by the technology label the content already uses. Inline SVG, 16 px, currentColor, no request and no font. tools/gen_brand_icons.sh regenerates it. - Six hand-drawn area icons replace the two-letter badges in the nav and on the landing cards; the evidence index gets a seventh. - TechChips renders a mark where one exists and plain text where one does not, so a missing icon reads as a decision rather than a broken image. - Client wall: 45 names as one typeface, one size, one grid of equal tiles, and the reason for no logo collage written on the page. No mark invented. - Two diagrams, authored in-repo: homelab topology (platform-network.md) and the RAG pipeline (ai-rag-corpus.md), each referenced from the page it explains. - Content images now carry intrinsic width/height, loading="lazy" and decoding="async" at render time; a site test fails the build if an image ships without them. - Topbar is two rows at desktop: the area names plus marks no longer overlap the search form (Lighthouse target-size was failing at 1440 px). - Favicon, so the browser stops requesting a missing /favicon.ico. Satisfies: logos on every area page, area icons in nav and cards, two diagrams referenced from their pages, images sized and lazy, Lighthouse >= 95 held. (cherry picked from commit a473e4738a3751418c2097df2bcf0568fb6d0208)
This commit is contained in:
6
internal/web/static/favicon.svg
Normal file
6
internal/web/static/favicon.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="7" fill="#0b0d10"/>
|
||||
<rect x="0.75" y="0.75" width="30.5" height="30.5" rx="6.25" fill="none" stroke="#33404d" stroke-width="1.5"/>
|
||||
<path d="M11.2 22.2c-1.9-.5-3-1.7-3-3.5h2.6c0 .9.5 1.4 1.5 1.6.9.2 1.6 0 1.8-.6.2-.6-.2-1-.9-1.2l-2-.4c-2-.4-3-1.4-3-3 0-2 1.6-3.3 4.1-3.4v-1.9h1.9v1.9c2 .2 3.1 1.4 3.2 3.2h-2.6c-.1-.8-.6-1.2-1.4-1.3-.8-.1-1.4.2-1.4.7-.1.5.3.8 1 .9l2 .4c2 .4 3 1.5 3 3.2 0 2.1-1.7 3.4-4.2 3.5v1.9h-1.9z" fill="#6ee7c6"/>
|
||||
<path d="M19.6 10.3h4.9c1.9 0 3.1 1.1 3.1 2.8 0 1.1-.5 1.9-1.4 2.3 1.1.3 1.7 1.2 1.7 2.5v1.9h-2.6v-1.6c0-.9-.4-1.3-1.3-1.3h-1.8v-2.3h1.5c.7 0 1.1-.3 1.1-.9s-.4-.9-1.1-.9h-1.5z" fill="#b3bcc8"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 761 B |
@@ -151,13 +151,22 @@ samp {
|
||||
|
||||
/* ---- chrome ------------------------------------------------------------ */
|
||||
|
||||
/*
|
||||
Two rows: the name and the search on the first, the six areas plus the index
|
||||
on the second. The area names are long and the marks made them longer, so a
|
||||
single row either overlapped the search form or scrolled the nav out of
|
||||
reach. Two rows give every link a real target at every width.
|
||||
*/
|
||||
.topbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
display: grid;
|
||||
grid-template-columns: var(--nav-w) minmax(0, 1fr) auto;
|
||||
gap: var(--pad);
|
||||
grid-template-columns: var(--nav-w) minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
"brand search"
|
||||
"nav nav";
|
||||
gap: 0.5rem var(--pad);
|
||||
align-items: center;
|
||||
padding: 0.7rem var(--pad);
|
||||
background: color-mix(in srgb, var(--bg) 92%, transparent);
|
||||
@@ -165,6 +174,21 @@ samp {
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.brand {
|
||||
grid-area: brand;
|
||||
}
|
||||
|
||||
.nav-search {
|
||||
grid-area: search;
|
||||
justify-self: end;
|
||||
width: min(28rem, 100%);
|
||||
}
|
||||
|
||||
.nav-rail {
|
||||
grid-area: nav;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -241,17 +265,25 @@ samp {
|
||||
box-shadow: inset 0 -2px 0 var(--accent);
|
||||
}
|
||||
|
||||
.nav-gutter {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.08em;
|
||||
/* The area mark replaces the old two-letter badge. It is decoration; the nav
|
||||
label beside it is the accessible name. */
|
||||
.nav-mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.nav-current .nav-gutter {
|
||||
.nav-link:hover .nav-mark,
|
||||
.nav-current .nav-mark {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.area-icon {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* ---- shell ------------------------------------------------------------- */
|
||||
|
||||
.shell {
|
||||
@@ -564,8 +596,9 @@ samp {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.pillar-gutter {
|
||||
font-family: var(--font-mono);
|
||||
.pillar-mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
@@ -600,6 +633,11 @@ samp {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.pillar-go {
|
||||
font-weight: 600;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.pillar-count {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.74rem;
|
||||
@@ -644,8 +682,11 @@ samp {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.tech li {
|
||||
padding: 0.12rem 0.45rem;
|
||||
.tech-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.14rem 0.45rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-mono);
|
||||
@@ -653,6 +694,67 @@ samp {
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* Monochrome and currentColor, so the chip and the mark share one colour and
|
||||
no icon ever adds a request. */
|
||||
.tech-mark {
|
||||
display: block;
|
||||
flex: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.tech-chip:hover {
|
||||
border-color: var(--line-strong);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.tech-chip:hover .tech-mark {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ---- client wall ------------------------------------------------------- */
|
||||
/*
|
||||
One typeface, one size, one tile. Mixed brand marks would read as broken;
|
||||
a consistent grid reads as deliberate. Tiles are the same height whatever
|
||||
the length of the name, so the wall never looks like a failed image load.
|
||||
*/
|
||||
.client-wall {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
|
||||
gap: 1px;
|
||||
margin: 1rem 0 1.6rem;
|
||||
padding: 1px;
|
||||
background: var(--line);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.client-tile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 4.2rem;
|
||||
padding: 0.6rem 0.75rem;
|
||||
background: var(--surface);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.client-name {
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.25;
|
||||
letter-spacing: 0.01em;
|
||||
color: var(--text-dim);
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.client-tile:hover .client-name {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.doc-head {
|
||||
padding-bottom: 1.1rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
|
||||
Reference in New Issue
Block a user