diff options
Diffstat (limited to 'src/components/Card.astro')
-rw-r--r-- | src/components/Card.astro | 76 |
1 files changed, 0 insertions, 76 deletions
diff --git a/src/components/Card.astro b/src/components/Card.astro deleted file mode 100644 index aea28c8..0000000 --- a/src/components/Card.astro +++ /dev/null @@ -1,76 +0,0 @@ ---- -export interface Props { - title: string; - body: string; - href: string; -} - -const { href, title, body } = Astro.props as Props; ---- - -<li class="link-card"> - <a href={href}> - <h2> - {title} - <span>→</span> - </h2> - <p> - {body} - </p> - </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-size: 400%; - border-radius: 0.5rem; - background-position: 100%; - transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); - } - - .link-card > a { - width: 100%; - text-decoration: none; - line-height: 1.4; - padding: 1em 1.3em; - border-radius: 0.35rem; - color: var(--text-color); - background-color: white; - opacity: 0.8; - } - - h2 { - margin: 0; - transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1); - } - - p { - margin-top: 0.75rem; - margin-bottom: 0; - } - - 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; - } - - .link-card:is(:hover, :focus-within) h2 span { - will-change: transform; - transform: translateX(2px); - } -</style> |