mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-19 01:26:29 +03:00
f5c1bd65ae
* Add codex-grid-background detector rule Detects the Codex two-axis grid-line background tell: a single background value carrying two or more hairline `linear-gradient(... 1px, transparent 1px)` layers (one per axis), usually paired with a repeating `background-size` cell. Gated behind --gpt like the sibling codex tells, off by default. Counts hairline stops within a single background declaration (not across the page) so unrelated single-axis ruled lines don't add up to a false flag, and matches the stop directly rather than parsing whole gradient layers, since colors like oklch(...) carry nested parens. Extends the gpt-tells fixture with one flag case and two pass cases (single-axis rule, two-color blend), regenerates the browser detector bundle, and bumps the rule count 44 -> 45. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * Require tiling background-size for codex-grid-background Address review: two hairline gradients alone draw a fixed crosshair, not a grid. Scope detection to a single style block (CSS rule body or inline style attr) and require both >=2 hairline stops AND a tiling `background-size` px cell in the same block, matching the skill rule's "plus background-size" wording. Add a crosshair-without-tiling pass case. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * Scope codex-grid-background hairline count to background values Address review: count hairline stops only inside background/background-image declaration values, not the whole style block, so a hairline in an unrelated property (mask-image, border-image) can't stand in for the grid's second axis. Add a bg+mask-image hairline pass case. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
48 lines
3.2 KiB
HTML
48 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>GPT provider-tell fixture (gated --gpt)</title>
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }
|
|
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; }
|
|
.col { padding: 16px; }
|
|
.card { padding: 24px; margin: 0 0 24px; border-radius: 12px; }
|
|
.stripes { height: 80px; margin: 0 0 24px; border-radius: 12px; }
|
|
.grid { height: 80px; margin: 0 0 24px; border-radius: 12px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="cols">
|
|
<!-- FLAG column: GPT idioms (only surfaced under --gpt) -->
|
|
<section class="col flag">
|
|
<div class="card flag-thin-border-wide-shadow" style="border: 1px solid #e5e7eb; box-shadow: 0 0 24px rgba(0,0,0,0.18)">
|
|
Thin hairline border paired with a wide diffuse shadow.
|
|
</div>
|
|
<div class="stripes flag-repeating-stripes" style="background: repeating-linear-gradient(45deg, #eee, #eee 10px, #fafafa 10px, #fafafa 20px)"></div>
|
|
<div class="grid flag-codex-grid" style="background: linear-gradient(90deg, oklch(96% 0.012 82 / 0.055) 1px, transparent 1px), linear-gradient(180deg, oklch(96% 0.012 82 / 0.05) 1px, transparent 1px); background-size: 78px 78px, 78px 78px;"></div>
|
|
<p class="flag-theater">We retired the growth theater and shipped something that actually works.</p>
|
|
</section>
|
|
|
|
<!-- PASS column: the legitimate, non-tell versions -->
|
|
<section class="col pass">
|
|
<div class="card pass-tight-shadow" style="border: 1px solid #e5e7eb; box-shadow: 0 1px 4px rgba(0,0,0,0.08)">
|
|
Hairline border with a tight, purposeful shadow.
|
|
</div>
|
|
<div class="card pass-soft-border-wide-shadow" style="border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: 0 18px 48px -16px rgba(15, 23, 42, 0.18)">
|
|
A quiet low-contrast hairline with a broad but restrained ambient shadow.
|
|
</div>
|
|
<div class="card pass-oklch-soft-shadow" style="border: 1px solid oklch(78% 0 0 / 0.16); box-shadow: 0 16px 36px -12px oklch(2% 0.004 95 / 0.18)">
|
|
OKLCH shadow hue values should not be mistaken for shadow blur.
|
|
</div>
|
|
<div class="stripes pass-plain-gradient" style="background: linear-gradient(180deg, #f3f4f6, #ffffff)"></div>
|
|
<div class="grid pass-single-axis-rule" style="background: linear-gradient(180deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px); background-size: 100% 32px"></div>
|
|
<div class="grid pass-two-color-blend" style="background: linear-gradient(90deg, #f3f4f6, #e5e7eb), linear-gradient(180deg, #eef2ff, #ffffff)"></div>
|
|
<div class="grid pass-crosshair-no-tiling" style="background: linear-gradient(90deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px), linear-gradient(180deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px)"></div>
|
|
<div class="grid pass-bg-plus-mask-hairline" style="background: linear-gradient(90deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(180deg, #000 1px, transparent 1px)"></div>
|
|
<p class="pass-no-theater">We measured real outcomes for the people who use this every day.</p>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html>
|