Update cards

Miocene · Oct 20, 2024 · 2ba1420 · 2ba1420
1 parent f6242e0
commit 2ba1420
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 10 deletions.
diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -23,27 +23,24 @@ const { title, url, description, lightImage, darkImage, tags } = Astro.props;
   .card {
     position: relative;
     min-height: 64px;
+    transition: translate 0.2s cubic-bezier(0.22, 0.61, 0.36, 1)
+  }
+
+  .card:not(.card_mini) {
     padding: 24px 24px 32px;
     text-align: center;
-    text-wrap: balance
+    text-wrap: balance;
     box-sizing: border-box;
     background: linear-gradient(0deg, transparent 0 32px, var(--color-bg-secondary) 32px calc(100% - 32px), transparent 0);
     border-image-source: var(--cquircle);
     border-image-slice: 32 32 32 32;
     border-image-width: 32px;
-    transition: translate 0.2s cubic-bezier(0.22, 0.61, 0.36, 1)
   }
 
   .card:has(a):hover, .card:focus-within {
     translate: 0 -4px;
   }
 
-  .card_mini {
-    max-width: 200px;
-    aspect-ratio: 1/1;
-    padding: 0;
-  }
-
   .card > * {
     position: relative;
     z-index: 1;
@@ -62,6 +59,8 @@ const { title, url, description, lightImage, darkImage, tags } = Astro.props;
   }
 
   .card_mini img {
+    height: 100%;
+    object-fit: contain;
     filter: grayscale(1);
   }
 

diff --git a/src/content/posts/3d-cube-with-css/3d-cube-with-css.md b/src/content/posts/3d-cube-with-css/3d-cube-with-css.md
@@ -1,7 +1,7 @@
 ---
 pubDate: 2024-10-13
 title: 3D Cube With CSS
-description: "This tutorial will take you step by step through crafting basic 3D objects — no special tools required. Get ready to create, experiment, and even design your own cubic characters!"
+description: "This tutorial will take you step by step through crafting basic 3D objects — no special tools required."
 lightImage: "./3d-cube-with-css-light.png"
 darkImage: "./3d-cube-with-css-dark.png"
 tags: ["3D", "CSS art"]

diff --git a/src/content/posts/shapes/shapes.md b/src/content/posts/shapes/shapes.md
@@ -1,7 +1,7 @@
 ---
 pubDate: 2023-07-02
 title: CSS Shapes
-description: "A growing collection of shape tricks, all crafted using pure CSS. Each shape comes with code snippets, so you can easily integrate them and experiment with different approaches."
+description: "A growing collection of shape tricks, all crafted using pure CSS. Each shape comes with code snippets."
 lightImage: "./shapes-light.png"
 darkImage: "./shapes-dark.png"
 tags: ["CSS art", "Collection"]