From a4b1b06dc0ca14d4474bdad9edf28de8acb24db0 Mon Sep 17 00:00:00 2001
From: Cameron <cameron.taylor.ninja@gmail.com>
Date: Sun, 17 Mar 2024 13:57:55 -0700
Subject: [PATCH] slicker demo viewing

---
 .eleventy.js                      |  7 +++++--
 content/_scss/sections/demos.scss |  9 ++++++---
 content/_scss/style.scss          |  3 ---
 content/demos.liquid              | 12 ++++++------
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 59724a023..97ec26587 100644
--- a/.eleventy.js
+++ b/.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)
diff --git a/content/_scss/sections/demos.scss b/content/_scss/sections/demos.scss
index a8de277de..56cd65017 100644
--- a/content/_scss/sections/demos.scss
+++ b/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 {
diff --git a/content/_scss/style.scss b/content/_scss/style.scss
index b7bed77b5..08074a6a4 100644
--- a/content/_scss/style.scss
+++ b/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);
 }
 
diff --git a/content/demos.liquid b/content/demos.liquid
index 3961bf240..4e475f2e6 100644
--- a/content/demos.liquid
+++ b/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 %}