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

Move site header layout styles to columns; fix nav spacing

Browse source 
Do a bit of testing on Chrome too.
This commit is contained in:
Eryn Wells 2023-09-30 11:56:45 -07:00
parent 17f576406f
commit 20e76897ff
7 changed files with 141 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

103
assets/styles/root/050_site_header.css
View file

@ -17,104 +17,13 @@
}
}
header.site a[href],
header.site a[href]:hover {
color: inherit;
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;
}
#social-menu-mastodon img {
content: var(--mastodon-icon);
position: relative;
top: 1px;
}
#social-menu-mastodon img { content: var(--mastodon-icon); }
#social-menu-github img { content: var(--github-icon); }
#social-menu-instagram img { content: var(--instagram-icon); }
#social-menu-feed img { content: var(--feed-icon); }
#social-menu-mastodon img {
position: relative;
top: 1px;
}
}