aboutsummaryrefslogtreecommitdiff
path: root/examples/deno/src/components
diff options
context:
space:
mode:
authorGravatar Elian ☕️ <elianvancutsem@gmail.com> 2022-06-21 19:07:07 +0200
committerGravatar GitHub <noreply@github.com> 2022-06-21 13:07:07 -0400
commite88b23ea5271369bcd26b0f011cc9146fc258b8c (patch)
treec784e82e3d66674ef924474b409a0c31d0521313 /examples/deno/src/components
parentb4db008e53867386542aa6e74c9649f574045dc9 (diff)
downloadastro-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')
-rw-r--r--examples/deno/src/components/Card.astro74
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>&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 {
+ transform: translateX(2px);
+ }
+</style>