diff options
| author |  Fred K. Schott <fkschott@gmail.com>
| 2022-05-03 17:08:15 -0700 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-05-03 17:08:15 -0700 |
| commit | 78855ce8922a5649813a750bc9fa65aa1112f173 (patch) | |
| tree | fc99da6215c2416e6ef4baac8eedf9c0908c3385 /examples/basics/src/components | |
| parent | 860357388f0b944b98246394813c2928258e6dc3 (diff) | |
| download | astro-78855ce8922a5649813a750bc9fa65aa1112f173.tar.gz astro-78855ce8922a5649813a750bc9fa65aa1112f173.tar.zst astro-78855ce8922a5649813a750bc9fa65aa1112f173.zip | |
first polish (#3236)
Diffstat (limited to 'examples/basics/src/components')
| -rw-r--r-- | examples/basics/src/components/Card.astro | 75 | ||||
| -rw-r--r-- | examples/basics/src/components/Layout.astro | 55 |
2 files changed, 75 insertions, 55 deletions
diff --git a/examples/basics/src/components/Card.astro b/examples/basics/src/components/Card.astro new file mode 100644 index 000000000..7b911b395 --- /dev/null +++ b/examples/basics/src/components/Card.astro @@ -0,0 +1,75 @@ +--- +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} + <slot name="icon" /> + </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>
\ No newline at end of file diff --git a/examples/basics/src/components/Layout.astro b/examples/basics/src/components/Layout.astro deleted file mode 100644 index cf1c00262..000000000 --- a/examples/basics/src/components/Layout.astro +++ /dev/null @@ -1,55 +0,0 @@ ---- -export interface Props { - title: string; -} - -const { title } = Astro.props as Props; ---- - -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width"> - <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <title>{title}</title> -</head> -<body> - <slot /> -</body> -</html> - -<style> - :root { - --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem); - --font-size-lg: clamp(1.2rem, 0.7vw + 1.2rem, 1.5rem); - --font-size-xl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem); - - --color-text: hsl(12, 5%, 4%); - --color-bg: hsl(10, 21%, 95%); - } - - html { - font-family: system-ui, sans-serif; - font-size: var(--font-size-base); - color: var(--color-text); - background-color: var(--color-bg); - } - - body { - margin: 0; - } - - :global(h1) { - font-size: var(--font-size-xl); - } - - :global(h2) { - font-size: var(--font-size-lg); - } - - :global(code) { - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace; - } -</style> |