feat: some small improvments

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}

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;
+}