From a1596f73adbefa92f0d027840bad5a883007f2ce Mon Sep 17 00:00:00 2001
From: Arthur Danjou <arthurdanjou@outlook.fr>
Date: Wed, 7 Apr 2021 23:01:52 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=BB=20|=20Working=20on=20mobile=20vers?=
 =?UTF-8?q?ion=20#2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AdPreview.vue       | 6 +++---
 src/components/Post.vue            | 2 +-
 src/components/PostsPreview.vue    | 4 ++--
 src/components/Project.vue         | 2 +-
 src/components/ProjectsPreview.vue | 4 ++--
 src/components/StrategyPreview.vue | 8 ++++----
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/AdPreview.vue b/src/components/AdPreview.vue
index bdd3568..26cd320 100644
--- a/src/components/AdPreview.vue
+++ b/src/components/AdPreview.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full my-12">
-    <div class="space-x-12 flex items-center justify-center">
-      <nuxt-link to="/uses" class="h-84 w-1/2">
+    <div class="md:space-x-12 space-y-8 md:space-y-0 flex flex-col md:flex-row items-center justify-center">
+      <nuxt-link to="/uses" class="h-84 md:w-1/2">
         <Ad color="rose" class="h-full w-full flex flex-col justify-between">
           <div>
             ILLUSTRATION
@@ -16,7 +16,7 @@
           </div>
         </Ad>
       </nuxt-link>
-      <nuxt-link to="/contact" class="h-84 w-1/2">
+      <nuxt-link to="/contact" class="h-84 md:w-1/2">
         <Ad color="blue" class="h-full w-full flex flex-col justify-between">
           <div>
             ILLUSTRATION
diff --git a/src/components/Post.vue b/src/components/Post.vue
index 289c0bf..a966965 100644
--- a/src/components/Post.vue
+++ b/src/components/Post.vue
@@ -1,6 +1,6 @@
 <template>
   <nuxt-link :to="`/blog/${slug}`">
-    <div class="rounded-lg shadow-lg h-116 w-full md:w-100 text-left dark:bg-gray-800 transform hover:scale-103 duration-300">
+    <div class="rounded-lg shadow-lg h-116 w-full md:w-100 text-left dark:bg-gray-800 transform hover:scale-103 duration-300 mb-8 md:mb-0">
       <div class="h-2/5 post rounded-t-lg"
            :style="{ backgroundImage: `url(${getBackgroundCover})` }">
       </div>
diff --git a/src/components/PostsPreview.vue b/src/components/PostsPreview.vue
index 1642b5a..575e833 100644
--- a/src/components/PostsPreview.vue
+++ b/src/components/PostsPreview.vue
@@ -5,11 +5,11 @@
         <h2 class="font-bold text-3xl">
           Derniers articles
         </h2>
-        <p class="text-gray-700 dark:text-gray-400 text-xl w-2/3 mt-4">
+        <p class="text-gray-700 dark:text-gray-400 text-xl md:w-2/3 mt-4">
           Je redige des articles concernant ma vie, le developpement et mes passions.
         </p>
       </div>
-      <div class="my-8 flex w-full space-x-6">
+      <div class="my-8 md:flex w-full md:space-x-6">
         <div v-for="post in posts">
           <Post
             :title="post.title"
diff --git a/src/components/Project.vue b/src/components/Project.vue
index 6851ba0..962a55f 100644
--- a/src/components/Project.vue
+++ b/src/components/Project.vue
@@ -1,6 +1,6 @@
 <template>
   <nuxt-link :to="`/projects/${slug}`">
-    <div class="rounded-lg shadow-lg w-72 text-left dark:bg-gray-800 transform hover:scale-103 duration-300">
+    <div class="rounded-lg shadow-lg w-full md:w-72 text-left dark:bg-gray-800 transform hover:scale-103 duration-300 mb-4 md:mb-0">
       <div class="h-40 post rounded-t-lg"
            :style="{ backgroundImage: `url(${getBackgroundCover})` }">
       </div>
diff --git a/src/components/ProjectsPreview.vue b/src/components/ProjectsPreview.vue
index 9d1c3c5..59d21ea 100644
--- a/src/components/ProjectsPreview.vue
+++ b/src/components/ProjectsPreview.vue
@@ -5,11 +5,11 @@
         <h2 class="font-bold text-3xl">
           Derniers projets
         </h2>
-        <p class="text-gray-700 dark:text-gray-400 text-xl w-2/3 mt-4">
+        <p class="text-gray-700 dark:text-gray-400 text-xl md:w-2/3 mt-4">
           Quelques projets que j'ai realise dans ma vie de developpeur.
         </p>
       </div>
-      <div class="my-8 flex w-full space-x-8">
+      <div class="my-8 md:flex w-full md:space-x-8">
         <div v-for="project in projects">
           <Project
             :title="project.title"
diff --git a/src/components/StrategyPreview.vue b/src/components/StrategyPreview.vue
index 0668318..e148d0a 100644
--- a/src/components/StrategyPreview.vue
+++ b/src/components/StrategyPreview.vue
@@ -5,15 +5,15 @@
         <h2 class="font-bold text-3xl">
           Workflow
         </h2>
-        <p class="text-gray-700 dark:text-gray-400 text-xl w-2/3 mt-4">
+        <p class="text-gray-700 dark:text-gray-400 text-xl md:w-2/3 mt-4">
           Je suis ce processus afin d'etre le plus productif et de donner le resultat le plus qualitatif possible.
         </p>
       </div>
-      <div class="my-8 flex flex-row-reverse w-full justify-between items-center">
-        <div class="w-1/2 flex justify-center items-center">
+      <div class="my-8 flex flex-col md:flex-row-reverse w-full justify-between items-center">
+        <div class="w-full md:w-1/2 flex justify-center items-center">
           La belle image
         </div>
-        <div class="flex justify-center 1/2">
+        <div class="flex justify-center w-full md:w-1/2">
           <div class="flex flex-col space-y-6 w-full">
             <StrategyPart
               title="#1. Brainstorming"