From 8b2ee4baba27b0ff7ffae5d1d3b0edd76af22400 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stig-=C3=98rjan=20Smelror?= <smelror@gmail.com>
Date: Wed, 20 May 2026 20:28:34 +0200
Subject: [PATCH] style(ui): simplify changelog section styling and toggle
 design

---
 src/pages/changelog.astro | 77 ++++++++++++++++++---------------------
 1 file changed, 36 insertions(+), 41 deletions(-)

diff --git a/src/pages/changelog.astro b/src/pages/changelog.astro
index b2d50cc..4626a7b 100644
--- a/src/pages/changelog.astro
+++ b/src/pages/changelog.astro
@@ -1157,7 +1157,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
       toggle.setAttribute('aria-expanded', String(nextExpanded));
       list.hidden = !nextExpanded;
       section.classList.toggle('changes-section-open', nextExpanded);
-      chevron.textContent = nextExpanded ? '▾' : '▸';
+      chevron.style.transform = nextExpanded ? 'rotate(90deg)' : 'rotate(0deg)';
     });
 
     title.replaceWith(toggle);
@@ -1358,26 +1358,26 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   .changes-section {
     position: relative;
     overflow: hidden;
-    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-elevated) 100%);
-    border: 1px solid var(--color-border);
-    border-left: 2px solid transparent;
+    background: transparent;
+    border: none;
+    border-left: none;
     padding: var(--space-md);
-    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
+    transition: background-color 0.2s ease;
   }
 
   .changes-section:hover {
-    border-color: var(--color-accent);
-    transform: translateY(-1px);
+    background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg) 100%);
+    transform: none;
   }
 
   .changes-section-open {
-    border-color: var(--color-accent);
-    border-left-color: var(--color-accent);
+    border: none;
+    border-left: none;
     background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg) 100%);
   }
   
   .version-latest .changes-section {
-    background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-elevated) 100%);
+    background: transparent;
   }
 
   .version-latest .changes-section-open {
@@ -1475,24 +1475,19 @@ import BaseLayout from '../layouts/BaseLayout.astro';
   }
   
   .changes-title {
-    display: flex;
-    align-items: center;
-    gap: var(--space-xs);
-    font-size: 0.92rem;
-    font-weight: 700;
+    font-size: 0.82rem;
+    font-weight: 500;
     text-transform: uppercase;
     margin-bottom: var(--space-sm);
-    color: var(--color-accent);
+    color: var(--color-text-tertiary);
     font-family: var(--font-mono);
-    letter-spacing: 0.08em;
+    letter-spacing: 0.12em;
   }
 
   .changes-toggle {
-    display: inline-flex;
+    display: flex;
     align-items: center;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    width: auto;
+    width: 100%;
     max-width: 100%;
     margin-bottom: 0;
     padding: 0;
@@ -1500,57 +1495,57 @@ import BaseLayout from '../layouts/BaseLayout.astro';
     background: none;
     cursor: pointer;
     text-align: left;
-    color: var(--color-accent);
-    font: inherit;
-    text-shadow: 0 0 14px rgba(34, 197, 94, 0.1);
-    transition: color 0.2s ease, opacity 0.2s ease;
+    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;
   }
 
   .changes-toggle:hover {
-    color: var(--color-accent);
-    opacity: 0.92;
+    color: var(--color-text-secondary);
   }
 
   .changes-toggle:focus-visible {
     outline: 1px solid var(--color-accent);
-    outline-offset: 5px;
+    outline-offset: 4px;
   }
 
   .changes-toggle-main {
     display: inline-flex;
     align-items: center;
-    gap: 0.45rem;
+    gap: 0.4rem;
     min-width: 0;
   }
 
   .changes-toggle-meta {
     display: inline-flex;
     align-items: center;
-    gap: 0.45rem;
-    margin-left: 0.55rem;
+    gap: 0.4rem;
+    margin-left: 0.5rem;
     flex-shrink: 0;
-    color: color-mix(in srgb, var(--color-accent) 78%, var(--color-text-secondary) 22%);
+    color: inherit;
+    opacity: 0.5;
   }
 
   .changes-count {
-    color: currentColor;
-    font-size: 0.8rem;
+    color: inherit;
+    font-size: 0.78rem;
     letter-spacing: 0.04em;
-    opacity: 0.9;
   }
 
   .changes-chevron {
     display: inline-block;
-    width: auto;
-    height: auto;
-    font-size: 0.85rem;
+    font-size: 0.75rem;
     line-height: 1;
-    border: none;
-    border-radius: 0;
+    transition: transform 0.15s ease;
   }
   
   .changes-icon {
-    font-size: 1rem;
+    font-size: 0.9rem;
+    opacity: 0.7;
   }
   
   .changes-list {