mix/selfpost
1
0
Fork 0
Code Issues Pull Requests Actions 21 Packages Projects Releases Wiki Activity

design: the cards layout orders its boxes by their numbers, not their places

Browse Source 
On a phone the stylesheet ordered a cards box by its place in its stack,
four to a stack; a fifth box got no rule and landed out of place with
nothing failing (owner, 2026-10-13). Each box of the layout carries its
number as data-order, and theme.css orders by it, up to twelve: an
attribute, since check.py refuses classes the pages do not use, and not a
style, which the CSP forbids. Health and the kit's cards carry it; the look
is the same.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
mix
2026-10-15 11:35:13 +03:00
co-authored by Claude Opus 5.5
parent 2b8e0c086d
commit b90a2f0321
5 changed files with 38 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/assets/panel-redesign/panel/theme.css
+14 -9
View File
@@ -272,20 +272,25 @@ code { background: var(--sp-well); color: var(--sp-ink); border-radius: 3px; pad
.sp-cards { display: flex; flex-direction: column; padding-inline: .75rem; }
.sp-cards > .column { display: contents; }
.sp-cards .box { margin-bottom: 1.5rem; }
.sp-cards > .column:first-child > .box:nth-child(1) { order: 1; }
.sp-cards > .column:first-child > .box:nth-child(2) { order: 3; }
.sp-cards > .column:first-child > .box:nth-child(3) { order: 5; }
.sp-cards > .column:first-child > .box:nth-child(4) { order: 7; }
.sp-cards > .column:last-child > .box:nth-child(1) { order: 2; }
.sp-cards > .column:last-child > .box:nth-child(2) { order: 4; }
.sp-cards > .column:last-child > .box:nth-child(3) { order: 6; }
.sp-cards > .column:last-child > .box:nth-child(4) { order: 8; }
.sp-cards [data-order="1"] { order: 1; }
.sp-cards [data-order="2"] { order: 2; }
.sp-cards [data-order="3"] { order: 3; }
.sp-cards [data-order="4"] { order: 4; }
.sp-cards [data-order="5"] { order: 5; }
.sp-cards [data-order="6"] { order: 6; }
.sp-cards [data-order="7"] { order: 7; }
.sp-cards [data-order="8"] { order: 8; }
.sp-cards [data-order="9"] { order: 9; }
.sp-cards [data-order="10"] { order: 10; }
.sp-cards [data-order="11"] { order: 11; }
.sp-cards [data-order="12"] { order: 12; }
}
/* cards: two stacks of boxes that are read in rows - the odd ones on the left,
the even ones on the right, each stack closed up so a short box leaves no
gap beside a tall one. On a phone the stacks dissolve and the boxes come in
the order of their numbers (the rules above). */
the order of their numbers: each box carries data-order, its own number (the
rules above, up to twelve), wherever it stands in its stack. */
/* sheet: what does not fit a table row, opened over the page from the row's
tag. It is the browser's own popover (the tag is a button with