]> Git in Space - website/commitdiff
Add :focus rules to make keyboard navigation easier
authorMira Ayre <mi@boxin.space>
Sat, 25 Sep 2021 16:17:09 +0000 (17:17 +0100)
committerMira Ayre <mi@boxin.space>
Sat, 25 Sep 2021 16:17:09 +0000 (17:17 +0100)
global.css

index f2005a1c884cf9f4297051159fa9a7e1611fba0d..50f2cb324b2cc0f458c663910469c68d768d8c81 100644 (file)
@@ -63,7 +63,9 @@ body {
        transition-timing-function : ease-out                                 ;
 }
 
-#banner:hover { transform : rotate(-1.5deg) scale(1.05) ; }
+a:hover > #banner , a:focus > #banner {
+       transform : rotate(-1.5deg) scale(1.05) ;
+}
 
 h2 {
        color       : var(--purp) ;
@@ -79,21 +81,31 @@ div.gif {
        display : block ;
 }
 
-#latest                  { background-image : url('/img/latest.png'   ) ; }
-a.block:hover #latest    { background-image : url('/img/latest.gif'   ) ; }
-#bandcamp                { background-image : url('/img/bandcamp.png' ) ; }
-a.block:hover #bandcamp  { background-image : url('/img/bandcamp.gif' ) ; }
-#mastodon                { background-image : url('/img/mastodon.png' ) ; }
-a.block:hover #mastodon  { background-image : url('/img/mastodon.gif' ) ; }
-#funkwhale               { background-image : url('/img/funkwhale.png') ; }
-a.block:hover #funkwhale { background-image : url('/img/funkwhale.gif') ; }
+#latest { background-image : url('/img/latest.png'   ) ; }
+a.block:hover #latest , a.block:focus #latest {
+       background-image : url('/img/latest.gif') ;
+}
+#bandcamp { background-image : url('/img/bandcamp.png' ) ; }
+a.block:hover #bandcamp , a.block:focus #bandcamp {
+       background-image : url('/img/bandcamp.gif') ;
+}
+#mastodon { background-image : url('/img/mastodon.png' ) ; }
+a.block:hover #mastodon , a.block:focus #mastodon {
+       background-image : url('/img/mastodon.gif') ;
+}
+#funkwhale { background-image : url('/img/funkwhale.png') ; }
+a.block:hover #funkwhale , a.block:focus #funkwhale {
+       background-image : url('/img/funkwhale.gif') ;
+}
 
 a {
        color                      : var(--purp)       ;
        transition                 : text-shadow 0.03s ;
        transition-timing-function : ease-out          ;
 }
-a:hover { text-shadow : 3px 0 1px var(--cyan) , -3px 0 1px var(--pink) ; }
+a:hover , a:focus {
+       text-shadow : 3px 0 1px var(--cyan) , -3px 0 1px var(--pink) ;
+}
 
 a.block {
        text-decoration : none ;
@@ -102,8 +114,8 @@ a.block {
        transition-timing-function : ease-out ;
 }
 
-a.block.r:hover { transform : rotate(-1.5deg) scale(1.05) ; }
-a.block.l:hover { transform : rotate(1.5deg) scale(1.05) ; }
+a.block.l:hover , a.block.l:focus { transform : rotate( 1.5deg) scale(1.05) ; }
+a.block.r:hover , a.block.r:focus { transform : rotate(-1.5deg) scale(1.05) ; }
 
 hr {
        border           : none     ;