Realign users

src/assets/scss/main.scss

@@ -1,5 +1,4 @@
 @tailwind base;
-
 blockquote {
     @apply border-l;
     @apply border-l-4;
@@ -7,7 +6,6 @@ blockquote {
     @apply pl-4;
     @apply italic;
     @apply my-8;
-
     p {
         padding: 0 !important;
     }
@@ -40,18 +38,14 @@ ul {
 }
 
 @tailwind components;
-
 @tailwind utilities;
-
 @responsive {
     .pxi-0 {
         @apply px-0 #{!important};
     }
-
     .pyi-0 {
         @apply py-0 #{!important};
     }
-
     .pi-0 {
         @apply p-0 #{!important};
     }
@@ -71,7 +65,7 @@ ul {
 }
 
 .height-30px {
-  height:30px;
+    height: 30px;
 }
 
 .no-border {
@@ -83,7 +77,6 @@ ul {
     @apply border-b-gray-300;
     @apply flex-col;
     @apply w-full;
-
     .post-card-image {
         @apply h-56;
         @apply w-full;
@@ -91,13 +84,11 @@ ul {
         @apply rounded;
         @apply relative;
     }
-
     .post-card-title {
         @apply leading-none;
         @apply text-2xl;
         @apply font-medium;
     }
-
     .post-card-excerpt {
         @apply font-serif;
     }
@@ -108,17 +99,17 @@ ul {
 }
 
 @media (min-width: 768px) {
-  .with-large>.flex-post:nth-child(6n+1) {
-    @apply flex-100;
-    @apply flex-row;
-
+    .with-large>.flex-post:nth-child(5n),
+    .with-large>.flex-post:nth-child(5n-1) {
+        // @apply flex-100;
+        flex: 1 1 50%;
+        @apply flex-col;
         .post-card-image-link {
             @apply flex-auto;
             @apply relative;
             min-height: 380px;
             @apply mr-6;
         }
-
         .post-card-image {
             @apply absolute;
             @apply h-full;
@@ -126,63 +117,50 @@ ul {
             @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 {
             @apply text-4xl;
         }
-
         .post-card-excerpt {
             @apply text-xl;
         }
     }
-
 }
 
 body[data-theme="dark"] {
-  
     background-color: #191b1f;
     @apply text-gray-300;
-
     .post-content-text {
         @apply text-gray-300;
     }
-
     .post-card-excerpt {
         @apply text-gray-500;
     }
-
     .pagination li {
         @apply bg-gray-700;
         @apply text-gray-200;
         @apply border-gray-600;
-
         &:hover {
             @apply bg-gray-600;
             @apply text-gray-900;
         }
     }
-
     .pagination li.border-l-black {
         @apply border-l-gray-300;
     }
-
     pre {
         @apply text-gray-500;
     }
-
     .flex-post {
         @apply border-b-gray-800;
     }
-
     .author-list-item img {
         border-color: #191b1f;
     }
-
     .author-social {
         a {
             &:hover {
@@ -190,5 +168,4 @@ body[data-theme="dark"] {
             }
         }
     }
-  
 }

src/components/PostListItem.vue

@@ -70,9 +70,6 @@ export default {
       default: true,
     },
   },
-  mounted() {
-    // console.log(this.record)
-  },
 };
 </script>
 

src/pages/People.vue

@@ -5,15 +5,6 @@
         <PostListItem v-for="edge in $page.entries.edges" :key="edge.node.id" :record="edge.node" />
       </div>
     </div>
-    <div class="pagination flex justify-center mb-8">
-        <Pagination
-          :baseUrl="baseurl"
-          :currentPage="$page.entries.pageInfo.currentPage"
-          :totalPages="$page.entries.pageInfo.totalPages"
-          :maxVisibleButtons="5"
-          v-if="$page.entries.pageInfo.totalPages > 1"
-        />
-      </div>
   </Layout>
 </template>