diff options
| author |  Ben Holmes <hey@bholmes.dev>
| 2022-07-11 15:42:10 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-07-11 15:42:10 -0400 |
| commit | faf3f3a8d111b543c0aca12432fe1a2ee5e2d726 (patch) | |
| tree | a754bd03b9db417a5dfeb1a4a50236b858884ec1 /examples/with-nanostores/src/layouts/Layout.astro | |
| parent | bf5d1cc1e71da38a14658c615e9481f2145cc6e7 (diff) | |
| download | astro-faf3f3a8d111b543c0aca12432fe1a2ee5e2d726.tar.gz astro-faf3f3a8d111b543c0aca12432fe1a2ee5e2d726.tar.zst astro-faf3f3a8d111b543c0aca12432fe1a2ee5e2d726.zip | |
Update `with-nanostores` example to match docs walkthrough (#3840)
* feat: replace with-nanostores with new example
* docs: update README with docs call-out
* chore: small formatting inconsistencies
* nit: standardize to spaces :'(
* nit: standardize to tabs!
* refactor: use html "hidden" property
* nit: beta.66 for sanity
Diffstat (limited to 'examples/with-nanostores/src/layouts/Layout.astro')
| -rw-r--r-- | examples/with-nanostores/src/layouts/Layout.astro | 106 |
1 files changed, 106 insertions, 0 deletions
diff --git a/examples/with-nanostores/src/layouts/Layout.astro b/examples/with-nanostores/src/layouts/Layout.astro new file mode 100644 index 000000000..0eb4ecb76 --- /dev/null +++ b/examples/with-nanostores/src/layouts/Layout.astro @@ -0,0 +1,106 @@ +--- +import CartFlyoutToggle from '../components/CartFlyoutToggle'; +import CartFlyout from '../components/CartFlyout'; + +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> + <header> + <nav> + <a href="/" class="nav-header"><span style="color: var(--astro-blue)">Astro</span> storefront</a> + <CartFlyoutToggle client:load /> + </nav> + </header> + <slot /> + <CartFlyout client:load /> +</body> +</html> + +<style is:global> + :root { + --font-family: system-ui, sans-serif; + --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.0rem, 1.75vw + 1.35rem, 2.75rem); + + --color-text: hsl(12, 5%, 4%); + --color-bg: hsl(17, 20%, 97%); + --color-bg-2: hsl(17, 20%, 94%); + --color-bg-3: hsl(17, 20%, 88%); + --astro-blue: #4F39FA; + --astro-pink: #DA62C4; + + --content-max-width: 90ch; + --nav-height: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem); + } + + h1 { + font-size: var(--font-size-xl); + } + + button { + border: none; + color: var(--astro-blue); + border: 2px solid var(--astro-blue); + transition: color 0.2s, background-color 0.2s; + background-color: transparent; + padding: 0.4rem 0.8rem; + border-radius: 0.4rem; + font-family: var(--font-family); + font-size: var(--font-size-base); + font-weight: bold; + cursor: pointer; + } + + button:hover { + background-color: var(--astro-blue); + color: white; + } +</style> + +<style> + html { + font-family: var(--font-family); + font-size: var(--font-size-base); + color: var(--color-text); + background-color: var(--color-bg); + } + + body { + margin: 0; + } + + header { + background: var(--color-bg-2); + } + + nav { + max-width: var(--content-max-width); + height: var(--nav-height); + margin: auto; + padding-inline: 1rem; + display: flex; + justify-content: space-between; + align-items: center; + } + + .nav-header, .nav-header:visited { + font-size: var(--font-size-base); + font-weight: bold; + color: inherit; + text-decoration: none; + } +</style> |