slicker demo viewing

.eleventy.js

@@ -44,20 +44,23 @@ module.exports = function(eleventyConfig) {
       return isActive ? "active" : "";
     });
 
-    eleventyConfig.addShortcode("image", async function(src, alt, width, height) {
+    eleventyConfig.addShortcode("image", async function(src, alt, width, height, classes = "") {
       let resizedImage = await resizeImage(src, width, height, "cover");
 
       let metadata = await Image(resizedImage, { 
         formats: ["png"],
         outputDir: "out/img"
       });
-
+
+
+
       let imageAttributes = {
         alt,
         width: width,
         height: height,
         loading: "lazy",
         decoding: "async",
+        class: classes
       };
 
       // You bet we throw an error on a missing alt (alt="" works okay)

content/_scss/sections/demos.scss

@@ -3,16 +3,19 @@
 
 .demo-page.center-align-a img {
 	box-shadow: var(--bs-box-shadow);
+	width: 100%;
+	height: auto;
 }
 
 .demo-page.center-align-a p {
-	display: inline;
-	position: absolute;
+	@include font-size(1rem);
 	text-align: center;
+	position: relative;
 	width: 100%;
+	margin: 0;
+	top: 2em;
 	color: white;
 	background: rgba(0, 0, 0, 0.7);
-	padding: 10px;
 }
 
 #page-tr-info {

content/_scss/style.scss

@@ -299,9 +299,6 @@ pre .title:before {
 }
 
 .center-align-a > a {
-	position: relative;
-	padding: 14px;
-	display: inline-table;
 	@include hover-scale-fx(1.1);
 }
 

content/demos.liquid

@@ -2,16 +2,16 @@
 title: "Demos"
 layout: "demos-layout"
 ---
-<div class="demo-page center-align-a row row-cols-auto justify-content-center">
+<div class="demo-page center-align-a row row-cols-sm-2 row-cols-3 g-3 justify-content-center mx-sm-4">
 	{% for demo in collections['demo-item'] %}
+
 		<a
-			class="col-1 col-md-3"
-			href="{{ demo.url }}"
-			property="dc:title">
-			<p class="fw-semibold" style="width: 190px">{{ demo.data.title }}</p>
+			class="col-6 col-sm-4 col-md-3"
+			href="{{ demo.url }}">
+			<p class="fw-semibold py-2">{{ demo.data.title }}</p>
 			{% capture imgURL %}content/_static/images/demos/{{ demo.data.title }}.png{% endcapture %}
 			{% liquid
-				image imgURL, "{{demo.data.title}}", 190, 190
+				image imgURL, "{{demo.data.title}}", 200, 200
 			%}
 		</a>
 	{% endfor %}