Eryn Wells
8029f97f9c
Create assets/styles/root to hold all the fragments of the root stylesheet. This should make it easier to find and hack on style. Yay!
87 lines
1.8 KiB
CSS
87 lines
1.8 KiB
CSS
@layer root {
|
|
header.site h1 > a:hover { text-decoration: none; }
|
|
|
|
header.site {
|
|
display: flex;
|
|
width: 100%;
|
|
z-index: 10000;
|
|
}
|
|
|
|
header.site h1 {
|
|
margin: 0;
|
|
order: 1;
|
|
}
|
|
|
|
header.site > .grid {
|
|
align-items: baseline;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0 0.5em;
|
|
margin: 0 auto;
|
|
max-width: var(--content-width);
|
|
padding: 1.5rem 3rem;
|
|
width: 100%;
|
|
}
|
|
|
|
header.site > .grid > nav {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: start;
|
|
list-style: none;
|
|
}
|
|
|
|
header.site nav > li { display: block; }
|
|
|
|
header.site nav:first-of-type {
|
|
justify-content: start;
|
|
order: 2;
|
|
}
|
|
|
|
header.site nav:last-of-type {
|
|
justify-content: end;
|
|
order: 3;
|
|
}
|
|
|
|
@media (max-width: 516px) {
|
|
header.site > .platter {
|
|
border-left: none;
|
|
border-radius: 0;
|
|
border-right: none;
|
|
border-top: none;
|
|
}
|
|
|
|
header.site > .grid { max-width: none; }
|
|
}
|
|
|
|
@media (max-width: 435px) {
|
|
header.site nav:first-of-type { order: 5; }
|
|
}
|
|
|
|
nav.social > li { margin-inline-start: var(--nav-bulleted-spacing); }
|
|
nav.social > li:first-child { margin-inline-start: 0; }
|
|
|
|
.social {
|
|
display: block flex;
|
|
letter-spacing: 2px;
|
|
margin-left: auto;
|
|
order: 2;
|
|
}
|
|
|
|
.social > li > a {
|
|
background-image: var(--url);
|
|
background-repeat: no-repeat;
|
|
background-size: var(--menu-icon-size);
|
|
display: block;
|
|
height: var(--menu-icon-size);
|
|
width: var(--menu-icon-size);
|
|
}
|
|
|
|
.social > li > a > span {
|
|
display: none;
|
|
}
|
|
|
|
.social > li + li:before {
|
|
color: var(--dark);
|
|
padding: 0 0.5rem;
|
|
}
|
|
}
|