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