skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-17 08:36:25 +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/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;
}