mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 22:26:38 +03:00
Paul BakausandGitHub
e1d3ea0b6f
* Add detector benchmark lab and visual contrast fallback * Expand visual contrast fixture coverage * Add browser visual contrast fallback * Show visual contrast overlays in detector lab * Fix detector lab short viewport layout * Fix detector lab visual overlays * Add visual contrast to browser scan overlays * Avoid browser scroll jumps during visual contrast scans * Resolve visual contrast lazily on scroll * Refresh detector lab visual counts lazily * Update pnpm lockfile for static parser deps * Address Bugbot detector API comments * Report extension visual contrast errors * Refactor detector into engine modules * Address Bugbot detector comments * Fix latest Bugbot detector notes * Fix visual contrast fixture labels * Refine detector lab fixtures * Fix stale detector overlay references * Fix detector lab fixture URLs * Fix typography lab fixture highlights * Fix typography lab page-level signal * Fix visual overlay lifecycle cleanup * Remove dead spotlight timer cleanup * Make browser async APIs reject consistently
109 lines
2.5 KiB
HTML
109 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Anti-Patterns From Linked Stylesheet</title>
|
|
<link rel="stylesheet" href="external-styles.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 24px;
|
|
background: #f9fafb;
|
|
color: #111827;
|
|
font: 14px/1.5 system-ui, sans-serif;
|
|
}
|
|
|
|
h1 {
|
|
max-width: 1080px;
|
|
margin: 0 auto 8px;
|
|
font-size: 34px;
|
|
line-height: 1.05;
|
|
}
|
|
|
|
p.intro {
|
|
max-width: 1080px;
|
|
margin: 0 auto 24px;
|
|
color: #4b5563;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: 32px;
|
|
max-width: 1080px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.col h2 {
|
|
margin: 0 0 14px;
|
|
color: #475569;
|
|
font-size: 13px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.cards {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
h3 {
|
|
margin: 0 0 4px;
|
|
font-size: 15px;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.cards p {
|
|
margin: 0;
|
|
color: #4b5563;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Linked Stylesheet Anti-Patterns</h1>
|
|
<p class="intro">
|
|
These elements get their anti-pattern styles from an external CSS file.
|
|
Regex-only scanning misses these — only computed style analysis catches them.
|
|
</p>
|
|
|
|
<div class="grid">
|
|
<section class="col" data-col="flag">
|
|
<h2>Should flag</h2>
|
|
<div class="cards">
|
|
<div class="external-side-tab">
|
|
<h3>External side-tab class</h3>
|
|
<p>border-left plus border-radius from a linked stylesheet.</p>
|
|
</div>
|
|
|
|
<div class="external-top-accent">
|
|
<h3>External top accent class</h3>
|
|
<p>border-top plus border-radius from a linked stylesheet.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="col" data-col="pass">
|
|
<h2>Should pass</h2>
|
|
<div class="cards">
|
|
<div class="external-clean">
|
|
<h3>External clean card</h3>
|
|
<p>Uniform 1px border from the linked stylesheet.</p>
|
|
</div>
|
|
|
|
<div class="external-neutral-side">
|
|
<h3>External neutral side rule</h3>
|
|
<p>Thick side border, but the color is structural gray.</p>
|
|
</div>
|
|
|
|
<div class="external-square-top">
|
|
<h3>External square top rule</h3>
|
|
<p>Heavy top border with no rounded card corners.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<script src="/js/detect-antipatterns-browser.js"></script>
|
|
</body>
|
|
</html>
|