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

Use position sticky for the heading! Thanks @hober!

Browse source
This commit is contained in:
Eryn Wells 2022-10-11 07:44:21 -07:00
parent a68540a5c5
commit 413a49067a
1 changed files with 3 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

7
static/styles/root.css
View file

@ -210,7 +210,7 @@ img.circular {
main { main {
max-width: var(--content-width); max-width: var(--content-width);
margin: 0 auto; margin: 0 auto;
margin-block-start: 10.5rem; margin-block-start: var(--body-item-spacing);
width: 100%; width: 100%;
} }
@ -244,7 +244,7 @@ h1, h2, h3, h4, h5, h6 {
header.site { header.site {
display: flex; display: flex;
left: 0; left: 0;
position: fixed; position: sticky;
top: 0.5rem; top: 0.5rem;
visibility: hidden; visibility: hidden;
width: 100%; width: 100%;
@ -274,9 +274,8 @@ header.site h1 {
header.site .grid { header.site .grid {
align-items: baseline; align-items: baseline;
display: grid; display: grid;
gap: 0.5em; gap: 0 0.5em;
grid-template-columns: max-content auto max-content; grid-template-columns: max-content auto max-content;
grid-template-rows: minmax(2em, min-content);
grid-template-areas: grid-template-areas:
"title menu social"; "title menu social";
max-width: var(--content-width); max-width: var(--content-width);