aboutsummaryrefslogtreecommitdiff
path: root/src/components/Card.astro
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Card.astro')
-rw-r--r--src/components/Card.astro76
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>&rarr;</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>