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

Restore What's Included section with cleaner equation layout

Browse Source 
- Replace bulky gradient box with original side-by-side card design
- Add equation-style layout: skill card + operator + commands card
- Improve hero hook copy to explain what Impeccable does
- Clean, minimal styling that matches site aesthetic

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-01-11 15:05:53 -08:00
co-authored by Claude Opus 4.5
parent 52d99fb31c
commit 81dc4b2ad6
2 changed files with 95 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/main.css
+74 -1
View File
@@ -479,7 +479,7 @@ code {
color: var(--color-charcoal);
}
.hero-problem-text {
.hero-hook-text {
font-size: clamp(1rem, 1.5vw, 1.125rem);
line-height: 1.6;
color: var(--color-ash);
@@ -487,6 +487,79 @@ code {
margin: 0;
}
/* Hero Equation - What's Included */
.hero-equation {
display: flex;
align-items: stretch;
gap: var(--spacing-sm);
max-width: 480px;
}
.equation-block {
flex: 1;
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid var(--color-mist);
background: var(--color-paper);
text-align: left;
}
.equation-label {
display: inline-block;
font-family: var(--font-body);
font-size: 0.5625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-paper);
background: var(--color-ink);
padding: 2px 6px;
margin-bottom: 6px;
}
.equation-title {
display: block;
font-family: var(--font-mono);
font-size: 1rem;
font-weight: 600;
color: var(--color-ink);
margin-bottom: 4px;
}
.equation-list {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.75rem;
color: var(--color-ash);
line-height: 1.5;
}
.equation-operator {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 300;
color: var(--color-accent);
flex-shrink: 0;
width: 32px;
}
@media (max-width: 600px) {
.hero-equation {
flex-direction: column;
gap: var(--spacing-xs);
max-width: 100%;
}
.equation-operator {
width: auto;
height: 24px;
font-size: 1.25rem;
}
}
.hero-cta-group {
display: flex;
align-items: center;