michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix example Card component style (#6123)

Browse source 
* 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 <natemoo-re@users.noreply.github.com>
This commit is contained in:
Malte Ehrlen 2023-02-04 04:54:39 +02:00 committed by GitHub
parent f20a85b642
commit 61d47d25c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
examples/basics/src/components/Card.astro
View file

@ -23,11 +23,11 @@ const { href, title, body } = Astro.props;
.link-card { .link-card {
list-style: none; list-style: none;
display: flex; display: flex;
padding: 0.15rem; padding: 0.25rem;
background-color: white; background-color: white;
background-image: var(--accent-gradient); background-image: none;
background-size: 400%; background-size: 400%;
border-radius: 0.5rem; border-radius: 0.6rem;
background-position: 100%; background-position: 100%;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); 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); 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) { .link-card:is(:hover, :focus-within) {
background-position: 0; background-position: 0;
background-image: var(--accent-gradient);
} }
.link-card:is(:hover, :focus-within) h2 { .link-card:is(:hover, :focus-within) h2 {
color: rgb(var(--accent)); color: rgb(var(--accent));