diff options
| author |  Ben Holmes <hey@bholmes.dev>
| 2022-04-26 20:37:58 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-04-26 20:37:58 -0400 |
| commit | 8f2f4de5dc9a882030ca01e50cec66ed0f3dfc80 (patch) | |
| tree | 3062763ff37040194f907c1765070b2e992b51d9 /examples/basics/src/components/Layout.astro | |
| parent | 15d940867896300011b6687d5bc96d1a6b650239 (diff) | |
| download | astro-8f2f4de5dc9a882030ca01e50cec66ed0f3dfc80.tar.gz astro-8f2f4de5dc9a882030ca01e50cec66ed0f3dfc80.tar.zst astro-8f2f4de5dc9a882030ca01e50cec66ed0f3dfc80.zip | |
Feat: new just the basics template (#3206)
* feat: new just-the-basics example
* chore: update package name
* chore: update lockfile
* refactor: simplify meta tags
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
* refactor: use `system-ui` for base font
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
* Update examples/just-the-basics/src/components/Layout.astro
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
* refactor: just-the-basics -> basics (now 10% more basic!)
* refactor: add type checking to layout prop
* nit: change "astro-text" to "text-gradient"
* refactor: simplify CSS grid
* feat: make transition easing 10% fancier
* change to text gradient because people gooootta have opinions huh
* nit: rename CSS class to "instructions"
* refactor: use ul > li for containers
* chore: update lockfile
* feat: style tweaks
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
Co-authored-by: Nate Moore <nate@skypack.dev>
Diffstat (limited to 'examples/basics/src/components/Layout.astro')
| -rw-r--r-- | examples/basics/src/components/Layout.astro | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/examples/basics/src/components/Layout.astro b/examples/basics/src/components/Layout.astro new file mode 100644 index 000000000..cf1c00262 --- /dev/null +++ b/examples/basics/src/components/Layout.astro @@ -0,0 +1,55 @@ +--- +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> |