Add JavaScript to dynamically fix GIF image paths in hero carousel
for both main site and dev subdirectory deployments. The fix detects
the current page directory and prepends it to relative _static paths.
- Add orange-red accent bar on left side of header
- Style header with grey text for TinyTorch branding and author name
- Move page numbers to bottom center for cleaner layout
- Add subtle separator line with proper spacing
- Keep first page completely clean with no header
- Adjust header spacing for better visual balance
- Add checks for carousel elements existence before initializing
- Prevent auto-advance from starting if no slides exist
- Add safety checks for dots/indicators that may not be present
- Fixes TypeError when carousel is not on the page
- 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.
Removed the <p> description lines from all carousel items:
- "git clone → ./setup → tito system doctor"
- "tito module start 01 → Code → Test inline"
- "tito module complete → Your code becomes tinytorch/"
- "tito milestone run 03 → 1986 MLP uses YOUR code"
Now carousel shows only clean headings (Clone & Setup, Build in Jupyter, etc.)
below each GIF. The workflow details are already visible in the GIF animations,
making the text descriptions redundant.
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.
Configuration updates:
- Reduced terminal width from 160 to 100 columns for better text density
- Increased font size from 12px to 14px for improved readability
- Added ANSI green color codes to shell prompts
- Updated base-config.yml as single source of truth
Generated new GIFs:
- 01-clone-setup.gif: Regenerated with new 100-column layout
- Other GIFs pending regeneration with ./render-all.sh
Documentation:
- Updated README with current dimensions and font size
- Documented configuration inheritance pattern
These changes optimize the carousel display by reducing wasted whitespace
while maintaining readability with larger fonts. The 100-column width
provides better visual balance in the carousel container.
- 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)
- Create base-config.yml as single source of truth for styling
- Document that Terminalizer doesn't support config inheritance
- Individual demo configs are manually kept in sync with base config
- Makes it easier to maintain consistent look across all demos
- Add alpha release badge above pip install command on intro page
- Update README status badge to reflect alpha status
- Clarify that package is in active development
- Remove DECEMBER_2024_RELEASE.md (temporary release checklist)
- Remove module_20_consistency_review.md (internal review document)
- Remove PEDAGOGICAL_IMPROVEMENTS_PLAN.md (planning document)
- Remove benchmark_results/benchmark_report.md (generated report)
- Fix pyproject.toml for proper pip installation:
- Update version to 0.1.0 to match __init__.py
- Fix package discovery to use tinytorch instead of tinytorch_placeholder
- Add proper dependencies (numpy, rich, PyYAML)
- Add optional dev dependencies
- Update project URLs and metadata
- Exclude non-package directories from distribution
- Add MANIFEST.in to ensure LICENSE and README are included in package
- Refactor resources.md to focus on ML Systems textbook as primary companion
- Remove Academic Foundation section from credits.md (moved to resources)
- Update quickstart guide, FAQ, and student workflow documentation
- Improve classroom use documentation with updated guidance
- Rename all references from book/ to site/ directory
- Update error messages and paths throughout the command
- Maintain backward compatibility with existing functionality
- 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
