Update to Eleventy v3 (#11)

* feat: upgrade to v3; install eleventy-upgrade-help

* feat: convert all files to esm

* feat: remove decapcms

* fix: remove unused filter

* feat: remove netlify packages

* feat: update image handling

- removes old image shortcode
- update to latest 11ty image transform plugin

* feat: update colophon

* fix: pill style; global style

Fixes an issue with <img> inside <figure> not being centered

* feat: remove linting packages

* feat: update package.json scripts

* feat: remove upgrade helper plugin

* feat: add new button style, update nav

* feat: simplify `pill` class usage

* feat: fix tag list in catalogue-item.html

* feat: move games into their own section

* feat: update node version to latest LTS

* feat: move books to their own section

* feat: move fun pages into pages dir

* feat: update index and book/game templates

* feat: add watching section

* fix: update scaling values for buttons

* feat: various css updates

* feat: update now page style

* feat: cleaning up newer posts using old shortcode

also adding markdown-it-attrs to add attrs to various markdown elements!

* fix: movie data structure

* feat: update colophon

* fix: remove text-skew from post excerpt text

* feat: add support for shows in /watching

* fix: update book tags

* feat: add complete implementation of books pages

other stuff happened too

* fix: image border-radius

* feat: update game layout and content

* feat: reorganize watching section

* feat: add contact page

* feat: small page changes

* feat: add podroll page

* feat: reorganize content directories

* feat: exclude podcasts from page output

* chore: delete guestbook page

* chore: remove bracket syntax for css classes in html

* feat: create macro for tag list

* fix: colophon update

* chore: remove last.fm data

* chore: clean up 11ty config

* fix: misc permalink fixes

* feat: add update post

* fix: media meta grid on mobile

* fix: tables on mobile

* fix: add titles to icon button links

* fix: add missing divider for movies/shows

* feat: add alternate feeds

* fix: tag cleanup

* feat: homepage content update

* fix: game meta data

* fix: update post dates

* feat: add missing link to changelog

src/css/blocks/button.css

@@ -1,35 +1,102 @@
 .button {
-  display: flex;
   align-items: center;
-  justify-content: center;
-  line-height: 1rem;
-  background-color: var(--color-white);
-  color: var(--color-shadow);
-  box-shadow:
-    1px 1px 0px var(--color-shadow),
-    2px 2px 0 var(--color-shadow);
-  padding-block: var(--spacing-0\.25);
-  padding-inline: var(--spacing-0\.5);
-  border-radius: var(--spacing-0\.25);
-  border: 1px solid var(--color-shadow);
+  color: var(--color-text);
+  display: inline-flex;
+  gap: var(--spacing-0\.5);
+  padding: var(--spacing-0\.5) var(--spacing-1);
+  position: relative;
   text-decoration: none;
-  font-size: 0.8rem;
-  transition:
-    box-shadow var(--transition-duration),
-    transform var(--transition-duration),
-    background-color var(--transition-duration),
-    color var(--transition-duration);
+  transition: transform 0.3s var(--transition-bounce);
+  z-index: 1;
+
+  &::before,
+  &::after {
+    border-radius: var(--spacing-0\.5);
+    position: absolute;
+    inset: 0;
+    content: "";
+    transition:
+      opacity 0.1s ease,
+      transform 0.3s var(--transition-bounce);
+    z-index: -1;
+  }
+
+  &::before {
+    background-color: var(--color-surface);
+  }
+
+  &::after {
+    background-color: var(--color-text);
+    opacity: 0;
+  }
+
+  svg {
+    color: var(--color-fadeText);
+    transform: scale(1);
+    transition: transform 0.3s var(--transition-bounce);
+  }
 }
 
-.button:hover {
-  background-color: color-mix(
-    in srgb,
-    var(--color-white) 90%,
-    var(--color-primary)
-  );
+@media (hover: hover) {
+  .button:not(:active):hover {
+    &::before,
+    &::after {
+      transform: scale(1.05);
+    }
+
+    &::after {
+      opacity: 1;
+    }
+
+    svg {
+      color: var(--color-border);
+      transform: rotateZ(10deg) scale(1.25);
+    }
+  }
 }
 
 .button:active {
-  box-shadow: 0 0 0 var(--color-shadow);
-  transform: translate(2px, 2px);
+  transform: scale(0.95);
+}
+
+.button--alt {
+  color: var(--color-primary);
+
+  &::before {
+    background-color: var(--color-white);
+  }
+
+  &::after {
+    background-color: color-mix(
+      in srgb,
+      var(--color-white) 90%,
+      var(--color-primary)
+    );
+  }
+
+  svg {
+    color: inherit;
+  }
+}
+
+@media (hover: hover) {
+  .button--alt:hover {
+    color: var(--color-shadow);
+
+    svg {
+      color: inherit;
+    }
+  }
+}
+
+.button__count {
+  color: var(--color-fadeText);
+}
+
+@media (hover: hover) {
+  .button:hover {
+    .button__count {
+      color: var(--color-border);
+    }
+  }
 }