From 3874b2be9417e32078ed510dac41de180feb0fcc Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Wed, 1 Sep 2021 20:55:00 +0200
Subject: [PATCH] Fix add animations and padding

---
 src/components/Ad.vue     |  8 ++++----
 src/components/AdHome.vue |  8 ++++----
 src/components/Post.vue   |  4 ++--
 src/pages/blog/_slug.vue  | 18 +++++-------------
 src/pages/services.vue    |  6 +++---
 5 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/src/components/Ad.vue b/src/components/Ad.vue
index a31b36b..95d064d 100755
--- a/src/components/Ad.vue
+++ b/src/components/Ad.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-3xl p-2 lg:p-8 text-center h-full block" :class="getColor">
+  <div class="rounded-3xl p-2 lg:p-8 text-center h-full block duration-500" :class="getColor">
     <slot />
   </div>
 </template>
@@ -23,11 +23,11 @@ export default defineComponent({
     const getColor = computed(() => {
       switch (props.color) {
         case 'red':
-          return 'bg-red-300'
+          return 'bg-red-400'
         case 'blue':
-          return 'bg-blue-300'
+          return 'bg-blue-400'
         case 'green':
-          return 'bg-green-300'
+          return 'bg-green-400'
       }
     })
 
diff --git a/src/components/AdHome.vue b/src/components/AdHome.vue
index 0b1fd70..3cebb7e 100755
--- a/src/components/AdHome.vue
+++ b/src/components/AdHome.vue
@@ -2,9 +2,9 @@
   <section class="w-full h-full my-12">
     <div class="w-full grid grid-cols-1 gap-x-20 gap-y-8 sm:grid-cols-2 h-full">
       <nuxt-link to="/env">
-        <Ad color="red" class="w-full flex flex-col justify-between items-center">
+        <Ad color="red" class="group w-full flex flex-col justify-between items-center">
           <div>
-            <img class="h-64" src="~/assets/images/memojies/Dev.png" alt="Dev Memoji" />
+            <img class="h-64 group-hover:scale-105 transform duration-500" src="~/assets/images/memojies/Dev.png" alt="Dev Memoji" />
           </div>
           <div>
             <h1 class="font-bold text-black text-4xl">
@@ -17,9 +17,9 @@
         </Ad>
       </nuxt-link>
       <nuxt-link to="/contact">
-        <Ad color="blue" class="w-full flex flex-col justify-between items-center">
+        <Ad color="blue" class="group w-full flex flex-col justify-between items-center">
           <div>
-            <img class="h-64" src="~/assets/images/memojies/HandUp.png" alt="HandUp Memoji" />
+            <img class="h-64 group-hover:scale-105 transform duration-500" src="~/assets/images/memojies/HandUp.png" alt="HandUp Memoji" />
           </div>
           <div>
             <h1 class="font-bold text-black text-4xl">
diff --git a/src/components/Post.vue b/src/components/Post.vue
index c1ee7bf..df111cb 100755
--- a/src/components/Post.vue
+++ b/src/components/Post.vue
@@ -2,8 +2,8 @@
   <nuxt-link :to="`/blog/${slug}`">
     <div class="group post w-full text-justify">
       <h1 class="font-black text-3xl duration-300" :class="getHoverColor">{{ $t(title) }}</h1>
-      <h2 class="my-4 text-2xl text-gray-600">{{ $t(description) }}</h2>
-      <div class="text-gray-400">
+      <h2 class="my-4 text-2xl text-gray-600 dark:text-gray-400">{{ $t(description) }}</h2>
+      <div class="text-gray-700 dark:text-gray-300">
         <span>{{ formatDate }}</span>, <span>{{ reading_time }}</span> min.
       </div>
     </div>
diff --git a/src/pages/blog/_slug.vue b/src/pages/blog/_slug.vue
index 8a439fa..713f8c5 100755
--- a/src/pages/blog/_slug.vue
+++ b/src/pages/blog/_slug.vue
@@ -51,7 +51,7 @@
         <div class="flex items-center mb-2 md:mb-0">
           <div
             @click="handleLike"
-            class="icon-hover flex flex-row justify-center items-center cursor-pointer duration-300 text-lg p-1 border-solid border mr-2"
+            class="flex flex-row justify-center items-center cursor-pointer duration-300 text-lg p-2 border-solid border mr-2"
             :class="liked ? 'border-red-500 dark:border-red-500 hover:border-gray-400 dark:hover:border-dark-200' : 'border-gray-400 dark:border-dark-200 hover:border-red-500 dark:hover:border-red-500'"
           >
             <div class="mr-2 lining-nums leading-3">
@@ -64,13 +64,13 @@
           <a
             target="_blank"
             :href="'https://twitter.com/intent/tweet?url=https%3A%2F%2Farthurdanjou.fr%2Fblog%2F' + postData.slug + '&text=' + $t('blog.tweet') + ' ' + $i18n.t('title')"
-            class="mr-2 icon-hover cursor-pointer duration-300 text-2xl p-1 border-solid border border-gray-300 dark:border-dark-200 hover:border-cyan-500 dark:hover:border-cyan-400 flex justify-center items-center"
+            class="mr-2 cursor-pointer duration-300 text-2xl p-2 border-solid border border-gray-300 dark:border-dark-200 hover:border-cyan-500 dark:hover:border-cyan-400 flex justify-center items-center"
           >
             <TwitterBlogIcon />
           </a>
           <div
             @click="scrollToTop"
-            class="mr-2 icon-hover cursor-pointer duration-300 text-2xl p-1 border-solid border border-gray-300 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white flex justify-center items-center"
+            class="mr-2 cursor-pointer duration-300 text-2xl p-2 border-solid border border-gray-300 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white flex justify-center items-center"
           >
             <ArrowUpIcon />
           </div>
@@ -78,13 +78,13 @@
         <div class="flex items-center">
           <nuxt-link
             to="/contact"
-            class="mr-2 icon-hover cursor-pointer duration-300 text-2xl p-1 border-solid border border-gray-300 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white flex justify-center items-center"
+            class="mr-2 cursor-pointer duration-300 text-2xl p-2 border-solid border border-gray-300 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white flex justify-center items-center"
           >
             <BookmarkIcon />
           </nuxt-link>
           <div
             @click="copyToClipboard"
-            class="icon-hover cursor-pointer duration-300 text-2xl p-1 border-solid border border-gray-300 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white flex justify-center items-center"
+            class="cursor-pointer duration-300 text-2xl p-2 border-solid border border-gray-300 dark:border-dark-200 hover:border-dark-800 dark:hover:border-white flex justify-center items-center"
           >
             <CopyIcon />
           </div>
@@ -243,13 +243,5 @@ export default defineComponent({
   .arrow {
     transform: translate(3px, -1px);
   }
-
-  .icon-hover svg {
-    @apply duration-300
-  }
-
-  .icon-hover:hover svg {
-    transform: scale(1.05);
-  }
 }
 </style>
diff --git a/src/pages/services.vue b/src/pages/services.vue
index ed15390..1496dce 100644
--- a/src/pages/services.vue
+++ b/src/pages/services.vue
@@ -106,11 +106,11 @@
     </section>
     <section class="w-full lg:w-4/5">
       <nuxt-link to="/contact">
-        <Ad color="green" class="flex flex-col lg:flex-row">
+        <Ad color="green" class="group flex flex-col lg:flex-row">
           <div class="lg:w-1/2 flex justify-center">
-            <img class="h-48 lg:h-64" src="~/assets/images/memojies/Fiesta.png" alt="Fiesta Memoji" />
+            <img class="h-48 lg:h-64 group-hover:scale-105 transform duration-500" src="~/assets/images/memojies/Fiesta.png" alt="Fiesta Memoji" />
           </div>
-          <div class="group flex flex-col items-center justify-center lg:w-3/4 p-4 text-justify">
+          <div class="flex flex-col items-center justify-center lg:w-3/4 p-4 text-justify">
             <h1 class="font-bold text-black text-2xl lg:text-4xl mb-4">
               {{ $t('services.ad.title') }}
             </h1>