finishing and fine-tuning TODO NEXT : project page

src/components/Menu.vue

@@ -164,6 +164,8 @@ const toggleMenu = () => {
       & .cross, & .middle {
       stroke-width:7;
       transition:1s ;
+      -moz-transition:1s ;
+      -webkit-transition:1s ;
       stroke:$white;
       }
       & .cross{
@@ -209,7 +211,8 @@ ul.nav-menu{
 }
 a{
   font-size:1em;
-  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
+  font-family: 'acme', Arial, Helvetica, sans-serif;
+  //font-style: italic;
   font-weight: 400;
   text-align: center;
   color : $white;
@@ -229,7 +232,7 @@ a{
     cursor: pointer;
   }
   &.router-link-exact-active{
-    filter: drop-shadow(0 0 4px $red-light);
+    filter: drop-shadow(0 0 3px $red-light);
     transition: filter 0.3s;
   }
   &:hover::after, &.router-link-exact-active::after{
@@ -238,23 +241,25 @@ a{
       transition: 0.25s;   
     }
   
-  &.hover-out::after{
-    margin-left:100%;
-    //This transition fires on hover-out class
-    transition:0.5s;
-  }
-}
-
-li {
-  transform: translateY(1.25em);
-  opacity:0;
-  overflow: hidden;
-  @for $i from 1 to 6 {
-    &:nth-child(#{$i}){
-      animation: 250ms theMenu (100 * $i - 0ms) ease forwards;
+    &.hover-out::after{
+      margin-left:100%;
+      //This transition fires on hover-out class
+      transition:0.5s;
+    }
+  }
+  
+  li {
+    padding: 0 0.3em;
+    transform: translateY(1.25em);
+    opacity:0;
+    overflow: hidden;
+    font-style: italic;
+    @for $i from 1 to 6 {
+      &:nth-child(#{$i}){
+       animation: 250ms theMenu (100 * $i - 0ms) ease forwards;
+      }
     }
   }
-}
 
 
 
@@ -334,7 +339,7 @@ li {
   }
 
 @media (height < 650px) and (width < 750px) { 
-  div.menu-container .burger{
+  nav.menu-container .burger{
     position : fixed;
     top:0;
     right:0;