made that nicer

src/posts/2023-10-30-demos.md

@@ -4,15 +4,15 @@ description: 'To avoid overloading this base with too many subtleties, I store s
 date: 2023-10-30
 demos:
   - title: Gallery
-    description: 'A gallery with good old "popups" in a dialog, or just looping over images.'
+    description: 'A gallery with good old "popup" functionality inside a dialog element, a new image shortcode that links directly to the image with its original dimensions, and a regular loop over images.'
     preview: 'https://eleventy-excellent-gallery.netlify.app/gallery/'
     branch: 'https://github.com/madrilene/eleventy-excellent/tree/demo-gallery'
   - title: Pagination
-    description: 'The blog collection with pagination.'
+    description: 'The blog collection with a pagination of 2 posts per page. To work with visual current page indication, :has() pseudo-class support is required.'
     preview: 'https://eleventy-excellent-pagination.netlify.app/blog/page-1/'
     branch: 'https://github.com/madrilene/eleventy-excellent/tree/demo-pagination'
   - title: Tags
-    description: 'The blog now features a tag system.'
+    description: 'The blog now features a basic tag system. Tags can be stored in front matter, as a YAML list or as an array.'
     preview: 'https://eleventy-excellent-tags.netlify.app/tags/'
     branch: 'https://github.com/madrilene/eleventy-excellent/tree/demo-tags'
 ---
@@ -26,7 +26,12 @@ Work in progress.
 
 {% for item in demos %}
 
+<article class="flow my-m-l">
    <h3>{{ item.title }}</h3>
-   <p>{{ item.description }} <br /><a href="{{ item.preview }}">Demo</a> / <a href="{{ item.branch }}">Branch</a></p>
-
+   <p>{{ item.description }}
+   <div class="cluster">
+   <a class="button" href="{{ item.preview }}">Demo</a>
+   <a class="button" href="{{ item.branch }}">Branch</a>
+   </div>
+</article>
 {% endfor %}