refactor: make the whole playoff banner clickable instead of a Bracket pill
Wrap the trophy + title + meta group in the bracket link itself so the whole Stanley Cup Playoffs element doubles as the entry point. Cleaner banner, one fewer control to style. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
+15
-13
@@ -369,9 +369,9 @@ main {
|
||||
/* ── Playoff Banner ─────────────────────────────── */
|
||||
|
||||
.playoff-banner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
padding: 0.875rem 1.25rem;
|
||||
background: var(--banner-bg);
|
||||
@@ -385,19 +385,25 @@ main {
|
||||
}
|
||||
|
||||
.banner-main {
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
min-width: 0;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
transition: background 120ms ease;
|
||||
}
|
||||
|
||||
.banner-actions {
|
||||
grid-column: 3;
|
||||
justify-self: end;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
.banner-main:hover,
|
||||
.banner-main:focus-visible {
|
||||
background: rgba(212, 175, 55, 0.08);
|
||||
}
|
||||
|
||||
.banner-main:focus-visible {
|
||||
outline: 2px solid var(--cup-gold-1);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.banner-trophy {
|
||||
@@ -465,12 +471,8 @@ main {
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.playoff-banner {
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
.banner-main { grid-column: 1; }
|
||||
.banner-actions { grid-column: 1; justify-self: center; }
|
||||
}
|
||||
|
||||
/* ── Playoff Game Cards ─────────────────────────── */
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<span class="header-title">NHL Scoreboard</span>
|
||||
</header>
|
||||
<section id="playoff-banner" class="playoff-banner hidden" aria-hidden="true">
|
||||
<div class="banner-main">
|
||||
<a class="banner-main" href="/bracket" aria-label="View the playoff bracket">
|
||||
<svg class="banner-trophy" viewBox="0 0 32 40" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="cup-gold" x1="0" x2="1" y1="0" y2="1">
|
||||
@@ -43,10 +43,7 @@
|
||||
<span class="meta-game7 hidden"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-actions">
|
||||
<a class="banner-bracket-link" href="/bracket">Bracket</a>
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
<main>
|
||||
<section id="pinned-section" class="section pinned-section hidden">
|
||||
|
||||
Reference in New Issue
Block a user