homepage: sections are horizontal rows, not columns

Each section's panels fill an auto-fill row (as many per row as the
viewport allows) and the sections stack vertically — the side-by-side
column layout was the wrong read of 'render the sections horizontally'.
This commit is contained in:
Frank committed 2026-09-21 14:30:21 -07:00
1 parent 8ea6486dfc
commit e22b43d589
2 files changed
+7 -7

No files matched your search

+4 -5
View File
@@ -49,10 +49,9 @@ body::before {
.title { color: var(--head); }
.summary { color: var(--dim); margin: 12px 0; letter-spacing: 0.05em; }
/* Sections render side by side: one column per section, panels stacked
vertically inside. auto-fit wraps to fewer columns on narrow viewports. */
.sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.section { min-width: 0; }
/* Sections stack vertically; each section's panels fill a horizontal
auto-fill row (as many panels per row as the viewport allows). */
.section { margin-bottom: 20px; }
.section-title {
color: var(--head);
font-size: 1rem;
@@ -66,7 +65,7 @@ body::before {
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
}
+3 -2
View File
@@ -34,10 +34,11 @@ setup() {
grep -q "SECTION_ORDER" "$BASE/app.js"
}
@test "sections render horizontally (one column per section)" {
@test "sections render as horizontal rows of panels" {
grep -q 'class="sections"' "$BASE/index.html"
grep -q 'class="sections"' "$BASE/admin.html"
grep -q "repeat(auto-fit" "$BASE/style.css"
# Each section's panels fill an auto-fill row, not a single column.
grep -q "repeat(auto-fill" "$BASE/style.css"
}
@test "WIP badges distinguish open from closed work" {