Files
jarv.is/components/Header/Header.module.css
T

53 lines
755 B
CSS

.header {
position: sticky;
top: 0;
width: 100%;
height: 4.5em;
padding: 0.7em 1.5em;
border-bottom: 1px solid var(--kinda-light);
background-color: var(--background-header);
backdrop-filter: saturate(180%) blur(5px);
z-index: 1000;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 865px;
margin: 0 auto;
}
.nav > div {
line-height: 0;
}
.name {
flex: 1;
}
@media screen and (max-width: 768px) {
.header {
padding: 0.75em 1.25em;
height: 5.9em;
}
.name {
flex: 0;
}
.menu {
flex: 1;
max-width: 325px;
margin-left: 2.5em;
}
}
@media screen and (max-width: 380px) {
.menu {
max-width: 225px;
margin-left: 1.6em;
}
}