Commit Graph

6 Commits

Author SHA1 Message Date
Hermes Agent 0b0671a3e3 fix(mobile): hide .nav-back entirely on mobile instead of hiding just spans
On mobile (≤640px), .nav-back span{display:none} hid both spans inside
the back link, leaving an empty bordered pill shape visible next to the
logo — the 'broken little thing' users reported seeing to the right of  Hermes.

Fix: hide .nav-back itself. The hamburger menu provides the back navigation
link, so no information is lost.

Applies to all 13 sub-pages: memory, models, eli5, community, and all 9 compare pages.
2026-04-16 04:27:08 +00:00
Nathan Esquenazi 73449a62d3 feat: unified hamburger nav across all 13 pages
Every page now has a consistent hamburger menu on mobile (≤640px) that
lets users navigate the full site without ever getting stranded.

eli5/index.html:
- Added hamburger button (#eli5-hamburger) + mobile menu (#eli5-mobile-menu)
- Menu links: Home, Why/Features/Compare/Install, ELI5, Models, Community, Get started
- Hamburger CSS + open/close JS added

models/index.html:
- Added hamburger button (#models-hamburger) + mobile menu (#models-mobile-menu)
- Menu includes section divider between main site links and sub-pages
- Hamburger CSS + open/close JS added (placed before tab-bar scroll JS)

compare/*.html (all 9 pages):
- Added hamburger button (#compare-hamburger) + mobile menu (#compare-mobile-menu)
- Menu: Home, ← All comparisons, divider, ELI5, Models, Community, Get started
- Same hamburger CSS (scoped to each page's inline style block)
- Same open/close JS before </script>

community/index.html:
- Existing hamburger kept, mobile menu updated to include ELI5 and Models links
  (was missing them — now links to ../eli5/ and ../models/ in accent color)

Behaviour: hamburger hidden at desktop (display:none), shown at ≤640px.
Clicking toggles .open class. Clicking outside closes. All menus are
position:fixed so they overlay content cleanly. Each menu uses a unique
id to avoid collisions when pages are eventually combined.
2026-04-12 02:42:43 +00:00
Nathan Esquenazi 737cbb2739 fix: full QA pass — section structure, stale models, Perplexity table row
index.html:
- CRITICAL layout bug: compare-more pills div was inside #why section
  (an orphaned block from a previous failed insertion attempt), causing
  the #why section to be 5705px tall and the pill bar to appear right
  after the Why section header instead of after the Compare section.
  Fixed by removing the stray block and placing compare-more correctly
  inside #compare section, after the head-to-head cards.
- Added Perplexity Computer row to the main comparison table (was missing;
  it had a card and pills but no row in the overview table).

Model reference updates:
- chatgpt.html: GPT-4o → GPT-5.4, o3 → o3-pro (two instances each)
- claude-ai.html: GPT-4 → GPT-5.4 in provider-flexibility bullet
- claude-code.html: 'GPT-4o for one thing' → 'GPT-5.4 for one thing,
  Claude Sonnet 4.6 for another' in provider-agnostic routing example
- copilot.html: 'Claude, GPT-4o, Gemini' → 'Claude Sonnet 4.6, GPT-5.4,
  Gemini' in model roster description
- cursor.html: 'valued at $29.3B' → 'valued at over $29B' (durable phrasing)
2026-04-12 00:08:17 +00:00
Nathan Esquenazi 0205ef810a fix: mobile nav broken JS, hamburger menu, viewport overflow
index.html:
- CRITICAL JS BUG: setTheme() had a ghost orphan 'else' block left from
  the old hljs-switching version that was never fully removed. The function
  correctly closed at line 2077 but a dangling '} else { ... hljsTheme.href
  ... }' remained at lines 2078-2082. This caused a JS syntax error that
  silently killed the entire <script> block — theme toggle, hamburger menu,
  copy buttons, nav active state, smooth scroll: all broken. Fixed by
  removing the dead code entirely.
- Add overflow-x: hidden to html element to prevent any overflowing content
  from enabling horizontal scroll on mobile.

compare/*.html (all 9 pages):
- Add overflow-x: hidden to html element (same fix, same reason)
- Add @media (max-width: 640px) block that hides .nav-back span text and
  the 'Get started' CTA on narrow screens. The compare nav has three items
  (logo, back-link, theme+CTA) with no hamburger — at mobile widths these
  were colliding/overflowing. Now at ≤640px: back-link shows '←' only
  (span hidden), CTA hidden, theme toggle stays visible and usable.
- Wrap nav-back text in <span> so the mobile rule can target it
- Add word-break: break-word and min-width: 0 to .narrative to prevent
  long words/URLs from forcing horizontal overflow
2026-04-11 23:49:09 +00:00
Nathan Esquenazi 9f0dd52fd6 feat: add Perplexity Computer comparison page
New page: compare/perplexity-computer.html

Content sourced from official Perplexity docs, changelog, help center,
TechCrunch, and independent reviews. Covers:
- What Perplexity Computer actually is (cloud agentic workflow engine,
  launched Feb 25 2026, GA to Pro in March 2026)
- Multi-model routing across 19+ frontier models (Claude Opus, GPT-5,
  Gemini, Grok, etc.)
- Tasks scheduling feature (daily/weekly minimum; 10-40 task cap by plan)
- 400+ OAuth connectors + MCP support (added March 2026)
- Cloud-only constraint, data sovereignty trade-off, credit cost model
- Perplexity Personal Computer (Mac mini hybrid, waitlist only)
- Full feature-compare grid, 21-row comparison table, who-should-choose cards

Also:
- Added 'vs. Perplexity Computer' comparison card to index.html compare section
- Added compare pill to index.html and all 8 existing compare pages
2026-04-11 23:43:43 +00:00
Nathan Esquenazi 7f71d4b177 feat: comparison deep-dive pages + light mode code block fix
Light mode fixes:
- Code blocks always use dark background (#0d1117) in both themes.
  Previous behavior: setTheme('light') switched hljs to github.min.css
  (light theme = near-black text) but kept code-wrap background dark,
  producing invisible dark-on-dark text. Fix: always use github-dark
  hljs + keep bg dark. Result: consistent readable code in both themes.
- code-header uses fixed dark colors (no longer rgba(255,255,255,0.04)
  which was near-invisible on the dark bg it was compositing against).
- copy-btn uses fixed dark-theme colors for the same reason.

Index page updates:
- Comparison cards are now clickable links to deep-dive pages.
  Card has onclick, role=link, tabindex=0, keyboard Enter handler,
  arrow indicator (→) that animates on hover, and focus ring.
- Added compare-more pills row below the head-to-head cards linking
  to all 8 comparison pages.
- CSS for .compare-pill, .compare-more, .card-arrow added.

New pages (compare/):
- compare/openclaw.html
- compare/claude-code.html
- compare/codex.html
- compare/opencode.html
- compare/cursor.html
- compare/copilot.html
- compare/claude-ai.html
- compare/chatgpt.html

Each page has: full CSS (light+dark themes), verdict banner, feature
comparison 2-col grid, 5-section narrative with official docs links,
full comparison table, who-should-choose section, nav pills to all 8
sibling pages, and CTA strip. Content drawn from HERMES.md (with the
/loop and scheduling corrections from PR #261 applied).
2026-04-11 22:42:00 +00:00