Merge branch 'main' into feature/footer

src/Gemfile.lock

@@ -8,7 +8,7 @@ GIT
 
 GIT
   remote: https://github.com/Garanas/jekyll-transcode-image-filters
-  revision: cfbd3a11d44b97e68b07a18f9b5186661f650b0c
+  revision: 51ef1db66f135f9849e1a26a8d43010bf2570ed0
   specs:
     jekyll-transcode-image-filters (0.0.1)
       jekyll (> 3.3, < 5.0)

src/_includes/post/small.html

@@ -7,7 +7,7 @@
   {% include components/thumbnail.html path=include.post.image.path alt=include.post.image.alt %}
 
   {%- if include.post.event -%}
-    <span class="post-regular-meta">
+    <span class="post-small-meta">
       {% include post/event/schedule.html event=include.post.event %}
     </span>
   {%- endif -%}

src/_sass/components/_thumbnail.scss

@@ -2,8 +2,9 @@
   border-radius: 5px;
 
   aspect-ratio: 16/9;
+  width: 100%;
   height: 100%;
-  
+
   object-fit: cover;
   object-position: center;
 }

src/_sass/initialize.scss

@@ -44,5 +44,5 @@ $on-large: $on-laptop !default;
 
 @import // Hook to override predefined variables.
   "normalize",
-  "base", "header", "footer", "wrapper", "layout", "icomoon", "post/regular", "post/featured", "post/small", "post/event", "post/page", "post/common",
+  "base", "header", "footer", "wrapper", "layout", "icomoon", "post/featured", "post/small", "post/event", "post/page", "post/common",
   "components/copy-button", "components/url-button", "components/brand", "components/divider", "components/banner", "components/thumbnail", "components/socials";

src/_sass/post/_small.scss

@@ -5,21 +5,17 @@
   margin: 0;
   list-style: none;
 
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 1em;
 
-  @media (min-width: $on-medium) {
-    padding: 1em;
-  }
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+  gap: 1rem;
+
+  gap: 1em;
 }
 
 .post-small-item-container {
-  flex-grow: 1;
-  flex-shrink: 1;
-
   display: flex;
+  flex-direction: column;
   flex-wrap: wrap;
   align-content: flex-start;
   gap: 0.5rem 1rem;
@@ -30,18 +26,18 @@
 }
 
 .post-small-text-container {
+  flex-grow: 3;
+
   display: flex;
-  flex-direction: row;
+  justify-content: space-between;
+  flex-direction: column;
 
   padding: 1em;
-
-  flex-grow: 3;
-  flex-shrink: 1;
-  flex-basis: 400px;
 }
 
 .post-small-text-body-container {
   display: flex;
+  justify-content: space-between;
   flex-direction: column;
   gap: 0.5rem 1rem;
 }
@@ -57,15 +53,10 @@
 .post-small-image-container {
   position: relative;
 
-  flex-grow: 1;
-  flex-shrink: 1;
+  max-height: 200px;
   flex-basis: 400px;
 
-  // Keep the images of a given row the same size
-  display: flex; 
-  justify-content: center; 
-  align-items: start; 
-  overflow: hidden; 
+  overflow: hidden;
 }
 
 .post-small-meta {
@@ -81,8 +72,7 @@
 
 .post-small-actions {
   display: flex;
-  justify-self: end;
-  flex-direction: column;
+  justify-content: end;
 
   padding: 1ch;
   gap: 1em;