fix tooltip animation

Author: Beelink

_v2/moduleart-website/src/assets/images/platforms/flatpak.png

@@ -19,13 +19,13 @@
 
     .light {
       color: $light-color;
+      font-weight: 500;
     }
-
-    
   }
 
   &__platform {
     display: inline;
+    vertical-align: middle;
   }
 
   &__image {

_v2/moduleart-website/src/assets/images/platforms/ubuntu.png

@@ -2,13 +2,11 @@
   <ul class="project-list">
     <li v-for="(project, projectIndex) in projects" :key="projectIndex" class="project">
       <h2 class="project__title">
-        <a :href="project.url">
-          <span>{{ project.title }}</span>
-          <span class="light"> for </span>
-          <tooltip class="project__platform" v-for="(platform, platformIndex) in project.platforms" :key="platformIndex" :text="platform">
-            <img :src="getPlatformImage(platform)" :alt="platform" />
-          </tooltip>
-        </a>
+        <a :href="project.url">{{ project.title }}</a>
+        <span class="light"> for </span>
+        <tooltip class="project__platform" v-for="(platform, platformIndex) in project.platforms" :key="platformIndex" :text="platform.title">
+          <img :src="getPlatformImage(platform.name)" :alt="platform.title" />
+        </tooltip>
       </h2>
       <a class="project__image">
         <img v-if="project.image" :src="getProjectImage(project.image)" :alt="project.title" />
@@ -33,17 +31,33 @@ export default {
           url: "https://moduleart.github.io/quick-picture-viewer",
           image: "quick-picture-viewer.png",
           platforms: [
-            "windows",
+            {
+              name: "windows",
+              title: "Windows",
+            },
           ],
         },
         {
           title: "Qsnip",
           url: "https://moduleart.github.io/qsnip",
           image: null,
           platforms: [
-            "windows",
-            "mac",
-            "linux",
+            {
+              name: "windows",
+              title: "Windows",
+            },
+            {
+              name: "mac",
+              title: "Mac",
+            },
+            {
+              name: "ubuntu",
+              title: "Linux (Ubuntu PPA)",
+            },
+            {
+              name: "flatpak",
+              title: "Linux (Flatpak)",
+            },
           ],
         },
       ],

_v2/moduleart-website/src/components/ProjectList/ProjectList.scss

@@ -4,26 +4,38 @@
   position: relative;
 
   &:hover {
-    .tooltip__text {
+    .tooltip__holder {
       opacity: 1;
-      transform: translateX(-50%) translateY(0);
+      transform: translateY(0);
     }
   }
 
+  &__holder {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    transform: translateY(-8px);
+    opacity: 0;
+    transition: opacity .25s, transform .25s;
+    pointer-events: none;
+    display: inline-block;
+  }
+
   &__text {
     position: absolute;
     background: $text-color;
     color: $light-color;
     border-radius: 4px;
     padding: 4px 8px;
-    font-size: 17px;
-    line-height: 17px;
+    font-size: 15px;
+    line-height: 15px;
     left: 50%;
-    transform: translateX(-50%) translateY(-8px);
-    pointer-events: none;
+    transform: translateX(-50%);
     top: calc(-100% - 8px);
-    opacity: 0;
-    transition: opacity .25s, transform .25s;
+    white-space: nowrap;
+    text-align: center;
 
     &::before {
       content: "";

_v2/moduleart-website/src/components/ProjectList/ProjectList.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="tooltip">
     <slot />
-    <span class="tooltip__text">{{ computedText }}</span>
+    <span class="tooltip__holder">
+      <span class="tooltip__text">{{ computedText }}</span>
+    </span>
   </div>
 </template>