enh: final css cleanup

Author: lwasser

_includes/package-grid.html

@@ -1,4 +1,5 @@
 {% assign use_isotope = include.isotope | default: false %}
+{% assign is_feature = include.feature %}
 
 {% if use_isotope %}
 <div class="element-item package-card {% for aCategory in apackage.categories %}
@@ -41,6 +42,7 @@ <h3 class="package-card__title" itemprop="name">
       {{ apackage.package_description | markdownify }}
     </div>
 
+    {% unless is_feature %} HI there
     <ul class="package-card__links">
       <li><a href="{{ apackage.repository_link }}" rel="permalink"><i class="fab fa-github" aria-hidden="true"></i> View Code</a></li>
       {% if apackage.gh_meta.documentation %}
@@ -57,5 +59,6 @@ <h3 class="package-card__title" itemprop="name">
         <li class="package-card__archived"><i class="fa-solid fa-box-archive" aria-hidden="true"></i> Archived</li>
       {% endif %}
     </ul>
+    {% endunless %}
   </div>
 </div>

_pages/about-peer-review.md

@@ -157,8 +157,8 @@ We are deeply grateful for those served on our editorial board previously!
 {% assign packages_sorted = site.data.packages | sort_natural: 'date_accepted' | reverse %}
 
 <div class="grid">
-  {% for apackage in packages_sorted limit:4 %}
-    {% include package-grid.html %}
+  {% for apackage in packages_sorted limit:3 %}
+    {% include package-grid.html feature=true %}
   {% endfor %}
 </div>
 

_pages/home.md

@@ -136,7 +136,7 @@ peer-review:
 
 <div class="packages-grid">
   {% for apackage in packages_sorted limit:3 %}
-    {% include package-grid.html %}
+    {% include package-grid.html feature=true %}
   {% endfor %}
 </div>
 

_sass/minimal-mistakes/_pyos-grid.scss

@@ -176,7 +176,7 @@ $colors: (
     }
   }
 
-// Home page packages section - fixed breakpoints
+// Home page packages section - fixed breakpoints (max 3 columns for better spacing)
 .packages-grid {
   display: grid;
   grid-gap: 10px;
@@ -187,11 +187,45 @@ $colors: (
   }
 
   @media (min-width: $medium) {
-    grid-template-columns: repeat(3, 1fr); // Medium: 3 columns
+    grid-template-columns: repeat(3, 1fr); // Medium and above: 3 columns (max)
   }
 
-  @media (min-width: $large) {
-    grid-template-columns: repeat(4, 1fr); // Large: 4 columns
+  // Feature package cards - compact display
+  .package-card {
+    .package-card__content {
+      padding: 1.25em;
+    }
+
+    .package-card__title {
+      font-size: 1.5em;
+    }
+
+    .package-card__meta {
+      font-size: 0.75em;
+    }
+
+    .package-card__description p {
+      font-size: 1.1em;
+      line-height: 1.5em;
+    }
+  }
+}
+
+.grid .package-card {
+  .package-card__content {
+    padding: 1.25em;
+  }
+
+  .package-card__title {
+    font-size: 1.0375em;
+  }
+
+  .package-card__meta {
+    font-size: 0.75em;
+  }
+
+  .package-card__description {
+    font-size: 0.8125em;
   }
 }
 
@@ -286,16 +320,20 @@ $colors: (
   .grid-item {
     display: flex;
     flex-direction: column;
-    background: $pyos-mediumpurple;
-    border: 1px solid #ddd;
+    background: transparent;
+    border: none;
     border-radius: 8px;
-    overflow: hidden;
+    overflow: visible;
     padding: 0;
   }
 
+  .cards.highlight {
+    margin: 0 !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
+  }
 
-  div>div {
-    padding:0;
+  div > div {
+    padding: 0;
   }
 }
 
@@ -304,6 +342,7 @@ $colors: (
   display: flex;
   flex-direction: column;
   height: 100%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
 
   .cards__image {
     max-height: 200px;
@@ -322,6 +361,7 @@ $colors: (
 
   &:hover {
     cursor: default;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); // Maintain shadow on hover (override base .cards hover shadow)
   }
 
   .card-body {