larvit/plainpages
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make markup semantic + add semantic DOM principle (todo §1); page <h1>, skip link, row-header <th scope=row>, descriptive error pages

Browse Source
This commit is contained in:
Lilleman auf Larv
2026-06-15 16:53:07 +02:00
parent 6f590148af
commit 645a316419
12 changed files with 44 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
public/css/styles.css
View File

@@ -134,6 +134,14 @@ summary { list-style: none; cursor: pointer; }
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* skip link: hidden until focused, then first thing a keyboard user lands on */
.skip-link {
position: fixed; left: 8px; top: -48px; z-index: 100;
padding: 7px 12px; background: var(--surface); color: var(--text);
border: 1px solid var(--border-2); border-radius: var(--radius);
}
.skip-link:focus { top: 8px; }
/* tiny icon helper */
.ico { width: 16px; height: 16px; flex: 0 0 auto; stroke: currentColor;
stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@@ -330,7 +338,7 @@ span.nav-self { cursor: default; } /* static / non-clickable */
background: var(--surface);
}
.hamburger { display: none; } /* shown only on narrow */
.page-title { font-weight: 600; letter-spacing: -.01em; font-size: 14px; }
.page-title { margin: 0; font-weight: 600; letter-spacing: -.01em; font-size: 14px; }
.page-sub { color: var(--text-faint); font-size: var(--fz-sm); }
.topbar-spacer { flex: 1 1 auto; }
.crumbs { display: flex; align-items: center; gap: 6px;
@@ -533,13 +541,15 @@ table.table {
text-align: left; padding: 0 var(--pad-x); height: var(--row-h);
white-space: nowrap;
}
.table tbody td {
.table tbody td, .table tbody th {
padding: 0 var(--pad-x); height: var(--row-h);
border-bottom: 1px solid var(--border);
white-space: nowrap; color: var(--text);
}
.table tbody tr:hover td { background: var(--surface-2); }
.table tbody tr:has(.row-select:checked) td { background: var(--accent-bg); }
.table tbody th { font-weight: inherit; text-align: left; } /* row-header cell, not bold/centered */
.table tbody tr:hover td, .table tbody tr:hover th { background: var(--surface-2); }
.table tbody tr:has(.row-select:checked) td,
.table tbody tr:has(.row-select:checked) th { background: var(--accent-bg); }
.col-check { width: 36px; text-align: center; padding: 0; }
.col-check input { accent-color: var(--accent); width: 15px; height: 15px;
margin: 0; vertical-align: middle; }