From 2f01108292addebac602a5a371f49d8353e4a578 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Wed, 27 Oct 2021 21:30:28 +0200
Subject: [PATCH] Working on blobity

---
 src/components/ContactForm.vue |  2 +-
 src/components/SideMenu.vue    |  6 +++---
 src/layouts/error.vue          |  6 +++---
 src/pages/blog/_slug.vue       | 37 ++++++++++++++++------------------
 tailwind.config.ts             | 19 -----------------
 5 files changed, 24 insertions(+), 46 deletions(-)

diff --git a/src/components/ContactForm.vue b/src/components/ContactForm.vue
index 249238e..17b3935 100755
--- a/src/components/ContactForm.vue
+++ b/src/components/ContactForm.vue
@@ -65,7 +65,7 @@
         :disabled="!isSendable"
         :class="{'disabled': !isSendable}"
         @click.prevent="handleForm"
-        class="font-bold px-8 py-4 border-2 rounded-xl border-red-500 dark:border-amber-400 text-red-500 dark:text-amber-400 hover:(bg-red-500 dark:bg-amber-400 text-white) hover:dark:text-black duration-300 cursor-pointer"
+        class="font-bold px-8 py-4 border-2 rounded-xl border-red-500 dark:border-amber-400 text-red-500 dark:text-amber-400 hover:(bg-red-500 dark:bg-amber-400 text-white) hover:dark:text-black duration-300"
       >
         {{ $t('contact.form.submit') }}
       </button>
diff --git a/src/components/SideMenu.vue b/src/components/SideMenu.vue
index fd99b7e..53d98ef 100644
--- a/src/components/SideMenu.vue
+++ b/src/components/SideMenu.vue
@@ -9,18 +9,18 @@
       >
         <div class="mb-8">
           <div class="flex justify-between mb-4">
-            <div @click="closeMenu" class="flex justify-center items-center cursor-pointer cross text-sm">
+            <div @click="closeMenu" class="flex justify-center items-center cross text-sm">
               <CrossIcon class="duration-300" />
               <div class="ml-4">{{ $t('sidebar.close') }}</div>
             </div>
             <div class="ml-6">
               <ul class="flex items-center">
                 <li @click="changeLanguage()"
-                    class="mx-1 h-9 w-9 cursor-pointer flex items-center justify-center p-1.5 rounded-xl hover:bg-gray-300 duration-200 dark:hover:bg-dark-400">
+                    class="mx-1 h-9 w-9 flex items-center justify-center p-1.5 rounded-xl hover:bg-gray-300 duration-200 dark:hover:bg-dark-400">
                   <TranslateIcon :french="isFrench" />
                 </li>
                 <li @click="changeColorMode()"
-                    class="mx-1 h-9 w-9 cursor-pointer flex items-center p-1.5 rounded-xl hover:bg-gray-300 dark:hover:bg-dark-400 duration-200">
+                    class="mx-1 h-9 w-9 flex items-center p-1.5 rounded-xl hover:bg-gray-300 dark:hover:bg-dark-400 duration-200">
                   <div v-if="this.$colorMode.preference === 'light'">
                     <MoonIcon/>
                   </div>
diff --git a/src/layouts/error.vue b/src/layouts/error.vue
index d4e6b35..20a37b1 100755
--- a/src/layouts/error.vue
+++ b/src/layouts/error.vue
@@ -25,9 +25,9 @@
             </div>
           </div>
         </div>
-        <div class="mt-12 mb-4 w-full text-center">
-          <div class="home-btn" @click="back">
-            <div class="cursor-pointer w-full py-4 px-4 md:py-4 md:px-4 font-bold hover:(bg-red-500 text-white dark:bg-amber-400 dark:text-black) duration-500 rounded">
+        <div class="flex justify-center mt-12 mb-4 w-full text-center">
+          <div data-blobity class="z-index-3" @click="back">
+            <div class="w-full py-4 px-4 md:py-4 md:px-4 font-bold hover:(bg-red-500 text-white dark:bg-amber-400 dark:text-black) duration-500 rounded">
               <BackSpaceIcon class="arrow-img text-xl"/>
               {{ $t('error.back') }}
             </div>
