diff options
Diffstat (limited to 'examples/basics/src/components/Card.astro')
| -rw-r--r-- | examples/basics/src/components/Card.astro | 34 |
1 files changed, 10 insertions, 24 deletions
diff --git a/examples/basics/src/components/Card.astro b/examples/basics/src/components/Card.astro index a87ab7291..2515ee70f 100644 --- a/examples/basics/src/components/Card.astro +++ b/examples/basics/src/components/Card.astro @@ -11,8 +11,7 @@ const { href, title, body } = Astro.props; <li class="link-card"> <a href={href}> <h2> - {title} - <span>→</span> + {title} <span>→</span> </h2> <p> {body} @@ -20,57 +19,44 @@ const { href, title, body } = Astro.props; </a> </li> <style> - :root { - --link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%); - } - .link-card { list-style: none; display: flex; padding: 0.15rem; - background-image: var(--link-gradient); + background-color: white; + background-image: var(--accent-gradient); background-size: 400%; border-radius: 0.5rem; 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,.1),0 2px 4px -2px rgba(0,0,0,.1); } .link-card > a { width: 100%; text-decoration: none; line-height: 1.4; - padding: 1em 1.3em; + padding: 1rem 1.3rem; border-radius: 0.35rem; - color: var(--text-color); + color: #111; background-color: white; opacity: 0.8; } - h2 { margin: 0; + font-size: 1.25rem; transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1); } - p { - margin-top: 0.75rem; + margin-top: 0.5rem; margin-bottom: 0; + color: #444; } - - h2 span { - display: inline-block; - transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); - } - .link-card:is(:hover, :focus-within) { background-position: 0; } - .link-card:is(:hover, :focus-within) h2 { - color: #4f39fa; + color: rgb(var(--accent)); } - .link-card:is(:hover, :focus-within) h2 span { - will-change: transform; - transform: translateX(2px); - } </style> |