Highlight links when focused with TAB

5 files changed, 18 insertions, 13 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;
     }
 
diff --git a/stylesheets/concerts.css b/stylesheets/concerts.css
index ce51401..9ba53c8 100644
--- a/stylesheets/concerts.css
+++ b/stylesheets/concerts.css
@@ -71,6 +71,7 @@ a.thumbnail {
     color: red;
 }
 .event.canceled:hover,
+.event.canceled:focus-within,
 .event.canceled.active {
     opacity: 1;
 }
diff --git a/stylesheets/dark.css b/stylesheets/dark.css
index 455ea72..afcf1d4 100644
--- a/stylesheets/dark.css
+++ b/stylesheets/dark.css
@@ -10,7 +10,7 @@ main {
 footer.social a.lang {
     border-color: white;
 }
-footer.social a.lang:hover {
+footer.social a.lang:hover, footer.social a.lang:focus {
     color: var(--gold);
     background: white;
     border-color: white;
diff --git a/stylesheets/index.css b/stylesheets/index.css
index a107349..4d250fc 100644
--- a/stylesheets/index.css
+++ b/stylesheets/index.css
@@ -2,7 +2,8 @@ body {
     background: no-repeat 70% 30%/cover black url('/images/index/bg1k.jpg');
 }
 
-body > header.banner:hover > a {
+body > header.banner:hover,
+body > header.banner:focus-within {
     color: #e4b63a;
 }
 
@@ -22,7 +23,7 @@ a#next-concert {
     text-decoration: none;
     background: no-repeat center/contain url('/images/calendar.svg');
 }
-a#next-concert:hover {
+a#next-concert:hover, a#next-concert:focus {
     color: #e4b63a;
     background-image: url('/images/calendar-gold.svg');
 }
diff --git a/stylesheets/quatuor.css b/stylesheets/quatuor.css
index 8d84795..7e1131e 100644
--- a/stylesheets/quatuor.css
+++ b/stylesheets/quatuor.css
@@ -50,7 +50,7 @@
         transition: filter 1s, transform 1s;
     }
 
-    #photos img.portrait:hover {
+    #photos a:hover img.portrait, #photos a:focus img.portrait {
         transform: scale(1.05);
     }