88x31

content/blog/88x31/index.md

@@ -0,0 +1,18 @@
++++
+title = "88x31"
+description = "My 88x31 badge as well as a few others"
+date = 2026-04-24
+
+[taxonomies]
+tags = ["web", "88x31"]
++++
+
+I decided to make a 88x31 badge for fun and included a fun little puzzle inside it. 
+
+{{ badge88x31(link="/", src="/badge.gif", alt="this website's 88x31 badge") }}
+
+---
+
+Here are some badges from people I know/like
+
+{{ badge88x31(link="https://ivytime.gay", src="https://ivytime.gay/badges/ivytime.gay.png", alt="Ivy's badge", new_tab=true) }}

sass/style.scss

@@ -60,6 +60,13 @@ img,video {
   background-color: var(--grey-dark);
 }
 
+.badge-88x31 {
+  width: 176px;
+  height: 62px;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+}
+
 h1,
 h2,
 h3,
@@ -139,5 +146,3 @@ figure figcaption {
   font-size: 0.9rem;
   color: var(--fg-muted);
 }
-
-

templates/shortcodes/badge88x31.html

@@ -0,0 +1,28 @@
+{% set is_remote = src is starting_with("http://") or src is starting_with("https://") %}
+{% set is_site_root = src is starting_with("/") %}
+{% set badge_src = src %}
+
+{% if is_site_root %}
+  {% set badge_src = get_url(path=src) %}
+{% elif not is_remote %}
+  {% set local_asset_dir = page.relative_path | regex_replace(pattern="[^/]+$", rep="") %}
+  {% set local_asset_path = local_asset_dir ~ src %}
+  {% set badge_src = get_url(path=local_asset_path) %}
+{% endif %}
+
+<a
+  href="{{ link }}"
+  class="badge-88x31"
+  aria-label="{{ alt | default(value='88x31 badge link') }}"
+  {% if new_tab | default(value=false) %}target="_blank" rel="noopener noreferrer"{% endif %}
+>
+  <img
+    class="badge-88x31"
+    src="{{ badge_src }}"
+    alt="{{ alt | default(value='88x31 badge') }}"
+    width="88"
+    height="31"
+    loading="lazy"
+    decoding="async"
+  >
+</a>