feat: update now page style

src/_data/letterboxd.js

@@ -33,7 +33,7 @@ const fetchRecentMovies = async () => {
 
   $("channel")
     .children("item")
-    .slice(0, 6)
+    .slice(0, 5)
     .each((_, element) => {
       const title = $(element).children("letterboxd\\:filmTitle").text();
 

src/css/blocks/media-grid.css

@@ -1,6 +1,6 @@
 .media-grid {
   --column-count: 5;
-  --aspect-ratio: 0.8;
+  --aspect-ratio: 0.67;
 
   display: grid;
   grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
@@ -25,6 +25,11 @@
           transition: transform 0.3s ease;
         }
       }
+
+      .text-only {
+        aspect-ratio: var(--aspect-ratio);
+        overflow: hidden;
+      }
     }
   }
 
@@ -78,6 +83,10 @@
   }
 }
 
+.media-grid.square {
+  --aspect-ratio: 1;
+}
+
 @container (max-width: 32rem) {
   .media-grid {
     --column-count: 3;

src/pages/now.html

@@ -17,7 +17,7 @@ description: What's going on now and all the latest with myself.
     <h2>💿 Albums</h2>
     <ul class="[ media-grid square ][ p-0 ]" role="list">
         {% for album in lastfm.recentAlbums %}
-            <li>
+            <li class="radius-0.5">
                 <a href="{{ album.url }}"
                    target="_blank"
                    rel="external noreferrer noopener">
@@ -28,7 +28,7 @@ description: What's going on now and all the latest with myself.
                     {% if album.imageUrl %}
                         <img src="{{ album.imageUrl }}" alt="" />
                     {% else %}
-                        <div>{{ textContent }}</div>
+                        <div class="text-only">{{ textContent }}</div>
                     {% endif %}
                 </a>
             </li>
@@ -37,9 +37,9 @@ description: What's going on now and all the latest with myself.
 {% endif %}
 {% if letterboxd.length > 0 %}
     <h2>🍿 Movies</h2>
-    <ul class="[ media-grid poster ][ p-0 ]" role="list">
+    <ul class="[ media-grid ][ p-0 ]" role="list">
         {% for movie in letterboxd %}
-            <li>
+            <li class="radius-0.5">
                 <a href="{{ movie.url }}"
                    target="_blank"
                    rel="external noreferrer noopener">