bernard/RosterChief
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Darken the event-background hero gradient for readability

Browse Source 
A bright/light event photo (e.g. a well-lit rink) let too much through at
the top and middle of the gradient, making the "Next up" eyebrow and the
face-off/location meta line hard to read against it. Increases the
gradient stops on both Home's hero card and Event detail's header --
darkening the backdrop rather than lightening the text, which was already
white/near-max.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9
This commit is contained in:
Bernard Siebens
2026-08-22 12:54:12 +02:00
parent 1d22a57208
commit 3426ea8447
2 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
mobile/templates/mobile/event_detail.html
View File

@@ -18,7 +18,7 @@
{% if club.event_background %}
<img class="absolute inset-0 h-full w-full object-cover grayscale" src="{{ club.event_background.url }}" alt="">
{% endif %}
<div class="absolute inset-0" style="background: linear-gradient(180deg, rgba(11,18,32,.35) 0%, rgba(11,18,32,.55) 60%, rgba(11,18,32,.92) 100%)"></div>
<div class="absolute inset-0" style="background: linear-gradient(180deg, rgba(11,18,32,.5) 0%, rgba(11,18,32,.75) 60%, rgba(11,18,32,.96) 100%)"></div>
<div class="relative z-10 flex flex-1 flex-col justify-end p-4 text-white">
<a class="mb-auto flex h-11 w-11 items-center justify-center rounded-full bg-white/15" href="{% url "mobile:home" %}" aria-label="{% trans "Back" %}">
{% lucide "chevron-left" size=20 stroke_width=2.4 class="text-white" %}

2
mobile/templates/mobile/home.html
View File

@@ -39,7 +39,7 @@
{% if club.event_background %}
<img class="absolute inset-0 h-full w-full object-cover grayscale" src="{{ club.event_background.url }}" alt="">
{% endif %}
<div class="absolute inset-0" style="background: linear-gradient(180deg, rgba(11,18,32,.15) 0%, rgba(11,18,32,.75) 55%, rgba(11,18,32,.95) 100%)"></div>
<div class="absolute inset-0" style="background: linear-gradient(180deg, rgba(11,18,32,.45) 0%, rgba(11,18,32,.82) 55%, rgba(11,18,32,.97) 100%)"></div>
<div class="relative z-10">
<div class="p-4 pb-0">
<p class="font-display text-xs font-extrabold text-info uppercase tracking-wide">{% blocktrans with date=hero_attendance.event.start|date:"D d M" %}Next up &middot; {{ date }}{% endblocktrans %}</p>