PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-05-06 11:09:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

repertoire: align all column headings to shared baseline row

Browse Source
This commit is contained in:
Pontoporeia
2026-04-30 11:42:44 +02:00
parent a9e03c4b1c
commit 56c8d54435
2 changed files with 24 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
TODO.md
View File

@@ -68,6 +68,7 @@
- [x] Make column headings sticky/non-scrollable; only `ul` scrolls per column - [x] Make column headings sticky/non-scrollable; only `ul` scrolls per column
- [x] Remove padding from `.search-main` and `.repertoire-index` - [x] Remove padding from `.search-main` and `.repertoire-index`
- [x] Minimal horizontal padding inside columns (`var(--space-2xs)`) - [x] Minimal horizontal padding inside columns (`var(--space-2xs)`)
- [x] Align all column headings to the same baseline row (2-row grid via `display: contents`)
## CSS refactor ## CSS refactor

42
app/public/assets/css/repertoire.css
View File

@@ -15,6 +15,7 @@
.repertoire-index { .repertoire-index {
display: grid; display: grid;
grid-template-columns: 0.7fr 1.2fr 1.4fr 0.9fr 1.4fr 1fr; grid-template-columns: 0.7fr 1.2fr 1.4fr 0.9fr 1.4fr 1fr;
grid-template-rows: auto 1fr;
gap: 0; gap: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
@@ -24,44 +25,50 @@
.repertoire-index { .repertoire-index {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
padding: 0; padding: 0;
grid-template-rows: auto auto 1fr;
min-height: auto; min-height: auto;
} }
.repertoire-col {
border-bottom: 1px solid var(--border-primary);
}
.repertoire-col:nth-child(3n) {
border-right: none;
}
} }
@media (max-width: 600px) { @media (max-width: 600px) {
.repertoire-index { .repertoire-index {
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 0; padding: 0;
grid-template-rows: none;
min-height: auto; min-height: auto;
} }
/* On single column, each section is a self-contained block again */
.repertoire-col { .repertoire-col {
border-right: none; display: flex;
flex-direction: column;
overflow: hidden;
min-height: 12rem;
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
} }
.repertoire-col:last-child { .repertoire-col:last-child {
border-bottom: none; border-bottom: none;
} }
.repertoire-col > h2 {
grid-row: unset;
align-self: unset;
} }
.repertoire-col > ul {
grid-row: unset;
flex: 1;
}
}
/* Each section becomes transparent to the grid so h2+ul sit in the 2-row layout */
.repertoire-col { .repertoire-col {
display: flex; display: contents;
flex-direction: column;
padding: 0;
overflow: hidden;
} }
.repertoire-col > h2 { .repertoire-col > h2 {
flex-shrink: 0; grid-row: 1;
font-family: var(--font-display); font-family: var(--font-display);
font-size: var(--step--2); font-size: var(--step--2);
letter-spacing: 0.1em; letter-spacing: 0.1em;
@@ -71,19 +78,16 @@
margin: 0; margin: 0;
padding: var(--space-xs) var(--space-2xs) var(--space-3xs); padding: var(--space-xs) var(--space-2xs) var(--space-3xs);
border-bottom: 1px solid var(--border-secondary); border-bottom: 1px solid var(--border-secondary);
align-self: end;
} }
.repertoire-col > ul { .repertoire-col > ul {
flex: 1; grid-row: 2;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
padding: var(--space-2xs) var(--space-2xs) var(--space-l); padding: var(--space-2xs) var(--space-2xs) var(--space-l);
} }
.repertoire-col:last-child {
border-right: none;
}
/* Strip list chrome inside repertoire columns */ /* Strip list chrome inside repertoire columns */
.repertoire-col ul { .repertoire-col ul {
list-style: none; list-style: none;