public/css/modules/nav.css


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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

.nav > :not(:last-child) {
  margin-block-end: var(--margin-block-sm);
}

.nav__bottom-row {
  display: flex;
  flex-direction: column;
}

.nav__nav-links {
  display: grid;
  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
  column-gap: var(--grid-gutter-width);
}

.nav__nav-links li {
  margin: 0;
}

.nav__nav-links li:nth-child(1) {
  grid-column: 1 / 3;
}

.nav__nav-links li:nth-child(2) {
  grid-column: 3 / 5;
}

.nav__nav-links li:nth-child(3) {
  grid-column: 1 / 4;
}

.nav__nav-links li:nth-child(4) {
  grid-column: 1 / 3;
}

.nav__nav-links li:nth-child(5) {
  grid-column: 3 / 5;
}

.nav__logo {
  font-family: var(--font-serif);
  font-size: var(--font-size-5);
  font-weight: 700;
}

.nav__logo a {
  text-decoration: none;
  border: var(--relative-eighth-rem) dotted transparent;
  transition: border-color 100ms;
}

.nav__logo a:is(:focus, :focus-visible, :focus-within) {
  box-shadow: none;
  outline: none;
  border-color: var(--special-text-color);
  transition: border-color 300ms;
}

.nav__breadcrumbs {
  display: flex;
  flex-wrap: wrap;
}

.nav__breadcrumbs li {
  list-style-type: none;
  min-width: max-content;
}

.nav__breadcrumbs li::before {
  content: '/'
}

.nav__switch-language-link {
  text-align: right;
}