font bolding and blog card list style internal review feedback

Author: thescientist13

src/components/blog-posts-list/blog-posts-list.js

@@ -22,22 +22,22 @@ export default class BlogPostsList extends HTMLElement {
 
             return `
               <li class="${styles.postsListItem}">
-                <img
-                  alt="${title}"
-                  class="${styles.postsListItemCoverImage}"
-                  height="80"
-                  width="80"
-                  src="${coverBackground}"
-                  style="padding-left: ${coverBackgroundPadding}"
-                />
+                <a class="${styles.postsListItemContentLink}" href="${route}">
+                  <img
+                    alt="${title}"
+                    class="${styles.postsListItemCoverImage}"
+                    height="80"
+                    width="80"
+                    src="${coverBackground}"
+                    style="padding-left: ${coverBackgroundPadding}"
+                  />
 
-                <div class="${styles.postsListItemContentContainer}">
-                  <h2 class="${styles.postsListItemContentTitle}">
-                    <a class="${styles.postsListItemContentLink}" href="${route}">${title}</a>
-                  </h2>
-                  <p class="${styles.postsListItemContentAbstract}">${abstract}</p>
-                </div>
+                  <div class="${styles.postsListItemContentContainer}">
+                    <h2 class="${styles.postsListItemContentTitle}">${title}</h2>
+                    <p class="${styles.postsListItemContentAbstract}">${abstract}</p>
+                  </div>
 
+                </a>
               </li>
             `;
           })

src/components/blog-posts-list/blog-posts-list.module.css

@@ -1,5 +1,5 @@
 .postsList {
-  /* padding: var(--size-1) auto; */
+  padding: var(--size-1) auto;
 }
 
 .postsListItem {
@@ -14,14 +14,24 @@
   min-height: 150px;
 }
 
+.postsListItemContentLink {
+  display: inline-block;
+  color: var(--color-secondary) !important;
+  text-decoration: none;
+}
+
+.postsListItemContentLink:hover {
+  text-decoration: none;
+}
+
 .postsListItemCoverImage {
   display: inline-block;
   object-fit: cover;
   min-width: 60px;
   max-width: 60px;
   max-height: var(--size-8);
   min-height: var(--size-8);
-  border-radius: var(--radius-4);
+  border-radius: var(--radius-3);
   border: 1px solid var(--color-secondary);
   padding: var(--size-1);
   background-color: var(--color-white);
@@ -35,16 +45,15 @@
 }
 
 .postsListItemContentTitle {
+  font-family: var(--font-primary-bold);
+  font-size: var(--font-size-2);
   display: inline-flex;
-}
-
-.postsListItemContentLink {
-  display: inline-block;
-  vertical-align: bottom;
+  margin: 0 0 var(--size-1);
 }
 
 .postsListItemContentAbstract {
   font-size: var(--font-size-1);
+  line-height: var(--size-lineheight-2);
 }
 
 @media (min-width: 768px) {
@@ -60,6 +69,10 @@
   .postsListItemContentContainer {
     margin: 0 0 0 var(--size-1);
   }
+
+  .postsListItemCoverImage {
+    margin: var(--size-1);
+  }
 }
 
 @media (min-width: 1024px) {
@@ -74,6 +87,15 @@
     max-width: 80px;
     max-height: var(--size-9);
     min-height: var(--size-9);
+    margin: var(--size-2);
+  }
+
+  .postsListItemContentTitle {
+    font-size: var(--font-size-3);
+  }
+
+  .postsListItemContentAbstract {
+    font-size: var(--font-size-2);
   }
 }
 

src/pages/blog/index.html

@@ -8,25 +8,33 @@
       data-gwd-opt="static"
     ></script>
     <style>
-      .container {
+      .page-content .container {
         text-align: center;
         margin: var(--size-2);
       }
 
-      .heading {
-        font-size: var(--font-size-6);
+      .page-content .heading {
+        font-size: var(--font-size-5);
+        font-family: var(--font-primary-bold);
       }
 
-      .subHeading {
+      .page-content .subHeading {
         margin: var(--size-4);
         font-size: var(--font-size-2);
       }
+
+      @media (min-width: 768px) {
+        .page-content .heading {
+          font-size: var(--font-size-8);
+        }
+      }
+
     </style>
   </head>
 
   <body>
     <div class="container">
-      <h1 class="heading">News and Announcements</h1>
+      <h1 class="heading">News and <br> Announcements</h1>
       <p class="subHeading">
         Get the latest updates and information about Greenwood releases and activities.
       </p>

src/pages/blog/release/v0-15-0.md

@@ -1,5 +1,5 @@
 ---
-title: v0.15.0 Release
+title: Release - v0.15.0
 abstract: Introducing our newest feature, Theme Packs.  It's like CSS Zen Garden but as a plugin.
 published: 2021-08-06
 layout: blog

src/pages/blog/release/v0-18-0.md

@@ -1,5 +1,5 @@
 ---
-title: v0.18.0 Release
+title: Release - v0.18.0
 abstract: Let's review the latest enhancements now available in Greenwood.
 published: 2021-10-22
 layout: blog

src/pages/blog/release/v0-19-0.md

@@ -1,5 +1,5 @@
 ---
-title: v0.19.0 Release
+title: Release -  v0.19.0
 abstract: This release includes a new scaffolding tool for starting your next Greenwood project.
 published: 2021-11-11
 layout: blog

src/pages/blog/release/v0-20-0.md

@@ -1,5 +1,5 @@
 ---
-title: v0.20.0 Release
+title: Release - v0.20.0
 abstract: We've migrated to ESM!  Let's discuss our journey there.
 published: 2021-12-18
 coverImage: /assets/blog/nodejs.png

src/pages/blog/release/v0-21-0.md

@@ -1,5 +1,5 @@
 ---
-title: v0.21.0 Release
+title: Release - v0.21.0
 abstract: External data sources are now supported in Greenwood and template support to our new project scaffolding CLI.
 published: 2022-01-08
 layout: blog

src/pages/blog/release/v0-23-0.md

@@ -1,5 +1,5 @@
 ---
-title: v0.23.0 Release
+title: Release - v0.23.0
 abstract: Server-Side Rendering is now available in Greenwood, so let's talk all about it.
 published: 2022-02-11
 layout: blog

src/pages/blog/release/v0-24-0.md

@@ -1,5 +1,5 @@
 ---
-title: v0.24.0 Release
+title: Release - v0.24.0
 abstract: This release brings some exciting new features for optimizing the local development experience with Greenwood.
 published: 2022-03-06
 layout: blog