From b8d70e13a8265350821198cc19d726e5ab0d71a1 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Fri, 27 Aug 2021 12:33:23 +0200
Subject: [PATCH] Change flex to grid in ad view

---
 src/components/AdHome.vue       | 12 ++++++------
 src/components/Post.vue         | 10 +++++-----
 src/components/PostsHome.vue    |  5 ++---
 src/components/Project.vue      |  4 ++--
 src/components/ProjectsHome.vue |  4 ++--
 5 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/src/components/AdHome.vue b/src/components/AdHome.vue
index 94072c6..bde9b5c 100755
--- a/src/components/AdHome.vue
+++ b/src/components/AdHome.vue
@@ -1,10 +1,10 @@
 <template>
-  <section class="w-full my-12 h-full">
-    <div class="md:space-x-12 space-y-8 md:space-y-0 flex flex-col md:flex-row items-center justify-around h-full">
-      <nuxt-link to="/env" class="block h-auto md:w-2/5">
+  <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="rose" class="w-full flex flex-col justify-between items-center">
           <div>
-            <img class="h-48" src="~/assets/images/memojies/Dev.png" alt="Dev Memoji" />
+            <img class="h-64" src="~/assets/images/memojies/Dev.png" alt="Dev Memoji" />
           </div>
           <div>
             <h1 class="font-bold text-black text-4xl">
@@ -16,10 +16,10 @@
           </div>
         </Ad>
       </nuxt-link>
-      <nuxt-link to="/contact" class="min-h-full md:w-2/5">
+      <nuxt-link to="/contact">
         <Ad color="blue" class="w-full flex flex-col justify-between items-center">
           <div>
-            <img class="h-48" src="~/assets/images/memojies/Fiesta.png" alt="Fiesta Memoji" />
+            <img class="h-64" src="~/assets/images/memojies/Fiesta.png" alt="Fiesta Memoji" />
           </div>
           <div>
             <h1 class="font-bold text-black text-4xl">
diff --git a/src/components/Post.vue b/src/components/Post.vue
index 588534d..d8047f2 100755
--- a/src/components/Post.vue
+++ b/src/components/Post.vue
@@ -1,10 +1,10 @@
 <template>
   <nuxt-link :to="`/blog/${slug}`">
     <div class="h-full rounded-lg dark:shadow-white shadow-xl w-full bg-gray-100 dark:bg-gray-800 transform hover:scale-103 duration-300">
-      <div class="max-w-full">
+      <div class="max-w-full rounded-t-lg border-l-2 border-r-2 border-t-2 border-transparent dark:border-gray-900">
         <img class="max-w-full rounded-t-lg" :src="`https://athena.arthurdanjou.fr/files/${cover}`" alt="Post Cover" />
       </div>
-      <div class="px-8 py-4 flex flex-col justify-between">
+      <div class="px-8 py-4 flex flex-col justify-between text-justify">
         <div>
           <div class="flex space-x-2 mb-2">
             <div v-for="tag in tags">
@@ -12,11 +12,11 @@
             </div>
           </div>
           <h1 class="text-2xl font-bold">{{ $t(title) }}</h1>
-          <p class="text-base mt-3 text-gray-700 dark:text-gray-400 text-justify">{{ $t(description) }}</p>
+          <p class="text-base mt-3 text-gray-600 dark:text-gray-400 text-justify">{{ $t(description) }}</p>
         </div>
         <div class="flex justify-between">
-          <h5 class="text-base text-gray-700 dark:text-gray-400">{{ formatDate }}</h5>
-          <h5 class="text-base text-gray-700 dark:text-gray-400">{{ reading_time }} min.</h5>
+          <h5 class="text-base text-gray-800 dark:text-gray-500">{{ formatDate }}</h5>
+          <h5 class="text-base text-gray-800 dark:text-gray-500">{{ reading_time }} min.</h5>
         </div>
       </div>
     </div>
diff --git a/src/components/PostsHome.vue b/src/components/PostsHome.vue
index 7c3360b..7860e6f 100755
--- a/src/components/PostsHome.vue
+++ b/src/components/PostsHome.vue
@@ -1,5 +1,5 @@
 <template>
-  <section v-if="posts" class="w-full flex items-center justify-center my-20">
+  <section v-if="posts" class="w-full flex items-center justify-center my-12">
     <div class="flex flex-col items-center text-center">
       <div class="flex flex-col items-center">
         <h2 class="font-bold text-3xl">
@@ -9,7 +9,7 @@
           {{ $t('blog.description') }}
         </p>
       </div>
-      <div class="grid grid-cols-1 gap-x-4 gap-y-8 mb-20 sm:grid-cols-3 text-left">
+      <div class="grid grid-cols-1 gap-x-4 gap-y-8 mb-8 sm:mb-20 md:grid-cols-3 text-left">
         <Post
           v-for="post in posts"
           :key="post.slug"
@@ -31,7 +31,6 @@
 
 <script lang="ts">
 import {defineComponent, useAsync, useContext} from "@nuxtjs/composition-api";
-import {Post} from "~/types/types";
 
 export default defineComponent({
   name: "PostsHome",
diff --git a/src/components/Project.vue b/src/components/Project.vue
index 70c3d21..8e1f201 100755
--- a/src/components/Project.vue
+++ b/src/components/Project.vue
@@ -1,7 +1,7 @@
 <template>
   <a :href="url" target="_blank">
-    <div class="h-full rounded-lg dark:shadow-white shadow-xl w-full bg-gray-100 dark:bg-gray-800 transform hover:scale-103 duration-300">
-      <div class="max-w-full">
+    <div class="h-full rounded-lg shadow-xl w-full bg-gray-100 dark:bg-gray-800 transform hover:scale-103 duration-300">
+      <div class="max-w-full rounded-t-lg border-l-2 border-r-2 border-t-2 border-transparent dark:border-gray-900">
         <img class="w-full rounded-t-lg" :src="`https://athena.arthurdanjou.fr/files/${cover}`" alt="Project Cover" />
       </div>
       <div class="py-8 px-4 lg:p-4 flex flex-col justify-between">
diff --git a/src/components/ProjectsHome.vue b/src/components/ProjectsHome.vue
index 6db388c..9d1c77e 100755
--- a/src/components/ProjectsHome.vue
+++ b/src/components/ProjectsHome.vue
@@ -1,5 +1,5 @@
 <template>
-  <section v-if="projects" class="w-full flex items-center justify-center my-20">
+  <section v-if="projects" class="w-full flex items-center justify-center my-12">
     <div class="flex flex-col items-center text-center">
       <div class="flex flex-col items-center">
         <h2 class="font-bold text-3xl">
@@ -9,7 +9,7 @@
           {{ $t('projects.description') }}
         </p>
       </div>
-      <div class="grid grid-cols-1 gap-x-4 gap-y-8 mb-20 sm:grid-cols-3 text-left">
+      <div class="grid grid-cols-1 gap-x-4 gap-y-8 mb-8 sm:mb-20 sm:grid-cols-3 text-left">
         <Project
           v-for="project in projects"
           :key="project.name"