diff --git a/components/Navbar/Navbar.module.css b/components/Navbar/Navbar.module.css index f3ba192..3c2d72f 100644 --- a/components/Navbar/Navbar.module.css +++ b/components/Navbar/Navbar.module.css @@ -7,6 +7,7 @@ --nav-font-weight: 600; --nav-font-color: #141316; --nav-hamburger-icon: var(--nav-font-color); + --nav-outline-color: #0060df; } .noTransition { transition: none !important; @@ -26,11 +27,22 @@ background-color: var(--nav-bg); color: var(--nav-font-color); } + +.nav a:focus-visible, +.nav button:focus-visible { + outline: 2px solid var(--nav-outline-color); + outline-offset: -8px; +} .nav-logo { width: auto; display: flex; } +.nav-logo a:focus-visible { + outline: 2px solid var(--nav-outline-color); + outline-offset: 2px; +} + .nav-logo-image { width: auto; height: 30px; @@ -179,7 +191,7 @@ } .nav-links > li a { - padding: 20px 16px; + padding: 16px 12px; } .nav-links > li:first-child { diff --git a/components/Navbar/NavbarSubMenu.module.css b/components/Navbar/NavbarSubMenu.module.css index 2b5efc3..283db38 100644 --- a/components/Navbar/NavbarSubMenu.module.css +++ b/components/Navbar/NavbarSubMenu.module.css @@ -19,6 +19,11 @@ background-color: var(--nav-bg); } +.nav-submenu > li a:focus-visible { + outline: 2px solid var(--nav-outline-color); + outline-offset: 2px; +} + .nav-submenu.open { max-height: var(--submenu-h); opacity: 1; @@ -109,6 +114,6 @@ } .nav-sub-toggle { position: relative; - padding: 16px 8px; + padding: 16px 12px; } }