summaryrefslogtreecommitdiff
path: root/src/App.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/App.vue')
-rw-r--r--src/App.vue53
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>