Fixed lang menu not activable on touch screens.

The drop-down used to use the :hover pseudo-class, but it does not work
on touch screens. Has been replaced by a checkbox with :checked
pseudo-class.

assets/css/main.css

@@ -206,6 +206,15 @@ a.button:hover {
 }
 
 /* ======= Language ======= */
+#lang-dropdown {
+  display: none;
+}
+
+#lang-dropdown:checked + label {
+  display: block;
+  text-align: left;
+}
+
 .lang-dropdown {
   position: absolute;
   left: 90%;
@@ -218,9 +227,9 @@ a.button:hover {
   background-color: #fcfcfc;
   border-style: solid;
   border-width: 1px;
-  border-radius: 15%;
+  border-radius: 10%;
   border-color: #aab7c5;
-  border-radius: 15%;
+  margin-top: 10px;
 }
 .lang-dropdown-menu ul {
   list-style-type: none;
@@ -230,15 +239,16 @@ a.button:hover {
 .lang-dropdown-menu li{
   padding: 0;
   margin: 0;
-  border-radius: 15%;
+  border-radius: 10%;
 }
 .lang-dropdown-menu a {
+  display: block;
   color: #778492;
   text-decoration: none;
   padding: 10px 30px;
 }
 .lang-dropdown-menu li:hover {background: #e4e4e4;}
-.lang-dropdown:hover .lang-dropdown-menu {display: block;}
+#lang-dropdown:checked ~ .lang-dropdown-menu {display: block;}
 
 /* ======= Top Menu ======= */
 .topmenu {

templates/partials/lang.html.twig

@@ -1,5 +1,5 @@
 <div class="lang-dropdown">
-  <span class="current-lang">&nbsp;{{ grav.language.getActive }}&nbsp;</span> <i class="icon fa fa-angle-down"></i>
+  <input type="checkbox" id="lang-dropdown"/> <label for="lang-dropdown"><span class="current-lang">&nbsp;{{ grav.language.getActive }}&nbsp;</span> <i class="icon fa fa-angle-down"></i></label>
   <div class="lang-dropdown-menu">
     <ul>
       {% for lang in system.languages.supported %}