ZaguanAI/zblade.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(changelog): refine collapsible toggle styling

Browse Source 
Use disclosure chevrons for expanded state changes
Align toggle metadata and adjust focus treatment
This commit is contained in:
Stig-Ørjan Smelror
2026-03-23 14:54:55 +01:00
parent eed12be06d
commit 8d2b0c02b6
1 changed files with 16 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/changelog.astro
+16 -21
View File
@@ -872,7 +872,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
chevron.className = 'changes-chevron'; chevron.className = 'changes-chevron';
chevron.setAttribute('aria-hidden', 'true'); chevron.setAttribute('aria-hidden', 'true');
chevron.textContent = '+'; chevron.textContent = '▸';
meta.append(count, chevron); meta.append(count, chevron);
toggle.append(titleContent, meta); toggle.append(titleContent, meta);
@@ -887,7 +887,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
toggle.setAttribute('aria-expanded', String(nextExpanded)); toggle.setAttribute('aria-expanded', String(nextExpanded));
list.hidden = !nextExpanded; list.hidden = !nextExpanded;
section.classList.toggle('changes-section-open', nextExpanded); section.classList.toggle('changes-section-open', nextExpanded);
chevron.textContent = nextExpanded ? '−' : '+'; chevron.textContent = nextExpanded ? '▾' : '▸';
}); });
title.replaceWith(toggle); title.replaceWith(toggle);
@@ -1193,7 +1193,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
.changes-toggle { .changes-toggle {
width: 100%; width: 100%;
justify-content: space-between; justify-content: flex-start;
margin-bottom: 0; margin-bottom: 0;
padding: 0; padding: 0;
border: none; border: none;
@@ -1201,15 +1201,16 @@ import BaseLayout from '../layouts/BaseLayout.astro';
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
color: var(--color-accent); color: var(--color-accent);
font: inherit;
} }
.changes-toggle:hover { .changes-toggle:hover {
color: var(--color-text); color: var(--color-accent);
} }
.changes-toggle:focus-visible { .changes-toggle:focus-visible {
outline: 2px solid var(--color-accent); outline: 1px solid var(--color-accent);
outline-offset: 4px; outline-offset: 3px;
} }
.changes-toggle-main { .changes-toggle-main {
@@ -1222,25 +1223,19 @@ import BaseLayout from '../layouts/BaseLayout.astro';
.changes-toggle-meta { .changes-toggle-meta {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: var(--space-sm); gap: 0.35rem;
margin-left: var(--space-md); margin-left: 0.35rem;
flex-shrink: 0; flex-shrink: 0;
} }
.changes-count { .changes-count {
color: var(--color-text-secondary); color: var(--color-accent);
font-size: 0.85rem; font-size: inherit;
} }
.changes-chevron { .changes-chevron {
display: inline-flex; display: inline-block;
align-items: center; font-size: 0.9em;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
border: 1px solid currentColor;
border-radius: 999px;
font-size: 0.85rem;
line-height: 1; line-height: 1;
} }
@@ -1331,15 +1326,15 @@ import BaseLayout from '../layouts/BaseLayout.astro';
.changes-toggle { .changes-toggle {
align-items: flex-start; align-items: flex-start;
gap: var(--space-sm); gap: 0;
} }
.changes-toggle-main { .changes-toggle-main {
flex: 1; flex: initial;
} }
.changes-toggle-meta { .changes-toggle-meta {
margin-left: 0; margin-left: 0.35rem;
} }
} }