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.
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
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
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).
Nathan Esquenazi