diff options
Diffstat (limited to 'examples/middleware/src/components/Card.astro')
| -rw-r--r-- | examples/middleware/src/components/Card.astro | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/examples/middleware/src/components/Card.astro b/examples/middleware/src/components/Card.astro new file mode 100644 index 000000000..c68fa2ab3 --- /dev/null +++ b/examples/middleware/src/components/Card.astro @@ -0,0 +1,63 @@ +--- +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> + .link-card { + list-style: none; + display: flex; + padding: 0.25rem; + background-color: white; + background-image: none; + background-size: 400%; + 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); + } + + .link-card > a { + width: 100%; + text-decoration: none; + line-height: 1.4; + padding: 1rem 1.3rem; + border-radius: 0.35rem; + 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.5rem; + margin-bottom: 0; + color: #444; + } + .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)); + } +</style> |