diff --git a/src/pages/blog/_slug.vue b/src/pages/blog/_slug.vue
index 713f8c5..85c4993 100755
--- a/src/pages/blog/_slug.vue
+++ b/src/pages/blog/_slug.vue
@@ -3,7 +3,7 @@
     <div class="mt-8 md:mt-32 flex flex-col justify-around py-8 w-full">
       <div>
         <div class="mb-4 flex">
-          <nuxt-link to="/blog" class="back-arrow flex">
+          <nuxt-link to="/blog" data-blobity-magnetic="false" class="z-index-3 flex">
             <div class="duration-300 arrow">
               <BackSpaceIcon />
             </div>
@@ -42,7 +42,7 @@
         :document="post"
         class="my-6 md:my-10 w-full text-justify max-w-none
         prose prose-sm lg:prose-lg lg:max-w-none sm:max-w-none
-        dark:prose-dark dark:max-w-none"
+        dark:prose-dark dark:max-w-none z-index-3"
       />
       <p class="mb-3">
         {{ $t('blog.read.thanks') }}
@@ -50,9 +50,11 @@
       <div class="flex flex-col md:flex-row">
         <div class="flex items-center mb-2 md:mb-0">
           <div
+            data-blobity
+            data-blobity-magnetic="false"
             @click="handleLike"
-            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'"
+            class="flex flex-row z-index-3 justify-center items-center duration-300 text-lg p-2 border-solid border mr-2 bg-white dark:bg-black"
+            :class="liked ? 'border-red-500 dark:border-red-500' : 'border-gray-400 dark:border-dark-200'"
           >
             <div class="mr-2 lining-nums leading-3">
               {{ getLikes }}
@@ -63,28 +65,35 @@
           </div>
           <a
             target="_blank"
+            data-blobity-magnetic="false"
             :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 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"
+            class="z-index-3 mr-2 text-2xl p-2 border-solid border border-gray-300 dark:border-dark-200 flex justify-center items-center bg-white dark:bg-black"
           >
             <TwitterBlogIcon />
           </a>
           <div
+            data-blobity
+            data-blobity-magnetic="false"
             @click="scrollToTop"
-            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"
+            class="z-index-3 mr-2 text-2xl p-2 border-solid border border-gray-300 dark:border-dark-200 flex justify-center items-center bg-white dark:bg-black"
           >
             <ArrowUpIcon />
           </div>
         </div>
         <div class="flex items-center">
           <nuxt-link
+            data-blobity
+            data-blobity-magnetic="false"
             to="/contact"
-            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"
+            class="z-index-3 mr-2 text-2xl p-2 border-solid border border-gray-300 dark:border-dark-200 flex justify-center items-center bg-white dark:bg-black"
           >
             <BookmarkIcon />
           </nuxt-link>
           <div
+            data-blobity
+            data-blobity-magnetic="false"
             @click="copyToClipboard"
-            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"
+            class="z-index-3 text-2xl p-2 border-solid border border-gray-300 dark:border-dark-200 flex justify-center items-center bg-white dark:bg-black"
           >
             <CopyIcon />
           </div>
@@ -233,15 +242,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style scoped lang="scss">
-.blog {
-  .back-arrow:hover .arrow {
-    transform: translate(-8px, -1px);
-  }
-
-  .arrow {
-    transform: translate(3px, -1px);
-  }
-}
-</style>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 9cfc4f6..5c5436e 100755
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -14,16 +14,6 @@ module.exports = defineConfig({
             {
               a: {
                 color: theme('colors.red.500'),
-                transitionDuration: '300ms',
-                cursor: 'pointer',
-                borderBottomColor: theme('colors.gray.200'),
-                borderOpacity: '0%',
-                borderBottomWidth: '2px',
-                borderBottomStyle: 'solid',
-                textDecoration: 'none',
-                '&:hover': {
-                  borderBottomColor: theme('colors.red.500'),
-                }
               }
             }
           ]
@@ -37,15 +27,6 @@ module.exports = defineConfig({
               },
               a: {
                 color: theme('colors.amber.400'),
-                transitionDuration: '300ms',
-                cursor: 'pointer',
-                borderBottomColor: theme('colors.gray.700'),
-                borderBottomWidth: '2px',
-                borderBottomStyle: 'solid',
-                textDecoration: 'none',
-                '&:hover': {
-                  borderBottomColor: theme('colors.amber.400'),
-                }
               },
               strong: {
                 color: theme('colors.white'),