Tweak light theme readability

dam5s · Feb 15, 2024 · 72b6d28 · 72b6d28
1 parent 11ddaf8
commit 72b6d28
Showing 1 changed file with 10 additions and 13 deletions.
diff --git a/Damo.Io.Server/www/styles/app.css b/Damo.Io.Server/www/styles/app.css
@@ -21,24 +21,21 @@
     --sans-serif: -apple-system, 'Calibri', 'Helvetica Neue', sans-serif;
     --monospace: 'JetBrains Mono', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace;
 
-    --card-shadow: 2px 0 2px rgba(0, 0, 0, 0.3);
-    --emphasis-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
+    --card-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
+    --emphasis-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
 }
 
 @media (prefers-color-scheme: light) {
     :root {
-        --bg-color: #eee;
+        --bg-color: #ddd;
         --fg-color: #444;
-        --card-color: rgba(0, 0, 0, 0.05);
+        --card-color: rgba(255, 255, 255, 0.7);
 
-        --menu-item-bg-not-selected: color-mix(in srgb, var(--primary-color), transparent 90%);
-        --menu-item-bg-selected: color-mix(in srgb, var(--primary-color), transparent 80%);
-        --menu-item-bg-hover: color-mix(in srgb, var(--primary-color), transparent 70%);
+        --menu-item-bg-not-selected: color-mix(in srgb, var(--primary-color), transparent 80%);
+        --menu-item-bg-selected: color-mix(in srgb, var(--primary-color), transparent 70%);
+        --menu-item-bg-hover: color-mix(in srgb, var(--primary-color), transparent 60%);
 
         --article-date-text-color: rgba(0, 0, 0, 0.5);
-
-        --card-shadow: 1px 0 1px rgba(0, 0, 0, 0.15);
-        --emphasis-shadow: 1px 0 1px rgba(0, 0, 0, 0.3);
     }
 }
 
@@ -76,7 +73,7 @@ body {
     width: 40rem;
     padding: 2.4rem 4.8rem;
     text-align: center;
-    box-shadow: 2px 0 2px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--card-shadow);
 }
 
 #template > aside h1 {
@@ -197,7 +194,7 @@ article {
     padding: 2.4rem 4.8rem;
     margin: 0 0 2.4rem 0;
     border-radius: 3rem;
-    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+    box-shadow: var(--card-shadow);
 }
 
 article:last-child {
@@ -264,7 +261,7 @@ article nav {
     margin: 0 0 0.8rem;
     border-radius: 3rem;
     background-color: var(--menu-item-bg-not-selected);
-    filter: drop-shadow(var(--emphasis-shadow));
+    box-shadow: var(--card-shadow);
 }
 
 .main-menu a:active {