diff --git a/_includes/header.njk b/_includes/header.njk index b1e704d..c1a5d66 100644 --- a/_includes/header.njk +++ b/_includes/header.njk @@ -9,13 +9,17 @@ {% css %} header { + display: flex; position: sticky; - backdrop-filter: blur(5px); - background-color: #ffffffcc; top: 0; + min-height: 6.4rem; padding: 2rem 0; + backdrop-filter: blur(5px); + background-color: rgba(255,255,255,.92); + box-shadow: 0 3px 15px hsla(0,0%,39.2%,.12); } .header-container { + width: 100%; max-width: var(--page-width); margin-left: auto; margin-right: auto; @@ -29,5 +33,30 @@ header { } #mainNav li { display: inline; + margin-left: 1rem; +} +#mainNav a { + position: relative; + font-size: 16px; + font-family: Aileron; + font-weight: 500; + line-height: 2; + text-transform: uppercase; + color: var(--color-text); + text-decoration: none; +} +#mainNav a::after { + content: ""; + position: absolute; + background: var(--color-primary); + opacity: 0; + bottom: -4px; + left: 0; + right: 0; + height: 2px; + transition: opacity .3s ease-out; +} +#mainNav a:hover::after { + opacity: 1; } {% endcss %} diff --git a/_layouts/page.njk b/_layouts/page.njk index 5c2668e..b930a4e 100644 --- a/_layouts/page.njk +++ b/_layouts/page.njk @@ -30,6 +30,9 @@ eleventyComputed: --color-primary: {{ eseColor }}; font-size: 17px; } +* { + box-sizing: border-box; +} body { margin: 0; font-family: sans-serif;