252 lines
6.6 KiB
SCSS
252 lines
6.6 KiB
SCSS
$transition: 280ms all 120ms ease-out;
|
|
|
|
header {
|
|
background: $background_accent_1;
|
|
top: 0;
|
|
box-shadow: 0px -10000px 0px 10000px $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 {
|
|
grid-template-rows: auto 1fr auto;
|
|
padding: 0 1rem;
|
|
position: sticky;
|
|
display: grid;
|
|
place-items: flex-start;
|
|
margin-left: -25px;
|
|
.title_dropdown {
|
|
background-color: transparent;
|
|
border: none;
|
|
font-family: inherit;
|
|
}
|
|
> ul {
|
|
grid-auto-flow: column;
|
|
> li {
|
|
margin: 0 0.5rem;
|
|
|
|
a, .title_dropdown {
|
|
text-decoration: none;
|
|
text-align: center;
|
|
display: inline-block;
|
|
color: #fff;
|
|
font-size: 1.125rem;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
|
|
> a, .title_dropdown {
|
|
padding: 1rem 0.5rem;
|
|
border-top: 3px solid transparent;
|
|
transition: $transition;
|
|
|
|
&:hover, &:focus {
|
|
border-top-color: $menu_accent_hover;
|
|
color: $menu_accent_hover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
|
|
li {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dropdown {
|
|
position: relative;
|
|
|
|
.title_dropdown {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
|
|
&:after {
|
|
content: "";
|
|
border: 0.35rem solid transparent;
|
|
border-top-color: rgba(#fff, 0.45);
|
|
margin-left: 0.25em;
|
|
transform: translateY(0.15em);
|
|
}
|
|
}
|
|
|
|
.dropdown__menu {
|
|
position: absolute;
|
|
min-width: 15ch;
|
|
left: 50%;
|
|
top: calc(100% - 0.25rem);
|
|
transition: $transition;
|
|
transform: rotateX(-90deg) translateX(-50%);
|
|
transform-origin: top center;
|
|
visibility: hidden;
|
|
opacity: 0.3;
|
|
padding: 0.5em 0;
|
|
background-color: $menu_background_dropdown_color;
|
|
border-radius: 4px;
|
|
box-shadow: 0 0.15em 0.25em rgba(black, 0.25);
|
|
|
|
a {
|
|
color: $font_menu;
|
|
display: block;
|
|
padding: 0.5em;
|
|
opacity: 0;
|
|
transition: $transition;
|
|
|
|
&:hover {
|
|
background-color: $background_accent_1;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
background-color: $background_accent_1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:after {
|
|
content: "";
|
|
border: 0.5rem solid transparent;
|
|
border-bottom-color: $menu_background_dropdown_color;
|
|
position: absolute;
|
|
top: calc(100% - 1.25rem);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
transition: $transition;
|
|
opacity: 0;
|
|
will-change: opacity;
|
|
}
|
|
|
|
&:hover, &:focus-within {
|
|
.title_dropdown {
|
|
border-top-color: $menu_accent_hover;
|
|
}
|
|
|
|
.dropdown__menu {
|
|
opacity: 1;
|
|
transform: rotateX(0) translateX(-50%);
|
|
visibility: visible;
|
|
|
|
a {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&:after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
|
|
p {
|
|
font-size: 1.125rem;
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// 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 {
|
|
// list-style: none;
|
|
// margin: 0;
|
|
// padding: 0;
|
|
// display: inline;
|
|
// position: relative;
|
|
// li {
|
|
// margin: 0 8px 0 0;
|
|
// padding: 0;
|
|
// a, a:link, a:visited {
|
|
// font-size: $font_size_default;
|
|
// 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;
|
|
// }
|
|
// ul li {
|
|
// display: none;
|
|
// position: absolute;
|
|
// background: green;
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// @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;
|
|
// }
|
|
// }
|
|
// }
|