eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Clean up the header layout and styles

Browse source
This commit is contained in:
Eryn Wells 2022-10-25 17:36:06 -04:00
parent b5a22374bf
commit 27f88ab3b5
2 changed files with 42 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

81
static/styles/root.css
View file

@ -293,47 +293,48 @@ header.site.animated {
}
}
header.site h1 {
header.site > .grid > h1 {
font-family: var(--font-family-site-heading);
font-size: 2em;
margin: 0;
order: 1;
white-space: nowrap;
}
header.site .grid {
header.site > .grid {
align-items: baseline;
display: grid;
display: flex;
flex-wrap: wrap;
gap: 0 0.5em;
grid-template-columns: max-content auto max-content;
grid-template-areas:
"title menu social";
margin: 0 auto;
max-width: var(--content-width);
width: var(--content-width);
padding: 1.5rem 3rem;
width: 100%;
}
@media (max-width: 450px) {
header.site .grid {
grid-template-columns: repeat(2, max-content);
grid-template-rows: repeat(2, max-content);
grid-template-areas:
"title social"
"menu menu";
max-width: var(--content-width);
width: inherit;
header.site > .grid > nav:first-of-type {
justify-content: start;
order: 2;
}
header.site > .grid > nav:last-of-type {
justify-content: end;
order: 3;
}
@media (max-width: 516px) {
header.site > .platter {
border-radius: 0;
}
header.site > .grid {
max-width: none;
}
}
header.site .platter {
margin: 0 auto;
padding: 1.5rem 3rem;
}
header.site .grid nav:first-of-type {
grid-area: menu;
justify-content: start;
}
header.site .grid nav:last-of-type {
grid-area: social;
justify-content: end;
@media (max-width: 435px) {
header.site > .grid > nav:first-of-type {
order: 5;
}
}
html {
@ -369,7 +370,7 @@ main h6 { font-size: var(--body-font-size); }
main h5, main h6 { font-family: var(--font-family-body); }
nav.site {
header.site > .grid > nav {
align-items: center;
display: flex;
font-size: max(1.5rem, 80%);
@ -379,20 +380,21 @@ nav.site {
text-transform: lowercase;
}
nav.site li {
header.site > .grid > nav > li {
color: var(--site-nav-link-color);
display: block;
margin-inline-end: 0.5em;
}
nav.site .active { font-weight: bold; }
nav.bulleted li:first-child::before {
header.site > .grid > nav > .active { font-weight: bold; }
nav.bulleted > li:first-child::before {
color: var(--html-color);
content: "";
margin-inline-end: 0;
}
nav.bulleted li::before {
nav.bulleted > li::before {
color: var(--heading-color);
content: "•";
font-size: 60%;
@ -518,17 +520,14 @@ ol ol {
width: 100%;
}
.social menu li + li {
margin-left: var(--social-menu-padding);
}
.social {
display: flex;
display: block;
letter-spacing: 2px;
margin-left: auto;
order: 2;
}
.social a {
.social > li > a {
background-image: var(--url);
background-repeat: no-repeat;
background-size: var(--menu-icon-size);
@ -537,7 +536,7 @@ ol ol {
width: var(--menu-icon-size);
}
.social a span {
.social > li > a > span {
display: none;
}