feat: fix events on home page (#821)

Author: lwasser

_includes/upcoming-events.html

@@ -26,7 +26,7 @@
 {% if has_upcoming_events == true %}
 <section class="upcoming-events-section">
   <h2>Upcoming Events</h2>
-  <div class="entries-grid">
+  <div class="upcoming-events-list">
     {% for post in all_events %}
       {% assign start_date = post.event.start_date | date: "%Y-%m-%d" %}
       {% capture posttime %}{{ start_date | date: '%s'}}{% endcapture %}

_pages/home.md

@@ -88,22 +88,22 @@ peer-review:
    </div>
 </div>
 
+{% include upcoming-events.html %}
+
+<br clear="both">
+
 {% assign new_ppl = site.data.contributors | reverse %}
 
 ## New pyOpenSci contributors
 
-<div class="entries-grid">
-{% for aperson in new_ppl limit:4 %}
+<div class="entries-grid entries-grid--contributors">
+{% for aperson in new_ppl limit:5 %}
     {% include people-grid.html  %}
 {% endfor %}
 </div>
 
 <br clear="both">
 
-{% include upcoming-events.html %}
-
-<br clear="both">
-
 <!-- pull blog posts not events -->
 {% assign blog_posts = site.posts |  where_exp: "item", "item.categories contains 'blog-post'" %}
 

_sass/minimal-mistakes/_pyos-cards.scss

@@ -316,6 +316,45 @@
 
 }
 
+// Landing page upcoming events list: smaller card, less padding
+.upcoming-events-list .event-card {
+  max-width: 800px;
+  margin-bottom: 0;
+
+  .event-card__date {
+    width: 140px;
+    min-width: 140px;
+    padding: 0.5rem;
+  }
+
+  .event-card__date-text {
+    font-size: 1rem;
+
+    span:last-of-type {
+      font-size: 0.7rem;
+    }
+  }
+
+  .event-card__details {
+    padding: 0.5rem 0.75rem;
+
+    h3 {
+      margin-bottom: 0.35rem;
+      font-size: 1.1rem;
+    }
+
+    p {
+      margin-bottom: 0.5rem;
+      font-size: 0.9rem;
+    }
+
+    .event-card__button {
+      padding: 0.35rem 0.75rem;
+      font-size: 0.9rem;
+    }
+  }
+}
+
 
   // Responsive design adjustments
   @media (max-width: 600px) {

_sass/minimal-mistakes/_pyos-grid.scss

@@ -174,7 +174,53 @@ $colors: (
     @media (min-width: $large) {
       grid-template-columns: repeat(4, 1fr); // Large: 4 columns
     }
+
+    // Home page new contributors: single row of 5, smaller cards, more gap
+    &.entries-grid--contributors {
+      grid-template-columns: repeat(5, 1fr);
+      grid-gap: 1rem;
+      justify-items: center;
+      > * {
+        max-width: 200px;
+        min-width: 0;
+        width: 100%;
+      }
+      .people-card {
+        h4.person_name {
+          font-size: 0.95rem;
+          padding-left: 0.5em;
+          padding-right: 0.5em;
+        }
+        p.page__meta,
+        p.contrib_org {
+          padding-left: 0.5em;
+          padding-right: 0.5em;
+        }
+        p.page__meta,
+        p.contrib_org,
+        .ppl_social {
+          font-size: 0.75rem;
+        }
+        .ppl_social {
+          padding-left: 0.5em;
+          padding-right: 0.5em;
+          padding-bottom: 0.4em;
+        }
+      }
+    }
+  }
+
+// Home page upcoming events: single column, full-width horizontal cards
+.upcoming-events-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  > * {
+    max-width: none;
+    width: 100%;
   }
+}
 
 // Home page packages section - fixed breakpoints (max 3 columns for better spacing)
 .packages-grid {