fix(0.6.1): About page restructure — balance the layout

By v0.6.0 the About page had eight version-history entries, each a
full paragraph, dwarfing the other cards and pushing Credits + thanks
off the visible area.

- Three short cards on top (What / Who / Credits) — equal-height,
  balanced row. Credits gets equal billing instead of being a fourth
  card buried under a wall of version notes.
- Version history is its own full-width card below. Only the latest
  release is shown in full; earlier releases collapse to one line
  each. The card now stays compact however many versions ship —
  adding a future release adds one line, not a paragraph.
- Full prose for older versions lives in CHANGELOG.md on Gitea via
  the existing "View the full CHANGELOG.md →" link. Single source of
  truth.

Files: radio.php (version), inc/about.php (3-card top + new
.radio-about-versions block with __latest / __earlier sub-elements;
9 versions in the earlier-releases list incl. v0.1.0),
assets/css/radio.css (drop dead .radio-about-card--versions rules;
add .radio-about-versions + __latest + __earlier; dark-theme overrides).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-30 00:25:12 +01:00
parent 0dc3a220d9
commit 7a747b829b
4 changed files with 136 additions and 71 deletions
+83 -23
View File
@@ -359,27 +359,50 @@
padding-top: 0;
}
.radio-about-card--versions ul {
list-style: none;
padding: 12px;
margin: 0;
.radio-about-changelog-link {
display: inline-block;
margin: 0 12px 12px;
font-size: 13px;
color: var(--wp-admin-theme-color, #2271b1);
text-decoration: none;
}
.radio-about-changelog-link:hover { text-decoration: underline; }
/* ──────────────────────────────────────────────────────────────────
* Version history — full-width card BELOW the top row of cards
* (v0.6.1). Latest release shown in full; earlier releases collapse
* to one line each so the card stays compact however many versions
* ship. Full prose for older versions lives in the CHANGELOG on Gitea.
* ─────────────────────────────────────────────────────────────── */
.radio-about-versions {
max-width: 1100px;
margin-top: 16px;
background: #fff;
border: 1px solid #c3c4c7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.radio-about-card--versions li {
margin-bottom: 10px;
.radio-about-versions h2 {
margin: 0;
padding: 8px 12px;
font-size: 14px;
font-weight: 600;
background: #f6f7f7;
border-bottom: 1px solid #c3c4c7;
}
.radio-about-versions__latest {
padding: 12px 12px 8px;
}
.radio-about-versions__latest .ver {
font-weight: 600;
color: var(--wp-admin-theme-color, #2271b1);
font-size: 13px;
}
.radio-about-card--versions li:last-child {
margin-bottom: 0;
}
.radio-about-card--versions .ver {
font-weight: 600;
color: var(--wp-admin-theme-color, #2271b1);
}
.radio-about-card--versions .latest {
.radio-about-versions__latest .latest {
display: inline-block;
margin-left: 6px;
padding: 1px 7px;
@@ -391,16 +414,47 @@
vertical-align: middle;
}
.radio-about-changelog-link {
display: inline-block;
margin: 0 12px 12px;
.radio-about-versions__latest p {
margin: 6px 0 0;
font-size: 13px;
color: var(--wp-admin-theme-color, #2271b1);
text-decoration: none;
color: #1d2327;
}
.radio-about-changelog-link:hover {
text-decoration: underline;
.radio-about-versions h3 {
margin: 4px 0 0;
padding: 8px 12px 4px;
font-size: 11px;
font-weight: 600;
color: #646970;
text-transform: uppercase;
letter-spacing: 0.06em;
border-top: 1px solid #f0f0f1;
}
.radio-about-versions__earlier {
list-style: none;
margin: 0;
padding: 4px 12px 8px;
}
.radio-about-versions__earlier li {
padding: 4px 0;
font-size: 13px;
color: #50575e;
}
.radio-about-versions__earlier .ver {
display: inline-block;
min-width: 48px;
font-weight: 600;
color: var(--wp-admin-theme-color, #2271b1);
}
.radio-about-versions__earlier .ver-date {
display: inline-block;
min-width: 110px;
font-size: 11px;
color: #646970;
}
/* ──────────────────────────────────────────────────────────────────
@@ -450,6 +504,12 @@
color: #f0f0f1;
border-bottom-color: #3c434a;
}
.radio-theme-dark .radio-about-versions { background: #1d2327; border-color: #3c434a; color: #c3c4c7; }
.radio-theme-dark .radio-about-versions h2 { background: #2c3338; color: #f0f0f1; border-bottom-color: #3c434a; }
.radio-theme-dark .radio-about-versions h3 { color: #a7aaad; border-top-color: #3c434a; }
.radio-theme-dark .radio-about-versions__latest p { color: #c3c4c7; }
.radio-theme-dark .radio-about-versions__earlier li { color: #c3c4c7; }
.radio-theme-dark .radio-about-versions__earlier .ver-date { color: #a7aaad; }
.radio-theme-dark #radio_dashboard_widget .radio-player__credit {
border-top-color: #3c434a;
}