Skip to content

Commit 0232769

Browse files
MoritzWeber0MoritzWeber0
committed
refactor: Clean up header styles and html
1 parent 2c7d7cf commit 0232769

2 files changed

Lines changed: 95 additions & 106 deletions

File tree

‎assets/sass/navigation.scss‎

Lines changed: 23 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@
4545
@media (min-width: #{$breakpoint-md}) {
4646
display: block;
4747
}
48+
49+
hr {
50+
display: none;
51+
}
4852
}
4953

5054
.o-header__logo {
@@ -74,8 +78,16 @@
7478
margin: 0;
7579
}
7680

81+
menu > li > menu {
82+
display: flex;
83+
flex-direction: row;
84+
padding-inline-start: 0;
85+
86+
}
87+
7788
.o-header__item > .o-dropdown__button {
7889
font-weight: bold;
90+
line-height: 1;
7991

8092
@media (max-width: #{$breakpoint-md}) {
8193
flex-direction: row-reverse;
@@ -106,6 +118,8 @@
106118

107119
a {
108120
font-weight: 400;
121+
white-space: nowrap;
122+
min-width: max-content;
109123

110124
@media (max-width: #{$breakpoint-md}) {
111125
flex-direction: row-reverse;
@@ -175,6 +189,8 @@
175189
color: var(--color-body);
176190
font-weight: 700;
177191
align-items: center;
192+
white-space: nowrap;
193+
line-height: 1;
178194

179195
&:hover,
180196
&:focus {
@@ -206,38 +222,18 @@
206222
}
207223
}
208224

209-
.o-header__item a {
210-
white-space: nowrap;
211-
}
212-
213-
.o-dropdown__menu .o-header__item a {
214-
white-space: nowrap;
215-
min-width: max-content;
216-
}
217-
218-
.o-nav__menu-button > .material-symbols-rounded,
219-
.o-nav__close-button > .material-symbols-rounded {
220-
margin-left: .8rem;
221-
align-self: center;
222-
text-decoration: none;
223-
}
224-
225-
226-
227225
.o-nav__close-button,
228226
.o-nav__menu-button {
229227
display: flex;
230228

231229
@media (min-width: #{$breakpoint-md}) {
232230
display: none;
233231
}
234-
}
235232

236-
.o-header__expand-button {
237-
display: none;
238-
239-
@media (min-width: #{$breakpoint-md}) {
240-
display: flex;
233+
> .material-symbols-rounded {
234+
margin-left: .8rem;
235+
align-self: center;
236+
text-decoration: none;
241237
}
242238
}
243239

@@ -267,20 +263,17 @@
267263
align-items: flex-end;
268264
padding-left: 0;
269265
}
270-
271-
> menu > li {
272-
margin-bottom: 5rem;
273-
}
274-
266+
275267
.o-header__item {
276268
height: fit-content;
277269
}
278270

279271
hr {
272+
display: block;
280273
width: 100vw;
281274
margin: 0;
282275
margin-right: -1rem;
283-
border-top: 1px dotted grey;
276+
border-top: 2px dotted grey;
284277
}
285278
}
286279
}
@@ -289,14 +282,6 @@ body:has(.o-header__nav--open) {
289282
overflow: hidden;
290283
}
291284

292-
.o-header__item-wrapper {
293-
@media (min-width: #{$breakpoint-md}) {
294-
display: flex;
295-
gap: 0.6rem;
296-
padding-left: 0.6rem;
297-
}
298-
}
299-
300285
.a-theme-toggle {
301286
padding: 1rem;
302287
border: none;

‎layouts/partials/header.html‎

Lines changed: 72 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
</a>
77
<div class="o-header__curtain"></div>
88
<div class="o-header__nav o-container">
9-
<li class="o-header__item a-theme-toggle--mobile">
9+
<div class="a-theme-toggle--mobile">
1010
{{ partial "theme-toggle" }}
11-
</li>
11+
</div>
1212
<button class="o-nav__menu-button" title="Menü öffnen" aria-expanded="false" aria-haspopup="true">
1313
<span>{{ T "menu-open" }}</span>
1414
{{ partial "icon" "menu" }}
@@ -19,83 +19,87 @@
1919
{{ partial "icon" "close" }}
2020
</button>
2121
<menu>
22-
{{ $currentPage := . }}
23-
<li class="o-header__item o-dropdown">
24-
<hr />
25-
<button
26-
id="navbar-country-selection-button"
27-
class="o-dropdown__button"
28-
aria-expanded="false"
29-
aria-haspopup="listbox"
30-
aria-controls="navbar-country-selection-dropdown"
31-
title="{{ T "language-switcher.aria-label" }}"
32-
aria-label='{{ T "countries.selection.aria-label" }}'
33-
>
34-
<span>{{ T "countries.selection.title" }}</span>
35-
<div class="o-dropdown__icon">
36-
{{ partial "icon" "keyboard_arrow_down" }}
37-
</div>
38-
</button>
39-
<menu
40-
id="navbar-country-selection-dropdown"
41-
class="o-header__item-countries o-dropdown__menu o-dropdown__menu--below"
42-
role="listbox"
43-
aria-hidden="true"
44-
aria-label="{{ T "countries.selection.dropdown-label" }}"
45-
>
46-
{{ range where site.RegularPages "Section" "country"}}
47-
<li class="o-header__item{{ if (.Eq $currentPage) }} o-header__item--current{{ end }}">
48-
<a href="{{ .Permalink }}">
49-
{{ partial "flag" (dict "country" .File.ContentBaseName) }}
50-
<span>{{ .Title }}</span>
51-
</a>
22+
<li class="o-header__item">
23+
<menu>
24+
{{ $currentPage := . }}
25+
<li class="o-header__item o-dropdown">
26+
<hr />
27+
<button
28+
id="navbar-country-selection-button"
29+
class="o-dropdown__button"
30+
aria-expanded="false"
31+
aria-haspopup="listbox"
32+
aria-controls="navbar-country-selection-dropdown"
33+
title="{{ T "language-switcher.aria-label" }}"
34+
aria-label='{{ T "countries.selection.aria-label" }}'
35+
>
36+
<span>{{ T "countries.selection.title" }}</span>
37+
<div class="o-dropdown__icon">
38+
{{ partial "icon" "keyboard_arrow_down" }}
39+
</div>
40+
</button>
41+
<menu
42+
id="navbar-country-selection-dropdown"
43+
class="o-header__item-countries o-dropdown__menu o-dropdown__menu--below"
44+
role="listbox"
45+
aria-hidden="true"
46+
aria-label="{{ T "countries.selection.dropdown-label" }}"
47+
>
48+
{{ range where site.RegularPages "Section" "country"}}
49+
<li class="o-header__item{{ if (.Eq $currentPage) }} o-header__item--current{{ end }}">
50+
<a href="{{ .Permalink }}">
51+
{{ partial "flag" (dict "country" .File.ContentBaseName) }}
52+
<span>{{ .Title }}</span>
53+
</a>
54+
</li>
55+
{{ end }}
56+
</menu>
57+
<hr />
5258
</li>
53-
{{ end }}
54-
</menu>
55-
<hr />
56-
<button
57-
id="navbar-operator-selection-button"
58-
class="o-dropdown__button"
59-
aria-expanded="false"
60-
aria-haspopup="listbox"
61-
aria-controls="navbar-operator-selection-dropdown"
62-
title="{{ T "language-switcher.aria-label" }}"
63-
aria-label='{{ T "operators.selection.aria-label" }}'
64-
>
65-
<span>{{ T "operators.selection.title" }}</span>
66-
<div class="o-dropdown__icon">
67-
{{ partial "icon" "keyboard_arrow_down" }}
68-
</div>
69-
</button>
70-
<menu
71-
id="navbar-operator-selection-dropdown"
72-
class="o-header__item-operators o-dropdown__menu o-dropdown__menu--below"
73-
role="listbox"
74-
aria-hidden="true"
75-
aria-label="{{ T "operators.selection.dropdown-label" }}"
76-
>
77-
{{ range where site.RegularPages "Section" "operator"}}
78-
<li class="o-header__item{{ if (.Eq $currentPage) }} o-header__item--current{{ end }}">
79-
<a href="{{ .Permalink }}">
80-
{{ partial "operator-logo" (dict "operator" .File.ContentBaseName) }}
81-
<span>{{ .Title }}</span>
82-
</a>
59+
<li class="o-header__item o-dropdown">
60+
<button
61+
id="navbar-operator-selection-button"
62+
class="o-dropdown__button"
63+
aria-expanded="false"
64+
aria-haspopup="listbox"
65+
aria-controls="navbar-operator-selection-dropdown"
66+
title="{{ T "language-switcher.aria-label" }}"
67+
aria-label='{{ T "operators.selection.aria-label" }}'
68+
>
69+
<span>{{ T "operators.selection.title" }}</span>
70+
<div class="o-dropdown__icon">
71+
{{ partial "icon" "keyboard_arrow_down" }}
72+
</div>
73+
</button>
74+
<menu
75+
id="navbar-operator-selection-dropdown"
76+
class="o-header__item-operators o-dropdown__menu o-dropdown__menu--below"
77+
role="listbox"
78+
aria-hidden="true"
79+
aria-label="{{ T "operators.selection.dropdown-label" }}"
80+
>
81+
{{ range where site.RegularPages "Section" "operator"}}
82+
<li class="o-header__item{{ if (.Eq $currentPage) }} o-header__item--current{{ end }}">
83+
<a href="{{ .Permalink }}">
84+
{{ partial "operator-logo" (dict "operator" .File.ContentBaseName) }}
85+
<span>{{ .Title }}</span>
86+
</a>
87+
</li>
88+
{{ end }}
89+
</menu>
8390
</li>
84-
{{ end }}
85-
</menu>
86-
<ul class="o-header__item-wrapper">
8791
<hr />
88-
{{ $news := site.GetPage "news" }}
8992
<li class="o-header__item" id="li-header-news">
93+
{{ $news := site.GetPage "news" }}
9094
<a href="{{ $news.RelPermalink }}">{{ $news.Title }}</a>
9195
</li>
9296
<hr />
93-
{{ $informationPage := site.GetPage "generalInformation" }}
9497
<li class="o-header__item">
98+
{{ $informationPage := site.GetPage "generalInformation" }}
9599
<a href="{{ $informationPage.RelPermalink }}">{{ $informationPage.Title }}</a>
96100
</li>
97101
<hr />
98-
</ul>
102+
</menu>
99103
</li>
100104
<li class="o-header__item a-theme-toggle--desktop">
101105
{{ partial "theme-toggle" }}

0 commit comments

Comments
 (0)