Improve terminal and install block styling with semantic markup

[discostu105]

Summary

Enhanced the visual presentation and semantic structure of the installation instructions and terminal example sections on the homepage. This includes improved styling for terminal output with syntax highlighting and a redesigned install block with better layout and labeling.

Key Changes

• Terminal styling improvements:

  • Added .terminal-comment class for comment text styling (gray color #6e7681)
  • Added .terminal-prompt class for shell prompts with green color (#22c55e), non-selectable, and proper spacing
  • Converted terminal example from markdown code block to semantic HTML with proper span markup for syntax highlighting

• Install block redesign:

  • Changed layout from centered to left-aligned with max-width constraint (600px)
  • Increased border-radius from 8px to 12px for more rounded corners
  • Adjusted padding and margins for better spacing
  • Reduced code font-size from 0.95rem to 0.9rem

• New install row structure:

  • Added .install-row class for flex-based layout of installation methods
  • Added .install-label class for platform labels (macOS/Linux, Windows) with uppercase styling, right alignment, and consistent width
  • Restructured HTML to use semantic divs with proper labels instead of inline styling

• Code block styling:

  • Added explicit color (#c9d1d9) to code blocks within terminal bodies for better contrast

Implementation Details

The changes maintain the dark theme aesthetic while improving readability and visual hierarchy. The terminal example now uses semantic HTML spans for proper syntax highlighting instead of relying on markdown code blocks, allowing for more granular styling control.

https://claude.ai/code/session_01MYdcAYyfMe1y2z764fACwx

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 23.82%. Comparing base (655d4c2) to head (bf03083).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main      #93   +/-   ##
=======================================
  Coverage   23.82%   23.82%           
=======================================
  Files          16       16           
  Lines        4474     4474           
=======================================
  Hits         1066     1066           
  Misses       3408     3408           

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.