better current indication

docs/css/images/arrow_effect.svg

@@ -0,0 +1,6 @@
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="50" width="24.999" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 24.998724 50.000001">
+ <g transform="translate(-25.001 -1002.4)">
+  <path style="fill-rule:evenodd;fill:#ffffff" d="m25.001 1002.4 24.999 25v-25z"/>
+  <path style="fill-rule:evenodd;fill:#ffffff" d="m50 1027.4-24.999 25h24.999z"/>
+ </g>
+</svg>

docs/css/styles.css

@@ -378,9 +378,14 @@ caption {
   margin-left: 0.125rem;
 }
 
-.pattern [aria-current] span {
-  text-decoration: underline;
-  text-decoration-skip: ink;
+.pattern [aria-current] {
+  background-color: #111;
+  background-image: url(images/arrow_effect.svg);
+  background-position: right center;
+  background-size: 125%;
+  background-repeat: no-repeat;
+  color: #fff;
+  padding: 0.5em 1em 0.5em;
 }
 
 /* menu button */
@@ -877,6 +882,10 @@ h1 svg {
     padding: 0.75rem 0;
   }
 
+  .pattern [aria-current] {
+    background-image: none;
+  }
+
   .pattern + .pattern {
     border-top: 1px solid;
     margin-top: 0;

themes/infusion/static/css/images/arrow_effect.svg

@@ -0,0 +1,6 @@
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="50" width="24.999" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 24.998724 50.000001">
+ <g transform="translate(-25.001 -1002.4)">
+  <path style="fill-rule:evenodd;fill:#ffffff" d="m25.001 1002.4 24.999 25v-25z"/>
+  <path style="fill-rule:evenodd;fill:#ffffff" d="m50 1027.4-24.999 25h24.999z"/>
+ </g>
+</svg>

themes/infusion/static/css/styles.css

@@ -378,9 +378,14 @@ caption {
   margin-left: 0.125rem;
 }
 
-.pattern [aria-current] span {
-  text-decoration: underline;
-  text-decoration-skip: ink;
+.pattern [aria-current] {
+  background-color: #111;
+  background-image: url(images/arrow_effect.svg);
+  background-position: right center;
+  background-size: 125%;
+  background-repeat: no-repeat;
+  color: #fff;
+  padding: 0.5em 1em 0.5em;
 }
 
 /* menu button */
@@ -877,6 +882,10 @@ h1 svg {
     padding: 0.75rem 0;
   }
 
+  .pattern [aria-current] {
+    background-image: none;
+  }
+
   .pattern + .pattern {
     border-top: 1px solid;
     margin-top: 0;