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 | |
| parent | e49452325ce563ac7e46291d4654037075702316 (diff) | |
| download | astro-ce8f8e06c0d79fbe44538a1d63c5bf3a79ba27ff.tar.gz astro-ce8f8e06c0d79fbe44538a1d63c5bf3a79ba27ff.tar.zst astro-ce8f8e06c0d79fbe44538a1d63c5bf3a79ba27ff.zip | |
Clean up styling for framework-* examples (#1970)
20 files changed, 149 insertions, 122 deletions
diff --git a/examples/framework-multiple/src/components/PreactCounter.tsx b/examples/framework-multiple/src/components/PreactCounter.tsx index bfead53da..9c9bf73a1 100644 --- a/examples/framework-multiple/src/components/PreactCounter.tsx +++ b/examples/framework-multiple/src/components/PreactCounter.tsx @@ -8,12 +8,12 @@ export function PreactCounter({ children }) { return ( <> - <div className="counter"> + <div class="counter"> <button onClick={subtract}>-</button> <pre>{count}</pre> <button onClick={add}>+</button> </div> - <div className="children">{children}</div> + <div class="counter-message">{children}</div> </> ); } diff --git a/examples/framework-multiple/src/components/ReactCounter.jsx b/examples/framework-multiple/src/components/ReactCounter.jsx index 4b7c4bfa3..eca3cd2f7 100644 --- a/examples/framework-multiple/src/components/ReactCounter.jsx +++ b/examples/framework-multiple/src/components/ReactCounter.jsx @@ -13,7 +13,7 @@ export function Counter({ children }) { <pre>{count}</pre> <button onClick={add}>+</button> </div> - <div className="children">{children}</div> + <div className="counter-message">{children}</div> </> ); } diff --git a/examples/framework-multiple/src/components/SolidCounter.tsx b/examples/framework-multiple/src/components/SolidCounter.tsx index 5a9ebe9d5..63fe5cb11 100644 --- a/examples/framework-multiple/src/components/SolidCounter.tsx +++ b/examples/framework-multiple/src/components/SolidCounter.tsx @@ -13,7 +13,7 @@ export default function SolidCounter({ children }) { <pre>{count()}</pre> <button onClick={add}>+</button> </div> - <div class="children">{children}</div> + <div class="counter-message">{children}</div> </> ); } diff --git a/examples/framework-multiple/src/components/SvelteCounter.svelte b/examples/framework-multiple/src/components/SvelteCounter.svelte index 8d6b3f5e1..3cab8c43a 100644 --- a/examples/framework-multiple/src/components/SvelteCounter.svelte +++ b/examples/framework-multiple/src/components/SvelteCounter.svelte @@ -13,10 +13,10 @@ </script> <div class="counter"> - <button on:click={subtract}>-</button> - <pre>{ count }</pre> - <button on:click={add}>+</button> + <button on:click={subtract}>-</button> + <pre>{ count }</pre> + <button on:click={add}>+</button> </div> -<div class="children"> - <slot /> +<div class="counter-message"> + <slot /> </div> diff --git a/examples/framework-multiple/src/components/VueCounter.vue b/examples/framework-multiple/src/components/VueCounter.vue index 2703b8b9b..6c04c401a 100644 --- a/examples/framework-multiple/src/components/VueCounter.vue +++ b/examples/framework-multiple/src/components/VueCounter.vue @@ -4,7 +4,7 @@ <pre>{{ count }}</pre> <button @click="add()">+</button> </div> - <div class="children"> + <div class="counter-message"> <slot /> </div> </template> 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> diff --git a/examples/framework-multiple/src/styles/global.css b/examples/framework-multiple/src/styles/global.css new file mode 100644 index 000000000..5997a5afd --- /dev/null +++ b/examples/framework-multiple/src/styles/global.css @@ -0,0 +1,21 @@ +html, +body { + font-family: system-ui; + margin: 0; +} + +body { + padding: 2rem; +} + +.counter { + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 2em; + place-items: center; +} + +.counter-message { + text-align: center; +} diff --git a/examples/framework-preact/src/components/Counter.css b/examples/framework-preact/src/components/Counter.css new file mode 100644 index 000000000..5d3de4803 --- /dev/null +++ b/examples/framework-preact/src/components/Counter.css @@ -0,0 +1,11 @@ +.counter { + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 2em; + place-items: center; +} + +.counter-message { + text-align: center; +} diff --git a/examples/framework-preact/src/components/Counter.tsx b/examples/framework-preact/src/components/Counter.tsx index 7c520b167..a2ed0277d 100644 --- a/examples/framework-preact/src/components/Counter.tsx +++ b/examples/framework-preact/src/components/Counter.tsx @@ -1,5 +1,6 @@ import { h, Fragment } from 'preact'; import { useState } from 'preact/hooks'; +import './Counter.css'; export default function Counter({ children }) { const [count, setCount] = useState(0); @@ -8,12 +9,12 @@ export default function Counter({ children }) { return ( <> - <div className="counter"> + <div class="counter"> <button onClick={subtract}>-</button> <pre>{count}</pre> <button onClick={add}>+</button> </div> - <div className="children">{children}</div> + <div class="counter-message">{children}</div> </> ); } diff --git a/examples/framework-preact/src/pages/index.astro b/examples/framework-preact/src/pages/index.astro index eefc24414..4811f6e31 100644 --- a/examples/framework-preact/src/pages/index.astro +++ b/examples/framework-preact/src/pages/index.astro @@ -11,21 +11,13 @@ import Counter from '../components/Counter.tsx' <meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> <style> - :global(:root) { + html, + body { font-family: system-ui; - padding: 2em 0; + margin: 0; } - :global(.counter) { - display: grid; - font-size: 2em; - grid-template-columns: repeat(3, minmax(0, 1fr)); - margin-top: 2em; - place-items: center; - } - :global(.children) { - display: grid; - margin-bottom: 2em; - place-items: center; + body { + padding: 2rem; } </style> </head> diff --git a/examples/framework-react/src/components/Counter.css b/examples/framework-react/src/components/Counter.css new file mode 100644 index 000000000..5d3de4803 --- /dev/null +++ b/examples/framework-react/src/components/Counter.css @@ -0,0 +1,11 @@ +.counter { + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 2em; + place-items: center; +} + +.counter-message { + text-align: center; +} diff --git a/examples/framework-react/src/components/Counter.jsx b/examples/framework-react/src/components/Counter.jsx index b7b219aae..e222d680f 100644 --- a/examples/framework-react/src/components/Counter.jsx +++ b/examples/framework-react/src/components/Counter.jsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; +import './Counter.css'; export default function Counter({ children, count: initialCount }) { const [count, setCount] = useState(initialCount); @@ -12,7 +13,7 @@ export default function Counter({ children, count: initialCount }) { <pre>{count}</pre> <button onClick={add}>+</button> </div> - <div className="children">{children}</div> + <div className="counter-message">{children}</div> </> ); } diff --git a/examples/framework-react/src/pages/index.astro b/examples/framework-react/src/pages/index.astro index ba30fed6f..dd2950782 100644 --- a/examples/framework-react/src/pages/index.astro +++ b/examples/framework-react/src/pages/index.astro @@ -14,21 +14,13 @@ const someProps = { <meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> <style> - :global(:root) { + html, + body { font-family: system-ui; - padding: 2em 0; + margin: 0; } - :global(.counter) { - display: grid; - font-size: 2em; - grid-template-columns: repeat(3, minmax(0, 1fr)); - margin-top: 2em; - place-items: center; - } - :global(.children) { - display: grid; - margin-bottom: 2em; - place-items: center; + body { + padding: 2rem; } </style> </head> diff --git a/examples/framework-solid/src/components/Counter.css b/examples/framework-solid/src/components/Counter.css new file mode 100644 index 000000000..3ee017965 --- /dev/null +++ b/examples/framework-solid/src/components/Counter.css @@ -0,0 +1,11 @@ +.counter { + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 3em; + place-items: center; +} + +.counter-message { + text-align: center; +} diff --git a/examples/framework-solid/src/components/Counter.jsx b/examples/framework-solid/src/components/Counter.jsx index a008a709f..bbd435f09 100644 --- a/examples/framework-solid/src/components/Counter.jsx +++ b/examples/framework-solid/src/components/Counter.jsx @@ -1,4 +1,5 @@ import { createSignal } from 'solid-js'; +import './Counter.css'; export default function Counter({ children }) { const [count, setCount] = createSignal(0); diff --git a/examples/framework-solid/src/pages/index.astro b/examples/framework-solid/src/pages/index.astro index 57369c320..af4669816 100644 --- a/examples/framework-solid/src/pages/index.astro +++ b/examples/framework-solid/src/pages/index.astro @@ -6,19 +6,14 @@ import Counter from '../components/Counter.jsx'; <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> - <style global> - :root { + <style> + html, + body { font-family: system-ui; + margin: 0; } - .counter { - display: grid; - font-size: 2em; - grid-template-columns: repeat(3, minmax(0, 1fr)); - margin-top: 3em; - place-items: center; - } - .counter-message { - text-align: center; + body { + padding: 2rem; } </style> </head> diff --git a/examples/framework-svelte/src/components/Counter.svelte b/examples/framework-svelte/src/components/Counter.svelte index 9aaf421c1..2f4c07339 100644 --- a/examples/framework-svelte/src/components/Counter.svelte +++ b/examples/framework-svelte/src/components/Counter.svelte @@ -15,6 +15,19 @@ <pre>{ count }</pre> <button on:click={add}>+</button> </div> -<div class="children"> +<div class="message"> <slot /> </div> + +<style> + .counter{ + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 2em; + place-items: center; + } + .message { + text-align: center; + } +</style> diff --git a/examples/framework-svelte/src/pages/index.astro b/examples/framework-svelte/src/pages/index.astro index 8cf84ef53..e5e7883d0 100644 --- a/examples/framework-svelte/src/pages/index.astro +++ b/examples/framework-svelte/src/pages/index.astro @@ -12,21 +12,13 @@ import Counter from '../components/Counter.svelte' <meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> <style> - :global(:root) { + html, + body { font-family: system-ui; - padding: 2em 0; + margin: 0; } - :global(.counter) { - display: grid; - font-size: 2em; - grid-template-columns: repeat(3, minmax(0, 1fr)); - margin-top: 2em; - place-items: center; - } - :global(.children) { - display: grid; - margin-bottom: 2em; - place-items: center; + body { + padding: 2rem; } </style> </head> diff --git a/examples/framework-vue/src/components/Counter.vue b/examples/framework-vue/src/components/Counter.vue index 2703b8b9b..155717ea4 100644 --- a/examples/framework-vue/src/components/Counter.vue +++ b/examples/framework-vue/src/components/Counter.vue @@ -4,7 +4,7 @@ <pre>{{ count }}</pre> <button @click="add()">+</button> </div> - <div class="children"> + <div class="counter-message"> <slot /> </div> </template> @@ -25,3 +25,16 @@ export default { }, }; </script> + +<style> +.counter { + display: grid; + font-size: 2em; + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-top: 2em; + place-items: center; +} +.counter-message { + text-align: center; +} +</style> diff --git a/examples/framework-vue/src/pages/index.astro b/examples/framework-vue/src/pages/index.astro index c7679c46e..449c3a614 100644 --- a/examples/framework-vue/src/pages/index.astro +++ b/examples/framework-vue/src/pages/index.astro @@ -12,21 +12,13 @@ import Counter from '../components/Counter.vue' <meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> <style> - :global(:root) { + html, + body { font-family: system-ui; - padding: 2em 0; + margin: 0; } - :global(.counter) { - display: grid; - font-size: 2em; - grid-template-columns: repeat(3, minmax(0, 1fr)); - margin-top: 2em; - place-items: center; - } - :global(.children) { - display: grid; - margin-bottom: 2em; - place-items: center; + body { + padding: 2rem; } </style> </head> |