1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| <script setup>
| 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>
|
|
