From fab9bac4a5fa1e6edeed251f6b173383f4d1b9ec Mon Sep 17 00:00:00 2001
From: Max Richter <jim-x@web.de>
Date: Wed, 23 Aug 2023 14:06:28 +0200
Subject: [PATCH] feat: some small improvments

---
 components/Card.tsx | 12 +++++++++---
 static/global.css   | 19 +++++++++++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/components/Card.tsx b/components/Card.tsx
index 14f22b7..3d54f02 100644
--- a/components/Card.tsx
+++ b/components/Card.tsx
@@ -54,7 +54,7 @@ export function Card(
         </span>
       )}
       <div
-        class="p-4 flex flex-col justify-between relative z-10"
+        class="p-4 flex flex-col justify-between relative z-10 desaturated"
         style={{
           outline: "solid 2px #141218",
           borderRadius: "1.4rem",
@@ -69,8 +69,14 @@ export function Card(
           {/* Recipe Card content */}
         </div>
         <div
-          class="truncate mt-2 flex gap-2"
-          style={{ maxHeight: "50%",textShadow: "0px 0px 10px black"  }}
+          class="mt-2 flex gap-2"
+          style={{
+            maxHeight: "50%",
+            textShadow:
+              "0px 0px 2px black, 0px 2px 8px black, 2px 3px 12px black",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }}
         >
           {isYoutubeLink(link || "") && <IconBrandYoutube />}
           {title}
diff --git a/static/global.css b/static/global.css
index 2f5a296..8cc5e71 100644
--- a/static/global.css
+++ b/static/global.css
@@ -49,3 +49,22 @@ input[type=number] {
   background-size: contain;
   background-position: 0px 0px;
 }
+
+.desaturated {
+  transition: backdrop-filter 0.3s ease;
+  backdrop-filter: contrast(0.8) saturate(0.8);
+}
+
+.desaturated:hover{
+  backdrop-filter: contrast(1) saturate(1);
+}
+
+.octicon-link {
+  width: 14px;
+  height: 14px;
+  margin-top: 2px;
+}
+
+.octicon-link path {
+  fill: #dcdbdc;
+}