Highlight links when focused with TAB

1 files changed, 12 insertions, 9 deletions

diff --git a/stylesheets/commun.css b/stylesheets/commun.css
index 4581f85..1afa1b6 100644
--- a/stylesheets/commun.css
+++ b/stylesheets/commun.css
@@ -19,7 +19,7 @@ a.current {
 header a {
     text-decoration: none;
 }
-nav a:hover {
+nav a:hover, nav a:focus {
     color: var(--gold);
     background: white;
 }
@@ -43,10 +43,11 @@ header.banner h1 {
 header.banner img, .social img {
     filter: brightness(0);
 }
-header.banner:hover img, .social a:hover img {
+header.banner a:hover img, .social a:hover img,
+header.banner a:focus img, .social a:focus img {
     filter: none;
 }
-header.banner:hover {
+header.banner:hover, header.banner:focus-within {
     color: var(--gold);
 }
 
@@ -75,7 +76,7 @@ footer.social a {
     font-size: 1.2rem;
     font-weight: 600;
 }
-footer.social a.contact:hover {
+footer.social a.contact:hover, footer.social a.contact:focus {
     color: var(--gold);
     background: white;
 }
@@ -84,7 +85,7 @@ a.lang {
     border: 0.15rem solid black;
     border-radius: 50%;
 }
-a.lang:hover {
+a.lang:hover, a.lang:focus {
     color: white;
     background: var(--gold);
     border: 0.15rem solid var(--gold);
@@ -183,11 +184,11 @@ footer.legal {
         max-height: 0;
         transition: max-height 0.5s;
     }
-    nav li.dropdown:hover > a {
+    nav li.dropdown:hover > a, nav li.dropdown:focus-within > a {
         background: white;
         color: var(--gold);
     }
-    nav li.dropdown:hover ul {
+    nav li.dropdown:hover ul, nav li.dropdown:focus-within ul  {
         /* ⚠ Magic constant: must be big enough to show the whole dropdown,
            but not too big otherwise the transition will be "delayed". */
         max-height: 20rem;
@@ -195,7 +196,7 @@ footer.legal {
     nav li.dropdown > ul > li {
         list-style-type: none;
     }
-    nav li.dropdown > ul > li:hover {
+    nav li.dropdown > ul > li:hover, nav li.dropdown > ul > li:focus {
         background: white;
     }
     nav li.dropdown > ul > li a {
@@ -303,7 +304,9 @@ footer.legal {
         filter: brightness(0);
     }
     header.slidingmenu > input:hover ~ img.button.open,
-    header.slidingmenu > input:hover ~ .content > img.button.close {
+    header.slidingmenu > input:focus ~ img.button.open,
+    header.slidingmenu > input:hover ~ .content > img.button.close,
+    header.slidingmenu > input:focus ~ .content > img.button.close {
         filter: none;
     }