From db4827507b2dffa5b94afbf95692d8f3095ea1a2 Mon Sep 17 00:00:00 2001 From: Tam Date: Fri, 22 May 2026 16:48:22 -0400 Subject: [PATCH] fix(site): mobile landing preview scale and tentacle layout --- .gitattributes | 16 +++++ CHANGELOG.md | 3 +- scripts/pr-site-mobile-preview-body.md | 31 ++++++++++ site/css/index.css | 81 +++++--------------------- site/index.html | 73 ++++++++++++++++++----- 5 files changed, 124 insertions(+), 80 deletions(-) create mode 100644 .gitattributes create mode 100644 scripts/pr-site-mobile-preview-body.md diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..acb7ce6 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,16 @@ +# Normalize line endings: LF in the repository (avoids false CRLF diffs on Windows). +* text=auto eol=lf + +# Windows launcher scripts keep CRLF when checked out on Windows. +*.bat text eol=crlf +*.cmd text eol=crlf + +# Binary assets — do not modify line endings. +*.png binary +*.jpg binary +*.jpeg binary +*.ico binary +*.gif binary +*.webp binary +*.zip binary +*.exe binary diff --git a/CHANGELOG.md b/CHANGELOG.md index c439b15..f19a8b5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,7 +16,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed -- Landing page (`site/index.html`): external CSS/JS, SEO (dashboard screenshot, manifest, sitemap.xml), security panel, aligned copy and Octicons; tentacle preview unchanged. +- Landing page (`site/index.html`): external CSS/JS, SEO (dashboard screenshot, manifest, sitemap.xml), security panel, aligned copy and Octicons. +- Landing preview on mobile (`site/index.html`, `site/css/index.css`): proportional dashboard scale (full screenshot visible), no horizontal scroll; fine-tuned tentacle positions/sizes on small screens only (desktop layout unchanged). - Download page (`site/download.html`): static manifest, shared nav styles via `common.css`, centered OS picker, clearer prerequisites, tighter install steps. - README header uses `site/gitdock-logo-removebg-preview.png` (transparent logo for GitHub light and dark themes). - `server.js` imports validation helpers from `lib/` (behavior preserved; easier to test). diff --git a/scripts/pr-site-mobile-preview-body.md b/scripts/pr-site-mobile-preview-body.md new file mode 100644 index 0000000..21daf56 --- /dev/null +++ b/scripts/pr-site-mobile-preview-body.md @@ -0,0 +1,31 @@ +## Summary + +Fixes the landing page product preview on mobile: the full dashboard screenshot stays visible at proportional scale, horizontal scroll is removed, and tentacle placement is tuned for small screens without changing desktop layout or image assets. + +## Type of change + +- [x] Documentation / site only + +## What changed + +- **`site/index.html`:** `.preview-stage` wrapper; mobile `@media` uses single `zoom` scale (with `transform` fallback); per-tentacle tweaks only where needed (left pair, front pair, right tentacle). +- **`site/css/index.css`:** `.preview-stage` desktop wrapper; removed dead per-tentacle rules that never applied (inline CSS wins); mobile `overflow-x: clip` on preview/html/body. +- **`.gitattributes`:** `text=auto eol=lf` so Windows/Cursor do not flip line endings on every save. + +## Release + +**No GitHub Release or version bump.** Site-only change (redeploy `site/` when you publish the site). + +## Checklist + +- [x] Site-only — `npm test` not required for this PR +- [x] Smoke-tested preview at `http://localhost:3848/` (desktop + mobile ~390px) +- [x] No secrets in commits +- [x] Updated `CHANGELOG.md` under **Unreleased** + +## Test plan + +- [x] Desktop (~1280px): preview matches pre-change layout; tentacles and dashboard unchanged +- [x] Mobile (390px): full dashboard visible, no horizontal scroll +- [x] Tentacles: left pair separated; front pair sized/spaced; right tentacle lower, behind dashboard +- [ ] After deploy: spot-check https://www.gitdock.dev/ on phone or DevTools diff --git a/site/css/index.css b/site/css/index.css index 8aee3a7..ec72c79 100644 --- a/site/css/index.css +++ b/site/css/index.css @@ -126,12 +126,21 @@ /* Dashboard Preview (window only — tentacles in inline CSS) */ .preview { + width: 100%; padding: 0 24px 80px; margin-top: -40px; position: relative; z-index: 1; } +/* Scales on mobile via inline CSS; desktop = pass-through wrapper */ +.preview-stage { + width: 100%; + max-width: 1000px; + margin: 0 auto; + position: relative; +} + .preview-window { max-width: 1000px; margin: 0 auto; @@ -796,78 +805,18 @@ .preview { padding: 0 16px 60px; margin-top: -20px; + display: flex; + justify-content: center; + overflow-x: clip; } - .tentacle-scene { - padding: 0 24px; - } - - .preview-window { - max-width: 96%; - } - - .t-left { - width: 180px; - left: -60px; - } - - .t-left2 { - width: 190px; - left: -60px; - } - - .t-right { - width: 140px; - right: -15px; - } - - .t-bl { - width: 150px; - bottom: -40px; - } - - .t-bottom { - width: 160px; - bottom: -25px; - } - - .t-top { - width: 90px; - top: -40px; + html, + body { + overflow-x: clip; } } @media (max-width: 480px) { - .t-left { - width: 120px; - left: -45px; - } - - .t-left2 { - width: 130px; - left: -45px; - } - - .t-right { - width: 100px; - right: -10px; - } - - .t-bl { - width: 110px; - bottom: -30px; - } - - .t-bottom { - width: 120px; - bottom: -20px; - } - - .t-top { - width: 70px; - top: -35px; - } - .hero h1 { font-size: 24px; } diff --git a/site/index.html b/site/index.html index cd6a7e9..e0fb4e6 100644 --- a/site/index.html +++ b/site/index.html @@ -189,6 +189,51 @@ animation: none; } } + + /* Mobile: one proportional scale — full dashboard always fits */ + @media (max-width: 768px) { + .preview-stage { + --tentacle-scale: min(1, calc((100vw - 48px) / 1000)); + width: 1000px; + max-width: 1000px; + margin-left: auto; + margin-right: auto; + zoom: var(--tentacle-scale); + } + @supports not (zoom: 1) { + .preview-stage { + transform: scale(var(--tentacle-scale)); + transform-origin: top center; + margin-bottom: calc((1 - var(--tentacle-scale)) * -560px); + } + } + .t-left { + width: 270px; + top: 3%; + } + .t-left2 { + width: 225px; + bottom: -6%; + } + .t-bl { + width: 175px; + bottom: -58px; + left: 0%; + } + .t-bottom { + width: 190px; + bottom: -34px; + right: 20%; + } + .t-right { + z-index: 0; + top: auto; + right: -24px; + bottom: 4%; + width: 200px; + rotate: -22deg; + } + } @@ -238,21 +283,23 @@

Your Git projects.
One Space.

-
- - - - -
-
- - - +
+
+ + + + +
+
+ + + +
+ GitDock Dashboard
- GitDock Dashboard + +
- -