NavBar.vue 697 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. <template>
  2. <a
  3. class="title"
  4. :aria-label="$site.title + ', back to home'"
  5. :href="$site.base"
  6. >
  7. <img
  8. class="logo"
  9. v-if="$theme.logo"
  10. :src="withBase($theme.logo)"
  11. alt="logo"
  12. />
  13. <span>{{ $site.title }}</span>
  14. </a>
  15. <div class="flex-grow"></div>
  16. <NavBarLinks class="hide-mobile" />
  17. <slot name="search" />
  18. </template>
  19. <script src="./NavBar"></script>
  20. <style>
  21. .title {
  22. font-size: 1.3rem;
  23. font-weight: 600;
  24. color: var(--text-color);
  25. }
  26. .flex-grow {
  27. flex-grow: 1;
  28. }
  29. .logo {
  30. margin-right: 0.75rem;
  31. height: 1.3rem;
  32. vertical-align: bottom;
  33. }
  34. @media screen and (max-width: 719px) {
  35. .hide-mobile {
  36. display: none;
  37. }
  38. }
  39. </style>