style: center trophy + title + meta within playoff banner
Switch the banner to a 3-column grid (1fr auto 1fr) so the main group sits truly centered regardless of the right-side action cluster width. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
+24
-7
@@ -369,7 +369,8 @@ main {
|
||||
/* ── Playoff Banner ─────────────────────────────── */
|
||||
|
||||
.playoff-banner {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.875rem 1.25rem;
|
||||
@@ -383,6 +384,22 @@ main {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.banner-main {
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.banner-actions {
|
||||
grid-column: 3;
|
||||
justify-self: end;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.banner-trophy {
|
||||
width: 36px;
|
||||
height: 44px;
|
||||
@@ -391,8 +408,8 @@ main {
|
||||
}
|
||||
|
||||
.banner-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
@@ -417,6 +434,7 @@ main {
|
||||
margin-top: 0.2rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.4rem 0.7rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--cup-silver-1);
|
||||
@@ -478,13 +496,12 @@ main {
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.playoff-banner {
|
||||
flex-wrap: wrap;
|
||||
grid-template-columns: 1fr;
|
||||
justify-items: center;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
.banner-notify {
|
||||
order: 3;
|
||||
margin-left: auto;
|
||||
}
|
||||
.banner-main { grid-column: 1; }
|
||||
.banner-actions { grid-column: 1; justify-self: center; }
|
||||
}
|
||||
|
||||
/* ── Playoff Game Cards ─────────────────────────── */
|
||||
|
||||
@@ -17,6 +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">
|
||||
<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">
|
||||
@@ -42,10 +43,13 @@
|
||||
<span class="meta-game7 hidden"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-actions">
|
||||
<a class="banner-bracket-link" href="/bracket">Bracket</a>
|
||||
<button class="banner-notify" type="button" title="Notify me on playoff OT" aria-label="Enable OT notifications">
|
||||
<span class="bell-label">OT alerts</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<main>
|
||||
<section id="pinned-section" class="section pinned-section hidden">
|
||||
|
||||
Reference in New Issue
Block a user