diff options
Diffstat (limited to 'examples/deno/src/components/Layout.astro')
| -rw-r--r-- | examples/deno/src/components/Layout.astro | 87 |
1 files changed, 43 insertions, 44 deletions
diff --git a/examples/deno/src/components/Layout.astro b/examples/deno/src/components/Layout.astro index b8fc659fe..fc0995154 100644 --- a/examples/deno/src/components/Layout.astro +++ b/examples/deno/src/components/Layout.astro @@ -8,48 +8,47 @@ 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> + <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 /> + <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, 3rem); + + --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> + </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, 3rem); - - --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> |