mirror of
https://github.com/0xMarcio/cve.git
synced 2026-10-27 16:51:03 +00:00
0xMarcio
de770d6c6f
The page and the README had drifted into looking like two projects. The site now opens on the same card the README banner draws, built as markup rather than a second copy of the image, so it fills itself from the index totals the page already loads and cannot go stale. Contrast was the real problem. --neutral sat at 4.12:1 against the canvas, under the 4.5 floor, and it carried the search placeholder, the star glyph and every separator; descriptions were rendered in the muted token at 6.15:1 while doing the work of body copy. Descriptions move to a subtle token at 12.26:1, muted and neutral both come up, and links go to the brighter accent at 7.49:1. The column headers were 9.5px mono under a tenth of an em of tracking, which no contrast ratio was going to rescue. Known-exploited CVEs are marked in the trending table too, not only inside a result, since which row to read first is the one thing the table could not say. The README swaps the fire emoji for the same KEV pill, served from the repository so every flagged row points at one cached file. The search field no longer repeats the totals now that the hero carries them, and keeps its slot for the match timing.
388 lines
10 KiB
CSS
388 lines
10 KiB
CSS
/* CVE PoC Hub. GitHub Primer dark_default tokens, per the refit handoff. */
|
|
:root {
|
|
--canvas: #0d1117;
|
|
--canvas-subtle: #161b22;
|
|
--border: #30363d;
|
|
--border-muted: #21262d;
|
|
--fg: #e6edf3;
|
|
--fg-subtle: #c9d1d9;
|
|
--fg-muted: #9198a1;
|
|
--neutral: #7d8590;
|
|
--accent: #58a6ff;
|
|
--accent-hover: #79c0ff;
|
|
--accent-emphasis: #1f6feb;
|
|
--attention: #e3b341;
|
|
--danger: #f85149;
|
|
--mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
--sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
|
|
|
|
html, body { margin: 0; padding: 0; background: var(--canvas); min-height: 100%; }
|
|
body {
|
|
font-family: var(--sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
a { color: var(--accent); text-decoration: none; }
|
|
a:hover { color: var(--accent-hover); }
|
|
:focus-visible { outline: 2px solid var(--accent-emphasis); outline-offset: 2px; border-radius: 2px; }
|
|
[hidden] { display: none !important; }
|
|
|
|
.container { max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 32px; }
|
|
|
|
/* ---- hero, the same card the README banner draws ------------------------ */
|
|
|
|
.hero-bar { padding-top: 30px; }
|
|
.hero {
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 32px;
|
|
flex-wrap: wrap;
|
|
padding: 26px 28px;
|
|
background: var(--canvas-subtle);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
}
|
|
.hero-radar {
|
|
position: absolute;
|
|
right: -40px;
|
|
top: 50%;
|
|
width: 300px;
|
|
height: 300px;
|
|
transform: translateY(-50%);
|
|
pointer-events: none;
|
|
opacity: .5;
|
|
}
|
|
.hero-radar circle { fill: none; stroke: var(--accent-emphasis); stroke-width: 2; opacity: .35; }
|
|
.hero-radar .hero-sweep {
|
|
stroke: var(--accent);
|
|
stroke-width: 3;
|
|
stroke-linecap: round;
|
|
opacity: .55;
|
|
transform-origin: 200px 200px;
|
|
animation: hero-sweep 8s linear infinite;
|
|
}
|
|
@keyframes hero-sweep { to { transform: rotate(360deg); } }
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hero-radar .hero-sweep { animation: none; }
|
|
}
|
|
|
|
.hero-id { position: relative; min-width: 0; }
|
|
.hero-id h1 {
|
|
margin: 0;
|
|
font: 700 34px/1 var(--mono);
|
|
letter-spacing: .06em;
|
|
color: var(--fg);
|
|
}
|
|
.hero-id p {
|
|
margin: 12px 0 0;
|
|
font: 400 13.5px/1 var(--mono);
|
|
color: var(--fg-muted);
|
|
}
|
|
|
|
.hero-stats { position: relative; display: flex; gap: 44px; margin: 0; flex-wrap: wrap; }
|
|
.hero-stats dt {
|
|
font: 700 27px/1 var(--mono);
|
|
letter-spacing: -.02em;
|
|
color: var(--fg);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.hero-stats dt.is-accent { color: var(--accent); }
|
|
.hero-stats dt.is-danger { color: var(--danger); }
|
|
.hero-stats dd {
|
|
margin: 8px 0 0;
|
|
font: 500 10px/1 var(--mono);
|
|
letter-spacing: .12em;
|
|
color: var(--neutral);
|
|
}
|
|
|
|
/* ---- search ------------------------------------------------------------- */
|
|
|
|
.search-bar { padding-top: 18px; }
|
|
.search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 13px;
|
|
height: 52px;
|
|
padding: 0 17px;
|
|
background: var(--canvas-subtle);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
}
|
|
.search:focus-within { border-color: var(--accent-emphasis); }
|
|
.search svg { flex: none; display: block; }
|
|
.search input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
outline: 0;
|
|
padding: 0;
|
|
font: 400 15px/1 var(--mono);
|
|
color: var(--fg);
|
|
}
|
|
.search input::placeholder { color: var(--neutral); }
|
|
.search-status {
|
|
flex: none;
|
|
white-space: nowrap;
|
|
font: 400 11.5px/1 var(--mono);
|
|
color: var(--fg-muted);
|
|
}
|
|
|
|
.content { flex: 1; padding-top: 26px; padding-bottom: 48px; }
|
|
|
|
/* ---- shared table shell ------------------------------------------------- */
|
|
|
|
.panel { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
|
|
.panel-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 10px;
|
|
padding: 13px 16px;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.panel-head h2 {
|
|
flex: none;
|
|
margin: 0;
|
|
font: 600 14px/1 var(--sans);
|
|
letter-spacing: -.01em;
|
|
color: var(--fg);
|
|
}
|
|
.panel-count {
|
|
flex: none;
|
|
white-space: nowrap;
|
|
font: 400 11.5px/1 var(--mono);
|
|
color: var(--fg-muted);
|
|
}
|
|
.col-head {
|
|
display: grid;
|
|
padding: 8px 16px;
|
|
background: var(--canvas-subtle);
|
|
border-bottom: 1px solid var(--border);
|
|
font: 500 10.5px/1 var(--mono);
|
|
letter-spacing: .1em;
|
|
color: var(--fg-muted);
|
|
}
|
|
|
|
/* ---- state A: results --------------------------------------------------- */
|
|
|
|
.results .col-head, .result-row { grid-template-columns: 196px minmax(0, 1fr); }
|
|
.result-row { display: grid; border-bottom: 1px solid var(--border-muted); }
|
|
.result-row:last-child { border-bottom: 0; }
|
|
|
|
.result-meta { padding: 16px; border-right: 1px solid var(--border-muted); }
|
|
.result-id { font: 500 13.5px/1.2 var(--mono); letter-spacing: -.01em; }
|
|
.result-pocs { margin-top: 8px; font: 400 11.5px/1 var(--mono); color: var(--fg-muted); }
|
|
.result-dates {
|
|
margin: 12px 0 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
font: 400 11px/1.4 var(--mono);
|
|
color: var(--fg-muted);
|
|
}
|
|
.chips { margin-top: 13px; display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.chip {
|
|
font: 400 11px/1 var(--mono);
|
|
letter-spacing: .06em;
|
|
color: var(--fg-muted);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
padding: 5px 8px;
|
|
}
|
|
a.chip:hover { color: var(--fg); border-color: var(--fg-muted); }
|
|
.chip-kev {
|
|
font-weight: 500;
|
|
color: var(--danger);
|
|
background: rgba(248, 81, 73, .1);
|
|
border-color: rgba(248, 81, 73, .4);
|
|
}
|
|
|
|
.result-body { padding: 16px; min-width: 0; }
|
|
.result-desc {
|
|
margin: 0;
|
|
max-width: 96ch;
|
|
font: 400 13.5px/1.6 var(--sans);
|
|
color: var(--fg-subtle);
|
|
max-height: 3.2em;
|
|
overflow: hidden;
|
|
text-wrap: pretty;
|
|
}
|
|
.result-desc.is-open { max-height: none; }
|
|
.expander {
|
|
margin-top: 8px;
|
|
background: transparent;
|
|
border: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
font: 400 11px/1 var(--mono);
|
|
color: var(--accent);
|
|
}
|
|
.expander:hover { color: var(--accent-hover); }
|
|
|
|
.poc-list { margin-top: 14px; border-top: 1px solid var(--border-muted); }
|
|
.poc-row {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 78px 52px;
|
|
gap: 14px;
|
|
align-items: center;
|
|
padding: 9px 0;
|
|
border-bottom: 1px solid var(--border-muted);
|
|
}
|
|
.poc-name {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font: 400 12.5px/1 var(--mono);
|
|
color: var(--fg-muted);
|
|
}
|
|
.poc-sep { color: var(--neutral); }
|
|
.poc-name a { color: var(--fg); font-weight: 500; }
|
|
.poc-name a:hover { color: var(--accent); }
|
|
.poc-name a.plain { color: var(--fg-muted); font-weight: 400; }
|
|
.poc-name a.plain:hover { color: var(--accent); }
|
|
.poc-stars { text-align: right; font: 400 12px/1 var(--mono); color: var(--fg-muted); }
|
|
.poc-stars.is-popular { color: var(--attention); }
|
|
.star { color: var(--neutral); }
|
|
.poc-age { text-align: right; font: 400 11.5px/1 var(--mono); color: var(--fg-muted); }
|
|
.poc-more {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: left;
|
|
background: transparent;
|
|
border: 0;
|
|
padding: 9px 0 0;
|
|
cursor: pointer;
|
|
font: 400 11px/1 var(--mono);
|
|
color: var(--fg-muted);
|
|
}
|
|
.poc-more:hover { color: var(--accent); }
|
|
|
|
/* ---- state B: nothing matched ------------------------------------------- */
|
|
|
|
.empty {
|
|
padding: 44px 16px;
|
|
text-align: center;
|
|
font: 400 13px/1 var(--mono);
|
|
color: var(--fg-muted);
|
|
}
|
|
|
|
/* ---- state C: trending -------------------------------------------------- */
|
|
|
|
.trend-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 14px;
|
|
}
|
|
.switch { display: flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
|
|
.switch button {
|
|
border: 0;
|
|
padding: 7px 12px;
|
|
cursor: pointer;
|
|
font: 500 10.5px/1 var(--mono);
|
|
letter-spacing: .06em;
|
|
background: transparent;
|
|
color: var(--fg-muted);
|
|
}
|
|
.switch button[aria-pressed="true"] { background: var(--accent-emphasis); color: #ffffff; }
|
|
.trend-note {
|
|
flex: none;
|
|
white-space: nowrap;
|
|
font: 400 11.5px/1 var(--mono);
|
|
color: var(--fg-muted);
|
|
}
|
|
|
|
.trending .col-head, .trend-row {
|
|
grid-template-columns: 74px 96px 300px minmax(0, 1fr);
|
|
gap: 18px;
|
|
}
|
|
.trend-row {
|
|
display: grid;
|
|
align-items: center;
|
|
padding: 10px 16px;
|
|
border-bottom: 1px solid var(--border-muted);
|
|
}
|
|
.trend-row:last-child { border-bottom: 0; }
|
|
.trend-row:hover { background: var(--canvas-subtle); }
|
|
.col-stars { text-align: right; }
|
|
.trend-stars {
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
font: 500 12.5px/1 var(--mono);
|
|
color: var(--fg-muted);
|
|
}
|
|
.trend-stars.is-popular { color: var(--attention); }
|
|
.trend-age { white-space: nowrap; font: 400 12px/1 var(--mono); color: var(--fg-muted); }
|
|
.trend-kev {
|
|
display: inline-block;
|
|
margin-right: 7px;
|
|
padding: 2px 5px;
|
|
border-radius: 3px;
|
|
vertical-align: 1px;
|
|
font: 600 9px/1 var(--mono);
|
|
letter-spacing: .08em;
|
|
color: var(--danger);
|
|
background: rgba(248, 81, 73, .12);
|
|
border: 1px solid rgba(248, 81, 73, .4);
|
|
}
|
|
.trend-name-cell {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.trend-name { font: 500 12.5px/1 var(--mono); }
|
|
.trend-desc {
|
|
font: 400 13px/1.4 var(--sans);
|
|
color: var(--fg-subtle);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ---- footer ------------------------------------------------------------- */
|
|
|
|
.site-footer { border-top: 1px solid var(--border-muted); padding: 14px 0; }
|
|
.site-footer .container {
|
|
display: flex;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
font: 400 11px/1.6 var(--mono);
|
|
color: var(--fg-muted);
|
|
}
|
|
.site-footer span:last-child { margin-left: auto; }
|
|
|
|
/* ---- narrow viewports --------------------------------------------------- */
|
|
|
|
@media (max-width: 900px) {
|
|
.container { padding: 0 16px; }
|
|
.hero { gap: 22px; padding: 22px; }
|
|
.hero-radar { display: none; }
|
|
.hero-id h1 { font-size: 27px; }
|
|
.hero-stats { gap: 28px; }
|
|
.hero-stats dt { font-size: 22px; }
|
|
.results .col-head { display: none; }
|
|
.result-row { grid-template-columns: 1fr; }
|
|
.result-meta { border-right: 0; border-bottom: 1px solid var(--border-muted); }
|
|
.trending .col-head, .trend-row { grid-template-columns: 70px 92px minmax(0, 1fr); }
|
|
.col-desc, .trend-desc { display: none; }
|
|
}
|
|
|
|
@media (max-width: 620px) {
|
|
.trending .col-head, .trend-row { grid-template-columns: 66px minmax(0, 1fr); }
|
|
.col-updated, .trend-age { display: none; }
|
|
.search-status { display: none; }
|
|
}
|