Use color-mix for clearly distinct background tones

- Body: var(--b1) (baseline) - Cards: color-mix(var(--b1) + 8% white) = lighter surface - Navbar: color-mix(var(--b1) + 20% black) = darker header - Cards hover: same as navbar - Search dropdown: matches navbar darkness
2026-07-03 12:47:30 +02:00
parent df5f616bc3
commit 41f42acd91
4 changed files with 7 additions and 7 deletions
@@ -27,7 +27,7 @@
  </script>
 </head>
 <body style="min-height:100vh;background:var(--b1)">
-  <div style="display:flex;align-items:center;gap:1rem;padding:0.5rem 1rem;background:var(--b3);box-shadow:0 1px 3px rgba(0,0,0,0.2)">
+  <div style="display:flex;align-items:center;gap:1rem;padding:0.5rem 1rem;background:color-mix(in srgb,var(--b1),black 20%);box-shadow:0 1px 3px rgba(0,0,0,0.3)">
    <div style="display:flex;align-items:center;gap:0.25rem;flex-shrink:0">
      <div class="tabs tabs-box">
        <a href="/" class="tab tab-sm {#if activeTab == 'releases'}tab-active{/if}">Releases</a>