diff --git a/src/components/Card.astro b/src/components/Card.astro index 497368f..314ae2f 100644 --- 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 index 4a18db8..9b3175a 100644 --- 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 index 4bfc95d..6e4b1be 100644 --- 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"]