[homepage] Slightly adjusts RSS display for responsiveness

Author: jacomyal

src/components/BlogRSS.astro

@@ -15,17 +15,17 @@ const feed = await parser.parseURL(feedUrl);
 const dateFormatter = new Intl.DateTimeFormat("en-EN", { dateStyle: "long" });
 ---
 
-<section class="blog-posts">
+<section class="blog-posts-container">
   <h2>Latest posts on Gephi's blog</h2>
-  <div class="d-flex flex-wrap gap-4 w-100">
+
+  <div class="blog-posts">
     {
       feed.items.slice(0, 4).map((item) => (
         <article class="blog-post">
-          {" "}
-          {item["media:thumbnail"] && <img src={item["media:thumbnail"]?.$.url} />}
-          <a href={item.link}>
-            <h4>{item.title}</h4>
-          </a>
+          {item["media:thumbnail"] && <img alt="" src={item["media:thumbnail"]?.$.url} />}
+          <h4>
+            <a href={item.link}>{item.title}</a>
+          </h4>
           <div>{item.contentSnippet}</div>
           <div class="text-end text-muted">
             by{" "}

src/styles/_contents.scss

@@ -260,27 +260,49 @@ a.no-decoration {
   color: inherit;
 }
 
-.blog-posts {
-  .blog-post {
-    width: calc(50% - 1.5rem / 2);
+.blog-posts-container {
+  margin-top: $spacer-5;
 
-    @include media-breakpoint-down(md) {
-      width: 100%;
-    }
+  h2 {
+    padding: 0 $base-padding;
+  }
+
+  .blog-posts {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: start;
+    gap: $spacer-4;
+    width: 100%;
+  }
 
-    @extend .p-4;
+  .blog-post {
     @extend .shadow;
-    background: #fffffff6;
-    position: relative;
+
+    padding: $spacer-4;
+    width: calc(50% - 1.5rem / 2);
+    height: auto;
+
+    background: $white;
 
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    row-gap: 0.5rem;
+    gap: $spacer-3;
+
+    h3 {
+      @extend .fs-3;
+      margin: 0;
+    }
     img {
       max-width: 100%;
       max-height: 50%;
       object-fit: contain;
     }
   }
+
+  @include media-breakpoint-down(md) {
+    .blog-post {
+      width: 100%;
+      padding: $spacer-4 $base-padding;
+    }
+  }
 }

src/styles/_variables-override.scss

@@ -8,3 +8,6 @@ $spacer-2: map.get($spacers, 2);
 $spacer-3: map.get($spacers, 3);
 $spacer-4: map.get($spacers, 4);
 $spacer-5: map.get($spacers, 5);
+
+// Use this to get the proper padding for some item that has a 100vw width:
+$base-padding: calc(#{$spacer-4} * 0.5);