From 61d47d25c696c739bc3be5199bc73670a50c71eb Mon Sep 17 00:00:00 2001 From: Malte Ehrlen <42444300+malteehrlen@users.noreply.github.com> Date: Sat, 4 Feb 2023 04:54:39 +0200 Subject: [PATCH] fix example Card component style (#6123) * fix example Card component style Card component has uneven border on hover, and in some cases the border is visible even when not hovering * Delete neat-taxis-thank.md --------- Co-authored-by: Nate Moore --- examples/basics/src/components/Card.astro | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/examples/basics/src/components/Card.astro b/examples/basics/src/components/Card.astro index ee57d4df4..c68fa2ab3 100644 --- a/examples/basics/src/components/Card.astro +++ b/examples/basics/src/components/Card.astro @@ -23,11 +23,11 @@ const { href, title, body } = Astro.props; .link-card { list-style: none; display: flex; - padding: 0.15rem; + padding: 0.25rem; background-color: white; - background-image: var(--accent-gradient); + background-image: none; background-size: 400%; - border-radius: 0.5rem; + border-radius: 0.6rem; background-position: 100%; transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); @@ -55,6 +55,7 @@ const { href, title, body } = Astro.props; } .link-card:is(:hover, :focus-within) { background-position: 0; + background-image: var(--accent-gradient); } .link-card:is(:hover, :focus-within) h2 { color: rgb(var(--accent));