feat(css): new card layouts

Author: lwasser

_includes/archive-cards.html

@@ -1,12 +1,20 @@
 <article>
 <a href="{{ post.url | relative_url l}}">
 <div class="cards">
-    {% if post.feature_img %}
-    <img src="{{ post.feature_img | relative_url }}" alt="{{ post.feature_alt }}">
+    {% if post.header.overlay_image %}
+    <div class="card__header" style="background-image: url('{{ post.header.overlay_image | relative_url }}');">
+      {% if post.feature_img %}
+      <img src="{{ post.feature_img | relative_url }}" alt="{{ post.feature_alt }}">
+      {% endif %}
+    </div>
+    {% else %}
+        <div class="card__header card__header-color-{{ color_counter }}">
+        </div>
     {% endif %}
-
     <div class="card__bkg">
-        <h3 class="card-title">{{ post.title | markdownify | strip_html }}</h3>
+        <div class="card__title-container">
+            <h3 class="card-title">{{ post.title | markdownify | strip_html }}</h3>
+        </div>
     </div>
     <div class="card-excerpt">
         <p>{{ post.excerpt }}</p>

_layouts/posts_gallery.html

@@ -15,14 +15,25 @@
   {% endfor %}
 </ul>
 
+{% assign color_counter = 0 %} <!-- Initialize the counter once, outside the loop -->
+{% assign color_max = 4 %} <!-- Set the max number of colors -->
+
+
 {% assign entries_layout = page.entries_layout | default: 'list' %}
 {% assign postsByYear = site.posts | where_exp: "item", "item.hidden != true" | group_by_exp: 'post', 'post.date | date: "%Y"' %}
 {% for year in postsByYear %}
   <section id="{{ year.name }}" class="taxonomy__section">
     <h2 class="archive__subtitle">{{ year.name }}</h2>
     <div class="blog__grid">
       {% for post in year.items %}
-        {% include archive-cards.html %}
+      {% unless post.header.overlay_image %}
+        {% assign color_counter = color_counter | plus: 1 %}
+        {% if color_counter == color_max %}
+        <!-- Reset the counter -->
+          {% assign color_counter = 0 %}
+        {% endif %}
+      {% endunless %}
+        {% include archive-cards.html color_counter=color_counter %}
       {% endfor %}
     </div>
     <a href="#page-title" class="back-to-top">{{ site.data.ui-text[site.locale].back_to_top | default: 'Back to Top' }} &uarr;</a>

_pages/blog.md

@@ -7,6 +7,7 @@ excerpt: "Here we will both post updates about pyOpenSci and also highlight cont
 header:
     overlay_color: "#666"
     overlay_filter: 0.6
+    overlay_image: images/headers/pyopensci-learn-header.png
 author_profile: false
 ---
 

_posts/events/2024-04-29-create-your-first-python-package-pyopensci-online-workshop.md

@@ -11,6 +11,7 @@ categories:
   - events
 classes: wide
 toc: true
+type: "event"
 comments: true
 ---
 

_posts/events/2024-06-25-create-your-first-python-package-scipy-2024.md

@@ -11,6 +11,7 @@ categories:
   - events
 classes: wide
 toc: true
+type: "event"
 comments: true
 ---
 

_posts/events/2024-07-25-pyopensci-fall-festival.md

@@ -14,6 +14,7 @@ categories:
   - events
 classes: wide
 toc: true
+type: "event"
 comments: true
 ---
 

_sass/minimal-mistakes/_pyos-grid.scss

@@ -1,3 +1,32 @@
+// Create colormap for cards
+$colors: (
+  color-0: #bb82b0,
+  color-1: #6b5b95,
+  color-2: #bab3d4,
+  color-3: #81c0aa
+);
+
+@mixin generate-color-styles($color-map) {
+  @each $name, $color in $color-map {
+    .card__header-#{$name} {
+      background-color: $color;
+
+      &::before {
+        background: rgba(0, 0, 0, 0.4)!important;
+      }
+    }
+    .cards:hover .card__header-#{$name} {
+      background-color: lighten($color, 15%) !important; // Lighten the color by 40%
+    }
+  }
+}
+
+
+
+// Include the mixin
+@include generate-color-styles($colors);
+
+
 .clearfix::after {
   content: "";
   display: table;
@@ -59,7 +88,6 @@
 
   .card-excerpt p {
     font-size: 1.1em;
-
   }
 
   .card__bkg {
@@ -107,14 +135,20 @@
     top: 0px;
     position: relative;
     max-width: 362px;
-    background-color: #f1f0f1;;
+    background-color: #fcfbf5;;
     border-radius: 4px;
-    // padding: 32px 24px;
     text-decoration: none;
     z-index: 0;
     overflow: hidden;
     border: 1px solid #f2f8f9;
     font-size: .8em;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+    &:hover {
+      transform: scale(1.05); // Slightly enlarge the card
+      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4); // Enhanced shadow on hover
+    }
 
     &.highlight div {
       padding:0;
@@ -127,6 +161,7 @@
       &:before {
         background-color: #fff;
       }
+
       &:hover {
         cursor:default;
       }
@@ -144,7 +179,6 @@
           margin-top: 0;
           margin-bottom: 0;
           border-bottom: none;
-
         }
       }
     }
@@ -200,11 +234,41 @@
 
 
 
-/* Blog grid styles*/
+/* Blog & event grid styles*/
 
 .blog__grid .cards {
     padding: 0 !important;
 
+    .card__header {
+      position: relative;
+      background-size: cover;
+      background-position: center;
+      overflow: hidden;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.6); // Initial overlay color (faded)
+        transition: background 0.3s ease; // Smooth transition effect
+      }
+    }
+    // Changed hover selector to target .cards instead of .card__header
+    &:hover .card__header::before {
+          background: rgba(0, 0, 0, 0.2); // Darker overlay on hover
+
+        }
+
+    .card__title-container {
+      min-height: 60px; /* Set a minimum height to standardize the title area */
+      display: flex;
+      align-items: center; /* Vertically center the title */
+      padding: 0 15px; /* Padding around the title */
+    }
+
     .card-excerpt{
       font-size: .8em;
       padding: 0 1.3em;