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-vue/src | |
| 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-vue/src')
| -rw-r--r-- | examples/framework-vue/src/components/Counter.vue | 15 | ||||
| -rw-r--r-- | examples/framework-vue/src/pages/index.astro | 18 |
2 files changed, 19 insertions, 14 deletions
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> |