feat: update catalogue templates

src/_layouts/book.html

@@ -8,7 +8,10 @@ layout: base
           datetime="{{ date }}">
         {% include "svgs/calendar.svg" %}
     {{ date | formatDate("MMMM Do YYYY") }}</time>
-    <section class="[ meta ] [ flex justify-between mb-1 gap-1 ]">
+    <section class="[ catalogue-meta ] [ gap-1 mb-1 ]">
+        {% if image %}
+            {% image image, "", "" %}
+        {% endif %}
         <div>
             <h1>{{ title }}</h1>
             {% if subtitle %}<h3 class="[ text-fadeText my-0.5 ]">{{ subtitle }}</h3>{% endif %}
@@ -19,9 +22,6 @@ layout: base
                 </ul>
             {% endif %}
         </div>
-        {% if image %}
-            <div>{% image image, "", "" %}</div>
-        {% endif %}
     </section>
     {{ content | safe }}
 </article>

src/_layouts/catalogue.html

@@ -3,14 +3,14 @@ layout: base
 ---
 
 <article class="[ catalogue ] [ flow ]">
-    <section class="[ meta ] [ flex justify-between mb-1 ]">
+    <section class="[ catalogue-meta ] [ gap-1 mb-1 ]">
+        {% if image %}
+            {% image image, "", "" %}
+        {% endif %}
         <div>
             <h1>{{ title }}</h1>
             <h2 class="[ text-fadeText ]">{{ subtitle }}</h2>
         </div>
-        {% if image %}
-            <div>{% image image, "", "" %}</div>
-        {% endif %}
     </section>
     {{ content | safe }}
 </article>

src/_layouts/game.html

@@ -8,7 +8,7 @@ layout: base
           datetime="{{ date }}">
         {% include "svgs/calendar.svg" %}
     {{ date | formatDate("MMMM Do YYYY") }}</time>
-    <section class="[ meta ] [ mb-1 ]">
+    <section class="[ catalogue-meta ] [ gap-1 mb-1 ]">
         {% if image %}
             {% image image, "", "" %}
         {% endif %}
@@ -16,7 +16,7 @@ layout: base
             <h1>{{ title }}</h1>
             <h2 class="[ text-fadeText my-0.5 ]">{{ year }}</h2>
             {% if filteredTags | length > 0 %}
-                <ul class="[ flex list-none p-0 gap-0.5 ]">
+                <ul class="[ flex list-none p-0 gap-0.5 mb-0 ]">
                     {% for tag in filteredTags %}<li class="[ bg-surface radius-1 px-1 py-0.5 ]">{{ tag }}</li>{% endfor %}
                 </ul>
             {% endif %}

src/assets/css/blocks/catalogue.css

@@ -1,5 +1,5 @@
-.catalogue .meta picture {
-  inline-size: 10rem;
+.catalogue {
+  container-type: inline-size;
 }
 
 .catalogue-type {
@@ -9,6 +9,23 @@
 
 .catalogue-meta {
   display: grid;
-  grid-template-columns: auto 1fr;
-  font-size: 0.875rem;
+  grid-template-columns: 1fr 200px;
+}
+
+.catalogue-meta picture {
+  max-width: 200px;
+}
+
+.catalogue-meta > *:first-child {
+  order: 1;
+}
+
+@container (max-width: 32rem) {
+  .catalogue-meta {
+    grid-template-columns: 1fr;
+  }
+
+  .catalogue-meta > *:first-child {
+    order: initial;
+  }
 }

src/assets/css/utils/flow.css

@@ -1,7 +1,7 @@
 /*
-FLOW UTILITY
-Like the Every Layout stack: https://every-layout.dev/layouts/stack/
-Info about this implementation: https://piccalil.li/quick-tip/flow-utility/
+ * FLOW UTILITY
+ * Like the Every Layout stack: https://every-layout.dev/layouts/stack/
+ * Info about this implementation: https://piccalil.li/quick-tip/flow-utility/
  */
 .flow > * + * {
   margin-block-start: var(--flow-space, 1em);

src/assets/css/utils/visually-hidden.css

@@ -1,6 +1,6 @@
 /*
-VISUALLY HIDDEN UTILITY
-Info: https://piccalil.li/quick-tip/visually-hidden/
+ * VISUALLY HIDDEN UTILITY
+ * Info: https://piccalil.li/quick-tip/visually-hidden/
  */
 .visually-hidden {
   border: 0;