diff --git a/src/pages/changelog.astro b/src/pages/changelog.astro index 4626a7b..79e3e0d 100644 --- a/src/pages/changelog.astro +++ b/src/pages/changelog.astro @@ -1475,77 +1475,81 @@ import BaseLayout from '../layouts/BaseLayout.astro'; } .changes-title { - font-size: 0.82rem; - font-weight: 500; + font-size: 0.95rem; + font-weight: 800; text-transform: uppercase; margin-bottom: var(--space-sm); - color: var(--color-text-tertiary); + color: var(--color-text); font-family: var(--font-mono); - letter-spacing: 0.12em; + letter-spacing: 0.06em; } .changes-toggle { - display: flex; + -webkit-appearance: none; + appearance: none; + display: inline-flex; align-items: center; - width: 100%; + justify-content: space-between; + gap: var(--space-md); + min-width: min(100%, 18rem); max-width: 100%; margin-bottom: 0; - padding: 0; - border: none; - background: none; + padding: 0.75rem 0.95rem; + border: 1px solid var(--color-border); + border-left: 3px solid var(--color-accent); + border-radius: 0; + background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg-secondary) 100%); + box-shadow: none; cursor: pointer; text-align: left; - color: var(--color-text-tertiary); - font-family: var(--font-mono); - font-size: 0.82rem; - font-weight: 500; - text-transform: uppercase; - letter-spacing: 0.12em; - transition: color 0.2s ease; + color: var(--color-text); + font: inherit; + transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease; } .changes-toggle:hover { - color: var(--color-text-secondary); + border-color: var(--color-accent); + background: var(--color-bg-elevated); + transform: translateX(3px); } .changes-toggle:focus-visible { - outline: 1px solid var(--color-accent); - outline-offset: 4px; + outline: 2px solid var(--color-accent); + outline-offset: 3px; } .changes-toggle-main { display: inline-flex; align-items: center; - gap: 0.4rem; + gap: 0.55rem; min-width: 0; } .changes-toggle-meta { display: inline-flex; align-items: center; - gap: 0.4rem; - margin-left: 0.5rem; + gap: 0.55rem; + margin-left: auto; flex-shrink: 0; - color: inherit; - opacity: 0.5; + color: var(--color-accent); } .changes-count { - color: inherit; - font-size: 0.78rem; + color: var(--color-text-secondary); + font-size: 0.8rem; letter-spacing: 0.04em; } .changes-chevron { display: inline-block; - font-size: 0.75rem; + color: var(--color-accent); + font-size: 0.85rem; line-height: 1; transition: transform 0.15s ease; } .changes-icon { - font-size: 0.9rem; - opacity: 0.7; + font-size: 1rem; } .changes-list {