88x31 buttons

layouts/partials/buttons.html

@@ -0,0 +1,34 @@
+<style>
+    .buttons {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        max-width: 100vw; /* Make the container as wide as the viewport */
+        gap: 3px;
+        margin: 0; /* Remove any default margin */
+        padding: 0; /* Remove any default padding */
+    }
+    .button {
+        display: inline-block; 
+        border: none;
+        margin: 0;
+        padding: 0;
+        border-radius: 0;
+        background: none;
+        image-rendering: auto;
+        image-rendering: crisp-edges;
+        image-rendering: pixelated;
+        image-rendering: -webkit-optimize-contrast;
+    }
+</style>
+
+<div class="buttons">
+{{ $buttons := resources.Match "buttons/*" }}
+{{ if $buttons }}
+    {{ range $index, $button := $buttons }}
+        <img class="button" src="{{ $button.RelPermalink }}" alt="Button {{ $button.Name | path.Base }}" />
+    {{ end }}
+{{ else }}
+    <p>No buttons available.</p>
+{{ end }}
+</div>