hardenedbsd-web/src/assets/css/header.css

101 lines
1.5 KiB
CSS
Raw Normal View History

2025-03-08 16:47:10 +01:00
.header {
background-color: var(--black);
position: sticky;
top: 0;
width: 100%;
}
2025-03-08 18:00:46 +01:00
.header ul {
list-style: none;
}
2025-03-08 16:47:10 +01:00
.logo {
display: inline-block;
color: var(--white);
font-size: 60px;
font-weight: 600;
margin-left: 10px;
}
.nav {
width: 100%;
height: 100%;
position: fixed;
background-color: var(--black);
font-weight: 600;
overflow: hidden;
}
.menu a {
display: block;
padding: 30px;
color: var(--white);
}
.menu a:hover {
background-color: var(--gray);
}
.nav {
max-height: 0;
transition: max-height .5s ease-out;
}
.mnav {
cursor: pointer;
float: right;
padding: 40px 20px;
}
.mnav-line {
background: var(--white);
display: block;
height: 2px;
position: relative;
width: 24px;
}
.mnav-line::before,
.mnav-line::after{
background: var(--white);
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.mnav-line::before {
top: 5px;
}
.mnav-line::after {
top: -5px;
}
.slide-menu {
display: none;
}
.slide-menu:checked ~ nav{
max-height: 100%;
}
.slide-menu:checked ~ .mnav .mnav-line {
background: transparent;
}
.slide-menu:checked ~ .mnav .mnav-line::before {
transform: rotate(-45deg);
top:0;
}
.slide-menu:checked ~ .mnav .mnav-line::after {
transform: rotate(45deg);
top:0;
}
body:has(.slide-menu:checked) {
overflow: hidden;
}