a
9aa43df629
The basic parts of the layouts/theme should work. I have only populated 2 albums so far.
84 lines
1.1 KiB
SCSS
84 lines
1.1 KiB
SCSS
.site-header {
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
gap: 1em;
|
|
padding-block: 1em;
|
|
}
|
|
|
|
.site-header .masthead {
|
|
margin-block-start: 1rem;
|
|
}
|
|
|
|
.site-header nav {
|
|
margin-block: 3rem;
|
|
}
|
|
|
|
.site-header ul {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-flow: column;
|
|
align-items: center;
|
|
gap: 1em;
|
|
li.active {
|
|
color: gold;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.site-header nav a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
svg {
|
|
width: 0.75em;
|
|
height: 0.75em;
|
|
margin-inline-start: 0.5rem;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
.site-header input, .site-header label {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 40rem) {
|
|
|
|
.site-header label {
|
|
display: unset;
|
|
svg {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
}
|
|
|
|
.site-header {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"menu logo ."
|
|
"navs navs navs";
|
|
grid-template-columns: 1fr auto 1fr;
|
|
|
|
.menu-icon {
|
|
grid-area: menu;
|
|
margin-left: 2rem;
|
|
margin-top: 1rem;
|
|
}
|
|
.masthead {
|
|
grid-area: logo;
|
|
}
|
|
.navs {
|
|
grid-area: navs;
|
|
}
|
|
}
|
|
|
|
.site-header .navs {
|
|
display: none;
|
|
}
|
|
|
|
.menu-btn:checked ~ .navs {
|
|
display: unset;
|
|
}
|
|
|
|
} |