90 lines
1.5 KiB
SCSS
90 lines
1.5 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";
|
||
|
|
inset-block-start: 0;
|
||
|
|
inset-inline-start: 0;
|
||
|
|
inline-size: 100%;
|
||
|
|
text-align: center;
|
||
|
|
z-index: 1;
|
||
|
|
|
||
|
|
&__title,
|
||
|
|
&__tagline,
|
||
|
|
&__icons,
|
||
|
|
&__nav {
|
||
|
|
background-color: $light;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__title,
|
||
|
|
&__tagline,
|
||
|
|
&__icons {
|
||
|
|
padding-block: 5px;
|
||
|
|
padding-inline: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__title {
|
||
|
|
font-weight: normal;
|
||
|
|
grid-area: header-title;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__tagline {
|
||
|
|
grid-area: header-tagline;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__icons {
|
||
|
|
grid-area: header-icons;
|
||
|
|
border-block-end: 2px solid $dark;
|
||
|
|
margin-block-end: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
&__nav {
|
||
|
|
grid-area: header-nav;
|
||
|
|
margin: auto;
|
||
|
|
inline-size: 100%;
|
||
|
|
|
||
|
|
@include mq("large") {
|
||
|
|
inline-size: 60%;
|
||
|
|
}
|
||
|
|
|
||
|
|
& ul {
|
||
|
|
margin-block: 0;
|
||
|
|
|
||
|
|
& li {
|
||
|
|
inline-size: calc(100% / 3);
|
||
|
|
display: block;
|
||
|
|
float: inline-start;
|
||
|
|
border-block-end: 2px solid black;
|
||
|
|
border-inline: 1px solid black;
|
||
|
|
padding: 0.4em;
|
||
|
|
background-color: inherit;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: #ffffd0;
|
||
|
|
}
|
||
|
|
|
||
|
|
& a {
|
||
|
|
inline-size: 100%;
|
||
|
|
block-size: 100%;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& a:first-child li {
|
||
|
|
border-inline-start: 2px solid black;
|
||
|
|
}
|
||
|
|
|
||
|
|
& a:last-child li {
|
||
|
|
border-inline-start: 2px solid black;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|