The itemize environment parameters [leftmargin=*, itemsep=1pt, parsep=0pt]
were appearing as visible text in the PDF because the enumitem package
wasn't loaded. This fix adds \usepackage{enumitem} to the preamble.
All itemized lists now format correctly with proper spacing and margins.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove carousel text labels, rely on larger terminal frame titles (20px bold)
- Fix navigation arrow positioning: moved to top: 405px with z-index: 100
- Reduce carousel height from 500px to 450px for better spacing
- Add clickable sidebar link to mlsysbook.ai via JavaScript
- Fix quickstart button link to use .html extension
- Add mobile responsive CSS for logo, headings, and carousel
- Update Terminalizer configs with larger frame title font
- Add textbook link with hover effects in intro page
Changes to HTML:
- Move carousel-nav outside carousel-track container
- Navigation now appears as separate element below the carousel
Changes to CSS:
- Remove absolute positioning (no longer needed)
- Use simple flexbox layout with margin-top: 1rem
- Remove bottom/left/right positioning properties
This fixes the overlap issue where arrows were positioned at the bottom
of the carousel-track, overlapping the GIF content. Arrows now appear
cleanly below the entire carousel as a separate row.
Changes to CSS:
- Position carousel-nav at bottom:0 instead of vertical center
- Use centered horizontal layout with 1rem gap
- Reduce arrow size to 32px (smaller, less intrusive)
- Remove semi-transparent background, use solid #e2e8f0
- Simplify shadow to 0 2px 6px
The vertical center placement with arrows overlapping the GIF content
looked messy and busy. This cleaner approach positions compact arrows
centered below the heading ("Clone & Setup" etc.), keeping them visible
but not interfering with the terminal content display.
Changes to CSS:
- Position carousel-nav absolutely at top:50% with translateY(-50%)
- Use space-between to place arrows on left/right edges
- Increase arrow size to 44px for better visibility
- Add semi-transparent background: rgba(226, 232, 240, 0.95)
- Enhance shadow for better visibility over content
- Use pointer-events:none on container, auto on arrows
Changes to HTML:
- Move carousel-nav inside carousel-track for proper positioning
- Remove carousel-indicators div (not using dot indicators)
- Simplify to just prev/next arrow buttons
This follows standard carousel UX conventions where navigation arrows
appear at the vertical center of the content, positioned on the left/right
edges. Arrows are now centered on the heading text ("Clone & Setup" etc.)
rather than below it, making them more visible and easier to use.
Changes to CSS:
- Remove absolute positioning from .carousel-nav
- Use flexbox centered layout with 2rem gap between arrows
- Reduce arrow size back to 36px (from 40px)
- Add margin-top: 1.5rem for spacing from carousel text
Changes to HTML:
- Move carousel-nav outside carousel-track
- Navigation now appears below carousel text instead of overlaid on GIF
This fixes overlap issues - arrows are now cleanly positioned
below the carousel text labels, not on top of the GIF terminal window.
Changes to CSS:
- Position carousel-nav absolutely at top:40% of carousel-track
- Move arrows to sides (space-between) instead of center bottom
- Increase arrow size to 40px for better visibility
- Add box-shadow to arrows for depth
- Use pointer-events:none on nav container, auto on arrows
Changes to HTML:
- Move carousel-nav inside carousel-track for proper absolute positioning
This fixes the overlap where left/right navigation arrows were appearing
on top of the carousel heading text ("Build in Jupyter" etc).
Arrows now appear on the left/right sides of the GIF at the vertical center.
Changes:
- Increase carousel-track min-height from 410px to 500px
- Change overflow from hidden to visible to prevent text cutoff
- Add margin-top and padding to carousel-text for better spacing
- Reduce heading size from 1.75rem to 1.5rem for better fit
- Add monospace font to carousel description text
- Update mobile responsive breakpoint with overflow:visible
- Change fixed height to auto for GIF preview on mobile
This ensures carousel text labels ("Clone & Setup", "Build in Jupyter", etc.)
are fully visible below the GIF demos without being cut off.
- Increased terminal dimensions from 80x24 to 160x24 for wider, more cinematic format
- Added ANSI green color codes to prompts for better visual appeal
- Updated all 4 Terminalizer YAML configs with consistent styling
- Created base-config.yml as single source of truth for shared settings
- Updated CSS to use dark terminal background instead of gray
- Changed object-fit from contain to cover for better width filling
- Added render-all.sh batch script for regenerating all GIFs
- Updated README with complete documentation and troubleshooting
Generated GIFs:
- 01-clone-setup.gif (7.0M)
- 02-build-jupyter.gif (1.3M)
- 03-export-tito.gif (1.9M)
- 04-validate-history.gif (3.3M)
- Add hero carousel component with auto-advance and keyboard navigation
- Add interactive ML history timeline with milestone popups
- Add comprehensive CSS styling for carousel and timeline components
- Update intro page content with tier-based structure and improved messaging
- Add install command display and enhanced visual design
- Improve site navigation and content structure
- Update development testing documentation
- Enhance site styling and visual consistency
- Update release notes and milestone templates
- Improve site rebuild script functionality
