diff --git a/uv.lock b/uv.lock index a097aafb..635a3db0 100644 --- a/uv.lock +++ b/uv.lock @@ -3,7 +3,7 @@ revision = 3 requires-python = ">=3.13" [options] -exclude-newer = "2026-04-30T04:22:17.540198Z" +exclude-newer = "2026-04-30T04:38:39.45925Z" exclude-newer-span = "P3D" [[package]] diff --git a/website/static/main.js b/website/static/main.js index 5da89699..c922964e 100644 --- a/website/static/main.js +++ b/website/static/main.js @@ -113,7 +113,12 @@ document rows.forEach(function (row, i) { row._origIndex = i; - row._expandRow = row.nextElementSibling; + let next = row.nextElementSibling; + if (next && next.classList.contains("desc-row")) { + row._descRow = next; + next = next.nextElementSibling; + } + row._expandRow = next; }); function collapseAll() { @@ -142,9 +147,11 @@ function applyFilters() { if (show && query) { if (!row._searchText) { let text = row.textContent.toLowerCase(); - const next = row.nextElementSibling; - if (next && next.classList.contains("expand-row")) { - text += " " + next.textContent.toLowerCase(); + if (row._descRow) { + text += " " + row._descRow.textContent.toLowerCase(); + } + if (row._expandRow) { + text += " " + row._expandRow.textContent.toLowerCase(); } row._searchText = text; } @@ -152,6 +159,9 @@ function applyFilters() { } if (row.hidden !== !show) row.hidden = !show; + if (row._descRow && row._descRow.hidden !== !show) { + row._descRow.hidden = !show; + } if (show) { visibleCount++; @@ -262,7 +272,8 @@ function sortRows() { const frag = document.createDocumentFragment(); arr.forEach(function (row) { frag.appendChild(row); - frag.appendChild(row._expandRow); + if (row._descRow) frag.appendChild(row._descRow); + if (row._expandRow) frag.appendChild(row._expandRow); }); tbody.appendChild(frag); applyFilters(); @@ -291,7 +302,11 @@ if (tbody) { // Don't toggle if clicking a link or tag button if (e.target.closest("a") || e.target.closest(".tag")) return; - const row = e.target.closest("tr.row"); + let row = e.target.closest("tr.row"); + if (!row) { + const descRow = e.target.closest("tr.desc-row"); + if (descRow) row = descRow.previousElementSibling; + } if (!row) return; const isOpen = row.classList.contains("open"); diff --git a/website/static/style.css b/website/static/style.css index 53604de1..7a8c5fa7 100644 --- a/website/static/style.css +++ b/website/static/style.css @@ -788,6 +788,11 @@ kbd { box-shadow: inset 3px 0 0 var(--accent); } +.row:has(+ .desc-row) td { + border-bottom-color: transparent; + padding-bottom: 0.35rem; +} + .row.open td { background: linear-gradient(180deg, var(--row-open-start), var(--row-open-end)); border-bottom-color: transparent; @@ -919,10 +924,58 @@ th[data-sort].sort-asc::after { transform: rotate(90deg); } +.desc-row td { + padding-top: 0; + padding-bottom: 1rem; + border-bottom: 1px solid var(--line); + color: var(--ink-soft); + font-size: var(--text-sm); + line-height: 1.6; + text-wrap: pretty; + overflow-wrap: break-word; + transition: + background-color 180ms ease, + border-color 180ms ease; +} + +.row:not(.open) + .desc-row td { + border-bottom: 1px solid var(--line); +} + +.row + .desc-row { + cursor: pointer; +} + +.row:not(.open):hover td, +.row:not(.open):hover + .desc-row td { + background: var(--row-hover); +} + +.row.open + .desc-row td { + background: linear-gradient(180deg, var(--row-open-start), var(--row-open-end)); + border-bottom-color: transparent; +} + +.desc-text { + max-width: none; +} + +.desc-text a { + color: var(--accent-deep); +} + +.desc-text a:hover { + color: var(--accent); + text-decoration: underline; + text-decoration-color: var(--accent-underline); + text-underline-offset: 0.2em; +} + .expand-row { display: none; } +.row.open + .desc-row + .expand-row, .row.open + .expand-row { display: table-row; } diff --git a/website/templates/category.html b/website/templates/category.html index 799604d8..19d98175 100644 --- a/website/templates/category.html +++ b/website/templates/category.html @@ -204,13 +204,19 @@ + {% if entry.description %} + + + +
{{ entry.description | safe }}
+ + + {% endif %}
- {% if entry.description %} -
{{ entry.description | safe }}
- {% endif %} {% if entry.also_see %} + {% if entry.also_see %}
Also see: {% for see in entry.also_see %}