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

---
 src/components/AboutPreview.vue | 10 +++++-----
 src/components/Banner.vue       |  2 +-
 src/components/Header.vue       |  2 +-
 src/components/Post.vue         |  2 +-
 src/pages/blog/index.vue        |  2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/AboutPreview.vue b/src/components/AboutPreview.vue
index 61cbccd..8d221ff 100644
--- a/src/components/AboutPreview.vue
+++ b/src/components/AboutPreview.vue
@@ -1,17 +1,17 @@
 <template>
   <section v-if="info && info.age" class="w-full flex items-center justify-center my-12">
-    <div class="flex justify-between items-center">
-      <div class="w-1/2 flex justify-center">
+    <div class="flex flex-col md:flex-row justify-between items-center">
+      <div class="mb-12 md:mb-0 md:w-1/2 flex justify-center">
         <img src="@/assets/images/Logo.jpg" alt="Logo Image" class="w-1/2 rounded-2xl border-2 border-gray-100 dark:border-transparent">
       </div>
-      <div class="w-1/2 text-justify">
-        <h2 class="text-4xl font-bold">
+      <div class="md:w-1/2 text-justify">
+        <h2 class="text-4xl font-bold text-center md:text-justify">
           Who am I ?
         </h2>
         <p class="text-xl my-6 text-gray-700 dark:text-gray-400">
           {{ $t('home.banner.description', {age: info.age}) }}
         </p>
-        <div class="flex">
+        <div class="flex justify-center md:justify-start">
           <Button content="Decouvrir mon profil" link="about"/>
         </div>
       </div>
diff --git a/src/components/Banner.vue b/src/components/Banner.vue
index 482d47a..8428437 100644
--- a/src/components/Banner.vue
+++ b/src/components/Banner.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="my-32 w-full flex items-center justify-center">
+  <section class="my-16 md:my-32 w-full flex items-center justify-center">
     <div class="text-center">
       <h1 class="text-6xl font-bold text-gray-700 dark:text-gray-400">
         Hello I am <span class="text-black dark:text-white">Arthur Danjou</span>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 8dc33d8..971c3ce 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <header class="dark:bg-black dark:text-white fixed z-50 top-0 left-0 bg-white w-full duration-400" :class="scrollPosition > 50 ? ' shadow-md dark:shadow-white h-10 lg:h-18' : 'h-16 lg:h-24'">
+  <header class="dark:bg-black dark:text-white fixed z-50 top-0 left-0 bg-white w-full duration-400" :class="scrollPosition > 50 ? ' shadow-md dark:shadow-white h-16 lg:h-20' : 'h-20 lg:h-24'">
     <div class="header-container z-index-50 flex justify-between items-center h-full px-5 xl:px-32">
       <nuxt-link to="/">
         <img src="@/assets/images/logo-header.png" alt="Logo Circle" class="h-10 left cursor-pointer duration-500" />
diff --git a/src/components/Post.vue b/src/components/Post.vue
index 1b92e77..289c0bf 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-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">
       <div class="h-2/5 post rounded-t-lg"
            :style="{ backgroundImage: `url(${getBackgroundCover})` }">
       </div>
diff --git a/src/pages/blog/index.vue b/src/pages/blog/index.vue
index 1a6b86c..e093a07 100644
--- a/src/pages/blog/index.vue
+++ b/src/pages/blog/index.vue
@@ -14,7 +14,7 @@
     <h1 v-if="posts.length === 0" class="text-xl font-bold text-center my-8 w-full">{{ $t('blog.no_posts') }}</h1>
     <div class="w-full" v-else>
       <div class="flex py-8 w-full flex-wrap" >
-        <div class="mx-3 my-2" v-for="post in posts">
+        <div class="md:mx-3 my-2" v-for="post in posts">
           <Post
             :title="post.title"
             :cover="post.cover"