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:
+83
-23
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user