feat: enhance card component styling with dynamic decoration size and padding adjustments

Signed-off-by: walnuts1018 <r.juglans.1018@gmail.com>

Author: walnuts1018

src/components/Cards/Card.css

@@ -32,7 +32,14 @@
 }
 
 .content-card-title-row {
+  --content-card-decoration-safe-inline: clamp(1.25rem, 7cqi, 2rem);
+
   min-inline-size: 0;
+  padding-inline-start: var(--content-card-decoration-safe-inline);
+}
+
+.content-card[data-decoration-size="small"] .content-card-title-row {
+  --content-card-decoration-safe-inline: clamp(0.5rem, 4cqi, 1rem);
 }
 
 .content-card-title {
@@ -61,6 +68,14 @@
 }
 
 @container content-card (width < 20rem) {
+  .content-card-title-row {
+    --content-card-decoration-safe-inline: 1.25rem;
+  }
+
+  .content-card[data-decoration-size="small"] .content-card-title-row {
+    --content-card-decoration-safe-inline: 0.5rem;
+  }
+
   .content-card-body {
     min-block-size: 11rem;
   }

src/components/Cards/Card.tsx

@@ -86,7 +86,10 @@ export function Card({
   const parsedDate = date ? format(date, "yyyy年MM月dd日") : "";
 
   return (
-    <div className="content-card card-grid-item font-Noto transition-all duration-200 hover:scale-105 active:scale-100">
+    <div
+      className="content-card card-grid-item font-Noto transition-all duration-200 hover:scale-105 active:scale-100"
+      data-decoration-size={decorationSize}
+    >
       <Link
         href={href}
         className="content-card-link card-shadow relative flex h-full cursor-pointer overflow-hidden rounded-2xl bg-[#f6f7fa] outline-hidden transition-all duration-200 focus:scale-105 active:bg-[#e2e2e2]"