feat(offer): sort and align the §4.4 price tables, style them for both themes
CI / changes (pull_request) Successful in 2s
CI / unit (pull_request) Successful in 12s
CI / integration (pull_request) Successful in 20s
CI / ui (pull_request) Successful in 1m10s
CI / conformance (pull_request) Successful in 9s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m47s

- packs sorted by ascending rouble price;
- values grouped hints-only -> no-ads-only -> no-ads+hints -> tournament
  (the tournament group is empty until such products become sellable),
  ascending chip price within each group;
- price columns right-aligned (GFM "---:" separators);
- tables span the full content width; the name column shrinks to its content
  and never wraps;
- muted-but-visible cell borders on the dark theme, where the section rule
  colour blends into the background.
This commit is contained in:
Ilia Denisov
2026-07-11 11:28:56 +02:00
parent b54371845f
commit 40acbcccdd
4 changed files with 171 additions and 25 deletions
+29
View File
@@ -31,6 +31,7 @@ export function renderOfferHtml(markdown: string): string {
--text: #1a1c20;
--accent: #2563eb;
--rule: #e5e7eb;
--cell-border: #d1d5db;
}
@media (prefers-color-scheme: dark) {
:root {
@@ -38,6 +39,9 @@ export function renderOfferHtml(markdown: string): string {
--text: #e7e9ee;
--accent: #6ea8fe;
--rule: #242832;
/* A muted grey — the section rules (--rule) vanish on the dark background, so table cells
get a slightly firmer border to stay legible without being loud. */
--cell-border: #3a4250;
}
}
* {
@@ -77,6 +81,31 @@ export function renderOfferHtml(markdown: string): string {
li {
margin: 0.25em 0;
}
/* The price tables (§4.4) span the full content width. */
table {
width: 100%;
border-collapse: collapse;
margin: 0.75em 0 1.25em;
font-size: 0.95rem;
}
th,
td {
border: 1px solid var(--cell-border);
padding: 6px 10px;
}
/* The product-name column shrinks to its content and never wraps; the price columns share the
rest of the width (width:1% is the shrink-to-fit idiom paired with the table's width:100%). */
th:first-child,
td:first-child {
width: 1%;
white-space: nowrap;
}
/* Right-aligned price columns. marked emits the alignment from the "---:" separator; this rule
keeps it applied whether that surfaces as an align attribute or an inline style. */
th[align='right'],
td[align='right'] {
text-align: right;
}
</style>
</head>
<body>