diff options
Diffstat (limited to 'frontend/src/App.vue')
| -rw-r--r-- | frontend/src/App.vue | 85 |
1 files changed, 0 insertions, 85 deletions
diff --git a/frontend/src/App.vue b/frontend/src/App.vue deleted file mode 100644 index 7905b05..0000000 --- a/frontend/src/App.vue +++ /dev/null | |||
| @@ -1,85 +0,0 @@ | |||
| 1 | <script setup lang="ts"> | ||
| 2 | import { RouterLink, RouterView } from 'vue-router' | ||
| 3 | import HelloWorld from './components/HelloWorld.vue' | ||
| 4 | </script> | ||
| 5 | |||
| 6 | <template> | ||
| 7 | <header> | ||
| 8 | <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /> | ||
| 9 | |||
| 10 | <div class="wrapper"> | ||
| 11 | <HelloWorld msg="You did it!" /> | ||
| 12 | |||
| 13 | <nav> | ||
| 14 | <RouterLink to="/">Home</RouterLink> | ||
| 15 | <RouterLink to="/about">About</RouterLink> | ||
| 16 | </nav> | ||
| 17 | </div> | ||
| 18 | </header> | ||
| 19 | |||
| 20 | <RouterView /> | ||
| 21 | </template> | ||
| 22 | |||
| 23 | <style scoped> | ||
| 24 | header { | ||
| 25 | line-height: 1.5; | ||
| 26 | max-height: 100vh; | ||
| 27 | } | ||
| 28 | |||
| 29 | .logo { | ||
| 30 | display: block; | ||
| 31 | margin: 0 auto 2rem; | ||
| 32 | } | ||
| 33 | |||
| 34 | nav { | ||
| 35 | width: 100%; | ||
| 36 | font-size: 12px; | ||
| 37 | text-align: center; | ||
| 38 | margin-top: 2rem; | ||
| 39 | } | ||
| 40 | |||
| 41 | nav a.router-link-exact-active { | ||
| 42 | color: var(--color-text); | ||
| 43 | } | ||
| 44 | |||
| 45 | nav a.router-link-exact-active:hover { | ||
| 46 | background-color: transparent; | ||
| 47 | } | ||
| 48 | |||
| 49 | nav a { | ||
| 50 | display: inline-block; | ||
| 51 | padding: 0 1rem; | ||
| 52 | border-left: 1px solid var(--color-border); | ||
| 53 | } | ||
| 54 | |||
| 55 | nav a:first-of-type { | ||
| 56 | border: 0; | ||
| 57 | } | ||
| 58 | |||
| 59 | @media (min-width: 1024px) { | ||
| 60 | header { | ||
| 61 | display: flex; | ||
| 62 | place-items: center; | ||
| 63 | padding-right: calc(var(--section-gap) / 2); | ||
| 64 | } | ||
| 65 | |||
| 66 | .logo { | ||
| 67 | margin: 0 2rem 0 0; | ||
| 68 | } | ||
| 69 | |||
| 70 | header .wrapper { | ||
| 71 | display: flex; | ||
| 72 | place-items: flex-start; | ||
| 73 | flex-wrap: wrap; | ||
| 74 | } | ||
| 75 | |||
| 76 | nav { | ||
| 77 | text-align: left; | ||
| 78 | margin-left: -1rem; | ||
| 79 | font-size: 1rem; | ||
| 80 | |||
| 81 | padding: 1rem 0; | ||
| 82 | margin-top: 1rem; | ||
| 83 | } | ||
| 84 | } | ||
| 85 | </style> | ||