Skip to content

ui: Update website install section with tabbed DMG/Source options + mobile fixes - #47

Merged
jatinkrmalik merged 11 commits into
mainfrom
ui/website-install-update
Mar 6, 2026
Merged

ui: Update website install section with tabbed DMG/Source options + mobile fixes#47
jatinkrmalik merged 11 commits into
mainfrom
ui/website-install-update

Conversation

@jatinkrmalik

Copy link
Copy Markdown
Member

Changes

Install Section Overhaul

  • Tabbed interface — Two tabs: "📦 Download DMG" (default) and "🛠️ Build from Source"
  • DMG tab — Links to GitHub Releases page with a download button, quarantine removal command, and permission setup instructions
  • Source tab — Simple 3-line make install command that builds, installs to /Applications, and launches
  • Tab switching includes re-triggered scroll animations for the new panel

Mobile Responsiveness Fixes

  • Code blocks no longer overflow — Added word-break: break-all, white-space: pre-wrap, and proper max-width: 100%
  • Install tabs stack vertically on mobile (<768px)
  • Install steps stack vertically on mobile (number above text instead of side-by-side)
  • Smaller code font on mobile (12px instead of 13px)

Content Updates

  • Requirements updated: "Apple Silicon" instead of "Xcode toolchain" for DMG path
  • Subtitle updated from "Build from source" to "Download the DMG or build from source"
  • Proper permission guidance including Input Monitoring restart note

- Add tabbed install section: 'Download DMG' (default) and 'Build from Source'
- DMG tab links to GitHub Releases with quarantine removal instructions
- Source tab uses make install (builds + installs to /Applications)
- Fix code-block overflow on mobile: word-break, pre-wrap, smaller font
- Add responsive styles for install tabs (stack vertically on mobile)
- Update requirements: Apple Silicon instead of Xcode toolchain for DMG path
- Tab switching JS with re-triggered scroll animations
- Code blocks styled as Mac terminal windows with traffic light dots,
  title bar, and copy-to-clipboard button with 'Copied!' feedback
- Dollar sign prompts in cyan (non-selectable, excluded from copy)
- Hero headline split into three lines: Your Voice, / Your Mac, / Your Privacy.
- Version badge updated to v0.1.1
- Added sudo to xattr quarantine removal command
- Tab switching works reliably with simple show/hide
- Mobile responsive: code blocks wrap, smaller font, title hidden
Version badge in hero section now fetches the latest release tag from
GitHub API on page load. Falls back to hardcoded version if the fetch
fails (e.g., rate limiting, offline).
Instead of hiding the 'View Source' CTA entirely on mobile, show just
the GitHub icon as a compact button. Text is hidden via .navbar__cta-text
span, icon remains visible and tappable.
Reduce gap between hero stat items at 1024px and default breakpoints
so Apple Silicon Native stays on the same line as the other 3 items.
Move hamburger toggle inside the same flex container as theme toggle
and GitHub icon. This eliminates the white space gap on mobile by
keeping all right-side actions grouped together.
Deploy website workflow now also triggers on pushes to main that
modify files in web/. Previously it only deployed on release publish.
@jatinkrmalik
jatinkrmalik merged commit fbf724c into main Mar 6, 2026
1 check passed
@jatinkrmalik
jatinkrmalik deleted the ui/website-install-update branch August 22, 2026 05:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant