Redo..People, Project pages

src/assets/scss/main.scss

@@ -103,26 +103,25 @@ button:focus {
 }
 
 @media (min-width: 768px) {
-    // .with-large>.flex-post:nth-child(5n),
+    .with-large>.flex-post:nth-child(5n),
-    .with-large>.flex-post:nth-child(6n + 1) {
+    .with-large>.flex-post:nth-child(5n-1) {
-        @apply flex-100;
+        // @apply flex-100;
-        @apply flex-row;
+        flex: 1 1 50%;
+        @apply flex-col;
         .post-card-image-link {
-            //   @apply flex-auto;
-            flex: 1 1 100%;
             @apply relative;
-            min-height: 380px;
+            min-height: 400px;
-            @apply mr-6;
         }
         .post-card-image {
             @apply absolute;
-            @apply h-auto;
+            @apply h-full;
             @apply w-full;
             @apply object-cover;
             @apply rounded-lg;
         }
         .post-card-content {
-            @apply flex-post-large-content;
+            // @apply flex-post-large-content;
+            flex: 0 1 auto;
             @apply self-center;
         }
         .post-card-title {
@@ -132,33 +131,15 @@ button:focus {
             @apply text-xl;
         }
     }
-    // .with-large>.flex-overview:nth-child(6n + 1) {
+    .projects>.flex-post:nth-child(5n),
-    //     @apply flex-100;
+    .projects>.flex-post:nth-child(5n-1) {
-    //     @apply flex-row;
+        .post-card-image-link {
-    //     .post-card-image-link {
+            min-height: 300px;
-    //         @apply flex-auto;
+        }
-    //         @apply relative;
+        .post-card-image {
-    //         min-height: 380px;
+            @apply h-auto;
-    //         @apply mr-6;
+        }
-    //     }
+    }
-    //     .post-card-image {
-    //         @apply absolute;
-    //         @apply h-full;
-    //         @apply w-full;
-    //         @apply object-cover;
-    //         @apply rounded-lg;
-    //     }
-    //     .post-card-content {
-    //         @apply flex-post-large-content;
-    //         @apply self-center;
-    //     }
-    //     .post-card-title {
-    //         @apply text-4xl;
-    //     }
-    //     .post-card-excerpt {
-    //         @apply text-xl;
-    //     }
-    // }
 }
 
 body[data-theme="dark"] {

src/pages/Blog.vue

@@ -1,6 +1,9 @@
 <template>
   <Layout>
-    <div class="container sm:pxi-0 mx-auto">
+    <div
+      class="container sm:pxi-0 mx-auto"
+      :style="{ 'min-height': contentHeight + 'px' }"
+    >
       <div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
         <PostListItem
           v-for="edge in $page.entries.edges"
@@ -68,6 +71,11 @@ export default {
     baseurl: function () {
       return "";
     },
+    contentHeight() {
+      if (process.isClient) {
+        return window.innerHeight - 100;
+      }
+    },
   },
 };
 </script>

src/templates/People.vue

@@ -5,12 +5,10 @@
       :style="{ 'min-height': contentHeight + 'px' }"
     >
       <div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
-        <Team
+        <PostListItem
-          title="THREEFOLD PEOPLE"
+          v-for="edge in $page.entries.edges"
-          description="The heartbeat behind the ThreeFold Movement"
+          :key="edge.node.id"
-          :objects="$page.entries.edges"
+          :record="edge.node"
-          :tags="$page.memberships.edges"
-          tagsField="memberships"
         />
       </div>
     </div>
@@ -24,15 +22,9 @@ query ($private: Int){
     edges {
       node {
         path
-        excerpt
         content 
         name
         rank
-        memberships{
-          id
-          title
-          path
-        }
         bio
         linkedin
         websites
@@ -59,14 +51,14 @@ query ($private: Int){
 
 <script>
 import Pagination from "~/components/Pagination.vue";
-import Team from "~/components/Team.vue";
+import PostListItem from "~/components/PostListItem.vue";
 
 export default {
   metaInfo: {
     title: "People",
   },
   components: {
-    Team,
+    PostListItem,
     Pagination,
   },
   computed: {

src/templates/Projects.vue

@@ -4,13 +4,11 @@
       class="container sm:pxi-0 mx-auto overflow-x-hidden"
       :style="{ 'min-height': contentHeight + 'px' }"
     >
-      <div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
+      <div class="flex flex-wrap with-large projects pt-8 pb-8 mx-4 sm:-mx-4">
-        <Team
+        <PostListItem
-          title="THREEFOLD PARTNERS"
+          v-for="edge in $page.entries.edges"
-          description="The heartbeat behind the ThreeFold Movement"
+          :key="edge.node.id"
-          :objects="$page.entries.edges"
+          :record="edge.node"
-          :tags="$page.memberships.edges"
-          tagsField="tags"
         />
       </div>
     </div>
@@ -32,17 +30,8 @@ query ($private: Int){
           image(width:64, height:64, fit:inside)
           path
         },
-        tags {
-          id
-          title
-          path
-        }  
         rank
         linkedin
-        startDate : startdate(format:"MM YYYY")
-        humanTime : created(format:"DD MMMM YYYY")
-        datetime : created(format:"ddd MMM DD YYYY hh:mm:ss zZ")
-        status
         excerpt
         image(width:800)
         path
@@ -66,7 +55,7 @@ query ($private: Int){
 </page-query>
 
 <script>
-import Team from "~/components/Team.vue";
+import PostListItem from "~/components/PostListItem.vue";
 import Pagination from "~/components/Pagination.vue";
 
 export default {
@@ -74,7 +63,7 @@ export default {
     title: "Projects",
   },
   components: {
-    Team,
+    PostListItem,
     Pagination,
   },
   computed: {