mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
refine(site): fold Language subtitle, split Antidote, Live Mode layout + variants
Four responses to feedback:
1. Language: fold "Pick any command to see it in action / Full command
reference →" into the section-lead. The whole commands-header row
is gone; the fisheye panel now sits much closer to the lead copy.
2. Antidote: full two-column editorial split. Left column carries the
lead + a three-row stats block (25 / 6 / 3) and the "Browse full
catalog" CTA as a squared editorial link. Right column is the
Gallery of Shame card stack. No more empty right-of-gallery void.
3. The Case: tab labels switch from Cormorant italic serif to body
sans. Tab numbers stay mono. Less aesthetic noise, cleaner reading.
4. Live Mode:
- Layout split: the frame now sits in the left column with its
caption; the support list ("Works on / Accepts into / CSP /
Overlay") moves to a narrow right column, rule-delimited, with
magenta-kicker-above-ink style per cell. Under the support list
on desktop, stacks on mobile.
- Skeleton page: nav bar (logo + 3 links + CTA) plus heading +
body lines drawn in at 30% opacity behind the target card, so
the iteration reads as "I clicked an element on an actual page."
- Variant cards rewritten with distinct design language per card:
V1 editorial column (rule-top, italic display, text-link button),
V2 brutalist ink ticket (ink slab, magenta accent stripe, stamp
glyph, sans bold), V3 playful dashed postcard (stickers, italic
Cormorant, pill CTA). The demo now actually shows three visually
different directions instead of three similar cards.
This commit is contained in:
Paul Bakaus
+342
-15
@@ -1433,10 +1433,10 @@
|
||||
}
|
||||
|
||||
.why-tab-label {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.why-tab:hover {
|
||||
@@ -2704,10 +2704,20 @@
|
||||
}
|
||||
|
||||
.live-demo {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
|
||||
gap: var(--spacing-xl);
|
||||
align-items: start;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
.live-demo-frame-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
min-width: 0;
|
||||
}
|
||||
@media (max-width: 920px) {
|
||||
.live-demo { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.live-demo-frame {
|
||||
@@ -3206,28 +3216,35 @@
|
||||
|
||||
/* Supporting row under the demo */
|
||||
.live-demo-support {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
padding-top: var(--spacing-md);
|
||||
border-top: 1px solid var(--color-mist);
|
||||
}
|
||||
.live-demo-support-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-md) 0 0;
|
||||
border-top: 1px solid var(--color-ink);
|
||||
align-self: stretch;
|
||||
}
|
||||
.live-demo-support-cell {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 4px;
|
||||
padding-bottom: var(--spacing-md);
|
||||
border-bottom: 1px dashed var(--color-mist);
|
||||
}
|
||||
.live-demo-support-cell:last-child {
|
||||
border-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.live-demo-support-k {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.2em;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-ash);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.live-demo-support-v {
|
||||
font-family: var(--font-body);
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
line-height: 1.55;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
@@ -3312,3 +3329,313 @@
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
ANTIDOTE — two-column editorial layout
|
||||
============================================ */
|
||||
|
||||
.antidote-row--split {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(280px, 1fr) auto;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.antidote-intro {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-lg);
|
||||
max-width: 52ch;
|
||||
}
|
||||
|
||||
.antidote-intro .section-lead {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.antidote-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
margin: 0;
|
||||
padding: var(--spacing-md) 0 0;
|
||||
border-top: 1px solid var(--color-mist);
|
||||
}
|
||||
|
||||
.antidote-stat {
|
||||
display: grid;
|
||||
grid-template-columns: 72px 1fr;
|
||||
gap: var(--spacing-md);
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.antidote-stat dt {
|
||||
font-family: var(--font-display);
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-size: 2.5rem;
|
||||
line-height: 1;
|
||||
color: var(--color-ink);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.antidote-stat dd {
|
||||
margin: 0;
|
||||
font-family: var(--font-body);
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
color: var(--color-charcoal);
|
||||
}
|
||||
|
||||
.antidote-stat dd code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.875em;
|
||||
background: var(--color-mist);
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.antidote-catalog-link {
|
||||
font-family: var(--font-body);
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-ink);
|
||||
border-bottom: 2px solid var(--color-ink);
|
||||
padding-bottom: 4px;
|
||||
text-decoration: none;
|
||||
align-self: flex-start;
|
||||
transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
|
||||
}
|
||||
|
||||
.antidote-catalog-link:hover {
|
||||
color: var(--color-accent);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.antidote-row--split {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
LIVE MODE — skeleton page + richer variants
|
||||
============================================ */
|
||||
|
||||
/* Skeleton elements behind the target card — suggest "this is a real page" */
|
||||
.live-demo-skeleton {
|
||||
position: absolute;
|
||||
inset: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
filter: blur(0.3px);
|
||||
}
|
||||
.live-demo-skel-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--color-mist);
|
||||
}
|
||||
.live-demo-skel-logo {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 4px;
|
||||
background: var(--color-charcoal);
|
||||
}
|
||||
.live-demo-skel-link {
|
||||
width: 48px;
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-mist);
|
||||
}
|
||||
.live-demo-skel-cta {
|
||||
margin-left: auto;
|
||||
width: 72px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
background: var(--color-charcoal);
|
||||
}
|
||||
.live-demo-skel-heading {
|
||||
width: 60%;
|
||||
height: 18px;
|
||||
border-radius: 3px;
|
||||
background: var(--color-mist);
|
||||
margin-top: 20px;
|
||||
}
|
||||
.live-demo-skel-line {
|
||||
height: 8px;
|
||||
border-radius: 2px;
|
||||
background: var(--color-mist);
|
||||
}
|
||||
.live-demo-skel-line--short { width: 40%; }
|
||||
|
||||
/* Target stays above skeleton */
|
||||
.live-demo-target { position: relative; z-index: 1; }
|
||||
|
||||
/* ---- Card variants — sharper, more distinct ---- */
|
||||
|
||||
/* Variant 1: magazine column — italic serif, rule lines, off-white */
|
||||
.live-demo-card--v1 {
|
||||
background: var(--color-cream);
|
||||
padding: 18px 22px;
|
||||
border: 0;
|
||||
border-top: 3px solid var(--color-ink);
|
||||
border-radius: 0;
|
||||
gap: 6px;
|
||||
}
|
||||
.live-demo-card--v1 .live-demo-card-kicker {
|
||||
color: var(--color-accent);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.28em;
|
||||
}
|
||||
.live-demo-card--v1 h3 {
|
||||
font-family: var(--font-display);
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.01em;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.live-demo-card--v1 h3 em { color: var(--color-accent); font-style: italic; }
|
||||
.live-demo-card--v1 p {
|
||||
font-family: var(--font-display);
|
||||
font-style: italic;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
color: var(--color-charcoal);
|
||||
}
|
||||
.live-demo-card--v1 button {
|
||||
font-family: var(--font-body);
|
||||
align-self: flex-start;
|
||||
margin-top: 6px;
|
||||
background: transparent;
|
||||
color: var(--color-ink);
|
||||
border: 0;
|
||||
border-bottom: 1.5px solid var(--color-ink);
|
||||
padding: 4px 0;
|
||||
border-radius: 0;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
/* Variant 2: brutalist ticket — thick ink block, stamp glyph, mono */
|
||||
.live-demo-card--v2 {
|
||||
position: relative;
|
||||
background: var(--color-ink);
|
||||
color: var(--color-paper);
|
||||
padding: 20px 24px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
overflow: hidden;
|
||||
gap: 8px;
|
||||
}
|
||||
.live-demo-card--v2::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 6px;
|
||||
background: var(--color-accent);
|
||||
}
|
||||
.live-demo-card-stamp {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 18px;
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
color: var(--color-accent);
|
||||
transform: rotate(-8deg);
|
||||
}
|
||||
.live-demo-card--v2 .live-demo-card-kicker {
|
||||
color: var(--color-accent);
|
||||
letter-spacing: 0.3em;
|
||||
font-weight: 600;
|
||||
}
|
||||
.live-demo-card--v2 h3 {
|
||||
font-family: var(--font-body);
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 1.1;
|
||||
color: var(--color-paper);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.live-demo-card--v2 button {
|
||||
font-family: var(--font-mono);
|
||||
font-weight: 500;
|
||||
align-self: flex-start;
|
||||
margin-top: 6px;
|
||||
background: var(--color-accent);
|
||||
color: var(--color-paper);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding: 9px 14px;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: none;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Variant 3: playful ticket — accent background, sticker stars, postcard vibe */
|
||||
.live-demo-card--v3 {
|
||||
position: relative;
|
||||
background:
|
||||
radial-gradient(circle at 20% 80%, oklch(92% 0.08 350) 0, transparent 45%),
|
||||
var(--color-cream);
|
||||
border: 1px dashed var(--color-accent);
|
||||
border-radius: 10px;
|
||||
padding: 22px 24px 20px;
|
||||
gap: 8px;
|
||||
}
|
||||
.live-demo-card-sticker {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 14px;
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
color: var(--color-accent);
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
transform: rotate(6deg);
|
||||
}
|
||||
.live-demo-card--v3 .live-demo-card-kicker {
|
||||
font-family: var(--font-display);
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--color-accent-hover);
|
||||
text-transform: none;
|
||||
}
|
||||
.live-demo-card--v3 h3 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
line-height: 1.2;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
.live-demo-card--v3 button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
align-self: flex-start;
|
||||
background: var(--color-ink);
|
||||
color: var(--color-paper);
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
padding: 10px 18px;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: none;
|
||||
font-size: 12px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
+65
-32
@@ -212,7 +212,7 @@
|
||||
</div>
|
||||
<div class="language-content">
|
||||
<div class="language-intro-row" data-reveal>
|
||||
<p class="section-lead">23 commands form a shared vocabulary between you and your AI. Each one encodes a specific design discipline, so you can steer with precision.</p>
|
||||
<p class="section-lead">23 commands form a shared vocabulary between you and your AI. Each one encodes a specific design discipline, so you can steer with precision. Pick any to see it in action, or <a href="/docs" class="cheatsheet-link">browse the full reference →</a></p>
|
||||
<div class="language-view-toggle" role="tablist" aria-label="Commands view">
|
||||
<button type="button" role="tab" class="language-view-tab is-active" data-view="palette" aria-selected="true">Palette</button>
|
||||
<button type="button" role="tab" class="language-view-tab" data-view="periodic" aria-selected="false">Periodic</button>
|
||||
@@ -223,9 +223,6 @@
|
||||
|
||||
<div class="language-view language-view--palette is-active" data-view-panel="palette">
|
||||
<div class="commands-subsection">
|
||||
<div class="commands-header" data-reveal>
|
||||
<p class="commands-header-subtitle">Pick any command to see it in action. <a href="/docs" class="cheatsheet-link">Full command reference →</a></p>
|
||||
</div>
|
||||
<div class="commands-gallery">
|
||||
<!-- Rendered by JS -->
|
||||
</div>
|
||||
@@ -247,10 +244,28 @@
|
||||
<h2 class="section-title">The Antidote</h2>
|
||||
</div>
|
||||
<div class="antidote-content">
|
||||
<p class="section-lead" data-reveal>Every AI model learned from the same templates. Without intervention, they all produce the same predictable mistakes. Impeccable names them, detects them, and teaches the AI to avoid them.</p>
|
||||
<div class="antidote-row antidote-row--split" data-reveal>
|
||||
<div class="antidote-intro">
|
||||
<p class="section-lead">Every AI model learned from the same templates. Without intervention, they all produce the same predictable mistakes. Impeccable names them, detects them, and teaches the AI to avoid them.</p>
|
||||
|
||||
<dl class="antidote-stats">
|
||||
<div class="antidote-stat">
|
||||
<dt>25</dt>
|
||||
<dd>deterministic anti-pattern rules</dd>
|
||||
</div>
|
||||
<div class="antidote-stat">
|
||||
<dt>6</dt>
|
||||
<dd>categories: typography, color, layout, motion, visual details, interaction</dd>
|
||||
</div>
|
||||
<div class="antidote-stat">
|
||||
<dt>3</dt>
|
||||
<dd>ways to detect: CLI, Chrome extension, or inside <code>/impeccable critique</code></dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<a href="/anti-patterns" class="antidote-catalog-link">Browse the full catalog →</a>
|
||||
</div>
|
||||
|
||||
<!-- Gallery of Shame (standalone, full-width) -->
|
||||
<div class="antidote-row" data-reveal>
|
||||
<div class="gallery-stack-container">
|
||||
<div class="gallery-stack-header">
|
||||
<h3 class="gallery-stack-title">Gallery of Shame</h3>
|
||||
@@ -283,7 +298,6 @@
|
||||
<span class="gallery-stack-label">Bad Contrast</span>
|
||||
</a>
|
||||
</div>
|
||||
<a href="/anti-patterns" class="gallery-stack-link">Browse the full catalog →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -545,7 +559,7 @@
|
||||
<p class="section-lead">Pick any element in the browser. Drop a comment or a stroke. Hit Go. Three production-quality variants swap in via your framework's HMR. Accept the one you want and it writes back to source.</p>
|
||||
|
||||
<div class="live-demo" id="live-demo" aria-label="Live Mode interactive demo loop">
|
||||
<div class="live-demo-frame">
|
||||
<div class="live-demo-frame-col"><div class="live-demo-frame">
|
||||
<div class="live-demo-chrome">
|
||||
<span class="live-demo-dot"></span>
|
||||
<span class="live-demo-dot"></span>
|
||||
@@ -554,6 +568,20 @@
|
||||
</div>
|
||||
|
||||
<div class="live-demo-stage">
|
||||
<!-- Skeleton: the rest of the page around the target card -->
|
||||
<div class="live-demo-skeleton" aria-hidden="true">
|
||||
<div class="live-demo-skel-nav">
|
||||
<span class="live-demo-skel-logo"></span>
|
||||
<span class="live-demo-skel-link"></span>
|
||||
<span class="live-demo-skel-link"></span>
|
||||
<span class="live-demo-skel-link"></span>
|
||||
<span class="live-demo-skel-cta"></span>
|
||||
</div>
|
||||
<div class="live-demo-skel-heading"></div>
|
||||
<div class="live-demo-skel-line"></div>
|
||||
<div class="live-demo-skel-line live-demo-skel-line--short"></div>
|
||||
</div>
|
||||
|
||||
<!-- Target element that gets picked + iterated -->
|
||||
<div class="live-demo-target" data-demo-target>
|
||||
<div class="live-demo-variant is-active" data-variant="original">
|
||||
@@ -567,25 +595,25 @@
|
||||
<div class="live-demo-variant" data-variant="1">
|
||||
<div class="live-demo-card live-demo-card--v1">
|
||||
<span class="live-demo-card-kicker">No. 04</span>
|
||||
<h3><em>Letters</em>, occasionally.</h3>
|
||||
<p>A postcard from the editor, about once a month. No tracking pixels.</p>
|
||||
<h3>Letters, <em>occasionally</em>.</h3>
|
||||
<p>A postcard from the editor, about once a month. No tracking pixels, no "just checking in."</p>
|
||||
<button type="button">Send me one</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="live-demo-variant" data-variant="2">
|
||||
<div class="live-demo-card live-demo-card--v2">
|
||||
<span class="live-demo-card-kicker">☞ Subscribe</span>
|
||||
<h3>Design dispatches, every other Thursday.</h3>
|
||||
<p>Slow by design. Opinions included.</p>
|
||||
<div class="live-demo-card-stamp">☞</div>
|
||||
<span class="live-demo-card-kicker">Dispatch</span>
|
||||
<h3>Design notes, <br>every other<br>Thursday.</h3>
|
||||
<button type="button">Join the list →</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="live-demo-variant" data-variant="3">
|
||||
<div class="live-demo-card live-demo-card--v3">
|
||||
<span class="live-demo-card-kicker">Field notes</span>
|
||||
<h3><em>One letter.</em> One afternoon of reading. Once a month.</h3>
|
||||
<p>For people who still open email for pleasure.</p>
|
||||
<button type="button">Receive the letter</button>
|
||||
<div class="live-demo-card-sticker"><span>☆</span><span>☆</span><span>☆</span></div>
|
||||
<span class="live-demo-card-kicker">Field Notes</span>
|
||||
<h3>A monthly letter, for people who still read email for pleasure.</h3>
|
||||
<button type="button">Receive the letter <span aria-hidden="true">✺</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -662,21 +690,26 @@
|
||||
<div class="live-demo-caption" data-demo-caption>
|
||||
<span class="live-demo-caption-label" data-demo-caption-label>Hover an element to pick.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Supporting text below the demo -->
|
||||
<div class="live-demo-support">
|
||||
<div class="live-demo-support-cell">
|
||||
<span class="live-demo-support-k">Works on</span>
|
||||
<span class="live-demo-support-v">Vite · Next.js · SvelteKit · Astro · Nuxt</span>
|
||||
</div>
|
||||
<div class="live-demo-support-cell">
|
||||
<span class="live-demo-support-k">Accepts into</span>
|
||||
<span class="live-demo-support-v">Your real source file, via HMR</span>
|
||||
</div>
|
||||
<div class="live-demo-support-cell">
|
||||
<span class="live-demo-support-k">CSP-strict apps</span>
|
||||
<span class="live-demo-support-v">One-time dev-only patch, with your consent</span>
|
||||
<!-- Supporting list sits to the right of the frame on desktop -->
|
||||
<div class="live-demo-support">
|
||||
<div class="live-demo-support-cell">
|
||||
<span class="live-demo-support-k">Works on</span>
|
||||
<span class="live-demo-support-v">Vite, Next.js, SvelteKit, Astro, Nuxt.</span>
|
||||
</div>
|
||||
<div class="live-demo-support-cell">
|
||||
<span class="live-demo-support-k">Accepts into</span>
|
||||
<span class="live-demo-support-v">Your real source file, via HMR.</span>
|
||||
</div>
|
||||
<div class="live-demo-support-cell">
|
||||
<span class="live-demo-support-k">CSP-strict apps</span>
|
||||
<span class="live-demo-support-v">One-time dev-only patch, with your consent.</span>
|
||||
</div>
|
||||
<div class="live-demo-support-cell">
|
||||
<span class="live-demo-support-k">Overlay toggle</span>
|
||||
<span class="live-demo-support-v">The anti-pattern detector runs inside Live, one click away.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user