add header styles
This commit is contained in:
parent
115c0545ef
commit
cc3696f77d
|
@ -0,0 +1,75 @@
|
||||||
|
.header-bg {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
z-index: $z-index__header;
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__item {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav__link {
|
||||||
|
display: block;
|
||||||
|
padding: 0.6em 1.5em;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-nav {
|
||||||
|
&__menu-btn {
|
||||||
|
@media (max-width: $bp-s) {
|
||||||
|
margin: 0;
|
||||||
|
padding: 6px 0 6px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__nav-list {
|
||||||
|
@media (max-width: $bp-s) {
|
||||||
|
position: fixed;
|
||||||
|
top: 4rem;
|
||||||
|
bottom: 2rem;
|
||||||
|
left: 2rem;
|
||||||
|
right: 2rem;
|
||||||
|
|
||||||
|
background-color: rgba(pink, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-text {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-icon {
|
||||||
|
display: block;
|
||||||
|
height: 1.1em;
|
||||||
|
width: 1.1em;
|
||||||
|
|
||||||
|
border-radius: 3px;
|
||||||
|
background-color: pink;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
Reference in New Issue