fix(css): home grid alignment fixes

Author: lwasser

_includes/feature_row_pyos

@@ -4,11 +4,13 @@
   {% assign feature_row = page.feature_row %}
 {% endif %}
 
-<div class="grid col-3">
+<div class="feature-grid">
+
   {% for f in feature_row %}
+  <div class="grid-item">
     <div class="cards highlight">
       {% if f.image_path %}
-      <div class="cards__image">
+      <div class="cards-image">
         <img src="{{ f.image_path | relative_url }}"
              alt="{% if f.alt %}{{ f.alt }}{% endif %}">
         {% if f.image_caption %}
@@ -17,23 +19,22 @@
       </div>
     {% endif %}
       <div class="card-body">
-        <div>
           {% if f.title %}
             <h2 class="card-title">{{ f.title }}</h2>
           {% endif %}
 
           {% if f.excerpt %}
-            <div class="archive__item-excerpt">
+            <div class="card-content">
               {{ f.excerpt | markdownify }}
             </div>
           {% endif %}
-
-          {% if f.url %}
-            <p><a href="{{ f.url | relative_url }}" class="btn {{ f.btn_class }}">{{ f.btn_label | default: site.data.ui-text[site.locale].more_label | default: "Learn More" }}</a></p>
-          {% endif %}
-        </div>
+          <div class="card-footer">
+            {% if f.url %}
+              <a href="{{ f.url | relative_url }}" class="btn {{ f.btn_class }}">{{ f.btn_label | default: site.data.ui-text[site.locale].more_label | default: "Learn More" }}</a>
+            {% endif %}
+          </div>
       </div>
     </div>
+  </div>
   {% endfor %}
-
 </div>

_pages/home.md

@@ -29,14 +29,14 @@ peer-review:
     title: "Community Partnerships"
     excerpt: "We partner with domain-specific scientific Python communities such as [Pangeo](https://www.pyopensci.org/software-peer-review/partners/pangeo.html) who want to review affiliated packages. Through this collaboration, we develop community-specific standards that are used in our reviews to evaluate whether a package meets affiliation requirements. This removes the need for communities to develop their own peer review process."
     url: https://www.pyopensci.org/partners.html
-    btn_label: "> Learn More About Our Community Partners"
+    btn_label: "> Learn About Community Partners"
     btn_class: btn--inverse
   - image_path: images/python-packaging-guide.png
     title: "Simplifying Packaging"
     alt: Light purple image that says python packaging guide and below it says simplifying python packaging. The background is a grey laptop with a hand looking down at the laptop the above.
     excerpt: "We are creating a beginner-friendly, **community-driven Python packaging guide**. Our guide is reviewed by members of the Python Packaging Authority, maintainers of core packaging tools and members of the scientific Python community. It recommends best practices for you to follow when creating a Python package."
     url: https://www.pyopensci.org/python-package-guide/
-    btn_label: "> Check out our Python packaging guide"
+    btn_label: "> Read our packaging guide"
     btn_class: btn--inverse
 ---
 
@@ -89,11 +89,11 @@ peer-review:
 <div class="notice notice-highlight" markdown="1">
 ## Recent blog posts & updates
 
-<div class="grid col-3">
+<div class="grid">
   {% for post in blog_posts limit:3 %}
 
   <div class="cards">
-  <h3 ><a href="{{ site.baseurl }}{{ post.url}}" rel="permalink">{{ post.title }}</a></h3>
+  <h3 class="card-title"><a href="{{ site.baseurl }}{{ post.url}}" rel="permalink">{{ post.title }}</a></h3>
 
     <div>
         <p>{{ post.excerpt | markdownify }}</p>

_sass/minimal-mistakes/_pyos-grid.scss

