jonny/jonnybarnes.uk
Watch
1
0
Fork
You've already forked jonnybarnes.uk
 0
Code Issues 7 Pull requests Projects Releases 33 Packages Wiki Activity Actions

Restyle the Micropub tokens admin table

Browse source 
Breaks the table out of the centred content column to full page
width via a subgrid on <main> (adds a reusable .full-bleed utility),
and reworks the table itself to match a Claude Design mockup: a
rounded card wrapper, scope values as pill chips, a dotted status
pill, and proportional column widths. Colours use the site's
existing --primary-hue/light-dark() tokens so it stays correct in
both themes. The card scrolls horizontally on narrow viewports
instead of clipping content.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LHN7V9kyZxrsxaspMSqoGJ
This commit is contained in:
Jonny Barnes 2026-08-21 16:05:48 +01:00
commit 6a0bb623fc
Signed by: jonny
SSH key fingerprint: SHA256:CTuSlns5U7qlD9jqHvtnVmfYV3Zwl2Z7WnJ4/dqOaL8
7 changed files with 135 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

84
resources/css/admin-tokens.css
View file

@ -1,21 +1,34 @@
@layer components {
.token-list-wrapper {
margin-block-start: 1em;
border: 1px solid var(--clr-border);
border-radius: 16px;
overflow: auto hidden;
background: light-dark(
oklch(99% 0.02 var(--primary-hue)),
oklch(22% 0.05 var(--primary-hue))
);
}
.token-list {
width: 100%;
min-width: 640px;
table-layout: fixed;
border-collapse: collapse;
margin-block-start: 1em;
th,
td {
text-align: left;
padding: 0.6em 0.8em;
padding: 0.9em 1.2em;
border-bottom: 1px solid var(--clr-border);
vertical-align: middle;
}
th {
font-size: 0.85em;
font-size: 0.8em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
letter-spacing: 0.08em;
opacity: 0.7;
}
@ -26,14 +39,65 @@
a {
word-break: break-all;
}
th:nth-child(1),
td:nth-child(1) {
width: 31%;
}
th:nth-child(2),
td:nth-child(2) {
width: 24%;
}
th:nth-child(3),
td:nth-child(3) {
width: 15%;
}
th:nth-child(4),
td:nth-child(4) {
width: 16%;
}
th:nth-child(5),
td:nth-child(5) {
width: 14%;
text-align: right;
}
tr:last-child td {
border-bottom: none;
}
}
.scope-chips {
display: flex;
flex-wrap: wrap;
gap: 0.4em;
}
.scope-chip {
display: inline-block;
padding: 0.2em 0.7em;
border-radius: 999px;
background: light-dark(
oklch(92% 0.05 var(--primary-hue)),
oklch(35% 0.08 var(--primary-hue))
);
font-size: 0.85em;
white-space: nowrap;
}
.badge,
.token-list button.revoke {
display: inline-block;
padding: 0.2em 0.7em;
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.3em 0.8em;
border-radius: 999px;
font-size: 0.85em;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
}
@ -45,10 +109,18 @@
.badge-active {
color: light-dark(oklch(35% 0.16 145deg), oklch(75% 0.16 145deg));
.dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentcolor;
}
}
.badge-revoked {
color: var(--clr-text);
opacity: 0.7;
}
.token-list button.revoke {

12
resources/css/layout.css
View file

@ -18,7 +18,17 @@
}
> main {
grid-column: 2/3;
grid-column: 1/-1;
display: grid;
grid-template-columns: subgrid;
> * {
grid-column: 2/3;
}
> .full-bleed {
grid-column: 1/-1;
}
}
> footer {