diff options
Diffstat (limited to 'examples/deno/src')
| -rw-r--r-- | examples/deno/src/components/Card.astro | 74 | ||||
| -rw-r--r-- | examples/deno/src/layouts/Layout.astro | 56 | ||||
| -rw-r--r-- | examples/deno/src/pages/index.astro | 73 |
3 files changed, 203 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>→</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> diff --git a/examples/deno/src/layouts/Layout.astro b/examples/deno/src/layouts/Layout.astro new file mode 100644 index 000000000..fe43c7e27 --- /dev/null +++ b/examples/deno/src/layouts/Layout.astro @@ -0,0 +1,56 @@ +--- +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%); + --color-border: hsl(17, 24%, 90%); + } + + 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> diff --git a/examples/deno/src/pages/index.astro b/examples/deno/src/pages/index.astro new file mode 100644 index 000000000..ea7401f11 --- /dev/null +++ b/examples/deno/src/pages/index.astro @@ -0,0 +1,73 @@ +--- +import Layout from '../layouts/Layout.astro'; +import Card from '../components/Card.astro'; +--- +<Layout title="Welcome to Astro."> + <main> + <h1>Welcome to <span class="text-gradient">Astro</span></h1> + <p class="instructions"> + Check out the <code>src/pages</code> directory to get started.<br/> + <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above. + </p> + <ul role="list" class="link-card-grid"> + <Card href="https://docs.astro.build/" title="Documentation" body="Learn how Astro works and explore the official API docs." /> + <Card href="https://astro.build/integrations/" title="Integrations" body="Supercharge your project with new frameworks and libraries." /> + <Card href="https://astro.build/themes/" title="Themes" body="Explore a galaxy of community-built starter themes." /> + <Card href="https://astro.build/chat/" title="Chat" body="Come say hi to our amazing Discord community. ❤️" /> + </ul> + </main> +</Layout> + +<style> + :root { + --astro-gradient: linear-gradient(0deg,#4F39FA, #DA62C4); + } + + h1 { + margin: 2rem 0; + } + + main { + margin: auto; + padding: 1em; + max-width: 60ch; + } + + .text-gradient { + font-weight: 900; + background-image: var(--astro-gradient); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-size: 100% 200%; + background-position-y: 100%; + border-radius: 0.4rem; + animation: pulse 4s ease-in-out infinite; + } + + @keyframes pulse { + 0%, 100% { background-position-y: 0%; } + 50% { background-position-y: 80%; } + } + + .instructions { + line-height: 1.6; + margin: 1rem 0; + background: #4F39FA; + padding: 1.0rem; + border-radius: 0.4rem; + color: var(--color-bg); + } + + .instructions code { + font-size: 0.875em; + border: 0.1em solid var(--color-border); + border-radius: 4px; + padding: 0.15em 0.25em; + } + .link-card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr)); + gap: 1rem; + padding: 0; + } +</style> |