87 lines
2.1 KiB
SCSS
87 lines
2.1 KiB
SCSS
|
header {
|
||
|
|
margin: -25px -25px 0px -25px;
|
||
|
|
background: $background_accent_1;
|
||
|
|
padding: 20px 30px;
|
||
|
|
box-shadow: 5px 5px 5px 10px $background_accent_1;
|
||
|
|
h1 a, h1 a:hover, h1 a:link, h1 a:visited {
|
||
|
|
font-family: $headline_font, sans-serif;
|
||
|
|
color: $font_accent_1;
|
||
|
|
margin: 0;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: $font_size_h1;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
nav ul {
|
||
|
|
font-size: $font_size_default;
|
||
|
|
list-style: none;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
a, a:link, a:visited {
|
||
|
|
color: $font_accent_2;
|
||
|
|
text-decoration: none;
|
||
|
|
background: $shadow_accent_1;
|
||
|
|
padding: 8px 24px;
|
||
|
|
border-radius: 5px;
|
||
|
|
text-transform: $menu_text_transform;
|
||
|
|
}
|
||
|
|
a:hover, a:active {
|
||
|
|
color: $font_accent_2_hover;
|
||
|
|
box-shadow: 0px 0px 1px 1px $shadow_accent_1;
|
||
|
|
}
|
||
|
|
li {
|
||
|
|
display: inline;
|
||
|
|
margin: 0 8px 0 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: $mobile_view) {
|
||
|
|
header {
|
||
|
|
h1 a, h1 a:hover, h1 a:link {
|
||
|
|
font-size: $font_size_h1_mobile;
|
||
|
|
}
|
||
|
|
nav ul {
|
||
|
|
font-size: $font_size_default_mobile;
|
||
|
|
a, a:link, a:visited {
|
||
|
|
display: block;
|
||
|
|
padding: 5px 8px;
|
||
|
|
margin: -6px 0px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|