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

Use position fixed for header animation; then position sticky once animation completes

Browse source
This commit is contained in:
Eryn Wells 2022-10-15 10:17:35 -07:00
parent 172a35e27f
commit 9493b94691
2 changed files with 18 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

19
static/styles/root.css
View file

@ -240,6 +240,11 @@ h1, h2, h3, h4, h5, h6 {
line-height: var(--body-header-line-height);
}
h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child {
margin-block-start: 0;
}
h1.site {
color: rgb(var(--mid-blue));
font-size: 2.5em;
@ -265,15 +270,14 @@ h1.site a:hover { text-decoration: none; }
header.site {
display: flex;
left: 0;
position: sticky;
top: 0.5rem;
position: fixed;
top: 0;
visibility: hidden;
width: 100%;
z-index: 10000;
}
header.site.visible {
visibility: visible;
}
header.site.visible { visibility: visible; }
header.site.sticky { position: sticky; }
header.site.animated {
animation: site-header-slide-in var(--transition-duration) ease-out;
}
@ -282,7 +286,7 @@ header.site.animated {
top: -200px;
}
to {
top: 0.5rem;
top: 0;
}
}
@ -348,8 +352,7 @@ img.circular {
main {
max-width: var(--content-width);
margin: 0 auto;
margin-block-start: var(--body-item-spacing);
margin: var(--body-item-spacing) auto;
width: 100%;
}