89 lines
1.4 KiB
SCSS
89 lines
1.4 KiB
SCSS
.site-header {
|
|
display: grid;
|
|
grid-area: header;
|
|
grid-gap: 0;
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: auto auto auto auto;
|
|
grid-template-areas: "header-title" "header-tagline" "header-icons" "header-nav";
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
z-index: 1;
|
|
|
|
&__title,
|
|
&__tagline,
|
|
&__icons,
|
|
&__nav {
|
|
background-color: $light;
|
|
margin: 0;
|
|
}
|
|
|
|
&__title,
|
|
&__tagline,
|
|
&__icons {
|
|
padding: 5px 0;
|
|
}
|
|
|
|
&__title {
|
|
font-weight: normal;
|
|
grid-area: header-title;
|
|
}
|
|
|
|
&__tagline {
|
|
grid-area: header-tagline;
|
|
}
|
|
|
|
&__icons {
|
|
grid-area: header-icons;
|
|
border-bottom: 2px solid $dark;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
&__nav {
|
|
grid-area: header-nav;
|
|
margin: auto;
|
|
width: 100%;
|
|
@include mq('desktop') {
|
|
width: 60%;
|
|
}
|
|
|
|
& ul {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
& li {
|
|
width: calc(100% / 3);
|
|
display: block;
|
|
float: left;
|
|
border-bottom: 2px solid black;
|
|
border-left: 1px solid black;
|
|
border-right: 1px solid black;
|
|
padding: 0.4em;
|
|
background-color: inherit;
|
|
}
|
|
|
|
& a:first-child li {
|
|
border-left: 2px solid black;
|
|
}
|
|
|
|
& a:last-child li {
|
|
border-right: 2px solid black;
|
|
}
|
|
|
|
& li {
|
|
&:hover {
|
|
background-color: #ffffd0;
|
|
}
|
|
|
|
& a {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|