skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-19 01:26:29 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update hero content and add pattern contribution CTA

Browse Source 
- Simplify hero overlay (remove badge, update tagline)
- Add "What's Included" header to equation section
- Add contribution CTA to Antidote section with GitHub link

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-01-06 18:04:18 -08:00
co-authored by Claude Opus 4.5
parent bf247c5e14
commit 61d26a7370
2 changed files with 68 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/main.css
+54 -1
View File
@@ -304,11 +304,25 @@ code {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-lg);
gap: var(--spacing-md);
text-align: center;
pointer-events: none;
}
.hero-badge {
display: inline-block;
padding: 0.35em 1em;
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ink);
background: rgba(255, 255, 255, 0.85);
border: 1px solid var(--color-ink);
backdrop-filter: blur(4px);
}
.hero-title-overlay {
font-family: var(--font-display);
font-size: clamp(3.5rem, 12vw, 8rem);
@@ -365,6 +379,15 @@ code {
background: var(--color-paper);
}
.hero-section-title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 400;
font-style: italic;
color: var(--color-ink);
margin: 0 0 var(--spacing-lg) 0;
}
.hero-content {
display: flex;
flex-direction: column;
@@ -1785,6 +1808,36 @@ code {
font-weight: 600;
}
/* Contribution CTA */
.contribute-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-md);
margin-top: var(--spacing-xl);
padding-top: var(--spacing-xl);
border-top: 1px solid var(--color-mist);
text-align: center;
}
.contribute-text {
font-family: var(--font-display);
font-size: 1.125rem;
font-style: italic;
color: var(--color-charcoal);
margin: 0;
}
.btn-small {
padding: var(--spacing-xs) var(--spacing-md);
font-size: 0.8rem;
gap: var(--spacing-xs);
}
.btn-small svg {
flex-shrink: 0;
}
/* ============================================
SOLUTION SECTION ENHANCEMENTS
============================================ */
public/index.html
+14 -2
View File
@@ -23,7 +23,7 @@
<div class="hero-shader" id="hero-shader">
<div class="hero-overlay-content">
<h1 class="hero-title-overlay">Impeccable</h1>
<p class="hero-tagline-overlay">The vocabulary you didn't know you needed.</p>
<p class="hero-tagline-overlay">Design fluency for Claude Code, Codex, and more.</p>
<a href="#downloads" class="hero-cta-overlay">Get Started</a>
</div>
</div>
@@ -31,8 +31,9 @@
<!-- Content below the shader -->
<div class="hero-container">
<div class="hero-content">
<h2 class="hero-section-title" data-reveal>What's Included</h2>
<!-- Middle: Visual Equation -->
<!-- Visual Equation -->
<div class="hero-equation" data-reveal>
<div class="equation-block">
<span class="equation-label">Enhanced Skill</span>
@@ -167,6 +168,17 @@
<div class="patterns-categories" id="patterns-categories">
<!-- Rendered by JS -->
</div>
<!-- Contribution CTA -->
<div class="contribute-cta" data-reveal>
<p class="contribute-text">Know a pattern we're missing? Help us grow the collection.</p>
<a href="https://github.com/pbakaus/impeccable/issues/new?labels=pattern&title=Pattern%20suggestion%3A%20" class="btn btn-secondary btn-small">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 5v14M5 12h14"/>
</svg>
<span>Suggest a Pattern</span>
</a>
</div>
</div>
</section>