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

6
layouts/partials/header.html
View file

@ -1,6 +1,5 @@
<header class="site">
<div class="platter">
<div class="grid">
<div class="platter grid">
<h1 class="site">
<a class="site-name" href="{{ `` | absURL }}">Eryn Wells</a>
</h1>
@ -18,7 +17,7 @@
</nav>
{{ end }}
<nav class="site social">
<nav class="social">
<li><a style="--url: var(--twitter-icon)" href="https://twitter.com/erynofwales" target="_blank" aria-label="twitter"><span>tw</span></a></li>
<li><a style="--url: var(--github-icon)" href="https://github.com/erynofwales" target="_blank" aria-label="github"><span>gh</span></a></li>
<li><a style="--url: var(--instagram-icon)" href="https://instagram.com/erynofwales" target="_blank" aria-label="instagram"><span>ig</span></a></li>
@ -26,6 +25,5 @@
<li><a style="--url: var(--rss-icon)" href="{{ .RelPermalink }}" aria-label="rss"><span>rss</span></a></li>
{{ end }}
</nav>
</div>
</div>
</header>

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;
}