feat: Animated 404 image, some style improvements, more attributions

README.md

@@ -21,10 +21,13 @@ The main repo is https://git.exozy.me/daudix/duckquill, but since only exozy.me
 
 - [Quill image used in the metadata card](https://commons.wikimedia.org/wiki/File:3quills.jpg)
 
-## Special thanks ♥
+## Thanks to ♥
 
-- [Jakub Steiner](https://jimmac.eu) for an awesome [OS Component Website](https://jimmac.github.io/os-component-website), on top of which this whole thing is built
-- [Cassidy James](https://cassidyjames.com) for an awesome [Mastodon-powered Comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon)
-- [Mehdi](https://codepen.io/meduzen) for an awesome [CSS Scanlines](https://codepen.io/meduzen/pen/zxbwRV)
-- dwb, ejm and jgs for awesome ASCII art
+- [Jakub Steiner](https://jimmac.eu) for the [OS Component Website](https://jimmac.github.io/os-component-website), on top of which this whole thing is built
+- [Cassidy James](https://cassidyjames.com) for the [Mastodon-powered Comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon)
+- [Mehdi Merah](https://mehdi.cc) for the [CSS Scanlines](https://codepen.io/meduzen/pen/zxbwRV)
+- [Bootstrap team](https://getbootstrap.com/docs/5.3/about/team/) for the [Bootstrap Icons](https://icons.getbootstrap.com)
+- [Rasmus](https://rsms.me) for the [Inter](https://rsms.me/inter/) font
+- [JetBrains](https://www.jetbrains.com) for the [JetBrains Mono](https://www.jetbrains.com/lp/mono/) font
+- dwb, ejm and jgs for the ASCII art
 - Everyone who supported me and said good stuff <3

content/_index.md

@@ -145,10 +145,13 @@ The main repo is [git.exozy.me/daudix/duckquill](https://git.exozy.me/daudix/duc
 
 - [Quill image used in the metadata card](https://commons.wikimedia.org/wiki/File:3quills.jpg)
 
-## Special thanks ♥
+## Thanks to ♥
 
-- [Jakub Steiner](https://jimmac.eu) for an awesome [OS Component Website](https://jimmac.github.io/os-component-website), on top of which this whole thing is built
-- [Cassidy James](https://cassidyjames.com) for an awesome [Mastodon-powered Comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon)
-- [Mehdi](https://codepen.io/meduzen) for an awesome [CSS Scanlines](https://codepen.io/meduzen/pen/zxbwRV)
-- dwb, ejm and jgs for awesome ASCII art
+- [Jakub Steiner](https://jimmac.eu) for the [OS Component Website](https://jimmac.github.io/os-component-website), on top of which this whole thing is built
+- [Cassidy James](https://cassidyjames.com) for the [Mastodon-powered Comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon)
+- [Mehdi Merah](https://mehdi.cc) for the [CSS Scanlines](https://codepen.io/meduzen/pen/zxbwRV)
+- [Bootstrap team](https://getbootstrap.com/docs/5.3/about/team/) for the [Bootstrap Icons](https://icons.getbootstrap.com)
+- [Rasmus](https://rsms.me) for the [Inter](https://rsms.me/inter/) font
+- [JetBrains](https://www.jetbrains.com) for the [JetBrains Mono](https://www.jetbrains.com/lp/mono/) font
+- dwb, ejm and jgs for the ASCII art
 - Everyone who supported me and said good stuff <3

sass/_gnome-hig.scss

@@ -44,4 +44,4 @@
   --dark3: rgb(61, 56, 70);
   --dark4: rgb(36, 31, 49);
   --dark5: rgb(0, 0, 0);
-}
+}

sass/_main.scss

@@ -114,6 +114,7 @@ strong {
 
 small {
   color: var(--fg50);
+  font-size: 0.8rem;
 }
 
 dl {
@@ -162,6 +163,7 @@ blockquote > blockquote {
 
 abbr {
   cursor: help;
+  text-decoration: underline dotted;
 }
 
 kbd {
@@ -255,7 +257,7 @@ figcaption {
   display: block;
   text-align: center;
   color: var(--fg50);
-  font-size: 0.9rem;
+  font-size: 0.8rem;
 }
 
 details {
@@ -277,7 +279,7 @@ table {
   max-width: 100vw;
   overflow: auto;
   word-break: normal;
-  word-break: keep-all; // For Firefox to horizontally scroll wider tables.
+  word-break: keep-all; // for Firefox to horizontally scroll wider tables.
   -webkit-overflow-scrolling: touch;
 }
 

sass/_scanlines.scss

@@ -33,6 +33,9 @@ $scan-opacity: 0.75;
   } @else {
     animation: none;
   }
+  @media (prefers-reduced-motion) {
+    animation: none;
+  }
 }
 
 // apply CRT animation: @include scan-crt($scan-crt);
@@ -42,6 +45,9 @@ $scan-opacity: 0.75;
   } @else {
     animation: none;
   }
+    @media (prefers-reduced-motion) {
+    animation: none;
+  }
 }
 
 // CSS .scanlines CLASS

templates/404.html

@@ -1,7 +1,10 @@
 {% extends "base.html" %}
 
 {% block content %}
-<img src="{{ get_url(path='404.png') }}" class="full pixels transparent no-hover" />
+<picture>
+  <source srcset="{{ get_url(path='404.png') }}" class="full pixels transparent no-hover" media="(prefers-reduced-motion: reduce)"></source> 
+  <img srcset="{{ get_url(path='404.gif') }}" class="full pixels transparent no-hover">
+</picture>
 
 <h1>Page Not Found</h1>