header {
position: relative;
height: 5rem;
z-index: 1000;
}
.logo {
position: absolute;
top: 2rem;
left: 1rem;
font-size: 1.5rem;
font-weight: bold;
color: var(--text-light);
z-index: 1002;
}
.menu-checkbox {
display: none;
}
.menu-toggle {
display: block;
position: absolute;
top: 2rem;
right: 1rem;
width: 2rem;
height: 2rem;
cursor: pointer;
z-index: 1001;
}
.menu-toggle div {
width: 100%;
height: 3px;
background-color: var(--text-light);
margin-top: 5px;
margin-bottom: 5px;
transition: 0.3s ease;
}
nav {
display: none;
flex-direction: column;
background-color: rgba(0,0,0,0.8);
position: absolute;
top: 5.5rem;
right: 1rem;
padding: 1rem;
border-radius: 0.5rem;
z-index: 1000;
}
nav a {
color: var(--text-light);
text-decoration: none;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
input[type="checkbox"]:checked ~ nav {
display: flex;
}
details.profile-menu {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 1001;
}
details.profile-menu summary {
list-style-type: none;
cursor: pointer;
}
details.profile-menu summary::-webkit-details-marker {
display: none;
}
.avatar {
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: var(--accent);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
details.profile-menu ul {
display: none;
position: absolute;
right: 0;
margin-top: 0.5rem;
background-color: rgba(0,0,0,0.8);
padding: 0.5rem;
border-radius: 0.5rem;
list-style-type: none;
}
details.profile-menu[open] ul {
display: block;
}
details.profile-menu ul li a {
color: var(--text-light);
text-decoration: none;
display: block;
padding: 0.25rem 0.5rem;
}
details.profile-menu ul li + li {
margin-top: 0.25rem;
}
@media only screen and (min-width: 1024px) {
.menu-toggle {
display: none;
}
nav {
display: flex;
flex-direction: row;
background: none;
position: absolute;
top: 1rem;
right: 2rem;
padding: 0;
}
nav a {
margin-left: 2rem;
font-size: 0.95rem;
}
.logo {
top: 1rem;
left: 2rem;
font-size: 1.75rem;
}
}