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

Improve foundation section responsive breakpoints

Browse Source 
- Switch staircase to grid at 1200px (was 1024px) to prevent tall
  stairs from clipping at narrow desktop widths
- Add 2-col grid at 768px, compact horizontal cards at 520px
- Fix count crowding heading: use overflow hidden to gracefully
  hide count when card is too narrow instead of wrapping or cramming

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-04-03 13:08:18 -07:00
co-authored by Claude Opus 4.6
parent 3c9f705d49
commit dd559cd1e9
2 changed files with 83 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/main.css
+40 -7
View File
@@ -1060,9 +1060,10 @@ code {
.foundation-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-items: baseline;
gap: var(--spacing-xs);
margin-bottom: 8px;
overflow: hidden;
}
.foundation-card-label {
@@ -1076,7 +1077,7 @@ code {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--color-accent);
margin-top: 4px;
flex-shrink: 0;
}
.foundation-card-detail {
@@ -1154,20 +1155,21 @@ code {
.anim-blink { animation: blink-key 1s step-end infinite; }
@keyframes blink-key { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (max-width: 1024px) {
/* Tablet: 3-col grid (switch before stairs clip) */
@media (max-width: 1200px) {
.foundation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-template-columns: repeat(3, 1fr);
height: auto;
gap: var(--spacing-md);
margin-top: var(--spacing-xl);
}
.foundation-column { height: auto; }
.foundation-card { height: auto; min-height: 220px; }
.foundation-card { height: auto; min-height: 200px; }
.foundation-plinth { display: none; }
.foundation-column:hover .foundation-card { transform: translateY(-4px); }
/* Enable hover animations on card hover for mobile grid */
/* Enable hover animations on card hover for grid */
.foundation-card:hover .anim-draw { animation: draw-in 0.8s var(--ease-out) forwards; }
.foundation-card:hover .anim-draw-delay { animation: draw-in 1s var(--ease-out) 0.2s forwards; }
.foundation-card:hover .anim-move-x { animation: spread-x 0.6s var(--ease-in-out) forwards; }
@@ -1182,6 +1184,37 @@ code {
.foundation-card:hover .anim-squash-ball { animation: bounce-ball 1.5s linear infinite; }
}
/* Small tablet: 2-col grid */
@media (max-width: 768px) {
.foundation-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Small mobile: compact horizontal cards */
@media (max-width: 520px) {
.foundation-grid {
grid-template-columns: 1fr;
gap: var(--spacing-sm);
}
.foundation-card {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
align-items: start;
min-height: auto;
padding: var(--spacing-sm) var(--spacing-md);
gap: 0 var(--spacing-md);
}
.foundation-card-viz {
grid-row: 1 / -1;
align-self: center;
height: auto;
margin-bottom: 0;
}
.foundation-card-header { margin-bottom: 2px; }
.foundation-card-label { font-size: 1.1rem; }
.foundation-card-detail { margin: 0; font-size: 0.8125rem; }
}
.foundation-cta {
text-align: center;
}
public/css/styles.css
+43 -6
View File
@@ -3247,9 +3247,10 @@ code {
}
.foundation-card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-items: baseline;
gap: var(--spacing-xs);
margin-bottom: 8px;
overflow: hidden;
}
.foundation-card-label {
font-family: var(--font-display);
@@ -3261,7 +3262,7 @@ code {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--color-accent);
margin-top: 4px;
flex-shrink: 0;
}
.foundation-card-detail {
font-size: 0.875rem;
@@ -3474,10 +3475,10 @@ code {
opacity: 0;
}
}
@media (max-width: 1024px) {
@media (max-width: 1200px) {
.foundation-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-template-columns: repeat(3, 1fr);
height: auto;
gap: var(--spacing-md);
margin-top: var(--spacing-xl);
@@ -3487,7 +3488,7 @@ code {
}
.foundation-card {
height: auto;
min-height: 220px;
min-height: 200px;
}
.foundation-plinth {
display: none;
@@ -3532,6 +3533,42 @@ code {
animation: bounce-ball 1.5s linear infinite;
}
}
@media (max-width: 768px) {
.foundation-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.foundation-grid {
grid-template-columns: 1fr;
gap: var(--spacing-sm);
}
.foundation-card {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
align-items: start;
min-height: auto;
padding: var(--spacing-sm) var(--spacing-md);
gap: 0 var(--spacing-md);
}
.foundation-card-viz {
grid-row: 1 / -1;
align-self: center;
height: auto;
margin-bottom: 0;
}
.foundation-card-header {
margin-bottom: 2px;
}
.foundation-card-label {
font-size: 1.1rem;
}
.foundation-card-detail {
margin: 0;
font-size: 0.8125rem;
}
}
.foundation-cta {
text-align: center;
}