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

12
assets/styles/root.css
View file

@ -1,14 +1,2 @@
@layer reset, typography, root, layout, section, page, utility;
:root {
--menu-icon-size: 20px;
}
@media (prefers-color-scheme: dark) {
:root {
--twitter-icon: url(/icons/twitter-dark.svg);
--github-icon: url(/icons/github-dark.svg);
--instagram-icon: url(/icons/instagram-dark.svg);
--feed-icon: url(/icons/rss-dark.svg);
}
}

16
assets/styles/root/002_colors.css
View file

@ -156,6 +156,10 @@
background-clip: text;
color: transparent;
}
h1.gradient a[href] {
color: inherit;
}
}
header.site nav > li {
@ -198,12 +202,16 @@
background-color: inherit;
}
.title, .title a {
color: var(--color);
}
.post header a,
.post header a:visited {
color: inherit;
}
.social > li + li:before {
color: var(--dark);
}
.title, .title a {
color: var(--color);
}
}

95
assets/styles/root/002_columns.css
View file

@ -6,6 +6,7 @@
--list-item-block-gap: var(--body-item-spacing);
--margin-min-width: var(--body-item-spacing);
--margin-max-width: 1fr;
--menu-icon-size: 20px;
--nav-bulleted-spacing: 0.75rem;
}
@ -159,6 +160,60 @@
width: 100%;
}
header.site {
display: flex;
width: 100%;
}
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;
}
@media (max-width: 435px) {
header.site nav:first-of-type { order: 5; }
}
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; }
}
img {
height: auto;
max-width: 100%;
@ -192,12 +247,16 @@
padding-block-start: 0.5em;
}
nav.bulleted>li:first-child::before {
margin-inline: 0;
nav.bulleted > li:not(:first-child)::before {
margin-inline-start: var(--nav-bulleted-spacing);
}
nav.bulleted>li::before {
margin-inline: var(--nav-bulleted-spacing);
nav.social > li {
margin-inline-start: var(--nav-bulleted-spacing);
}
nav.social > li:first-child {
margin-inline-start: 0;
}
ul, ol {
@ -240,6 +299,10 @@
display: grid;
grid-template-columns: subgrid;
}
.list .post header h1 {
grid-column: content-start / content-end;
}
}
.list .post time {
@ -329,12 +392,30 @@
grid-column: gutter-start / gutter-end;
}
.post p,
.post .tags,
.post .title {
.post > * {
grid-column: content-start / content-end;
}
.social {
display: block flex;
margin-left: auto;
order: 2;
}
.social > li > a {
display: block;
height: var(--menu-icon-size);
width: var(--menu-icon-size);
}
.social > li > a > span {
display: none;
}
.social > li + li:before {
padding: 0 0.5rem;
}
.youtube iframe {
aspect-ratio: 16 / 9;
margin-bottom: -3px;

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

15
assets/styles/root/050_typography.css
View file

@ -80,7 +80,17 @@
content: "↳";
}
header.site nav > .active { font-weight: bold; }
header.site h1 > a:hover {
text-decoration: none;
}
header.site nav {
list-style: none;
}
header.site nav > .active {
font-weight: bold;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-family-heading);
@ -157,6 +167,9 @@
line-height: var(--line-height);
}
.social {
letter-spacing: 2px;
}
.title {
font-size: var(--h5-size);