Skip to content

Mobile overhaul: touch targets, iOS zoom, overscroll, bottom-sheet popover #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tinkerwise wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Mobile overhaul: touch targets, iOS zoom, overscroll, bottom-sheet popover #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dist/all-star/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"><meta name="theme-color" content="#111111" media="(prefers-color-scheme: dark)"><meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="description" content="Baltimore Orioles and MLB news aggregator"><title>All-Star Game | Yard Report</title><link rel="icon" type="image/jpeg" href="/yardreport/favicon.jpg"><link rel="apple-touch-icon" href="/yardreport/favicon.jpg"><link rel="stylesheet" href="/yardreport/style.css?v=1783801407225"></head> <body> <nav class="site-nav" aria-label="Site navigation"> <a href="/yardreport/" class="site-nav-link"> Dashboard </a><a href="/yardreport/schedule/" class="site-nav-link"> Schedule </a><a href="/yardreport/depth-chart/" class="site-nav-link"> Depth Chart </a><a href="/yardreport/around-the-horn/" class="site-nav-link"> Around the Horn </a><a href="/yardreport/all-star/" class="site-nav-link site-nav-link--active" aria-current="page"> All-Star </a><a href="/yardreport/draft/" class="site-nav-link"> Draft </a><a href="/yardreport/trade-deadline/" class="site-nav-link"> Trade Deadline </a> </nav> <header class="site-header"> <div class="header-inner"> <a class="logo" href="/yardreport/"> <img class="logo-img" src="/yardreport/logo.png" alt="Yard Report logo" height="36"> <span class="logo-wordmark" aria-label="Yard Report"> <span class="logo-word">Yard</span> <strong class="logo-word logo-word-accent">Report</strong> </span> </a> <nav class="header-right header-breadcrumb" aria-label="Breadcrumb"> <a class="breadcrumb-link" href="/yardreport/">← Yard Report</a> <span class="breadcrumb-sep" aria-hidden="true">/</span> <span class="breadcrumb-current">All-Star Game</span> </nav> </div> </header> <main class="asg-page"> <div class="asg-container"> <div class="asg-main"> <div class="asg-main-head"> <h1 class="asg-title">2026 All-Star Rosters</h1> <span class="asg-updated" id="asgUpdated"></span> </div> <div id="asgLiveTracker"></div> <div id="asgOriolesSpotlight"></div> <div class="asg-rosters"> <div class="asg-team-col"> <div class="asg-team-head asg-team-head--al">American League</div> <div id="asgAL"><span class="sidebar-msg">Loading…</span></div> </div> <div class="asg-team-col"> <div class="asg-team-head asg-team-head--nl">National League</div> <div id="asgNL"><span class="sidebar-msg">Loading…</span></div> </div> </div> </div> <aside class="sidebar asg-sidebar"> <div class="sidebar-section" data-section="asg-game"> <h3 class="section-label">Game Info</h3> <div class="section-body" id="asgGameInfo"> <span class="sidebar-msg">Loading…</span> </div> </div> <div class="sidebar-section" data-section="asg-derby"> <h3 class="section-label">Home Run Derby</h3> <div class="section-body" id="asgDerby"> <span class="sidebar-msg">Loading…</span> </div> </div> <div class="sidebar-section collapsible" data-section="asg-news"> <h3 class="section-label section-toggle" data-target="asg-news">
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"><meta name="theme-color" content="#111111" media="(prefers-color-scheme: dark)"><meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="description" content="Baltimore Orioles and MLB news aggregator"><title>All-Star Game | Yard Report</title><link rel="icon" type="image/jpeg" href="/yardreport/favicon.jpg"><link rel="apple-touch-icon" href="/yardreport/favicon.jpg"><link rel="stylesheet" href="/yardreport/style.css?v=1783964963721"></head> <body> <nav class="site-nav" aria-label="Site navigation"> <a href="/yardreport/" class="site-nav-link"> Dashboard </a><a href="/yardreport/schedule/" class="site-nav-link"> Schedule </a><a href="/yardreport/depth-chart/" class="site-nav-link"> Depth Chart </a><a href="/yardreport/around-the-horn/" class="site-nav-link"> Around the Horn </a><a href="/yardreport/all-star/" class="site-nav-link site-nav-link--active" aria-current="page"> All-Star </a><a href="/yardreport/draft/" class="site-nav-link"> Draft </a><a href="/yardreport/trade-deadline/" class="site-nav-link"> Trade Deadline </a> </nav> <header class="site-header"> <div class="header-inner"> <a class="logo" href="/yardreport/"> <img class="logo-img" src="/yardreport/logo.png" alt="Yard Report logo" height="36"> <span class="logo-wordmark" aria-label="Yard Report"> <span class="logo-word">Yard</span> <strong class="logo-word logo-word-accent">Report</strong> </span> </a> <nav class="header-right header-breadcrumb" aria-label="Breadcrumb"> <a class="breadcrumb-link" href="/yardreport/">← Yard Report</a> <span class="breadcrumb-sep" aria-hidden="true">/</span> <span class="breadcrumb-current">All-Star Game</span> </nav> </div> </header> <main class="asg-page"> <div class="asg-container"> <div class="asg-main"> <div class="asg-main-head"> <h1 class="asg-title">2026 All-Star Rosters</h1> <span class="asg-updated" id="asgUpdated"></span> </div> <div id="asgLiveTracker"></div> <div id="asgOriolesSpotlight"></div> <div class="asg-rosters"> <div class="asg-team-col"> <div class="asg-team-head asg-team-head--al">American League</div> <div id="asgAL"><span class="sidebar-msg">Loading…</span></div> </div> <div class="asg-team-col"> <div class="asg-team-head asg-team-head--nl">National League</div> <div id="asgNL"><span class="sidebar-msg">Loading…</span></div> </div> </div> </div> <aside class="sidebar asg-sidebar"> <div class="sidebar-section" data-section="asg-game"> <h3 class="section-label">Game Info</h3> <div class="section-body" id="asgGameInfo"> <span class="sidebar-msg">Loading…</span> </div> </div> <div class="sidebar-section" data-section="asg-derby"> <h3 class="section-label">Home Run Derby</h3> <div class="section-body" id="asgDerby"> <span class="sidebar-msg">Loading…</span> </div> </div> <div class="sidebar-section collapsible" data-section="asg-news"> <h3 class="section-label section-toggle" data-target="asg-news">
All-Star News
<svg class="section-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"></path></svg> </h3> <div class="section-body" id="asgNews"> <span class="sidebar-msg">Loading…</span> </div> </div> <div class="sidebar-section collapsible" data-section="asg-media"> <h3 class="section-label section-toggle" data-target="asg-media">
Media
Expand Down
2 changes: 1 addition & 1 deletion dist/around-the-horn/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"><meta name="theme-color" content="#111111" media="(prefers-color-scheme: dark)"><meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="description" content="Baltimore Orioles and MLB news aggregator"><title>Around the Horn | Yard Report</title><link rel="icon" type="image/jpeg" href="/yardreport/favicon.jpg"><link rel="apple-touch-icon" href="/yardreport/favicon.jpg"><link rel="stylesheet" href="/yardreport/style.css?v=1783801407225"></head> <body> <nav class="site-nav" aria-label="Site navigation"> <a href="/yardreport/" class="site-nav-link"> Dashboard </a><a href="/yardreport/schedule/" class="site-nav-link"> Schedule </a><a href="/yardreport/depth-chart/" class="site-nav-link"> Depth Chart </a><a href="/yardreport/around-the-horn/" class="site-nav-link site-nav-link--active" aria-current="page"> Around the Horn </a><a href="/yardreport/all-star/" class="site-nav-link"> All-Star </a><a href="/yardreport/draft/" class="site-nav-link"> Draft </a><a href="/yardreport/trade-deadline/" class="site-nav-link"> Trade Deadline </a> </nav> <main class="ath-page"> <div class="ath-page-shell"> <a class="ath-page-back" href="/yardreport/">← Back to Yard Report</a> <header class="ath-page-head"> <span class="ath-page-kicker">Around the Horn</span> <h1 class="ath-page-title" id="athPageTitle">Loading story…</h1> <p class="ath-page-subtitle" id="athPageSubtitle">Gathering related coverage from the saved bundle.</p> </header> <section class="ath-story-grid" id="athStoryGrid"> <div class="feed-msg">Loading bundle…</div> </section> </div> </main> <script type="module" src="/yardreport/assets/index.astro_astro_type_script_index_0_lang.gQkwrIcr.js"></script> </body></html>
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"><meta name="theme-color" content="#111111" media="(prefers-color-scheme: dark)"><meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="description" content="Baltimore Orioles and MLB news aggregator"><title>Around the Horn | Yard Report</title><link rel="icon" type="image/jpeg" href="/yardreport/favicon.jpg"><link rel="apple-touch-icon" href="/yardreport/favicon.jpg"><link rel="stylesheet" href="/yardreport/style.css?v=1783964963721"></head> <body> <nav class="site-nav" aria-label="Site navigation"> <a href="/yardreport/" class="site-nav-link"> Dashboard </a><a href="/yardreport/schedule/" class="site-nav-link"> Schedule </a><a href="/yardreport/depth-chart/" class="site-nav-link"> Depth Chart </a><a href="/yardreport/around-the-horn/" class="site-nav-link site-nav-link--active" aria-current="page"> Around the Horn </a><a href="/yardreport/all-star/" class="site-nav-link"> All-Star </a><a href="/yardreport/draft/" class="site-nav-link"> Draft </a><a href="/yardreport/trade-deadline/" class="site-nav-link"> Trade Deadline </a> </nav> <main class="ath-page"> <div class="ath-page-shell"> <a class="ath-page-back" href="/yardreport/">← Back to Yard Report</a> <header class="ath-page-head"> <span class="ath-page-kicker">Around the Horn</span> <h1 class="ath-page-title" id="athPageTitle">Loading story…</h1> <p class="ath-page-subtitle" id="athPageSubtitle">Gathering related coverage from the saved bundle.</p> </header> <section class="ath-story-grid" id="athStoryGrid"> <div class="feed-msg">Loading bundle…</div> </section> </div> </main> <script type="module" src="/yardreport/assets/index.astro_astro_type_script_index_0_lang.gQkwrIcr.js"></script> </body></html>
2 changes: 1 addition & 1 deletion dist/depth-chart/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"><meta name="theme-color" content="#111111" media="(prefers-color-scheme: dark)"><meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="description" content="Baltimore Orioles and MLB news aggregator"><title>Depth Chart | Yard Report</title><link rel="icon" type="image/jpeg" href="/yardreport/favicon.jpg"><link rel="apple-touch-icon" href="/yardreport/favicon.jpg"><link rel="stylesheet" href="/yardreport/style.css?v=1783801407225"></head> <body> <nav class="site-nav" aria-label="Site navigation"> <a href="/yardreport/" class="site-nav-link"> Dashboard </a><a href="/yardreport/schedule/" class="site-nav-link"> Schedule </a><a href="/yardreport/depth-chart/" class="site-nav-link site-nav-link--active" aria-current="page"> Depth Chart </a><a href="/yardreport/around-the-horn/" class="site-nav-link"> Around the Horn </a><a href="/yardreport/all-star/" class="site-nav-link"> All-Star </a><a href="/yardreport/draft/" class="site-nav-link"> Draft </a><a href="/yardreport/trade-deadline/" class="site-nav-link"> Trade Deadline </a> </nav> <header class="site-header"> <div class="header-inner"> <a class="logo" href="/yardreport/"> <img class="logo-img" src="/yardreport/logo.png" alt="Yard Report logo" height="36"> <span class="logo-wordmark" aria-label="Yard Report"> <span class="logo-word">Yard</span> <strong class="logo-word logo-word-accent">Report</strong> </span> </a> <nav class="header-right header-breadcrumb" aria-label="Breadcrumb"> <a class="breadcrumb-link" href="/yardreport/">← Yard Report</a> <span class="breadcrumb-sep" aria-hidden="true">/</span> <span class="breadcrumb-current">Depth Chart</span> </nav> </div> </header> <main class="dc-page"> <div class="dc-wrap"> <!-- ── OPACY Field ─────────────────────────────────────────── --> <div class="dc-field-container"> <svg class="dc-svg" viewBox="0 0 620 560" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <defs> <radialGradient id="grassGrad" cx="50%" cy="78%" r="72%"> <stop offset="0%" stop-color="#1d5118"></stop> <stop offset="55%" stop-color="#143c11"></stop> <stop offset="100%" stop-color="#0c2609"></stop> </radialGradient> <radialGradient id="dirtGrad" cx="50%" cy="52%" r="58%"> <stop offset="0%" stop-color="#7a4828"></stop> <stop offset="100%" stop-color="#4d2e18"></stop> </radialGradient> <radialGradient id="moundGrad" cx="40%" cy="35%" r="65%"> <stop offset="0%" stop-color="#6a3e22"></stop> <stop offset="100%" stop-color="#3e2410"></stop> </radialGradient> <!-- Mowing pattern stripes --> <pattern id="mowStripes" x="0" y="0" width="34" height="34" patternUnits="userSpaceOnUse" patternTransform="rotate(-42)"> <rect width="17" height="34" fill="rgba(255,255,255,0.018)"></rect> </pattern> </defs> <!-- ── Sky background ── --> <rect width="620" height="560" fill="var(--bg, #0a0f14)"></rect> <!-- ── Fair territory grass ── --> <!-- OPACY: LF 333ft (0,200), LC ~364ft, CF 400ft (310,14), RC ~373ft, RF 318ft (620,229) --> <path class="dc-grass" d="M 310,508 L 0,200 C 72,40 158,16 310,14 C 452,20 558,62 620,229 Z"></path> <path fill="url(#mowStripes)" d="M 310,508 L 0,200 C 72,40 158,16 310,14 C 452,20 558,62 620,229 Z"></path> <!-- ── Warning track ── --> <path class="dc-track" d="
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"><meta name="theme-color" content="#111111" media="(prefers-color-scheme: dark)"><meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="description" content="Baltimore Orioles and MLB news aggregator"><title>Depth Chart | Yard Report</title><link rel="icon" type="image/jpeg" href="/yardreport/favicon.jpg"><link rel="apple-touch-icon" href="/yardreport/favicon.jpg"><link rel="stylesheet" href="/yardreport/style.css?v=1783964963721"></head> <body> <nav class="site-nav" aria-label="Site navigation"> <a href="/yardreport/" class="site-nav-link"> Dashboard </a><a href="/yardreport/schedule/" class="site-nav-link"> Schedule </a><a href="/yardreport/depth-chart/" class="site-nav-link site-nav-link--active" aria-current="page"> Depth Chart </a><a href="/yardreport/around-the-horn/" class="site-nav-link"> Around the Horn </a><a href="/yardreport/all-star/" class="site-nav-link"> All-Star </a><a href="/yardreport/draft/" class="site-nav-link"> Draft </a><a href="/yardreport/trade-deadline/" class="site-nav-link"> Trade Deadline </a> </nav> <header class="site-header"> <div class="header-inner"> <a class="logo" href="/yardreport/"> <img class="logo-img" src="/yardreport/logo.png" alt="Yard Report logo" height="36"> <span class="logo-wordmark" aria-label="Yard Report"> <span class="logo-word">Yard</span> <strong class="logo-word logo-word-accent">Report</strong> </span> </a> <nav class="header-right header-breadcrumb" aria-label="Breadcrumb"> <a class="breadcrumb-link" href="/yardreport/">← Yard Report</a> <span class="breadcrumb-sep" aria-hidden="true">/</span> <span class="breadcrumb-current">Depth Chart</span> </nav> </div> </header> <main class="dc-page"> <div class="dc-wrap"> <!-- ── OPACY Field ─────────────────────────────────────────── --> <div class="dc-field-container"> <svg class="dc-svg" viewBox="0 0 620 560" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <defs> <radialGradient id="grassGrad" cx="50%" cy="78%" r="72%"> <stop offset="0%" stop-color="#1d5118"></stop> <stop offset="55%" stop-color="#143c11"></stop> <stop offset="100%" stop-color="#0c2609"></stop> </radialGradient> <radialGradient id="dirtGrad" cx="50%" cy="52%" r="58%"> <stop offset="0%" stop-color="#7a4828"></stop> <stop offset="100%" stop-color="#4d2e18"></stop> </radialGradient> <radialGradient id="moundGrad" cx="40%" cy="35%" r="65%"> <stop offset="0%" stop-color="#6a3e22"></stop> <stop offset="100%" stop-color="#3e2410"></stop> </radialGradient> <!-- Mowing pattern stripes --> <pattern id="mowStripes" x="0" y="0" width="34" height="34" patternUnits="userSpaceOnUse" patternTransform="rotate(-42)"> <rect width="17" height="34" fill="rgba(255,255,255,0.018)"></rect> </pattern> </defs> <!-- ── Sky background ── --> <rect width="620" height="560" fill="var(--bg, #0a0f14)"></rect> <!-- ── Fair territory grass ── --> <!-- OPACY: LF 333ft (0,200), LC ~364ft, CF 400ft (310,14), RC ~373ft, RF 318ft (620,229) --> <path class="dc-grass" d="M 310,508 L 0,200 C 72,40 158,16 310,14 C 452,20 558,62 620,229 Z"></path> <path fill="url(#mowStripes)" d="M 310,508 L 0,200 C 72,40 158,16 310,14 C 452,20 558,62 620,229 Z"></path> <!-- ── Warning track ── --> <path class="dc-track" d="
M 0,200
C 72,40 158,16 310,14
C 452,20 558,62 620,229
Expand Down
Loading