App.vue 1.3 KB

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