opensource/astro
1
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-09-26 07:25:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Clean up styling for framework-* examples (#1970)

Browse Source
This commit is contained in:
Drew Powers
2021-11-22 13:38:53 -07:00
committed by GitHub
parent e49452325c
commit ce8f8e06c0
20 changed files with 149 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
examples/framework-vue/src/components/Counter.vue
View File

@ -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>

18
examples/framework-vue/src/pages/index.astro
View File

@ -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>