One of the people studying the course pointed out that aspect-ratio is fully supported everywhere, so I've made a change to test it and see how well it's working.

client/components/IconImage.svelte

@@ -27,10 +27,11 @@
 
 <style>
   .iconimage-container {
-    text-align: center;
     display: flex;
     justify-content: center;
     align-items: center;
+    align-content: center;
+    text-align: center;
   }
 
   .feather {
@@ -39,8 +40,7 @@
   }
 </style>
 
-<div style="--aspect-ratio: { aspect_ratio }; color: {pattern_color || random_pattern}; background-color: {background || random_background}; width: { width }; height: { height }; filter: grayscale({ grayscale });">
+<div style="aspect-ratio: { aspect_ratio }; color: {pattern_color || random_pattern}; background-color: {background || random_background}; width: { width }; height: { height }; filter: grayscale({ grayscale });" data-testid={testid} class="pattern-{pattern} iconimage-container">
-  <div data-testid={testid} class="pattern-{ pattern } iconimage-container">
     {#if name}
       <svg class="icon-{name} feather"
            fill="{fill_color}"
@@ -55,4 +55,3 @@
       <slot></slot>
     {/if}
 </div>
-</div>

rendered/Header.svelte

@@ -1,7 +1,5 @@
 <script>
-  import { logout_user } from '$/client/api.js';
   import Icon from '$/client/components/Icon.svelte';
-  import {link} from 'svelte-spa-router';
   import { register_enabled } from "$/client/config.js";
 
   export let fixed = false;
@@ -46,7 +44,7 @@
 
 <header class:fixed>
   <nav>
-      <a href="/intro/" use:link id="logo">The Bandolier</a>
+      <a href="/client/#/intro/" id="logo">The Bandolier</a>
       <ul>
         {#if register_enabled}
           <li><a id="register-button" href="/client/#/register/">
@@ -60,7 +58,7 @@
             </a>
           </li>
         {/if}
-        <li><a href="/login/" use:link><Icon color="var(--value7)" name="log-in" tooltip="Log in." /></a></li>
+        <li><a href="/client/#/login/"><Icon color="var(--value7)" name="log-in" tooltip="Log in." /></a></li>
         <li><a href="/client/#/"><Icon color="var(--value7)" name="book" tooltip="Docs" /></a></li>
       </ul>
   </nav>

rendered/pages/docs/howto/index.svelte

@@ -49,7 +49,7 @@
     <tile>
       <left>
         <a href="/docs/howto/{ post.metadata.slug }/">
-          <IconImage width="100%" height="100%" name={ post.metadata.icon } pattern={ false }/>
+          <IconImage name={ post.metadata.icon } pattern={ false }/>
         </a>
       </left>
       <middle>

static/blockstart.css

@@ -238,3 +238,7 @@ button {
 button:hover {
   filter: brightness(90%);
 }
+
+[style*="--aspect-ratio"] {
+  aspect-ratio: var(--aspect-ratio);
+}

static/global.css

@@ -1310,27 +1310,11 @@ breadcrumb {
   z-index: 10;
 }
 
-/* Taken from https://css-tricks.com/aspect-ratio-boxes/#using-custom-properties */
+/* Testing if this is actually available everywhere.  This will go away after a while unless
-[style*="--aspect-ratio"] > img {
+ * I have to fix aspect-ratio. For now it's just for backward compatibility.
-  height: auto;
+ */
-}
-
 [style*="--aspect-ratio"] {
-  position: relative;
+  aspect-ratio: var(--aspect-ratio);
-}
-
-[style*="--aspect-ratio"]::before {
-  content: "";
-  display: block;
-  padding-bottom: calc(100% / (var(--aspect-ratio)));
-}
-
-[style*="--aspect-ratio"] > :first-child {
-  width: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
 }
 
 main.centered {