feat: Complete theme refinement with autoscaling and inline callout boxes #25
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Created notes/issue-22/ folder for tracking - Created theme-audit.csv and emoji-inventory.csv - Downloaded reference theme files (CDL Marp theme) - Created slides/template_deck/ for theme showcase Issue #22
Audit Results: - Week 1-2: 402 emojis audited, 227 keep (56.5%), 175 remove (43.5%) - Week 3-4: 189 emojis audited, 73 keep (38.6%), 116 remove (61.4%) - Week 5-6: 173 emojis audited, 76 keep (44%), 97 remove (56%) Key Patterns Identified: - Frame title decorative emojis (remove) - tcolorbox identifiers like 💭, 💬 (keep - consistent visual markers) - Semantic list markers ✅❌❓ (keep - adds meaning) - Concept emojis like 🤖🧠💻 (keep when representing concept) - Generic closing emojis like 🚀🎉 (remove) Files Added: - notes/issue-22/emoji-audit-weeks-1-2.md (364 lines) - notes/issue-22/emoji-audit-weeks-3-4.md (124 lines) - notes/issue-22/emoji-audit-weeks-5-6.md (256 lines) - notes/issue-22/design-principles.md (reference analysis) Files Modified: - notes/issue-22/emoji-inventory.csv (401 entries for weeks 1-2) Issue #22 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Theme improvements: - Fix itemize text color to be nearly black (DarkDartmouthText) using aftergroup technique to escape beamer's color grouping - Green bullets with dark body text as user requested - Remove global animations - now opt-in per slide with [<+->] - Fix standout frames to use light background - Add code block styling with rounded corners, line numbers, and Dartmouth syntax highlighting colors - Set enumerate items to match itemize (green numbers, dark text) - Adjust text margins and spacing for better readability Template deck: - Completely rewritten to be simpler and cleaner - Each slide has minimal content to demonstrate the theme - Shows: bullets, emphasis, animations, blocks, columns, tables, code, equations, and diagrams 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…stats, and upgraded Chatbot models
- Title: 71px font-size, 500 font-weight - Subtitle: 0px top margin, 20px bottom margin, 500 font-weight - Background: conversation_green.png at 32% opacity, bottom-aligned - Fixed CSS escape sequence bug by using attribute selectors [id="1"] 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…ignore and theme showcase.
…ctor) - Added JavaScript for automatic line numbering and code block splitting - Line numbers continue across slides with code-continued class - Auto-resize code to fit slides with minimum font size - Added continued... indicator CSS - This approach has issues with Marp's navigation system - Next: Refactor to use compile script instead of runtime JS 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Updated process_markdown.py to add HTML line numbers to all code blocks - Split code blocks show "continued...", "...continued...", "...continued" - Line numbers continue across split slides (21, 41, etc.) - CSS styling for line numbers with vertical separator - Short code blocks now also have line numbers - Removed unused background_geometry.png Note: Syntax highlighting is currently disabled due to HTML generation approach. Will be addressed in follow-up commit. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Integrated Pygments library for Python syntax highlighting - Added highlight_code_line() function to process_markdown.py - Created Dartmouth-themed color scheme for syntax classes: - Keywords (def, class, return) in bold green - Class names in brown - Strings in sienna - Numbers in gold - Comments/docstrings in gray italic - self/cls in green italic - All code blocks now have both line numbers AND syntax highlighting 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Split code blocks now have consistent 90% width across all slides - Heights fit content rather than expanding to fill space - Reduced padding (0.3em 1em) for tighter code display - Changed continued indicator to 16pt regular (non-italic) style - Added separate class for last slide positioning (shifted 10px left) - Short code blocks remain at 22pt with content-fitting boxes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Switch content slides from CSS Grid to flexbox for better vertical stacking - Add 100px bottom padding to shift content up ~50px from center - Apply same upward shift to split code block slides - Left-align lists while keeping paragraphs/equations centered - Reduce KaTeX display math margins for tighter spacing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Interleaved text and equations (no lists) - Equations in unordered bullet lists with plain text items - Equations in ordered numbered lists with plain text items 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Use :has(.katex-display) selector to apply fixed 80% width only to lists on slides containing display equations. Simple lists without equations keep natural width for better centering. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add autoscale.js for dynamic content scaling on dense slides - Update compile.sh to inject auto-scaling script after marp compilation - Restore correct top padding (20px) in cdl-theme.css 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add table parsing and splitting in process_markdown.py (max 8 rows/slide) - Add --max-table-rows/-r CLI option to compile.sh - Add split-table CSS class with fixed font size (0.55em) for consistency - Prevent vertical centering on slides with split tables - Detect long columns across ALL rows for consistent left-alignment - Skip autoscaling for split tables to maintain uniform appearance - Add "continued..." indicators for multi-slide table sequences 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…ling - Add Note, Example, Warning callout box styles (beamer-inspired) - Blue-tinted note boxes for informational content - Green-tinted example boxes matching Dartmouth theme - Amber-tinted warning boxes for important notices - All boxes include automatic labels via ::before pseudo-element - Fix two-column layout issues - Reduce column gap from 6em to 2.5em - Add font-size reduction (0.85em) for column content - Replace Contact slide with comprehensive Course Information slide - Improve table title spacing - Reduce gap between h1 and table on table-heavy slides - Use :has() selector to target only slides with tables - Add research documentation for diagram/chart support - Recommend Kroki.io for Mermaid/GraphViz/PlantUML diagrams - Recommend Chart.js for interactive charts - Document CDL theme color palette for chart styling 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Emoji figures (slime-mold inspired): - Size classes: emoji-xs through emoji-xxl (24px to 192px) - Background colors: emoji-bg-green, emoji-bg-teal, emoji-bg-orange, emoji-bg-blue - State classes: emoji-gray (inactive), emoji-faded (partially faded) - Layout classes: emoji-figure, emoji-row, emoji-col, emoji-grid - Labeled emojis with emoji-labeled class - Hierarchy support with emoji-hierarchy and connector lines Diagram and chart containers: - .diagram-container for Kroki/Mermaid SVG diagrams - .chart-container for Chart.js canvas elements - Caption styling for both diagram-caption and chart-caption Example slides added demonstrating: - Flow diagram with colored emoji backgrounds - Size comparison (xs through xl) - State comparison (normal, faded, inactive) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Includes documentation for: - Installation and compilation instructions - All slide types (title, content) - Typography guidelines (sentence case convention) - Color palette reference - Tables with auto-splitting - Code blocks with line numbers - KaTeX equations (display and inline) - Two-column layouts - Callout boxes (note, example, warning) - Emoji figures (sizes, backgrounds, states, layouts) - Quotes and diagrams - Best practices and quick reference 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added 6 new slides to theme_showcase.md: - Emoji xxl (hero) size - Emoji grid layout - Emoji hierarchy structure - Labeled emoji example - Diagram container example (Kroki.io) - Chart container example (Chart.js) CSS fixes in cdl-theme.css: - Reduced callout box padding/font-size to prevent overflow - Added white-space: nowrap to emoji labels to prevent word wrapping - Added multi-column layout CSS to preserve title visibility - Added vendor prefixes for user-select and filter properties - Removed ~30 lines of dead grid layout code compile.sh fix: - Added --allow-local-files flag for PDF/PPTX generation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Theme and styling fixes: - Fix title positioning for scaled tables/callouts with flex-start - Reduce two-column gap to 1.5em with auto-width centering - Fix callout box text overflow by excluding from font scaling - Set emoji backgrounds to 50% opacity with rgba() - Add CSS arrow classes (.flow-arrow, .flow-arrow-lg) replacing emoji - Fix tree connector lines extending to all children with 4px thickness Chart improvements: - Add 4 chart types: bar, line, scatter, grouped bar - Increase chart height and font sizes - Remove unnecessary legend - Style captions with normal text and 80% opacity Content updates: - Add local SVG flowchart (images/flowchart_local.svg) - Simplify slide 32 with emoji icons and note box - Update all emoji figures to use CSS arrows 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fix SVG cutoff by correcting x_offset calculation (removed double-counted padding) - Fix "teal" color to be actual teal (#008080) instead of Rich Spring Green - Change arrow color to dark green (#0a2518) for better contrast - Fix diagram caption spacing (closer to figure, more space after) - Change overflow: hidden to visible on diagram containers - Add chart-defaults.js for automatic Chart.js theming - Update STYLE_GUIDE.md with flow diagram documentation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Increased negative margin-top on .diagram-caption from -3em to -5.5em - Compensates for SVG empty space below diagram content - Caption now appears much closer to the actual diagram boxes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add new instructor intro slide after title with emoji figures and clickable links - Replace Course structure slide with flow diagram + side-by-side callout boxes - Merge redundant consciousness definition slides (7-8) into one - Merge redundant hard problem slides (9-10) into two-column layout - Fix cut-off tip boxes by reducing content on slides 5 and 7 - Update flow diagram terminology: "Classifiers" instead of "Tokenization" - Fix Lecture 3 description to indicate X-hour - Remove "see you next class" from Questions slide - Make all contact links clickable (mailto for email, proper URLs for Discord/website) - Streamline readings slide with proper clickable links - Reduce total slide count from 27 to 25 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Change .diagram-caption margin-top from -5.5em to 0.5em to fix flow diagram captions overlapping with diagram content on slides 4, 12, 20 - Reduce margin-bottom from 1.5em to 0.5em for tighter spacing - Shorten slide 17 tip box text to prevent content overflow at bottom 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Create a comprehensive instructor slide with dense content using new CSS classes for compact layouts: - Add instructor-grid for 2-column, 3-row layout - Add logo-row classes for inline logo display - Add info-box with custom title support (data-title attribute) - Add training-timeline for academic history display - Add approach-tags for research methodology badges - Add core-question styling for highlighted quotes Content includes: - Name, title, affiliation (Dartmouth College) - Lab info with logos (CDL, GitHub) - Research focus with core question - Key areas with emoji icons - Training timeline (Brandeis, UPenn, Princeton) - Industry collaborations (Intel, Meta, Google, Amazon) - Funding sources (NIH, NSF, DARPA) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Corrected file extensions from .jpg/.webp to .png for logos that were not rendering in the slides. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Planning document for redesigning autoscale system to work at compile-time instead of runtime JavaScript, ensuring PDF/HTML parity. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add analyze_slide_content() for content density metrics - Add determine_scale_class() for automatic scale class selection - Add inject_scale_class() to add Marp directives - Add analyze_and_warn_slides() to process all slides with warnings - Print stderr warnings for potential overflow issues - Print stats for scale classes injected and overflow warnings - Detect high-risk patterns: table-in-callout, multiple callouts, emoji figures - Budget set to 20 units for typical slide capacity This moves scaling decisions to compile-time so PDF and HTML match.
- Tested L1 slides 4, 7, 8, 13, 15, 18 - all pass refresh test - Tested L2 slides 2, 6 (table-in-callout pattern) - all pass - Compared L1 slide 22 vs L2 slide 16 styling - consistent - Added colab_screenshot.png figure for lecture 2 - HTML/PDF now match due to compile-time scale classes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Staging current state including: - Lecture 2 updates (HTML, PDF, debug files) - Compile-time autoscaling system working 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Lecture 1: - Remove forced 0.65em font-size on slide 4 boxes (was too small) CSS Theme: - Add max-width constraints for paragraphs, lists (85%) and callouts (90%) - Add diagram caption width constraints 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…ation The height estimation algorithm was over-counting content, causing unnecessary scaling to be injected into slides with plenty of room. Key changes: - Reduced callout_box_base from 4.0 to 2.5 - Reduced list_item from 1.2 to 0.7 - Reduced paragraph_per_50_chars from 0.8 to 0.4 - Added two-column discount: when callouts are side-by-side in flex container, use 0.55x multiplier (they share vertical space, not stack) This fixes false positives where slides like "What is this course about?" (with 2 stacked callouts) were getting scale-80 injected despite having ~50% empty space at bottom. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Added section.scale-XX pre rules for 90%, 80%, 78%, and 70% scale classes - Fixes code block cutoff issue where base pre font-size (22pt !important) overrode scale classes - Verified slide 8 in lecture 2 now shows all 16 code lines in both HTML and PDF 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…boxes Changed CSS for callout boxes inside flex containers: - min-width: fit-content -> min-width: 0 (allows shrinking for text wrap) - flex: 1 1 auto -> flex: 1 1 0 (equal distribution between columns) - Added overflow-wrap and word-wrap for long word handling This eliminates the need for manual scale classes on slides with side-by-side callout boxes. Text now wraps naturally within the available width. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…ing calculations - Changed measureActualContentHeight to sum individual element heights instead of bounding box span - This prevents diagrams positioned between elements from inflating the measurement - Added measureDiagramContainerHeight to subtract fixed-size diagram space from available height - Slides with diagrams now correctly scale only when scalable content exceeds remaining space
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Adds new layout algorithm that treats all slide content as a unified block and applies a single scale factor. This ensures visual consistency by scaling all elements (text, images, diagrams, callouts) by the same amount. Key changes: - Add measureContentBoundingBox() for unified content measurement - Add layoutSlideWithAspectRatio() for aspect-ratio-based scaling - Add --slide-scale CSS variable rules for uniform scaling - Wire up new algorithm in scaleSlides() and scaleSlideById() Note: This is a WIP - algorithm will be refined to: - Expand flexible text widths before scaling (reduce height via reflow) - Preserve aspect ratio for rigid elements (images, diagrams) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…uniform scaling Corrects fundamental flaw in aspect-ratio scaling algorithm: - Classify elements as "rigid" (images/diagrams that preserve aspect ratio) or "flexible" (text/callouts that can reflow when width changes) - Expand flexible element widths first to fill available space - Apply uniform scale constrained by rigid element aspect ratios - Handle flex containers by classifying their children separately Key changes: - Add isRigidElement(), isRigidFlexChild(), classifySlideElements() - Add expandFlexibleWidths(), calculateConstrainedScale() - Update CSS to use transform: scale() for rigid elements - Remove debug console.log statements This ensures ALL elements scale by the same factor, preserving visual relationships while respecting image/diagram aspect ratios. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
… refresh Root cause: scaleSlides() ran during DOMContentLoaded before fonts, images, and Marp's bespoke viewer were fully initialized, causing getBoundingClientRect() to return 0 for non-visible slides. Changes: - Add waitForImages() to ensure images are loaded before scaling - Add initializeScaling() that waits for fonts AND images plus triple requestAnimationFrame for Marp initialization - Add setupScalingIntersectionObserver() to rescale slides when they become visible in the viewport - Add window.load event as backup trigger for missed resources - Add force parameter to onSlideNavigation() for explicit rescaling 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Previously, when a flex container had both rigid (image) and flexible (callout) children, ALL content was scaled uniformly based on fitting the image. This caused callout text to be scaled down excessively. New approach for mixed flex containers: - Detect containers with both rigid and flexible children - Apply transform scaling only to rigid elements (images) - Exempt flexible elements (callouts) from scaling, using natural size - Apply inline styles directly to overcome CSS specificity issues Results on L2 slide 3: - Tip-box font: 14.8px → 22.75px (54% larger) - Text now fills available space properly - Image still scales to fit slide bounds 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…pping Slide 4 fixes: - Reduce flex container gap from 1.5em to 1em for tighter column spacing - Add maxScale (1.15) to allow text-only slides to scale UP and fill space - Text-only slides now expand up to 15% to use available room Slide 5 fixes (code blocks): - Reduce code block font size from 22pt to 18pt - Change to table-based layout for proper line wrapping - Line numbers stay fixed at top when code wraps (vertical-align: top) - Use pre-wrap on .line-code to allow long lines to wrap - Wrapped continuation lines don't get new line numbers 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Slide 7 currently uses extensive manual CSS in the markdown file to achieve proper layout. This screenshot captures the target appearance that the automated styling system should replicate. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
…out classes Slide 7 previously required 35+ lines of manual CSS in a <style scoped> block. Now uses theme classes for automatic styling: New CSS classes added to cdl-theme.css: - .inline-example: Compact, stackable example cards with green styling - .example-title / .example-text: Child elements for structured content - .definitions-examples-layout: Two-column flex layout for definition lists - .definitions-col / .examples-col: Column containers with proper flex ratios Benefits: - Same visual appearance without manual CSS in markdown - Reusable pattern for similar content in other slides - Consistent with overall theme - Easier maintenance 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added compact, stackable inline variants matching the colors and styling of each standard callout box type: - .inline-note (blue) with .note-title / .note-text - .inline-warning (orange) with .warning-title / .warning-text - .inline-tip (green) with .tip-title / .tip-text - .inline-definition (violet) with .definition-title / .definition-text - .inline-important (red) with .important-title / .important-text These match the existing .inline-example pattern for use in stacked layouts like the definitions-examples two-column design. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR completes the theme refinement work for issues #22 and #24, implementing a robust autoscaling system and adding reusable inline callout box classes.
Key Changes
Autoscaling Algorithm (
autoscale.js)Theme CSS (
cdl-theme.css).inline-example,.inline-note,.inline-warning.inline-tip,.inline-definition,.inline-importantContent Updates
<style scoped>blocks in favor of theme classesTesting
Closes
🤖 Generated with Claude Code