0x221e/assets/sass/components/_header.scss

138 lines
2.1 KiB
SCSS

@import "../utils/variables";
.header {
font-family: $fontHeader;
padding: 0 20px;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
width: $width;
}
.headerWrapper {
overflow: auto;
box-sizing: border-box;
background-color: $backgroundDarker;
display: flex;
justify-content: center;
flex-shrink: 0;
}
.headerLinks {
ul {
list-style: none;
padding: 0;
margin: 0;
li {
display: inline;
margin: 5px;
a {
color: $white;
text-decoration: none;
}
}
}
}
.terminal {
color: $white;
text-decoration: none;
display: flex;
gap: 2px;
align-items: center;
}
.terminal::after {
content: "";
width: 5px;
height: 15px;
background: #fff;
display: inline-block;
animation: blinker 1.085s steps(2) infinite;
}
@keyframes blinker {
0% {
opacity: 0;
}
}
.hamb {
cursor: pointer;
float: right;
display: none;
}
.hamb-line {
background: $white;
display: block;
height: 2px;
position: relative;
width: 24px;
} /* Style span tag */
.hamb-line::before,
.hamb-line::after {
background: $white;
content: "";
display: block;
height: 100%;
position: absolute;
transition: all 0.2s ease-out;
width: 100%;
}
.hamb-line::before {
top: 5px;
}
.hamb-line::after {
top: -5px;
}
.side-menu {
display: none;
}
.side-menu:checked ~ .headerLinks {
max-height: 100%;
}
.side-menu:checked ~ .hamb .hamb-line {
background: transparent;
}
.side-menu:checked ~ .hamb .hamb-line::before {
transform: rotate(-45deg);
top: 0;
}
.side-menu:checked ~ .hamb .hamb-line::after {
transform: rotate(45deg);
top: 0;
}
@media screen and (max-width: 768px) {
.headerLinks {
width: 100%;
height: 100%;
position: fixed;
top: 60px;
left: 0;
background-color: $backgroundDark;
overflow: hidden;
max-height: 0;
transition: max-height 0.5s ease-out;
display: flex;
align-items: center;
justify-content: center;
ul {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
.hamb {
display: block;
}
}