💄 Updated layout for language selection

src/app/app.vue

@@ -139,6 +139,10 @@
     display: flex;
     justify-content: center;
     align-items: flex-start;
+
+    &.no-scroll {
+      overflow: hidden;
+    }
   }
 
   body {
@@ -260,6 +264,7 @@
 
     @media (max-width: 1050px) {
       position: static;
+      z-index: 0;
       justify-content: center;
       margin-top: $base-gap;
     }

src/assets/icons/flag-de.js

@@ -4,7 +4,7 @@ icon.register({
   'flag-de': {
     width: 16,
     height: 16,
-    viewBox: '0 0 512 512',
-    data: '<path pid="0" d="M473.655 88.276H38.345C17.167 88.276 0 105.443 0 126.621v73.471h512v-73.471c0-21.178-17.167-38.345-38.345-38.345z" _fill="#464655"/><path pid="1" d="M0 385.379c0 21.177 17.167 38.345 38.345 38.345h435.31c21.177 0 38.345-17.167 38.345-38.345v-73.471H0v73.471z" _fill="#ffe15a"/><path pid="2" _fill="#ff4b55" d="M0 200.09h512V311.9H0z"/>'
+    viewBox: '0 0 5 3',
+    data: '<path pid="0" d="M0 0h5v3H0z"/><path pid="1" _fill="#D00" d="M0 1h5v2H0z"/><path pid="2" _fill="#FFCE00" d="M0 2h5v1H0z"/>'
   }
 })

src/assets/icons/flag-en.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'flag-en': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 60 30',
+    data: '<clipPath id="svgicon_flag-en_a"><path pid="0" d="M30 15h30v15zv15H0zH0V0zV0h30z"/></clipPath><path pid="1" d="M0 0v30h60V0z" _fill="#00247d"/><path pid="2" d="M0 0l60 30m0-30L0 30" _stroke="#fff" stroke-width="6"/><path pid="3" d="M0 0l60 30m0-30L0 30" clip-path="url(#svgicon_flag-en_a)" _stroke="#cf142b" stroke-width="4"/><path pid="4" d="M30 0v30M0 15h60" _stroke="#fff" stroke-width="10"/><path pid="5" d="M30 0v30M0 15h60" _stroke="#cf142b" stroke-width="6"/>'
+  }
+})

src/assets/icons/flag-fr.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'flag-fr': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 3 2',
+    data: '<path pid="0" _fill="#ED2939" d="M0 0h3v2H0z"/><path pid="1" _fill="#fff" d="M0 0h2v2H0z"/><path pid="2" _fill="#002395" d="M0 0h1v2H0z"/>'
+  }
+})

src/assets/icons/flag-pl.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'flag-pl': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 16 10',
+    data: '<path pid="0" _fill="#fff" d="M0 0h16v10H0z"/><path pid="1" _fill="#dc143c" d="M0 5h16v5H0z"/>'
+  }
+})

src/assets/icons/flag-uk.js

@@ -1,10 +0,0 @@
-/* eslint-disable */
-var icon = require('vue-svgicon')
-icon.register({
-  'flag-uk': {
-    width: 16,
-    height: 16,
-    viewBox: '0 0 512 512',
-    data: '<path pid="0" d="M473.655 88.276H38.345C17.167 88.276 0 105.443 0 126.621V385.38c0 21.177 17.167 38.345 38.345 38.345h435.31c21.177 0 38.345-17.167 38.345-38.345V126.621c0-21.178-17.167-38.345-38.345-38.345z" _fill="#41479b"/><path pid="1" d="M511.469 120.282c-3.022-18.159-18.797-32.007-37.814-32.007h-9.977l-163.54 107.147V88.276h-88.276v107.147L48.322 88.276h-9.977c-19.017 0-34.792 13.847-37.814 32.007l139.778 91.58H0v88.276h140.309L.531 391.717c3.022 18.159 18.797 32.007 37.814 32.007h9.977l163.54-107.147v107.147h88.276V316.577l163.54 107.147h9.977c19.017 0 34.792-13.847 37.814-32.007l-139.778-91.58H512v-88.276H371.691l139.778-91.579z" _fill="#f5f5f5"/><g _fill="#ff4b55"><path pid="2" d="M282.483 88.276h-52.966v141.241H0v52.966h229.517v141.241h52.966V282.483H512v-52.966H282.483z"/><path pid="3" d="M24.793 421.252l186.583-121.114h-32.428L9.224 410.31a38.393 38.393 0 0 0 15.569 10.942zM346.388 300.138H313.96l180.716 117.305a38.515 38.515 0 0 0 12.287-13.075l-160.575-104.23zM4.049 109.475l157.73 102.387h32.428L15.475 95.842a38.499 38.499 0 0 0-11.426 13.633zM332.566 211.862l170.035-110.375a38.4 38.4 0 0 0-15.699-10.86L300.138 211.862h32.428z"/></g>'
-  }
-})

src/assets/icons/index.js

@@ -4,7 +4,9 @@ require('./euromat-logo')
 require('./european-stars')
 require('./fdp-logo')
 require('./flag-de')
-require('./flag-uk')
+require('./flag-en')
+require('./flag-fr')
+require('./flag-pl')
 require('./grune-logo')
 require('./linke-logo')
 require('./poe-colored-logo')

src/components/app-menu.vue

@@ -202,6 +202,7 @@
       width: 100%;
       background: none;
       box-shadow: none;
+      text-shadow: none;
       border-radius: 0;
       color: $text-color-secondary;
 
@@ -216,6 +217,9 @@
 
       & img {
         margin: 0;
+        height: auto;
+        box-shadow: 0 0px 3px rgba(0, 0, 0, 0.2);
+        display: inline-flex;
       }
     }
   }