winkekatze.tv/assets/scss/_header.scss

82 lines
1.9 KiB
SCSS
Raw Normal View History

header {
2022-01-14 02:18:09 +01:00
margin: -25px -25px 0px -25px;
background: $background_accent_1;
padding: 20px 30px;
box-shadow: 5px 5px 5px 10px $background_accent_1;
2022-01-16 19:15:13 +01:00
h1 a, h1 a:hover, h1 a:link, h1 a:visited {
2022-01-16 02:17:41 +01:00
font-family: $headline_font, sans-serif;
color: $font_accent_1;
margin: 0;
2022-01-14 02:18:09 +01:00
font-weight: bold;
font-size: $font_size_h1;
2022-01-16 19:15:13 +01:00
text-decoration: none;
}
nav ul {
2022-01-14 02:18:09 +01:00
font-size: $font_size_default;
list-style: none;
margin: 0;
padding: 0;
2022-01-16 04:53:54 +01:00
a, a:link, a:visited {
color: $font_accent_2;
2022-01-16 19:15:13 +01:00
text-decoration: none;
background: $shadow_accent_1;
2022-01-18 04:09:02 +01:00
padding: 8px 24px;
2022-01-16 19:15:13 +01:00
border-radius: 5px;
2022-01-18 04:05:22 +01:00
text-transform: $menu_text_transform;
2022-01-16 04:53:54 +01:00
}
a:hover, a:active {
2022-01-18 04:05:22 +01:00
color: $font_accent_2_hover;
2022-01-16 19:15:13 +01:00
box-shadow: 0px 0px 1px 1px $shadow_accent_1;
2022-01-16 04:53:54 +01:00
}
li {
display: inline;
margin: 0 8px 0 0;
padding: 0;
}
}
}
2022-01-16 17:27:47 +01:00
2022-01-16 19:15:13 +01:00
@media (min-width: $large_view) {
header {
max-width: $large_min_width;
margin: auto;
box-shadow: 0px -10000px 0px 10000px $background_accent_1;
h1 a, h1 a:hover, h1 a:link {
font-size: $font_size_h1_large;
}
nav ul {
font-size: $font_size_default_large;
}
}
}
2022-01-16 17:27:47 +01:00
@media (max-width: $mobile_view) {
2022-01-16 02:17:41 +01:00
header {
h1 a, h1 a:hover, h1 a:link {
font-size: $font_size_h1_mobile;
}
2022-01-16 17:27:47 +01:00
nav ul {
font-size: $font_size_default_mobile;
}
2022-01-16 02:17:41 +01:00
}
}
2022-01-16 18:21:31 +01:00
@media (max-width: $tiny_view) {
header {
h1 a, h1 a:hover, h1 a:link {
font-size: $font_size_h1_tiny;
}
nav ul {
font-size: $font_size_default_tiny;
}
}
}
@media (max-width: $pico_view) {
header {
h1 a, h1 a:hover, h1 a:link {
font-size: $font_size_h1_pico;
}
}
}