Frame the club logo with a primary-coloured ring, sharpen its scaling

Wraps the uploaded logo in the same avatar shape as the initials
fallback (so the header doesn't jump in size depending on whether a
club has one) and adds a ring in the club's own primary colour as a
plain border around it.

Also hints the browser to use its higher-quality image scaler: a
club's raster logo is often much smaller than the badge it's shown in,
and the default upscaling in some engines reads as pixelated. Doesn't
affect SVG logos, which scale losslessly regardless.

templates/_club_base.html

@@ -36,7 +36,12 @@
 {% block brand %}
     <a class="flex flex-row items-center gap-3" href="/">
         {% if club.logo %}
-            <img class="h-16 w-16 object-contain" src="{{ club.logo.url }}" alt="{{ club.name }}">
+            {# The ring is the club's own primary colour -- a plain frame around whatever crest they uploaded. #}
+            <div class="avatar">
+                <div class="w-16 rounded-full bg-base-100 ring-2 ring-primary ring-offset-2 ring-offset-base-100">
+                    <img class="club-logo object-contain p-1" src="{{ club.logo.url }}" alt="{{ club.name }}">
+                </div>
+            </div>
         {% else %}
             {# Never the RosterChief mark: that would pass our branding off as the club's own. #}
             <div class="avatar avatar-placeholder">