Make the language selector work without javascript.

Note that we found a "bug" in browsers, using keyboard navigation.
First, focus the language selector.
When tabbing to the next anchor, the focus is lost and the next anchor
disappears, so the element focus goes into the void and the loop resets.

Really not sure about how to solve this.

user/themes/textbook/css/custom.css

@@ -38,6 +38,14 @@ details summary {
     cursor: pointer;
 }
 
+/**********************************************************************************************************************/
+/** FIX FOR DIAGRAMS **************************************************************************************************/
+
+.mermaid foreignObject {
+    overflow: auto;
+}
+
+
 /**********************************************************************************************************************/
 
 /* Hotfix for https://github.com/getgrav/grav-theme-quark/issues/9 */
@@ -53,6 +61,7 @@ section#header { z-index: 2; }
     -o-transform: initial !important;
     -ms-transform: initial !important;
     transform: initial !important;
+    margin-right: 4.4rem !important;
 }
 
 /* Little fix for the anchors plugin */
@@ -160,6 +169,10 @@ iframe.geogebra {
     opacity: 0;
 }
 
+#mobile-navigation-toggle:focus ~ .mobile-menu .button_container {
+    outline: 1px dotted darkcyan;
+}
+
 #mobile-navigation-toggle:checked {
     position: fixed;
 }
@@ -201,10 +214,16 @@ iframe.geogebra {
     padding-bottom: 0.1em;
 }
 
-/*.mobile-menu ul ul ul {*/
-/*    line-height: 1.4rem;*/
-/*    font-size: 1.4rem;*/
-/*}*/
+/* Only works on webkit, duh. Can't find this for firefox */
+.mobile-menu summary:focus::-webkit-details-marker {
+    color: #fafafa;
+}
+.mobile-menu summary {
+    border-right: 4px solid transparent;
+}
+.mobile-menu summary:focus {
+    border-right: 4px solid #fafafa;
+}
 
 .mobile-menu li summary {
     padding: .4em 0.05em .2em 0.4em;
@@ -229,3 +248,30 @@ iframe.geogebra {
 
 /**********************************************************************************************************************/
 
+#language-selector-button:hover ~ *,
+#language-selector-button:focus ~ * {
+    display: block;
+    visibility: visible;
+}
+
+#langSelectorList {
+    margin: 0;
+    /*visibility: hidden;*/
+    /*display: block !important;*/
+    /*animation: test_show 1.5s ease-in-out;*/
+    /*animation-delay: 1s;*/
+}
+#langSelectorList:focus-within,
+#langSelectorList:hover,
+#langSelectorList:focus {
+    display: block;
+    visibility: visible;
+}
+
+/*@keyframes test_show {*/
+/*    0%    {display: block;}*/
+/*    100%  {display: none;}*/
+/*}*/
+
+/**********************************************************************************************************************/
+

user/themes/textbook/templates/partials/base.html.twig

@@ -29,7 +29,7 @@
         {# TODO: ZEPTO JS PLS #}
 {# Yes! We managed to remove all these crappy dependencies \o/ #}
 {# … No we did not, not until we remake the language selector #}
-        {% do assets.addJs('jquery', 101) %}
+{#        {% do assets.addJs('jquery', 101) %}#}
 {#        {% do assets.addJs('theme://js/jquery.treemenu.js', {group:'bottom'}) %}#}
 {#        {% do assets.addJs('theme://js/site.js', {group:'bottom'}) %}#}
     {% endblock %}

user/themes/textbook/templates/partials/language-selector.html.twig

 <div class="language-selector">
-  <button class="btn" type="button" data-dropdown="langSelectorList">
+  <button id="language-selector-button" class="btn" type="button" data-dropdown-nooope="langSelectorList">
     {% if language_display.button == 'default' or language_display.button == 'flag' %}
     <img alt="{{ native_name(language_selector.current)|capitalize }}" src="{{ path_flags ~ language_selector.current }}.png" />
     {% endif %}