@@ -24,7 +24,7 @@ $colors: (
 
 
 // Include the mixin
-@include generate-color-styles($colors);
+//@include generate-color-styles($colors);
 
 
 .clearfix::after {
@@ -70,10 +70,16 @@ $colors: (
     }
   }
 
-
+.grid-item {
+    background: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
 
 /* Blog grid styles */
-
 .blog__grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -113,10 +119,7 @@ $colors: (
   }
 }
 
-/* Package cards splash */
-.cards h2.archive__item-title {
-  font-size: 1.1em!important;
-}
+
 
 .bubble:before {
         content: "";
@@ -135,113 +138,185 @@ $colors: (
 
 // Cards are also used to style the isotope layout
 // do not adjust the display or structure of the cards element.
+/* Package cards splash */
 .cards {
-    top: 0px;
-    position: relative;
-    background-color: #fcfbf5;;
-    border-radius: 4px;
-    text-decoration: none;
-    z-index: 0;
+  top: 0px;
+  position: relative;
+  background-color: #fcfbf5;
+  border-radius: 4px;
+  text-decoration: none;
+  z-index: 0;
+  overflow: hidden;
+  border: 1px solid #ccc;
+  font-size: .8em;
+
+  @include breakpoint-max-width(480px) {
+    padding: 2em;
+  }
+
+  &__image {
+    max-height: calc($small / 3);
     overflow: hidden;
-    border: 1px solid #ccc;
-    font-size: .8em;
+    border-radius: 10px;
+  }
 
-    @include breakpoint-max-width(480px) {
-      .cards {
-        padding: 2em;
-      }
-    }
+  &:hover {
+    transition: all 0.2s ease-out;
+    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
+    top: -4px;
+    border: 1px solid #cccccc;
+    background-color: white;
+    cursor: pointer;
+  }
 
-    &__image {
-      max-height: calc($small/3);
-      overflow: hidden;
-      border-radius: 10px;
+  &:hover:before {
+    transform: scale(2.15);
+  }
+
+  p {
+    font-size: .9em;
+  }
+
+  h2 {
+    a {
+      text-decoration: none;
+      font-size: 1.2em;
     }
 
-    &.highlight div {
-      padding:0;
+    &.archive__item-title {
+      font-size: 1.1em !important;
     }
+  }
 
-    &.highlight {
-      background-color:#f0f0f0!important;
-      padding: 0;
+  h3.card__title.no_toc,
+  .card__title.no_toc {
+    margin-top: .3em;
+    font-size: 1.5em;
+    color: #320a44;
+  }
 
-      &:before {
-        background-color: #fff;
-      }
+  .page__meta.contributors {
+    font-size: .7em;
+  }
 
-      &:hover {
-        cursor:default;
-      }
+  .contributors a {
+    text-decoration: none;
+  }
 
+  ul {
+    font-size: .8em;
+    list-style-type: none;
+    margin-left: 0;
+    padding: .2em;
+  }
 
-      .card-body {
-        margin: .2em;
-        padding: 1.2em;
+  ul a {
+    text-decoration: none;
+  }
+}
 
-        p {
-          font-size: 1.2em;
-        }
+.grid h3.card-title a {
+  margin-top: .3em;
+  font-size: 1.3em;
+  color: $pyos-darkpurple;
+  margin-top: 0;
+  margin-bottom: 0;
+  border-bottom: none;
+}
 
-        .card-title {
-          margin-top: 0;
-          margin-bottom: 0;
-          border-bottom: none;
-        }
-      }
-    }
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+  //padding: 20px;
+  width: 100%;
+  box-sizing: border-box;
 
-    &:hover {
-        transition: all 0.2s ease-out;
-        box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
-        top: -4px;
-        border: 1px solid #cccccc;
-        background-color: white;
-        cursor: pointer;
-    }
+  .grid-item {
+    display: flex;
+    flex-direction: column;
+    background: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    overflow: hidden;
+  }
 
 
-    &:hover:before {
-        transform: scale(2.15);
-    }
+  div>div {
+    padding:0;
+  }
+}
 
-    p {
-      font-size: .9em
+// Highlight is used for the home page highlight feature cards
+.cards.highlight {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .cards__image {
+    max-height: 200px;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: auto;
+      object-fit: cover;
     }
+  }
 
-    h2 a {
-      text-decoration: none;
-      font-size: 1.2em;
+  &:before {
+    background-color: #fff;
+  }
+
+  &:hover {
+    cursor: default;
+  }
+
+  .card-body {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    padding: 15px;
+
+    h2.card-title {
+      margin:0;
     }
 
-    h3.card__title.no_toc, .card__title.no_toc {
-      margin-top: .3em;
-      font-size: 1.5em;
-      color: #320a44;
+    .card-content {
+      flex-grow: 1;
     }
 
-    .page__meta.contributors {
-      font-size: .7em;
+    .card-footer {
+      padding: 15px;
+      text-align: center;
+
+      a.btn {
+        margin-top: auto
+      }
     }
 
-    .contributors a {
-      text-decoration: none;
+    /* Ensure content is spaced properly and button stays at the bottom */
+    > div {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      justify-content: space-between; /* Distribute content vertically */
     }
 
-    ul {
-      font-size: .8em;
-      list-style-type: none;
-      margin-left: 0;
-      padding: .2em;
+    /* Style for the p containing the button */
+    p {
+      font-size: 1.2em;
+      margin-bottom: 0.5em;
     }
 
-    ul a {
-      text-decoration: none;
+    /* Ensure the button is pushed to the bottom */
+    p a.btn {
+      margin-top: auto; /* This ensures the button stays at the bottom */
+      border: 1px solid yellow;
+      align-self: flex-start; /* Optional, to align the button to the left */
     }
   }
-
-
-
+}
 /* Blog & event grid styles*/
 
 .blog__grid .cards {