rick-and-morty-vue3

1
<template>
2
  <header class="header">
3
    <h1><a class="header-link" href="/" title="Home">Rick and Morty API</a></h1>
4
  </header>
5
</template>
6

7
<style lang="scss" scoped>
8
.header {
9
  height: 100px;
10
  padding: 20px;
11
  display: flex;
12
  flex-direction: column;
13
  align-items: center;
14
  justify-content: center;
15
  background-color: white;
16

17
  @media (max-width: 480px) {
18
    height: auto;
19
  }
20
}
21

22
.header-link {
23
  color: #202329;
24
  font-size: 5.625rem;
25
  text-decoration: none;
26

27
  @media (max-width: 768px) {
28
    font-size: 3.625rem;
29
  }
30

31
  @media (max-width: 375px) {
32
    font-size: 2rem;
33
  }
34
}
35
</style>
36