diff options
| author |  Elian ☕️ <elianvancutsem@gmail.com>
| 2022-06-21 19:07:07 +0200 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-06-21 13:07:07 -0400 |
| commit | e88b23ea5271369bcd26b0f011cc9146fc258b8c (patch) | |
| tree | c784e82e3d66674ef924474b409a0c31d0521313 /examples/deno/src/components/Card.astro | |
| parent | b4db008e53867386542aa6e74c9649f574045dc9 (diff) | |
| download | astro-e88b23ea5271369bcd26b0f011cc9146fc258b8c.tar.gz astro-e88b23ea5271369bcd26b0f011cc9146fc258b8c.tar.zst astro-e88b23ea5271369bcd26b0f011cc9146fc258b8c.zip | |
add Astro Deno Example (#3645)
* add Astro Deno Example
* add changeset
* update pnpm lock
Co-authored-by: Dan Jutan <danjutan@gmail.com>
Diffstat (limited to 'examples/deno/src/components/Card.astro')
| -rw-r--r-- | examples/deno/src/components/Card.astro | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/examples/deno/src/components/Card.astro b/examples/deno/src/components/Card.astro new file mode 100644 index 000000000..53b67a9da --- /dev/null +++ b/examples/deno/src/components/Card.astro @@ -0,0 +1,74 @@ +--- +export interface Props { + title: string, + body: string, + href: string, +} +const {href, title, body} = Astro.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 { + transform: translateX(2px); + } +</style> |