diff options
Diffstat (limited to 'src/App.vue')
| -rw-r--r-- | src/App.vue | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..d05208d --- /dev/null +++ b/src/App.vue @@ -0,0 +1,47 @@ +<script setup lang="ts"> +import HelloWorld from './components/HelloWorld.vue' +import TheWelcome from './components/TheWelcome.vue' +</script> + +<template> + <header> + <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /> + + <div class="wrapper"> + <HelloWorld msg="You did it!" /> + </div> + </header> + + <main> + <TheWelcome /> + </main> +</template> + +<style scoped> +header { + line-height: 1.5; +} + +.logo { + display: block; + margin: 0 auto 2rem; +} + +@media (min-width: 1024px) { + header { + display: flex; + place-items: center; + padding-right: calc(var(--section-gap) / 2); + } + + .logo { + margin: 0 2rem 0 0; + } + + header .wrapper { + display: flex; + place-items: flex-start; + flex-wrap: wrap; + } +} +</style> |
