feat(css): blurred shadows

1 files changed, 14 insertions, 4 deletions

diff --git a/src/app.css b/src/app.css
index 13972546..e4add81c 100644
--- a/src/app.css
+++ b/src/app.css
@@ -5,12 +5,13 @@ body {
 	font-family: 'Ubuntu', sans-serif;
 	font-size: 1rem;
 	line-height: 1.5;
+	text-shadow: 0 0 0.25em var(--base01);
 }
 
 details {
-	background-color: var(--base001);
+	background-color: var(--base0011);
 	padding: 1rem;
-	border-radius: 4px;
+	border-radius: 8px;
 	box-shadow: 0 0 0 1px var(--base01), 0 2px 4px var(--base01);
 }
 
@@ -166,10 +167,17 @@ button:disabled:active {
 }
 
 .card {
-	background-color: var(--base001);
+	background-color: var(--base0011);
 	padding: 1rem;
-	border-radius: 4px;
+	border-radius: 8px;
 	box-shadow: 0 0 0 1px var(--base01), 0 2px 4px var(--base01);
+	backdrop-filter: blur(4px);
+	-webkit-backdrop-filter: blur(4px);
+}
+
+.card details,
+.no-shadow {
+	box-shadow: none;
 }
 
 code {
@@ -223,6 +231,7 @@ html {
 :root {
 	--base00: #f8f8f8;
 	--base001: #ffffff;
+	--base0011: #ffffff80;
 	--base01: #e8e8e8;
 	--base02: #d8d8d8;
 	--base03: #b8b8b8;
@@ -244,6 +253,7 @@ html {
 	:root {
 		--base00: #080808;
 		--base001: #0c0c0c;
+		--base0011: #0c0c0c80;
 		--base01: #181818;
 		--base02: #282828;
 		--base03: #484848;