style: Improve image grid layout classes

blackfyre · Mar 6, 2024 · fb47fd8 · fb47fd8
1 parent 2c35775
commit fb47fd8
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/assets/templ/components/image.templ b/assets/templ/components/image.templ
@@ -19,7 +19,7 @@ templ ImageBase(i Image) {
 			<source media="(max-width: 768px)" srcset={ i.Thumb }/>
 			<source media="(min-width: 769px)" srcset={ i.Thumb }/>
 			<source media="(min-width: 1024px)" srcset={ i.Thumb }/>
-			<img src={ i.Image } alt={ i.Title } loading="lazy" alt="{ i.Title } -  { i.Technique }"/>
+			<img src={ i.Image } alt={ i.Title } loading="lazy" alt={ i.Title + " - " + i.Technique }/>
 		</picture>
 		<figcaption>{ i.Title } -  { i.Technique } </figcaption>
 	</figure>
@@ -73,7 +73,7 @@ templ ImageCard(i Image, hasLearnMore bool) {
 templ ImageGridComponent(i ImageGrid, hasLearnMore bool) {
 	<div class="columns is-multiline is-mobile works-listing" data-viewer>
 		for _, img := range i {
-			<div class="column is-one-third-tablet is-one-quarter-desktop">
+			<div class="column is-full-mobile is-one-third-tablet is-one-quarter-desktop">
 				@ImageCard(img, hasLearnMore)
 			</div>
 		}

diff --git a/esbuild.mjs b/esbuild.mjs
@@ -70,6 +70,9 @@ let result = await esbuild.build({
               "my-*",
               "mx-*",
               "mb-0",
+              "is-one-third-tablet",
+              "is-one-quarter-desktop",
+              "is-full-mobile",
             ],
             content: [
               "assets/templ/**/*.templ",