diff --git a/src/components/Header.astro b/src/components/Header.astro index 168d8cc..6d82147 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -76,13 +76,7 @@ const navLinks = [ align-items: center; } - svg { - position: absolute; - left: -100; - top: 0; - } - - .active-nav::before { + nav ul li a::before { content: ''; position: absolute; left: -10px; @@ -90,6 +84,19 @@ const navLinks = [ height: 6px; border-radius: 10px; background-color: var(--blue); + opacity: 0; + } + + nav ul li a:hover { + text-decoration: none; + } + + nav ul li a:hover::before { + opacity: 0.6; + } + + .active-nav::before { + opacity: 1; } nav ul li::before { diff --git a/src/components/Tags.astro b/src/components/Tags.astro index ffc741c..cfc19f5 100644 --- a/src/components/Tags.astro +++ b/src/components/Tags.astro @@ -24,6 +24,12 @@ const { tags } = Astro.props border-radius: 25px; background: var(--blue); line-height: 2rem; + transition: filter 0.15s; + } + + .tag:hover { + text-decoration: none; + filter: saturate(120%); } .tag:not(:last-child) { diff --git a/src/styles/global.css b/src/styles/global.css index 50d0019..e65e6b0 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -88,11 +88,11 @@ hr { a { color: var(--blue); text-decoration: none; - transition: opacity 0.15s; } a:hover { - opacity: 0.6; + text-decoration: underline; + filter: saturate(120%); } code { @@ -146,12 +146,13 @@ button, outline: none; border: none; border-radius: 5px; - transition: all 0.15s; + transition: filter 0.15s; } button:hover, .link-button:hover { - opacity: 0.8; + text-decoration: none; + filter: saturate(120%); } button:active,