mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 22:26:38 +03:00
Paul BakausandGitHub
e3e22007a9
* Improve detector false positive handling * Register docs integrity test * Fix clipped overflow decorative skip
264 lines
7.5 KiB
HTML
264 lines
7.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Repeated Section Kickers Fixture</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: Arial, sans-serif;
|
|
background: #f6f2ec;
|
|
color: #171411;
|
|
}
|
|
main {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 32px;
|
|
padding: 32px;
|
|
}
|
|
.col {
|
|
min-width: 0;
|
|
border: 1px solid #c9bfb2;
|
|
padding: 24px;
|
|
}
|
|
.case {
|
|
min-height: 120px;
|
|
margin: 0 0 24px;
|
|
padding: 16px;
|
|
background: #fffaf3;
|
|
}
|
|
.kicker,
|
|
.pass-kicker {
|
|
display: block;
|
|
width: 240px;
|
|
min-height: 16px;
|
|
margin: 0 0 8px;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
letter-spacing: 0.11em;
|
|
color: #5b5046;
|
|
}
|
|
.kicker {
|
|
text-transform: uppercase;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
margin: 0 0 12px;
|
|
font-size: 32px;
|
|
line-height: 38px;
|
|
font-weight: 700;
|
|
}
|
|
p,
|
|
label,
|
|
figcaption,
|
|
a,
|
|
li {
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
}
|
|
nav,
|
|
form,
|
|
figure,
|
|
ol {
|
|
margin: 0 0 24px;
|
|
padding: 16px;
|
|
border: 1px solid #d8cec0;
|
|
min-height: 80px;
|
|
}
|
|
.brand-system {
|
|
min-height: 120px;
|
|
}
|
|
.card-grid,
|
|
.command-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 12px;
|
|
margin: 0 0 24px;
|
|
}
|
|
.suite-card,
|
|
.command-card {
|
|
display: block;
|
|
min-height: 120px;
|
|
padding: 16px;
|
|
border: 1px solid #d8cec0;
|
|
background: #fff;
|
|
text-align: left;
|
|
}
|
|
.taxonomy-label {
|
|
display: block;
|
|
margin: 0 0 8px;
|
|
font-size: 12px;
|
|
line-height: 16px;
|
|
letter-spacing: 0.11em;
|
|
text-transform: uppercase;
|
|
color: #5b5046;
|
|
}
|
|
.suite-card h3,
|
|
.command-card h3 {
|
|
font-size: 24px;
|
|
line-height: 30px;
|
|
}
|
|
.command-carousel,
|
|
.hidden-mockup {
|
|
display: grid;
|
|
gap: 12px;
|
|
margin: 0 0 24px;
|
|
}
|
|
.command-spread,
|
|
.mockup-hero {
|
|
min-height: 120px;
|
|
padding: 16px;
|
|
border: 1px solid #d8cec0;
|
|
background: #fff;
|
|
}
|
|
.command-spread h3,
|
|
.mockup-hero h2 {
|
|
font-size: 24px;
|
|
line-height: 30px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<section class="col" aria-label="Should flag">
|
|
<h1>Should flag</h1>
|
|
|
|
<section class="case">
|
|
<span class="kicker">Invitation protocol</span>
|
|
<h2>"The Future Is Admitted"</h2>
|
|
<p>Repeated tracked labels carry the hierarchy instead of a stronger structure.</p>
|
|
</section>
|
|
|
|
<section class="case">
|
|
<p class="kicker">Preview sequence</p>
|
|
<h2>"A Private Rehearsal"</h2>
|
|
<p>The same scaffolding appears again before another section heading.</p>
|
|
</section>
|
|
|
|
<section class="case">
|
|
<div class="kicker">Access window</div>
|
|
<h2>"Reviewed, Not Sold"</h2>
|
|
<p>The pattern is now the page's default section grammar.</p>
|
|
</section>
|
|
|
|
<section class="case">
|
|
<small class="kicker">Material briefing</small>
|
|
<h2>"Touch the Future"</h2>
|
|
<p>Four repeated kickers should be enough to flag the page-level smell.</p>
|
|
</section>
|
|
</section>
|
|
|
|
<section class="col" aria-label="Should pass">
|
|
<h1>Should pass</h1>
|
|
|
|
<nav class="case" aria-label="Breadcrumb">
|
|
<span class="pass-kicker">Home / Journal</span>
|
|
<h2>"Breadcrumb Before Heading"</h2>
|
|
<a href="/">Home</a>
|
|
</nav>
|
|
|
|
<form class="case">
|
|
<label class="pass-kicker" for="guest">Guest name</label>
|
|
<input id="guest" name="guest" style="width: 220px; height: 40px;">
|
|
<h2>"Form Heading Is Separate"</h2>
|
|
</form>
|
|
|
|
<ol class="case">
|
|
<li>
|
|
<span class="pass-kicker">Step 01</span>
|
|
<h3>"Step Indicator"</h3>
|
|
<p>Step indicators in ordered flows should not count as section scaffolding.</p>
|
|
</li>
|
|
</ol>
|
|
|
|
<figure class="case">
|
|
<span class="pass-kicker">Plate study</span>
|
|
<figcaption>"Figure Caption Label"</figcaption>
|
|
</figure>
|
|
|
|
<section class="case">
|
|
<span class="pass-kicker">Lowercase label</span>
|
|
<h2>"Normal Case Kicker"</h2>
|
|
<p>Not uppercase, not the repeated AI section-label pattern.</p>
|
|
</section>
|
|
|
|
<section class="case brand-system" data-impeccable-allow-kickers>
|
|
<span class="pass-kicker">Archive code</span>
|
|
<h2>"Intentional Brand Label"</h2>
|
|
<p>Deliberate brand systems can opt out with an explicit marker.</p>
|
|
</section>
|
|
|
|
<div class="card-grid" aria-label="Room cards">
|
|
<article class="suite-card">
|
|
<span class="taxonomy-label">Suite</span>
|
|
<h3>"Garden Suite"</h3>
|
|
<p>Repeated category labels inside cards are structured metadata, not page-section scaffolding.</p>
|
|
</article>
|
|
<article class="suite-card">
|
|
<span class="taxonomy-label">Suite</span>
|
|
<h3>"Sea Loft"</h3>
|
|
<p>The label is useful because the user is scanning sibling cards.</p>
|
|
</article>
|
|
<article class="suite-card">
|
|
<span class="taxonomy-label">Suite</span>
|
|
<h3>"Cliff Suite"</h3>
|
|
<p>Repeating it here does not create the generic section-kicker smell.</p>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="command-grid" aria-label="Command cards">
|
|
<button type="button" class="command-card">
|
|
<span class="taxonomy-label">Refine</span>
|
|
<h3>"/impeccabletypeset"</h3>
|
|
<p>Command category labels can repeat across many action cards.</p>
|
|
</button>
|
|
<button type="button" class="command-card">
|
|
<span class="taxonomy-label">Refine</span>
|
|
<h3>"/impeccablelayout"</h3>
|
|
<p>The repeated taxonomy helps compare tools inside the same group.</p>
|
|
</button>
|
|
<button type="button" class="command-card">
|
|
<span class="taxonomy-label">Refine</span>
|
|
<h3>"/impeccablecolorize"</h3>
|
|
<p>This is a card-grid label, not a page-level eyebrow before a section.</p>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="command-carousel" aria-label="Command carousel">
|
|
<div class="command-spread" data-category="create">
|
|
<span class="taxonomy-label">Create</span>
|
|
<h3>"/impeccablecraft"</h3>
|
|
<p>Carousel slides can repeat category labels as navigational taxonomy.</p>
|
|
</div>
|
|
<div class="command-spread" data-category="evaluate">
|
|
<span class="taxonomy-label">Evaluate</span>
|
|
<h3>"/impeccableaudit"</h3>
|
|
<p>The slash command heading identifies an item, not a page section.</p>
|
|
</div>
|
|
<div class="command-spread" data-category="harden">
|
|
<span class="taxonomy-label">Harden</span>
|
|
<h3>"/impeccablepolish"</h3>
|
|
<p>The label is a category chip for a selectable command slide.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden-mockup" aria-hidden="true">
|
|
<div class="mockup-hero">
|
|
<span class="taxonomy-label">Amalfi Coast</span>
|
|
<h2>"Mockup Hero Variant One"</h2>
|
|
</div>
|
|
<div class="mockup-hero">
|
|
<span class="taxonomy-label">Amalfi Coast</span>
|
|
<h2>"Mockup Hero Variant Two"</h2>
|
|
</div>
|
|
<div class="mockup-hero">
|
|
<span class="taxonomy-label">Amalfi Coast</span>
|
|
<h2>"Mockup Hero Variant Three"</h2>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|