diff options
| author |  Drew Powers <1369770+drwpow@users.noreply.github.com>
| 2021-11-22 13:38:53 -0700 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-11-22 13:38:53 -0700 |
| commit | ce8f8e06c0d79fbe44538a1d63c5bf3a79ba27ff (patch) | |
| tree | cca0a8f06b680ceac2cbb347415d3ef88c4d4df8 /examples/framework-multiple/src/pages/index.astro | |
| parent | e49452325ce563ac7e46291d4654037075702316 (diff) | |
| download | astro-ce8f8e06c0d79fbe44538a1d63c5bf3a79ba27ff.tar.gz astro-ce8f8e06c0d79fbe44538a1d63c5bf3a79ba27ff.tar.zst astro-ce8f8e06c0d79fbe44538a1d63c5bf3a79ba27ff.zip | |
Clean up styling for framework-* examples (#1970)
Diffstat (limited to 'examples/framework-multiple/src/pages/index.astro')
| -rw-r--r-- | examples/framework-multiple/src/pages/index.astro | 69 |
1 files changed, 25 insertions, 44 deletions
diff --git a/examples/framework-multiple/src/pages/index.astro b/examples/framework-multiple/src/pages/index.astro index 5982e9460..e27a5466d 100644 --- a/examples/framework-multiple/src/pages/index.astro +++ b/examples/framework-multiple/src/pages/index.astro @@ -13,58 +13,39 @@ import SvelteCounter from '../components/SvelteCounter.svelte'; --- <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" /> - - <style> - :global(:root) { - font-family: system-ui; - padding: 2em 0; - } - :global(.counter) { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - place-items: center; - font-size: 2em; - margin-top: 2em; - } - :global(.children) { - display: grid; - place-items: center; - margin-bottom: 2em; - } - </style> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width"> + <link rel="icon" type="image/x-icon" href="/favicon.ico"> + <link rel="stylesheet" type="text/css" href={Astro.resolve('../styles/global.css')}> </head> <body> - <main> + <main> + + <react.Counter client:visible> + <h1>Hello React!</h1> + <p>What's up?</p> + </react.Counter> - <react.Counter client:visible> - <h1>Hello React!</h1> - <p>What's up?</p> - </react.Counter> + <PreactCounter client:visible> + <h1>Hello Preact!</h1> + </PreactCounter> - <PreactCounter client:visible> - <h1>Hello Preact!</h1> - </PreactCounter> + <SolidCounter client:visible> + <h1>Hello Solid!</h1> + </SolidCounter> - <SolidCounter client:visible> - <h1>Hello Solid!</h1> - </SolidCounter> + <VueCounter client:visible> + <h1>Hello Vue!</h1> + </VueCounter> - <VueCounter client:visible> - <h1>Hello Vue!</h1> - </VueCounter> + <SvelteCounter client:visible> + <h1>Hello Svelte!</h1> + </SvelteCounter> - <SvelteCounter client:visible> - <h1>Hello Svelte!</h1> - </SvelteCounter> + <A /> - <A /> - - <Renamed /> + <Renamed /> - </main> + </main> </body> </html> |