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;  

src/components/Name.vue

@@ -47,7 +47,8 @@ const burger = useBurgerStore()
   margin:0 2.4rem;
   
   // border : #f0f solid 1px;
-    & h1{
+    & h1{font-family: 'acme', Arial, Helvetica, sans-serif;
+         letter-spacing: 0.2em;
     font-size: 2.7rem;
     display: flex;
     flex-wrap: wrap;
@@ -89,7 +90,9 @@ h2{
   text-align: right;
   color:$white;
   animation: 600ms subtitle 300ms cubic-bezier(.55,.01,.44,1) forwards;
-  
+  font-family: 'acme', Arial, Helvetica, sans-serif;
+  font-style: italic;
+  letter-spacing: 0.2ch;
 }
 
 
@@ -118,18 +121,21 @@ h2{
     }
 }
 
-@media (max-width: 320px){
+@media (width < 400px){
   .name{
   margin : 0;
   }
 }
-
-@media (max-width: 520px){
+@media (width < 520px){
+ 
   .name h1 .r-letter{
     margin-left:2ch;
   }
   .name h1 .i-letter{
     margin-right:2ch;
   }
+  .come-in h2{
+    margin-right: 0.5em;
+  }
 }
 </style>

src/components/Spinner.vue

@@ -10,7 +10,7 @@ name : 'SpinnerCpnt'
 
 <style lang="scss" scoped>
 div{
-  display: inline-block;
+//display: inline-block;
 width: 1.0em;
 margin-right: 1ch;
 aspect-ratio: 1;