adjust card styles layout

content/projects/ramu/index.ca.md

@@ -7,7 +7,7 @@ weight = 30
 tags = ["Japonès", "interactiu", "web app", "web", "PWA", "JavaScript"]
 
 [extra]
-local_image = "projects/ramu/ramu_logo.png"
+local_image = "projects/ramu/ramu_logo.webp"
 canonical_url = "https://osc.garden/ca/projects/ramu/"
 social_media_card = "social_cards/projects_ramu.jpg"
 +++

content/projects/ramu/index.es.md

@@ -7,7 +7,7 @@ weight = 30
 tags = ["Japonés", "interactivo", "web app", "web", "PWA", "JavaScript"]
 
 [extra]
-local_image = "projects/ramu/ramu_logo.png"
+local_image = "projects/ramu/ramu_logo.webp"
 canonical_url = "https://osc.garden/es/projects/ramu/"
 social_media_card = "social_cards/projects_ramu.jpg"
 +++

content/projects/ramu/index.md

@@ -7,7 +7,7 @@ weight = 30
 tags = ["Japanese", "interactive", "web app", "web", "PWA", "JavaScript"]
 
 [extra]
-local_image = "projects/ramu/ramu_logo.png"
+local_image = "projects/ramu/ramu_logo.webp"
 canonical_url = "https://osc.garden/projects/ramu/"
 social_media_card = "social_cards/projects_ramu.jpg"
 +++

content/projects/tabi/index.ca.md

@@ -14,7 +14,7 @@ social_media_card = "social_cards/ca_projects_tabi.jpg"
 
 [**tabi**](https://github.com/welpo/tabi) és un tema modern i ric en funcionalitat per a [Zola](https://www.getzola.org/), un generador de llocs web estàtics molt ràpid.
 
-{{ full_width_image(src="light_dark_tabi.webp", alt="Modes clar i fosc de tabi") }}
+{{ full_width_image(src="https://cdn.jsdelivr.net/gh/welpo/tabi@main/light_dark_screenshot.png", alt="Modes clar i fosc de tabi") }}
 
 #### [Veure a GitHub](https://github.com/welpo/tabi) • [Demo i documentación](https://welpo.github.io/tabi/ca/) {.centered-text}
 

content/projects/tabi/index.es.md

@@ -14,7 +14,7 @@ social_media_card = "social_cards/es_projects_tabi.jpg"
 
 [**tabi**](https://github.com/welpo/tabi) es un tema moderno y rico en funcionalidad para [Zola](https://www.getzola.org/), un generador de sitios web estáticos muy rápido.
 
-{{ full_width_image(src="light_dark_tabi.webp", alt="Modos claro y oscuro de tabi") }}
+{{ full_width_image(src="https://cdn.jsdelivr.net/gh/welpo/tabi@main/light_dark_screenshot.png", alt="Modos claro y oscuro de tabi") }}
 
 #### [Ver en GitHub](https://github.com/welpo/tabi) • [Demo y documentación](https://welpo.github.io/tabi/es/) {.centered-text}
 

sass/parts/_cards.scss

@@ -68,13 +68,12 @@
             padding-block-end: 24px;
             text-align: center;
         }
-
-        .card-title {
-            margin-top: 0.7em;
-        }
-
         .card-image {
-            width: 100%;
+            $card-image-margins: 1.6rem;
+            margin: $card-image-margins;
+            margin-bottom: $card-image-margins / 1.5;
+            width: calc(100% - $card-image-margins * 2);
+            height: auto;
         }
 
         .card-image-placeholder {

sass/parts/_posts_list.scss

@@ -15,8 +15,14 @@ $padding: 2.5rem;
 
     .thumbnail-image {
         margin: 0;
-        margin-top: 0.7rem;
-        max-width: 90%;
+        margin-inline: auto;  // Centred by default.
+        max-width: 70%;
+    }
+
+    li.date + li.post-thumbnail .thumbnail-image {
+        // Styles for the thumbnail when there's a date above (either date or updated).
+        margin-inline: 0;  // Since metadata is left aligned, the image looks weird when centred.
+        margin-block-start: 0.7rem;
     }
 
     ul {