mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-15 15:46:30 +03:00
Redesign website with interactive demos and improved layout
- Add interactive before/after demos for all skills (UX Writing, Spatial Design, Motion Design, Typography, Interaction Design, Color & Contrast, Responsive Design) - Implement tabbed demo navigation for skills with multiple examples - Refactor app.js into modular JS files (skills.js, commands.js, data.js, skill-demos.js, command-demos.js, demo-toggles.js) - Add new CSS modules (skill-demos.css, workflow.css, problem-section.css, solution-section.css) - Redesign commands section with sidebar nav matching skills layout - Replace large download buttons with compact icon buttons - Fix gray-on-pink color clashing throughout UI - Remove frontend-design skill (Anthropic's work, not ours) - Format skill names properly (e.g., 'UX Writing' not 'ux-writing') - Remove redundant 'Combines Well With' from skills - Add 'The Problem' and 'The Solution' sections to homepage - Various CSS fixes for buttons, backgrounds, and spacing
This commit is contained in:
Paul Bakaus
@@ -0,0 +1,195 @@
|
||||
/**
|
||||
* Problem Section - Showcases the "AI slop" aesthetic
|
||||
* Deliberately uses generic design patterns to illustrate what we're solving
|
||||
*/
|
||||
|
||||
.problem-section {
|
||||
padding: var(--s-2xl) 0;
|
||||
border-top: 1px solid var(--c-mist);
|
||||
}
|
||||
|
||||
.problem-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--s-2xl);
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 968px) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--s-xl);
|
||||
}
|
||||
}
|
||||
|
||||
.problem-content {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.problem-content .section-title {
|
||||
margin-bottom: var(--s-md);
|
||||
}
|
||||
|
||||
.problem-lead {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.6;
|
||||
color: var(--c-charcoal);
|
||||
}
|
||||
|
||||
/* AI Slop Demo - Deliberately generic design */
|
||||
.problem-showcase {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ai-slop-demo {
|
||||
position: relative;
|
||||
max-width: 380px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slop-card {
|
||||
/* Deliberately generic card styling */
|
||||
background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 50%, #ddd6fe 100%);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.slop-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.slop-avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
||||
}
|
||||
|
||||
.slop-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.slop-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.slop-subtitle {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.slop-body {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #4b5563;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.slop-button {
|
||||
width: 100%;
|
||||
padding: 12px 24px;
|
||||
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.slop-button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
|
||||
}
|
||||
|
||||
/* Labels pointing out the generic patterns */
|
||||
.slop-labels {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.slop-label {
|
||||
position: absolute;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--c-accent);
|
||||
background: var(--c-paper);
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--c-accent);
|
||||
border-radius: 2px;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
animation: labelFadeIn 0.5s ease forwards;
|
||||
}
|
||||
|
||||
.slop-label[data-point="font"] {
|
||||
top: 24px;
|
||||
right: -20px;
|
||||
transform: translateX(100%);
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.slop-label[data-point="gradient"] {
|
||||
top: 50%;
|
||||
right: -20px;
|
||||
transform: translateX(100%) translateY(-50%);
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
.slop-label[data-point="layout"] {
|
||||
bottom: 60px;
|
||||
left: -20px;
|
||||
transform: translateX(-100%);
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
.slop-label[data-point="copy"] {
|
||||
bottom: 24px;
|
||||
left: -20px;
|
||||
transform: translateX(-100%);
|
||||
animation-delay: 0.8s;
|
||||
}
|
||||
|
||||
@keyframes labelFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(calc(var(--tx, 100%) - 10px));
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(var(--tx, 100%));
|
||||
}
|
||||
}
|
||||
|
||||
.slop-label[data-point="layout"],
|
||||
.slop-label[data-point="copy"] {
|
||||
--tx: -100%;
|
||||
}
|
||||
|
||||
.slop-label[data-point="gradient"] {
|
||||
--tx: 100%;
|
||||
transform: translateX(100%) translateY(-50%);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.slop-labels {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ai-slop-demo {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user