diff options
Diffstat (limited to 'src/App.vue')
-rw-r--r-- | src/App.vue | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..938744f --- /dev/null +++ b/src/App.vue @@ -0,0 +1,53 @@ +<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> |