[TASK] Mobile optimization

.sass-lint.yml

@@ -1,3 +1,6 @@
 rules:
   no-color-literals: 0
   single-line-per-selector: 0
+  # Allow for new prefixes like -webkit-tap-highlight-color or antialiasing
+  # Can maybe be enabled again with sass-lint 1.8 https://github.com/sasstools/sass-lint/pull/709
+  no-vendor-prefixes: 0

scss/modules/_base.scss

@@ -1,4 +1,5 @@
 body {
+  -webkit-tap-highlight-color: transparent;
   background: $color-white;
   color: $color-black;
   font-family: $font-family;

scss/modules/_leaflet-layer.scss

@@ -1,11 +1,19 @@
 .leaflet-control-layers {
-  background: none;
+  &.leaflet-control {
+    background: transparent;
+    border: 0;
     border-radius: 0;
     box-shadow: none;
+    margin: 0;
+    opacity: .7;
+  }
 }
 
-.leaflet-control-layers-toggle {
+.leaflet-control-container {
+  .leaflet-control-layers-toggle {
     background: none;
+    height: auto;
+    width: auto;
 
     &::before {
       color: $color-primary;
@@ -17,6 +25,7 @@
       speak: none;
       text-rendering: auto;
     }
+  }
 }
 
 .leaflet-control-layers-expanded {

scss/modules/_map.scss

@@ -15,7 +15,8 @@
       margin-left: $buttondistance;
     }
     @media screen and (max-width: $minscreenwidth) {
-      right: 0;
+      right: -1rem;
+      top: 0;
       transform: scale(.8);
     }
   }

scss/modules/_tabs.scss

@@ -10,13 +10,13 @@
   font-family: $font-family-secondary;
   list-style: none;
   margin: 0;
-  padding: 1em 0 0;
+  padding: 0;
 
   li {
     color: rgba($color-black, .5);
     cursor: pointer;
     flex: 1 1 auto;
-    padding: .5em .5em 1em;
+    padding: 1.3em .5em 1em;
     text-align: center;
     text-transform: uppercase;