diff options
Diffstat (limited to 'examples/middleware/src/components/Card.astro')
| -rw-r--r-- | examples/middleware/src/components/Card.astro | 65 |
1 files changed, 0 insertions, 65 deletions
diff --git a/examples/middleware/src/components/Card.astro b/examples/middleware/src/components/Card.astro deleted file mode 100644 index 1ff16e5fb..000000000 --- a/examples/middleware/src/components/Card.astro +++ /dev/null @@ -1,65 +0,0 @@ ---- -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> |