keep buttons pixelated

content/index.css

@@ -205,3 +205,7 @@ img {
 	max-width: 100%;
 	max-height: 80vh;
 }
+
+.web-button {
+	image-rendering: pixelated;
+}

content/index.md

@@ -23,8 +23,8 @@ Sticker by [djuan](https://linktr.ee/mkiiisystem)!
 - github: <https://github.com/nycki93>
 - fediverse: <https://bark.lgbt/@nycki> (18+)
 
-![nycki](/a/button-nycki.png)
-[![i was on cohost!](/a/button-cohost-mykocalico.png)](https://cohost.org/nycki)
+{% webButton '/a/button-nycki.png', 'nycki' %}
+{% webButton '/a/button-cohost-mykocalico.png', 'i was on cohost!', 'https://cohost.org/nycki' %}
 
 ## blog
 
@@ -32,11 +32,10 @@ Sticker by [djuan](https://linktr.ee/mkiiisystem)!
 
 ## cool people buttons go here
 
-[![sofia-drawsmore](/a/button-sofia.png)](https://sofiadrawsmore.neocities.org/)
-[![pebble](/a/button-pebble.gif)](https://pebble.pet/)
-[![quwyou](/a/button-quwyou.gif)](https://quwyou.com/)
-[![alterae](/a/button-alterae.webp)](https://alterae.online/)
-[![88 by 31](/a/button-88by31.gif)](https://cyber.dabamos.de/88x31/)
+{% webButton '/a/button-sofia.png', 'sofia-drawsmore', 'https://sofiadrawsmore.neocities.org/' %}
+{% webButton '/a/button-pebble.gif', 'pebble', 'https://pebble.pet/' %}
+{% webButton '/a/button-quwyou.gif', 'quwyou', 'https://quwyou.com/' %}
+{% webButton '/a/button-88by31.gif', '88 by 31', 'https://cyber.dabamos.de/88x31/' %}
 
 ## creations
 

eleventy.config.js

@@ -108,6 +108,12 @@ module.exports = function(eleventyConfig) {
 		return (new Date()).toISOString();
 	})
 
+	eleventyConfig.addNunjucksShortcode("webButton", function (src, alt, href) {
+		const img = `<img src="${src}" alt="${alt}" title="${alt}" width=88 height=31 class="web-button">`;
+		const a = href ? `<a href=${href}>${img}</a>` : img;
+		return a;
+	});
+
 	// Features to make your build faster (when you need them)
 
 	// If your passthrough copy gets heavy and cumbersome, add this line