From 9ad1145720f12d91a05f7a6d75c0bfa60b939369 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Sun, 5 Jun 2022 17:47:40 +0200
Subject: [PATCH] Improve shading on both themes

---
 styles/color-schemes.css   | 33 +++++++++++++++++----------------
 styles/components/icon.css |  2 +-
 styles/elements.css        |  4 ++--
 3 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/styles/color-schemes.css b/styles/color-schemes.css
index d9a81df..6c008f6 100644
--- a/styles/color-schemes.css
+++ b/styles/color-schemes.css
@@ -1,22 +1,23 @@
 /* Dark theme */
-:root, :host {
-    --background: #050505;
-    --foreground: white;
-    --border: gray;
-    --interactable: #050505b5;
-    --selection: #3333dd;
+    :root, :host {
+        --background: #050505;
+        --foreground: white;
+        --border: gray;
+        --interactable: #050505b5;
+        --selection: #3333dd;
 
-    --anchor: #8888ff;
-    --anchor-visited: #aa88ff;
-    --anchor-active: #ff8888;
-    
-    --positive: #88ff88;
-    --negative: #ff8888;
-}
+        --anchor: #8888ff;
+        --anchor-visited: #aa88ff;
+        --anchor-active: #ff8888;
+        
+        --positive: #88ff88;
+        --negative: #ff8888;
+    }
+
+    .postcard {
+        filter: blur(7px) contrast(50%) brightness(50%);
+    }
 
-.postcard {
-    filter: blur(7px) contrast(50%) brightness(50%);
-}
 
 @media (prefers-color-scheme: light) {
     :root, :host {
diff --git a/styles/components/icon.css b/styles/components/icon.css
index ee88b53..2d82074 100644
--- a/styles/components/icon.css
+++ b/styles/components/icon.css
@@ -1,3 +1,3 @@
 .icon {
-    filter: drop-shadow(1px 1px 1px var(--background));
+    filter: drop-shadow(1px 1px 0 var(--background));
 }
diff --git a/styles/elements.css b/styles/elements.css
index eb90186..a38550b 100644
--- a/styles/elements.css
+++ b/styles/elements.css
@@ -6,13 +6,13 @@ body {
 
     color: var(--foreground);
     font-family: sans-serif;
-    text-shadow: 1px 1px 1px var(--background);
+    text-shadow: 1px 1px 0 var(--background);
 
     min-height: 100vh;
 }
 
 h1, h2, h3, h4, h5, h6 {
-    text-shadow: 2px 2px 2px var(--background);
+    text-shadow: 2px 2px 0 var(--background);
     margin: 0;
 }