mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-14 15:16:35 +03:00
Paul BakausandClaude Fable 5
cfdb7d4c81
Two gaps surfaced by human eval review of real artifacts: 1. side-tab missed the pseudo-element variant. The accent stripe drawn as an absolutely-positioned ::before/::after (left/right: 0, top+bottom: 0 or height: 100%, narrow width, colored background) uses no border property at all, so neither the element-level border checks (pseudo elements never enter the static cascade or DOM walk) nor the border-left/right regexes could see it. New scanCssTextForPseudoStripe scans stylesheet text for that shape, mirroring the border rule's gates: >= 3px thick (<= 12px), chromatic fill (var()-resolved, neutral dividers skipped), full height against a side edge, with the blockquote/prose exemptions preserved. 2. New pulsing-dot rule (slop): small circular "live" indicator dots (<= 16px, border-radius >= 40% or pill values) bound to an infinite animation whose keyframes vary opacity, scale, or box-shadow — or pulse/blink/ping names when the keyframes aren't in the scanned text — plus the Tailwind animate-ping/pulse + rounded-full + tiny-size utility combo. Rotation-only keyframes (spinners) never flag, including when they hide behind a pulse-like name. Both scanners live in checkHtmlPatterns, so the static-html engine and the browser bundle share the same detection path. Browser/extension bundles regenerated; docs rule count bumped to 47. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
100 lines
2.4 KiB
HTML
100 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Pseudo-element side stripe fixture</title>
|
|
<style>
|
|
:root {
|
|
--ok: oklch(0.78 0.145 155);
|
|
--line: rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* FLAG: classic ::before accent stripe — absolute, full height, left edge,
|
|
chromatic background resolved through a custom property. */
|
|
.card-stripe { position: relative; border-radius: 12px; }
|
|
.card-stripe::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; top: 0; bottom: 0;
|
|
width: 5px;
|
|
background: var(--ok);
|
|
}
|
|
|
|
/* FLAG: right-edge variant using inset shorthand + literal color. */
|
|
.row-stripe { position: relative; }
|
|
.row-stripe::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0 0 0 auto;
|
|
width: 4px;
|
|
background-color: #3b82f6;
|
|
}
|
|
|
|
/* PASS: 1px neutral hairline divider (below width threshold + neutral). */
|
|
.col + .col::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; top: 0; bottom: 0;
|
|
width: 1px;
|
|
background: var(--line);
|
|
}
|
|
|
|
/* PASS: neutral 4px rail (timeline spine) — chromatic gate rejects it. */
|
|
.timeline::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; top: 0; bottom: 0;
|
|
width: 4px;
|
|
background: rgb(210, 210, 214);
|
|
}
|
|
|
|
/* PASS: blockquote decoration is exempt in prose contexts. */
|
|
blockquote::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; top: 0; bottom: 0;
|
|
width: 4px;
|
|
background: #d97706;
|
|
}
|
|
|
|
/* PASS: toggle knob — offset from the edge, not a stripe. */
|
|
.switch::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 2px; top: 2px;
|
|
width: 10px; height: 10px;
|
|
border-radius: 50%;
|
|
background: #3b82f6;
|
|
}
|
|
|
|
/* PASS: wide decorative panel, not a stripe. */
|
|
.panel::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; top: 0; bottom: 0;
|
|
width: 40px;
|
|
background: #3b82f6;
|
|
}
|
|
|
|
/* PASS: horizontal underline accent (not full height, not edge-anchored
|
|
vertically). */
|
|
.heading::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0; bottom: 0;
|
|
width: 6px; height: 3px;
|
|
background: #3b82f6;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card-stripe">Card with pseudo stripe</div>
|
|
<div class="row-stripe">Row with right stripe</div>
|
|
<div class="col">One</div><div class="col">Two</div>
|
|
<div class="timeline">Timeline</div>
|
|
<blockquote>Quoted text</blockquote>
|
|
<span class="switch"></span>
|
|
<div class="panel">Panel</div>
|
|
<h2 class="heading">Heading</h2>
|
|
</body>
|
|
</html>
|