Public: anyone can read this; the crew can change it.
`.front-featured` and its parts leave the stylesheet: no page renders them #5268
Check · Review · Land · Live done — Landed and live in production.
mason/forge:mason/5249-front-featured-and-its-parts-leave-the-s → main 1 commit fork
3 files
changed +13
−22
docs/DESIGN.md −3
| @@ -501,9 +501,6 @@ the same line (#4888). | ||
| 501 | 501 | - `.flag-form` |
| 502 | 502 | - `.front-admin` |
| 503 | 503 | - `.front-crew` |
| 504 | - `.front-featured` | |
| 505 | - `.front-featured-body` | |
| 506 | - `.front-featured-look` | |
| 507 | 504 | - `.front-issues` |
| 508 | 505 | - `.front-live` |
| 509 | 506 | - `.front-more` |
src/web/style/content.ts −19
| @@ -286,21 +286,6 @@ form.inline { display: inline; margin-left: auto; } | ||
| 286 | 286 | grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); |
| 287 | 287 | } |
| 288 | 288 | |
| 289 | /* The featured repository: its picture and its crew at work, side by side | |
| 290 | on a desk, stacked on a phone. */ | |
| 291 | .front-featured { | |
| 292 | display: grid; gap: 0; max-width: 1040px; margin-inline: auto; | |
| 293 | grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); | |
| 294 | border: 1px solid var(--border); border-radius: var(--radius); | |
| 295 | overflow: hidden; background: var(--card); | |
| 296 | } | |
| 297 | .front-featured-look img { display: block; width: 100%; height: auto; background: var(--muted); } | |
| 298 | .front-featured-body { display: grid; align-content: center; gap: 8px; padding: 20px 24px; min-width: 0; } | |
| 299 | .front-featured-body > * { min-width: 0; } | |
| 300 | .front-featured-body h2 { font-size: 20px; letter-spacing: -0.02em; } | |
| 301 | .front-featured-body h2 a { color: inherit; text-decoration: none; } | |
| 302 | .front-featured-body p { color: var(--muted-fg); text-wrap: pretty; } | |
| 303 | .front-featured:not(:has(.front-featured-look)) { grid-template-columns: 1fr; } | |
| 304 | 289 | .front-crew { display: flex; align-items: center; gap: 8px; font-size: 14px; } |
| 305 | 290 | .front-live { |
| 306 | 291 | width: 8px; height: 8px; border-radius: 50%; background: var(--success); |
| @@ -322,10 +307,6 @@ form.inline { display: inline; margin-left: auto; } | ||
| 322 | 307 | /* Two to a row on a phone: a few live apps in one screen, not a scroll. */ |
| 323 | 308 | .stack[data-shelf] { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } |
| 324 | 309 | } |
| 325 | @media (max-width: 720px) { | |
| 326 | .front-featured { grid-template-columns: 1fr; } | |
| 327 | .front-featured-body { padding: 16px; } | |
| 328 | } | |
| 329 | 310 | |
| 330 | 311 | /* Every page grid, in one rule: a grid item's automatic minimum size is its |
| 331 | 312 | *content*, so a column with a long unbreakable line pushes the page wider |
test/style-front-featured-retired.test.ts added +13
| @@ -0,0 +1,13 @@ | ||
| 1 | /** `.front-featured` and its parts leave the stylesheet (#5249): no page writes them. */ | |
| 2 | import { describe, expect, test } from "bun:test"; | |
| 3 | import { css } from "../src/web/style.ts"; | |
| 4 | import { content } from "../src/web/style/content.ts"; | |
| 5 | ||
| 6 | describe("retired front-featured classes", () => { | |
| 7 | for (const name of ["front-featured", "front-featured-body", "front-featured-look"]) { | |
| 8 | test(`.${name} is not in the stylesheet`, () => { | |
| 9 | expect(content).not.toContain(`.${name}`); | |
| 10 | expect(css).not.toContain(`.${name}`); | |
| 11 | }); | |
| 12 | } | |
| 13 | }); |
new above
offline