Cataloguer/assets/css/layout/_header.scss

89 lines
1.4 KiB
SCSS
Raw Normal View History

2022-12-17 18:41:44 +00:00
.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 {
2023-02-17 20:22:09 +00:00
width: calc(100% / 4);
2022-12-17 18:41:44 +00:00
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;
}
}
}
}