fix bad contrast and improve fake glass material

LinuxJava7 · LinuxJava7 · commit 8232dee6bcc2 · 2026-01-10T13:12:13.000Z
diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -12,7 +12,7 @@ const { name, url, description, image, alt = "", background } = Astro.props;
     transition: all 300ms cubic-bezier(0.17, 0.89, 0.32, 1.28);
     margin: 0;
     padding: 0;
-    border-radius: 1.5rem;
+    border-radius: 1.1rem;
     background-color: oklab(0 0 0/5%);
     @media (prefers-color-scheme: dark) {
       background-color: oklab(1 0 0/5%);
diff --git a/src/components/Navigation/AccentButton.astro b/src/components/Navigation/AccentButton.astro
@@ -69,15 +69,15 @@
       border-radius: 1rem;
       margin: 0.5rem 0rem;
       padding: 1rem;
-      background-color: oklch(from var(--accent-color) 0.95 0.03 h / 75%);
+      background-color: oklch(from var(--accent-color) 0.95 0.03 h / 90%);
       box-shadow:
         0 0.3rem 0.3rem rgba(0, 0, 0, 0.1),
         0 0 1rem rgba(0, 0, 0, 0.05),
         inset 0 1px 1px rgba(255, 255, 255, 0.5),
         inset 0 0 0.27rem rgba(255, 255, 255, 0.5);
 
       @media (prefers-color-scheme: dark) {
-        background-color: oklch(from var(--accent-color) 0.24 0.017 h / 75%);
+        background-color: oklch(from var(--accent-color) 0.24 0.017 h / 90%);
         box-shadow:
           0 0.3rem 0.3rem rgba(0, 0, 0, 0.1),
           0 0 1rem rgba(0, 0, 0, 0.05),
@@ -87,7 +87,7 @@
       position: absolute;
       z-index: 2;
 
-      backdrop-filter: blur(25px);
+      backdrop-filter: blur(2px);
       font-size: 0.8rem;
 
       display: flex;
@@ -105,7 +105,7 @@
     }
 
     #accent-button {
-      backdrop-filter: blur(25px);
+      backdrop-filter: blur(2px);
       height: 44px;
       width: 44px;
       border-radius: 100px;
@@ -119,15 +119,15 @@
       color: oklch(from var(--accent-color) 0.7 0.15 h);
       font-weight: 600;
       font-size: inherit;
-      background-color: oklch(from var(--accent-color) 0.95 0.03 h / 75%);
+      background-color: oklch(from var(--accent-color) 0.98 0.03 h / 90%);
       box-shadow:
         0 0.3rem 0.3rem rgba(0, 0, 0, 0.1),
         0 0 1rem rgba(0, 0, 0, 0.05),
         inset 0 1px 1px rgba(255, 255, 255, 0.5),
         inset 0 0 0.27rem rgba(255, 255, 255, 0.5);
 
       @media (prefers-color-scheme: dark) {
-        background-color: oklch(from var(--accent-color) 0.24 0.017 h / 75%);
+        background-color: oklch(from var(--accent-color) 0.24 0.017 h / 90%);
         box-shadow:
           0 0.3rem 0.3rem rgba(0, 0, 0, 0.1),
           0 0 1rem rgba(0, 0, 0, 0.05),
diff --git a/src/components/Navigation/Headerbar.astro b/src/components/Navigation/Headerbar.astro
@@ -10,7 +10,7 @@ const { pageTitle } = Astro.props;
     display: flex;
     box-sizing: border-box;
     height: 80px;
-    padding: 18px;
+    padding: 1rem;
     position: sticky;
     top: 0;
     align-items: stretch;
@@ -40,7 +40,16 @@ const { pageTitle } = Astro.props;
       font-size: 16px;
       font-weight: 590;
       text-align: center;
-      qqqqqq
+      background-color: oklch(from var(--accent-color) 0.98 0.03 h / 90%);
+      padding: 4px 16px;
+      border-radius: 18px;
+      backdrop-filter: blur(2px);
+
+      box-shadow:
+        0 0.3rem 0.3rem rgba(0, 0, 0, 0.1),
+        0 0 1rem rgba(0, 0, 0, 0.05),
+        inset 0 1px 1px rgba(255, 255, 255, 0.5),
+        inset 0 0 0.27rem rgba(255, 255, 255, 0.5);
     }
   }
 </style>
diff --git a/src/components/Navigation/TabBarLarge.astro b/src/components/Navigation/TabBarLarge.astro
@@ -7,17 +7,17 @@
     padding: 0.25rem;
     width: fit-content;
     height: fit-content;
-    backdrop-filter: blur(25px);
+    backdrop-filter: blur(2px);
     border-radius: 999px;
-    background-color: oklch(from var(--accent-color) 0.95 0.03 h / 75%);
+    background-color: oklch(from var(--accent-color) 0.98 0.03 h / 90%);
     box-shadow:
       0 0.3rem 0.3rem rgba(0, 0, 0, 0.1),
       0 0 1rem rgba(0, 0, 0, 0.05),
       inset 0 1px 1px rgba(255, 255, 255, 0.5),
       inset 0 0 0.27rem rgba(255, 255, 255, 0.5);
 
     @media (prefers-color-scheme: dark) {
-      background-color: oklch(from var(--accent-color) 0.24 0.017 h / 75%);
+      background-color: oklch(from var(--accent-color) 0.24 0.017 h / 90%);
       box-shadow:
         0 0.3rem 0.3rem rgba(0, 0, 0, 0.1),
         0 0 1rem rgba(0, 0, 0, 0.05),
diff --git a/src/components/Navigation/TabBarSmall.astro b/src/components/Navigation/TabBarSmall.astro
@@ -10,17 +10,17 @@
     box-sizing: border-box;
     width: fit-content;
     height: 62px;
-    backdrop-filter: blur(25px);
+    backdrop-filter: blur(2px);
     border-radius: 999px;
-    background-color: oklch(from var(--accent-color) 0.95 0.03 h / 75%);
+    background-color: oklch(from var(--accent-color) 0.98 0.03 h / 90%);
     box-shadow:
       0 0.3rem 0.3rem rgba(0, 0, 0, 0.1),
       0 0 1rem rgba(0, 0, 0, 0.05),
       inset 0 1px 1px rgba(255, 255, 255, 0.5),
       inset 0 0 0.27rem rgba(255, 255, 255, 0.5);
 
     @media (prefers-color-scheme: dark) {
-      background-color: oklch(from var(--accent-color) 0.24 0.017 h / 75%);
+      background-color: oklch(from var(--accent-color) 0.24 0.017 h / 90%);
       box-shadow:
         0 0.3rem 0.3rem rgba(0, 0, 0, 0.1),
         0 0 1rem rgba(0, 0, 0, 0.05),
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -41,6 +41,7 @@ main {
 img {
   max-width: 100%;
   height: auto;
+  border-radius: 1.1rem;
 }
 
 /* Fonts */

Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,7 @@ main {`
`41`	`41`	`img {`
`42`	`42`	`max-width: 100%;`
`43`	`43`	`height: auto;`
	`44`	`+ border-radius: 1.1rem;`
`44`	`45`	`}`
`45`	`46`
`46`	`47`	`/* Fonts */`