Skip to content

docs: give every site page the same menu and land jumps below the header #136

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

Merged
EMRahman merged 2 commits into from
Sep 24, 2026
Merged

docs: give every site page the same menu and land jumps below the header #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1e21a65
docs: give every site page the same menu and land jumps below the header
Sep 24, 2026
17f58f7
docs: let the phone menu scroll when it is taller than the screen
Sep 24, 2026
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
12 changes: 12 additions & 0 deletions docs/website/assets/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,12 @@
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Menu jumps land below the 66px sticky nav. Sections carry their own top
padding, so they only need the phone-width top-up (see the 560px query);
unpadded targets such as the Support cards need the full nav height. */
[id] { scroll-margin-top: 86px; }
section[id], main[id] { scroll-margin-top: 0; }

body {
margin: 0;
font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
Expand Down Expand Up @@ -419,6 +425,8 @@ details.faq .body a { color: var(--green); }
.reveal[data-d="3"] { transition-delay: .24s; }

/* --- Responsive ---------------------------------------------------------- */
/* The full menu plus the Support page's extra Home button only fit from ~1080px. */
@media (max-width: 1080px) { .nav-cta .btn-ghost { display: none; } }
@media (max-width: 940px) {
.nav-links { display: none; }
.nav-toggle { display: inline-flex; }
Expand All @@ -427,6 +435,9 @@ details.faq .body a { color: var(--green); }
position: absolute; top: 66px; left: 0; right: 0;
background: rgba(8,11,10,.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line); padding: 14px 22px 20px;
/* Short screens (a phone in landscape) can't fit every item: scroll the menu itself. */
max-height: calc(100vh - 66px); max-height: calc(100dvh - 66px);
overflow-y: auto; overscroll-behavior: contain;
}
.nav.open .nav-links a { padding: 8px 0; width: 100%; font-size: 1.05rem; }

Expand All @@ -441,6 +452,7 @@ details.faq .body a { color: var(--green); }
}
@media (max-width: 560px) {
section { padding: 64px 0; }
section[id] { scroll-margin-top: 24px; }
.grid-mini { grid-template-columns: 1fr; }
.shot-strip, .shot-strip.cols-2, .shot-strip.cols-3 { grid-template-columns: 1fr; }
.hero-actions .btn { width: 100%; }
Expand Down
15 changes: 8 additions & 7 deletions docs/website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
<a href="#ai-coach">AI Coach</a>
<a href="#share">Share</a>
<a href="try.html">Try it</a>
<a href="setup.html">Setup guide</a>
<a href="setup.html">Setup Guide</a>
<a href="#privacy">Privacy</a>
<a href="#faq">FAQ</a>
<a href="support.html">Support</a>
Expand Down Expand Up @@ -233,11 +233,11 @@ <h2>See every momentum swing</h2>
<!-- Points won / lost — the momentum graph filtered (sits under "See every momentum swing") -->
<div class="shot-strip cols-2 reveal">
<figure>
<div class="phone glow-green"><img src="screenshots/07-points-outcomes-won.png" alt="Points graph filtered to the points you won." loading="lazy" width="1179" height="2556"></div>
<div class="phone glow-green"><img src="screenshots/07-points-outcomes-won.png" alt="Points graph filtered to the points you won." loading="lazy" width="1206" height="2622"></div>
<figcaption>Points you won — where you took control.</figcaption>
</figure>
<figure>
<div class="phone glow-blue"><img src="screenshots/08-points-outcomes-lost.png" alt="Points graph filtered to the points you lost." loading="lazy" width="1179" height="2556"></div>
<div class="phone glow-blue"><img src="screenshots/08-points-outcomes-lost.png" alt="Points graph filtered to the points you lost." loading="lazy" width="1206" height="2622"></div>
<figcaption>Points you lost — where it slipped away.</figcaption>
</figure>
</div>
Expand Down Expand Up @@ -305,15 +305,15 @@ <h2>More inspiration than the coach you pay for</h2>

<div class="shot-strip cols-3 reveal">
<figure>
<div class="phone"><img src="screenshots/10-ai-coach-prompt.png" alt="The generated coaching prompt, ready to paste into any AI app." loading="lazy" width="1179" height="2556"></div>
<div class="phone"><img src="screenshots/10-ai-coach-prompt.png" alt="The generated coaching prompt, ready to paste into any AI app." loading="lazy" width="2400" height="3200"></div>
<figcaption>A ready-to-paste coaching prompt</figcaption>
</figure>
<figure>
<div class="phone"><img src="screenshots/11-ai-coach-stats.png" alt="Match statistics included in the AI export." loading="lazy" width="1179" height="2556"></div>
<div class="phone"><img src="screenshots/11-ai-coach-stats.png" alt="Match statistics included in the AI export." loading="lazy" width="2400" height="3200"></div>
<figcaption>Every stat, included automatically</figcaption>
</figure>
<figure>
<div class="phone"><img src="screenshots/12-ai-coach-raw-data.png" alt="The full point-by-point data table included in the AI export." loading="lazy" width="1179" height="2556"></div>
<div class="phone"><img src="screenshots/12-ai-coach-raw-data.png" alt="The full point-by-point data table included in the AI export." loading="lazy" width="2400" height="3200"></div>
<figcaption>The full point-by-point record</figcaption>
</figure>
</div>
Expand Down Expand Up @@ -465,7 +465,8 @@ <h2 style="font-size:clamp(1.3rem,3vw,1.7rem);">Curious how it feels? Try it now
<a href="#stats">Stats</a>
<a href="#ai-coach">AI Coach</a>
<a href="#share">Share</a>
<a href="setup.html">Setup guide</a>
<a href="try.html">Try it</a>
<a href="setup.html">Setup Guide</a>
<a href="support.html">Support</a>
<a href="privacy.html">Privacy</a>
<a href="https://github.com/EMRahman/DeuceMate" target="_blank" rel="noopener">GitHub</a>
Expand Down
16 changes: 14 additions & 2 deletions docs/website/setup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,14 @@
DeuceMate
</a>
<nav class="nav-links" id="nav-links" aria-label="Primary">
<a href="index.html#scoring">Scoring</a>
<a href="index.html#stats">Stats</a>
<a href="index.html#ai-coach">AI Coach</a>
<a href="setup.html" aria-current="page">Setup guide</a>
<a href="index.html#share">Share</a>
<a href="try.html">Try it</a>
<a href="setup.html" aria-current="page">Setup Guide</a>
<a href="index.html#privacy">Privacy</a>
<a href="index.html#faq">FAQ</a>
Comment on lines +41 to +42

@chatgpt-codex-connector chatgpt-codex-connector Bot Sep 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Make the expanded mobile menu scrollable

On short mobile viewports, such as a phone in landscape at the max-width: 940px breakpoint, expanding this menu to nine rows makes the dropdown roughly 475px tall below the 66px sticky header. Since .nav.open .nav-links has neither a viewport-relative maximum height nor vertical scrolling, the final entries remain below the viewport even while the page scrolls. This also affects the newly expanded menus in try.html and support.html; constrain the dropdown to the available viewport height and enable vertical overflow.

Useful? React with 👍 / 👎.

@EMRahman EMRahman Sep 24, 2026

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in 17f58f7. The open menu is now capped at the height below the header (100dvh - 66px, with a 100vh fallback) and scrolls with overflow-y: auto. overscroll-behavior: contain stops the scroll from carrying over to the page. Checked in headless Chromium: at 844×390 the menu is 323px tall with 459px of content, and the last item (Support) scrolls into view. At 390×844 the menu shows in full, as before.

<a href="support.html">Support</a>
</nav>
<div class="nav-cta">
Expand Down Expand Up @@ -643,10 +648,17 @@ <h2>That's it — enjoy your tennis! 🎾</h2>
DeuceMate
</a>
<nav class="footer-links" aria-label="Footer">
<a href="index.html#scoring">Scoring</a>
<a href="index.html#stats">Stats</a>
<a href="setup.html">Setup guide</a>
<a href="index.html#ai-coach">AI Coach</a>
<a href="index.html#share">Share</a>
<a href="try.html">Try it</a>
<a href="setup.html" aria-current="page">Setup Guide</a>
<a href="support.html">Support</a>
<a href="privacy.html">Privacy</a>
<a href="https://github.com/EMRahman/DeuceMate" target="_blank" rel="noopener">GitHub</a>
<a href="mailto:mail@ehsanrahman.com">Contact</a>
<a href="https://ehsanrahman.com" target="_blank" rel="noopener">ehsanrahman.com</a>
</nav>
<p class="fine">© 2026 Ehsan Rahman · Drawings of App Store and Watch app screens are simplified illustrations. DeuceMate is not affiliated with Apple Inc.</p>
</div>
Expand Down
21 changes: 16 additions & 5 deletions docs/website/support.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,15 @@
DeuceMate
</a>
<nav class="nav-links" id="nav-links" aria-label="Primary">
<a href="#getting-started">Getting started</a>
<a href="#troubleshooting">Troubleshooting</a>
<a href="#faq">FAQ</a>
<a href="index.html#scoring">Scoring</a>
<a href="index.html#stats">Stats</a>
<a href="privacy.html">Privacy</a>
<a href="index.html#ai-coach">AI Coach</a>
<a href="index.html#share">Share</a>
<a href="try.html">Try it</a>
<a href="setup.html">Setup Guide</a>
<a href="index.html#privacy">Privacy</a>
<a href="index.html#faq">FAQ</a>
<a href="support.html" aria-current="page">Support</a>
</nav>
<div class="nav-cta">
<a class="btn btn-primary btn-sm" href="https://apps.apple.com/app/id6757105622" target="_blank" rel="noopener">Download<span class="nav-dl-extra"> — free</span></a>
Expand Down Expand Up @@ -174,10 +178,17 @@ <h2>Contact &amp; feedback</h2>
DeuceMate
</a>
<nav class="footer-links" aria-label="Footer">
<a href="index.html">Home</a>
<a href="index.html#scoring">Scoring</a>
<a href="index.html#stats">Stats</a>
<a href="index.html#ai-coach">AI Coach</a>
<a href="index.html#share">Share</a>
<a href="try.html">Try it</a>
<a href="setup.html">Setup Guide</a>
<a href="support.html" aria-current="page">Support</a>
<a href="privacy.html">Privacy</a>
<a href="https://github.com/EMRahman/DeuceMate" target="_blank" rel="noopener">GitHub</a>
<a href="mailto:mail@ehsanrahman.com">Contact</a>
<a href="https://ehsanrahman.com" target="_blank" rel="noopener">ehsanrahman.com</a>
</nav>
<p class="fine">© 2026 Ehsan Rahman · Built with ❤️ for tennis players worldwide 🎾 · DeuceMate is not affiliated with Apple Inc. Apple, Apple Watch and the App Store are trademarks of Apple Inc.</p>
</div>
Expand Down
12 changes: 12 additions & 0 deletions docs/website/try.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,14 @@
DeuceMate
</a>
<nav class="nav-links" id="nav-links" aria-label="Primary">
<a href="index.html#scoring">Scoring</a>
<a href="index.html#stats">Stats</a>
<a href="index.html#ai-coach">AI Coach</a>
<a href="index.html#share">Share</a>
<a href="try.html" aria-current="page">Try it</a>
<a href="setup.html">Setup Guide</a>
<a href="index.html#privacy">Privacy</a>
<a href="index.html#faq">FAQ</a>
<a href="support.html">Support</a>
</nav>
<div class="nav-cta">
Expand Down Expand Up @@ -247,10 +252,17 @@ <h2>Like it? Take it to the court.</h2>
DeuceMate
</a>
<nav class="footer-links" aria-label="Footer">
<a href="index.html#scoring">Scoring</a>
<a href="index.html#stats">Stats</a>
<a href="index.html#ai-coach">AI Coach</a>
<a href="index.html#share">Share</a>
<a href="try.html" aria-current="page">Try it</a>
<a href="setup.html">Setup Guide</a>
<a href="support.html">Support</a>
<a href="privacy.html">Privacy</a>
<a href="https://github.com/EMRahman/DeuceMate" target="_blank" rel="noopener">GitHub</a>
<a href="mailto:mail@ehsanrahman.com">Contact</a>
<a href="https://ehsanrahman.com" target="_blank" rel="noopener">ehsanrahman.com</a>
</nav>
<p class="fine">© 2026 Ehsan Rahman · This browser demo is for fun — the Apple Watch app is the real scorer. DeuceMate is not affiliated with Apple Inc.</p>
</div>
Expand Down
Loading