new Newsroom

content/site/navigation.json

@@ -1,5 +1,10 @@
 {
   "headerNavigation": [
+    {
+      "name": "About",
+      "link": "/about",
+      "external": false
+    },
     {
       "name": "Projects",
       "link": "/projects",
@@ -11,19 +16,13 @@
       "external": false
     },
     {
-      "name": "Overview",
-      "link": "/overview",
+      "name": "Blog",
+      "link": "/blog",
       "external": false
     },
     {
-      "name": "News",
-      "link": "/news",
-      "external": false
-    },
-
-    {
-      "name": "About",
-      "link": "/about",
+      "name": "NewsRoom",
+      "link": "/newsroom",
       "external": false
     }
   ],

gridsome.server.js

@@ -89,8 +89,8 @@ module.exports = function (api) {
 
     api.createPages(({ createPage }) => {
         createPage({
-        path: '/overview',
-        component: './src/templates/Overview.vue',
+            path: '/newsroom',
+            component: './src/templates/NewsRoom.vue',
             context: {
                 private: private
             }

src/assets/scss/main.scss

@@ -51,9 +51,8 @@ ul {
     }
 }
 
-
 .animated-link:after {
-    content: '';
+    content: "";
     width: 0px;
     height: 1px;
     display: block;
@@ -96,32 +95,31 @@ ul {
 }
 
 .author-list-item:nth-child(n + 2) {
-    @apply -ml-3
+    @apply -ml-3;
 }
 
 @media (min-width: 768px) {
-    .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;
+    // .with-large>.flex-post:nth-child(5n),
+    .with-large>.flex-post:nth-child(6n + 1) {
+        @apply flex-100;
+        @apply flex-row;
         .post-card-image-link {
-            
+            //   @apply flex-auto;
+            flex: 1 1 100%;
             @apply relative;
-            min-height: 400px;
-            
+            min-height: 380px;
+            @apply mr-6;
         }
         .post-card-image {
             @apply absolute;
-            @apply h-full;
+            @apply h-auto;
             @apply w-full;
             @apply object-cover;
             @apply rounded-lg;
         }
         .post-card-content {
-            // @apply flex-post-large-content;
-            flex: 0 1 auto;
-            @apply self-center
+            @apply flex-post-large-content;
+            @apply self-center;
         }
         .post-card-title {
             @apply text-4xl;
@@ -130,6 +128,33 @@ ul {
             @apply text-xl;
         }
     }
+    // .with-large>.flex-overview:nth-child(6n + 1) {
+    //     @apply flex-100;
+    //     @apply flex-row;
+    //     .post-card-image-link {
+    //         @apply flex-auto;
+    //         @apply relative;
+    //         min-height: 380px;
+    //         @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"] {
@@ -165,7 +190,7 @@ body[data-theme="dark"] {
     .author-social {
         a {
             &:hover {
-                @apply text-white
+                @apply text-white;
             }
         }
     }

src/components/PostListItem.vue

@@ -14,7 +14,9 @@
       <g-link :to="record.path">
         <h2 class="post-card-title mt-3">{{ record.title || record.name }}</h2>
         <p class="post-card-excerpt">{{ record.excerpt }}</p>
-        <section class="flex flex-wrap post-tags container mx-auto relative py-1">
+        <section
+          class="flex flex-wrap post-tags container mx-auto relative py-1"
+        >
           <g-link
             v-for="membership in record.memberships"
             :key="membership.id"
@@ -46,9 +48,7 @@
               </ul>
             </div>
 
-            <div
-              class="flex flex-col text-xs leading-none uppercase"
-            >
+            <div class="flex flex-col text-xs leading-none uppercase">
               <p>
                 <g-link :to="record.path">
                   <time :datetime="record.datetime">{{
@@ -64,11 +64,7 @@
                 </g-link>
                 {{ record.status }}
               </p>
-              
             </div>
-
-           
-
           </div>
           <section class="post-tags container mx-auto relative py-3">
             <g-link
@@ -79,7 +75,6 @@
               >{{ tag.title }}</g-link
             >
           </section>
-           
         </div>
       </div>
     </div>

src/templates/NewsRoom.vue

@@ -1,7 +1,7 @@
 <template>
   <Layout>
     <div class="container sm:pxi-0 mx-auto overflow-x-hidden">
-      <div class="flex flex-wrap pt-8 pb-8 mx-4 sm:-mx-4">
+      <div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
         <PostListItem v-for="edge in $page.entries.edges" :key="edge.node.id" :record="edge.node" />
       </div>
     </div>