Bernard Siebens
a86c35cbe7
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.
59 lines
2.6 KiB
HTML
59 lines
2.6 KiB
HTML
{% extends "_base.html" %}
|
|
|
|
{% comment %}
|
|
A club's skin, used on its subdomain. `club` comes from the branding context
|
|
processor, which reads the tenant resolved by ClubTenantMiddleware.
|
|
{% endcomment %}
|
|
|
|
{% block title %}
|
|
{% block head_title %}{% endblock head_title %} · {{ club.name }}
|
|
{% endblock title %}
|
|
|
|
{% block extra %}
|
|
{% if club.primary_color or club.secondary_color %}
|
|
{% comment %}
|
|
daisyUI declares its theme variables inside `@layer base`, and unlayered styles
|
|
beat every layered rule regardless of specificity -- so this plain :root wins
|
|
without any !important or selector games. primary_content_color / secondary_content_color
|
|
are computed from the club's colours so a pale brand doesn't end up with
|
|
white-on-yellow buttons or initials.
|
|
{% endcomment %}
|
|
<style>
|
|
:root {
|
|
{% if club.primary_color %}
|
|
--color-primary: {{ club.primary_color }};
|
|
--color-primary-content: {{ club.primary_content_color }};
|
|
{% endif %}
|
|
{% if club.secondary_color %}
|
|
--color-secondary: {{ club.secondary_color }};
|
|
--color-secondary-content: {{ club.secondary_content_color }};
|
|
{% endif %}
|
|
}
|
|
</style>
|
|
{% endif %}
|
|
{% endblock extra %}
|
|
|
|
{% block brand %}
|
|
<a class="flex flex-row items-center gap-3" href="/">
|
|
{% if club.logo %}
|
|
{# 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">
|
|
<div class="w-16 rounded-full bg-secondary text-secondary-content">
|
|
<span class="font-roboto text-xl font-bold">{{ club.initials }}</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="flex flex-col gap-1">
|
|
<div class="font-roboto text-2xl font-bold tracking-wider">{{ club.name }}</div>
|
|
<div class="font-mono text-xs font-semibold text-base-content/50">Powered by RosterChief</div>
|
|
</div>
|
|
</a>
|
|
{% endblock brand %}
|