diff --git a/_includes/header.css b/_includes/header.css index 12c4968..dc90719 100644 --- a/_includes/header.css +++ b/_includes/header.css @@ -30,7 +30,7 @@ header { margin-left: 1.9rem; } -#mainNav a { +.nav-item { position: relative; font-size: 16px; font-family: Aileron; @@ -41,7 +41,7 @@ header { text-decoration: none; } -#mainNav a::after { +.nav-item::after { content: ""; position: absolute; background: var(--color-primary); @@ -53,7 +53,26 @@ header { transition: opacity .3s ease-out; } -#mainNav a:hover::after, -#mainNav .nav-active a::after { +.nav-item:hover::after, +.nav-item.active::after { opacity: 1; } + +.nav-item-stream { + padding: .75rem 1.4rem; + border: 2px solid var(--color-primary); + border-radius: 3rem; + color: var(--color-primary); + font-family: Aileron; + font-weight: 500; + letter-spacing: 2px; + text-decoration: none; + text-transform: uppercase; + transition: .2s ease-out; + transition-property: color, background-color; +} + +.nav-item-stream:hover { + color: var(--color-livestream-active); + background-color: var(--color-primary); +} diff --git a/_includes/header.njk b/_includes/header.njk index 0ac30f6..9dbfffa 100644 --- a/_includes/header.njk +++ b/_includes/header.njk @@ -7,10 +7,14 @@ {% set navPages = collections.mainNav | pageLang | eleventyNavigation %} diff --git a/_includes/page.css b/_includes/page.css index 223334f..796efd3 100644 --- a/_includes/page.css +++ b/_includes/page.css @@ -66,5 +66,6 @@ p { --page-width: 1280px; --color-text: #495057; --color-primary: {{ eseColor }}; + --color-livestream-active: #fff; }