:root { --scroll-position: 0px; } header { position: sticky; top: 0; z-index: 4; height: 192px; padding-top: 10em; padding-left: 4em; padding-right: 4em; transform: translateY(0); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .scrolled header { transform: translateY(-5.5em); } @media screen and (min-width: 2000px) { .scrolled header { transform: translateY(-6em); } } @media (max-width: 1200px) { .scrolled header { transform: translateY(-3em); } header { padding-top: 5em; padding-left: 1em; padding-right: 1em; } } @media (max-width: 860px) { .scrolled header { transform: translateY(-2.5em); } } @media (max-width: 695px) { header { position: fixed; top: 0; width: 100%; transition: transform 0.3s ease; } .scrollDown header { transform: translateY(-100%); } .scrollUp header { transform: translateY(0); } } .logo { content: var(--avatar); opacity: 1; transition: opacity 0.15s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.15s, 0s; transform: scale(1); margin-top: -1em; } .toggle .logo { opacity: 0; transition: opacity 0.05s ease; transition-delay: 0s; } .scrolled .logo { transform: scale(0.8); } /* lock body scroll while the nav menu overlay is open (page scrolls on ) */ html:has(body.toggle) { overflow: hidden; } /* non-store footer: Privacy / Press / Store links under the copyright (index + article pages) */ .footer:has(.footer-links) .copyright { margin-bottom: 0.4em; } .footer-links { margin: 0 0 10em; font-family: "JetBrains Mono"; font-size: 0.7em; font-weight: 300; opacity: 0.4; } .footer-links a { color: inherit; text-decoration: none !important; margin-right: 0.7em; transition: opacity 0.2s ease; } .footer-links a:hover { opacity: 0.7; } /* article pages (.md-container) render this footer outside .md-typeset, where the body base varies, which shrinks the em-sized footer pieces; pin all three to the index footer's scale via the stable root rem (icons 16px, copyright 12.8px, links 11.2px) so every footer matches */ .md-container .footer-links { font-size: 0.56rem; } .md-container .socialpar { font-size: 0.8rem; } .md-container .copyright { font-size: 0.64rem; }