Menu layout update

src/app/app.vue

@@ -130,6 +130,7 @@
 
 <style lang="scss">
   @import "~node_modules/normalize.css/normalize";
+  @import "~styles/animations";
   @import "~styles/fonts";
   @import "~styles/buttons";
   @import "~styles/colors";
@@ -186,6 +187,7 @@
 
   a {
     color: $text-color-base;
+    transition: color 150ms $easeInOutQuint;
 
     &:hover {
       color: $text-color-special;

src/components/menu.vue

@@ -14,7 +14,7 @@
         v-for="lang of languages"
         type="button"
         @click="changeLanguage(lang.locale)">
-        <img :src="lang.icon" width="25" height="25" :alt="lang.locale" />
+        <img :src="lang.icon" :width="buttonSize" :height="buttonSize" :alt="lang.locale" />
       </button>
     </div>
   </div>
@@ -29,6 +29,12 @@
       languages: { type: Array, default: () => [] }
     },
 
+    data () {
+      return {
+        buttonSize: 20
+      }
+    },
+
     methods: {
       changeLanguage (locale) {
         this.$i18n.locale = locale
@@ -39,6 +45,7 @@
 </script>
 
 <style lang="scss" scoped>
+  @import "~styles/animations";
   @import "~styles/colors";
   @import "~styles/layout";
 
@@ -73,11 +80,23 @@
     justify-content: space-around;
 
     button {
-      font-size: 25px;
       display: flex;
       justify-content: center;
       align-items: center;
-      margin-right: $base-gap;
+      margin-right: 5px;
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: 100%;
+      width: 40px;
+      height: 40px;
+      transform: scale(1);
+      transition:
+        transform 150ms $easeInOutQuint,
+        background 150ms $easeInOutQuint;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.15);
+        transform: scale(1.2);
+      }
     }
   }
 </style>

src/styles/animations.scss

@@ -0,0 +1 @@
+$easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);