From c42862493917489c0218999a38e86a26ce08c4ed Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Fri, 14 Jun 2019 23:02:33 +0100
Subject: [PATCH] Fix whitespace at bottom of the page

---
 src/components/ProjectCard.vue |  2 +-
 src/views/Projects.vue         | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/ProjectCard.vue b/src/components/ProjectCard.vue
index 056dde5..a737dc1 100644
--- a/src/components/ProjectCard.vue
+++ b/src/components/ProjectCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <article class="w-full px-4 mb-8 sm:w-1/2 md:w-1/3">
+  <article>
     <router-link :to="{ name: 'project', params: { id: 1 }}" class="group block hover:no-underline">
       <span class="block bg-gray-100 shadow-lg rounded overflow-hidden">
         <span class="block p-6">
diff --git a/src/views/Projects.vue b/src/views/Projects.vue
index bf45268..114e30f 100644
--- a/src/views/Projects.vue
+++ b/src/views/Projects.vue
@@ -6,15 +6,19 @@
       </template>
     </banner>
 
-    <div class="max-w-6xl mx-auto p-6 xl:px-0">
+    <main class="max-w-6xl mx-auto p-6 xl:px-0">
       <div class="flex justify-between items-baseline">
-        <page-title class="mb-6">All Projects</page-title>
+        <page-title>All Projects</page-title>
 
         <project-view-switcher @changed="projectViewSwitched" :mode="displayMode"></project-view-switcher>
       </div>
 
-      <div v-if="displayMode == 'grid'" class="flex flex-wrap mt-4 -mb-8 -mx-4">
-        <project-card v-for="n in 9" :key="n"></project-card>
+      <div class="mt-6">
+        <div v-if="displayMode == 'grid'" class="flex flex-wrap -mt-8 mb-4 -mx-4">
+          <div class="w-full px-4 mt-8 sm:w-1/2 md:w-1/3" v-for="n in 9" :key="n">
+            <project-card></project-card>
+          </div>
+        </div>
       </div>
 
       <div v-if="displayMode == 'list'" class="pt-6 pb-6 mt-4 bg-white shadow-md">
@@ -41,7 +45,7 @@
           </tbody>
         </table>
       </div>
-    </div>
+    </main>
   </div>
 </template>