mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-04-27 16:24:31 -05:00
cleanup: remove redundant styles README, fix trailing whitespace
This commit is contained in:
Vijay Janapa Reddi
@@ -1,246 +0,0 @@
|
||||
# Harvard ML Systems Book - Academic Excellence Styling
|
||||
|
||||
This directory contains the sophisticated styling system for the Harvard Machine Learning Systems textbook, designed to embody academic excellence and Harvard's prestigious standards.
|
||||
|
||||
## Design Philosophy
|
||||
|
||||
### Academic Excellence First
|
||||
This styling system prioritizes **sophistication, readability, and academic gravitas** over flashy web design. Every element is carefully crafted to support serious academic study while maintaining visual elegance.
|
||||
|
||||
### Harvard Brand Integration
|
||||
- **Primary**: Harvard Crimson (#A51C30) - Used judiciously for accents and emphasis
|
||||
- **Academic Palette**: Carefully chosen greys and blues that convey scholarly authority
|
||||
- **Typography**: Crimson Text serif for body text (academic tradition) + Source Sans Pro for headings (modern clarity)
|
||||
|
||||
### Scholarly Design Principles
|
||||
1. **Hierarchy**: Clear visual hierarchy that guides academic reading
|
||||
2. **Legibility**: Optimized line heights, spacing, and contrast for extended reading
|
||||
3. **Elegance**: Subtle shadows, refined borders, and sophisticated color transitions
|
||||
4. **Professionalism**: No flashy animations or distracting elements
|
||||
|
||||
## Architecture & Organization
|
||||
|
||||
The stylesheet is meticulously organized into 20 logical sections for easy maintenance:
|
||||
|
||||
### Section Organization
|
||||
```
|
||||
1. Color Palette & Design Tokens - All colors and design constants
|
||||
2. Typography System - Font families, sizes, line heights
|
||||
3. Spacing & Layout System - Consistent spacing scale
|
||||
4. Shadows & Elevation - Subtle depth and hierarchy
|
||||
5. Component Tokens - Shared component variables
|
||||
6. Foundational Styles - Base HTML elements
|
||||
7. Typography Hierarchy - Heading system (h1-h6)
|
||||
8. Links & Navigation - Link behaviors and styles
|
||||
9. Code & Syntax Highlighting - Academic code presentation
|
||||
10. Academic Callouts & Alerts - Sophisticated information boxes
|
||||
11. Academic Tables - Professional data presentation
|
||||
12. Figures & Images - Academic figure formatting
|
||||
13. Mathematical Content - Equation and formula styling
|
||||
14. Lists & Enumeration - Academic list formatting
|
||||
15. Quotations & Citations - Scholarly reference styling
|
||||
16. Navigation & Sidebar - Book navigation interface
|
||||
17. Responsive Design - Multi-device optimization
|
||||
18. Print Styles - Academic print formatting
|
||||
19. Accessibility Enhancements - WCAG compliance
|
||||
20. Utility Classes - Helper classes
|
||||
```
|
||||
|
||||
## Key Features
|
||||
|
||||
### 🎓 Academic Typography
|
||||
- **Body Text**: Crimson Text serif (inspired by academic tradition)
|
||||
- **Headings**: Source Sans Pro (modern clarity and hierarchy)
|
||||
- **Code**: JetBrains Mono (programming-optimized with ligatures)
|
||||
- **Reading Optimization**: 1.7 line height, justified text, optimal font sizes
|
||||
|
||||
### 📚 Sophisticated Content Elements
|
||||
|
||||
#### Callout Boxes
|
||||
Five distinct academic callout types with refined styling:
|
||||
- **Note** 📚: Deep blue with scholarly presentation
|
||||
- **Tip** 💡: Forest green for helpful insights
|
||||
- **Important** ⚡: Harvard crimson for critical information
|
||||
- **Warning** ⚠️: Academic brown for cautions
|
||||
- **Caution** 🚨: Red for serious warnings
|
||||
|
||||
Each callout features:
|
||||
- Elegant header with subtle gradients
|
||||
- Professional typography
|
||||
- Refined shadows and borders
|
||||
- Academic color scheme
|
||||
|
||||
#### Academic Tables
|
||||
- **Professional Headers**: Gradient backgrounds with proper typography
|
||||
- **Subtle Interactions**: Gentle hover effects
|
||||
- **Clear Data Presentation**: Optimal spacing and alignment
|
||||
- **Responsive Design**: Maintains elegance across devices
|
||||
|
||||
#### Scholarly Figures
|
||||
- **Elevated Presentation**: Subtle shadows and refined borders
|
||||
- **Academic Captions**: Properly styled with italics and emphasis
|
||||
- **Professional Layout**: Centered with appropriate spacing
|
||||
|
||||
### 📱 Responsive Excellence
|
||||
- **Mobile-First**: Optimized for all device sizes
|
||||
- **Typography Scaling**: Maintains readability across breakpoints
|
||||
- **Touch-Friendly**: Appropriate touch targets for mobile devices
|
||||
- **Print-Optimized**: Professional print styles for academic use
|
||||
|
||||
### ♿ Accessibility Leadership
|
||||
- **WCAG Compliance**: High contrast ratios and proper focus indicators
|
||||
- **Reduced Motion**: Respects user motion preferences
|
||||
- **Keyboard Navigation**: Clear focus indicators throughout
|
||||
- **Screen Reader**: Semantic markup and proper ARIA labels
|
||||
|
||||
## Sidebar Configuration
|
||||
|
||||
The textbook navigation is configured with sophisticated organization:
|
||||
|
||||
### Main Academic Sections (Always Expanded)
|
||||
- Systems Foundations
|
||||
- Design Principles
|
||||
- Performance Engineering
|
||||
- Robust Deployment
|
||||
- Trustworthy Systems
|
||||
- Frontiers of ML Systems
|
||||
|
||||
### Laboratory Sections (Collapsible)
|
||||
- Hands-on Labs (overview)
|
||||
- Arduino (collapsed by default)
|
||||
- Seeed XIAO ESP32S3 (collapsed by default)
|
||||
- Grove Vision (collapsed by default)
|
||||
- Raspberry Pi (collapsed by default)
|
||||
- Shared (collapsed by default)
|
||||
|
||||
This organization allows students to focus on academic content while providing easy access to practical lab exercises when needed.
|
||||
|
||||
## Typography Scale
|
||||
|
||||
### Academic Hierarchy
|
||||
```scss
|
||||
h1: 2.75rem // Chapter titles - command attention
|
||||
h2: 2.25rem // Major sections - clear organization
|
||||
h3: 1.75rem // Subsections - readable hierarchy
|
||||
h4: 1.5rem // Minor headings - subtle emphasis
|
||||
h5: 1.25rem // Small headings - minimal prominence
|
||||
h6: 1.125rem // Inline headings - text-level emphasis
|
||||
```
|
||||
|
||||
### Spacing System
|
||||
```scss
|
||||
xs: 0.25rem // Tight spacing
|
||||
sm: 0.5rem // Small spacing
|
||||
md: 1rem // Base spacing
|
||||
lg: 1.5rem // Large spacing
|
||||
xl: 2rem // Extra large spacing
|
||||
xxl: 3rem // Section spacing
|
||||
xxxl: 4rem // Chapter spacing
|
||||
```
|
||||
|
||||
## Color Psychology
|
||||
|
||||
### Academic Authority
|
||||
- **Harvard Black** (#1E1E1E): Primary text, conveying authority
|
||||
- **Academic Dark** (#2C2C2C): Body text, optimal readability
|
||||
- **Accent Wisdom** (#1B365D): Section headers, scholarly blue
|
||||
|
||||
### Harvard Heritage
|
||||
- **Harvard Crimson** (#A51C30): Links, emphasis, brand connection
|
||||
- **Academic Medium** (#5A5A5A): Secondary text, captions
|
||||
|
||||
### Sophisticated Backgrounds
|
||||
- **Surface Primary** (#FFFFFF): Main content areas
|
||||
- **Surface Elevated** (#F8F9FA): Callouts and figures
|
||||
- **Surface Subtle** (#F5F6F7): Table stripes and dividers
|
||||
|
||||
## Browser Support
|
||||
|
||||
### Modern Standards
|
||||
- **Chrome/Edge**: 88+ (full support)
|
||||
- **Firefox**: 85+ (full support)
|
||||
- **Safari**: 14+ (full support)
|
||||
- **Mobile**: iOS 14+, Android 10+ (optimized)
|
||||
|
||||
### Progressive Enhancement
|
||||
- **CSS Grid**: Layout foundation (97%+ support)
|
||||
- **Custom Properties**: Dynamic theming (96%+ support)
|
||||
- **Flexbox**: Component layout (99%+ support)
|
||||
|
||||
## Performance Optimization
|
||||
|
||||
### Efficient Loading
|
||||
- **Font Display Swap**: Prevents layout shifts
|
||||
- **Optimized Gradients**: GPU-accelerated where possible
|
||||
- **Minimal Repaints**: Smooth animations that don't trigger layout
|
||||
- **Compressed Delivery**: Optimized CSS size
|
||||
|
||||
### Academic Print Support
|
||||
- **Professional Layout**: Optimized for academic printing
|
||||
- **Monochrome Conversion**: Proper grayscale fallbacks
|
||||
- **Page Breaks**: Intelligent break points for readability
|
||||
- **Citation Formatting**: Academic reference standards
|
||||
|
||||
## Maintenance Guidelines
|
||||
|
||||
### Adding New Styles
|
||||
1. **Follow Section Organization**: Add styles to appropriate sections
|
||||
2. **Use Design Tokens**: Reference existing color and spacing variables
|
||||
3. **Maintain Hierarchy**: Respect established visual patterns
|
||||
4. **Test Accessibility**: Verify WCAG compliance
|
||||
5. **Document Changes**: Update this README for significant additions
|
||||
|
||||
### Code Quality Standards
|
||||
- **Consistent Naming**: Use semantic, descriptive class names
|
||||
- **Logical Grouping**: Organize related styles together
|
||||
- **Comment Complex Rules**: Explain sophisticated techniques
|
||||
- **Validate Regularly**: Check for CSS errors and warnings
|
||||
|
||||
## Harvard Standards Compliance
|
||||
|
||||
This styling system meets Harvard University's expectations for:
|
||||
|
||||
✅ **Academic Excellence**: Sophisticated, scholarly presentation
|
||||
✅ **Brand Consistency**: Appropriate use of Harvard identity
|
||||
✅ **Professional Quality**: Publication-ready design standards
|
||||
✅ **Accessibility**: Universal design principles
|
||||
✅ **Responsive Design**: Modern multi-device support
|
||||
✅ **Print Quality**: Academic publication standards
|
||||
|
||||
## Integration & Build
|
||||
|
||||
### Quarto Integration
|
||||
The stylesheet integrates seamlessly with Quarto's academic publishing pipeline:
|
||||
|
||||
```yaml
|
||||
format:
|
||||
html:
|
||||
theme: assets/styles/style.scss
|
||||
```
|
||||
|
||||
### Development Workflow
|
||||
1. **Local Testing**: Use `quarto preview` for development
|
||||
2. **Cross-Device Testing**: Verify across multiple screen sizes
|
||||
3. **Print Testing**: Check print layouts regularly
|
||||
4. **Accessibility Testing**: Use screen readers and keyboard navigation
|
||||
5. **Performance Monitoring**: Monitor CSS size and loading times
|
||||
|
||||
## Contributing
|
||||
|
||||
When enhancing the styling system:
|
||||
|
||||
### Quality Standards
|
||||
- Maintain Harvard's academic excellence standards
|
||||
- Ensure changes enhance readability and scholarship
|
||||
- Test thoroughly across devices and browsers
|
||||
- Preserve accessibility features
|
||||
- Document significant changes
|
||||
|
||||
### Review Process
|
||||
1. **Academic Review**: Does it enhance scholarly presentation?
|
||||
2. **Accessibility Review**: Does it maintain WCAG compliance?
|
||||
3. **Brand Review**: Is it consistent with Harvard identity?
|
||||
4. **Technical Review**: Is the code well-organized and maintainable?
|
||||
5. **User Testing**: Does it improve the academic reading experience?
|
||||
|
||||
This styling system represents a commitment to academic excellence, ensuring that the Harvard ML Systems textbook maintains the highest standards of scholarly presentation while embracing modern web technologies.
|
||||
@@ -2030,7 +2030,7 @@ for era in ["Deep Learning", "Large Scale"]:
|
||||
edgecolors="white",
|
||||
label=era,
|
||||
)
|
||||
# models
|
||||
# models
|
||||
labeled_models = ["AlexNet", "AlphaGoZero", "GPT-3", "PaLM", "GPT-4"]
|
||||
|
||||
# label styles for specific models
|
||||
|
||||
@@ -294,7 +294,7 @@ Modern ML supply chains face four analogous vectors: compromised dependencies (m
|
||||
```{.tikz}
|
||||
\begin{tikzpicture}[line cap=round,line join=round,font=\usefont{T1}{phv}{m}{n}]
|
||||
\tikzset{%
|
||||
TxtL/.style = {font=\large\usefont{T1}{phv}{m}{n},text width=90mm,align=justify,anchor=north},
|
||||
TxtL/.style = {font=\large\usefont{T1}{phv}{m}{n},text width=90mm,align=justify,anchor=north},
|
||||
Line/.style={violet!50, line width=1.1pt,shorten <=1pt,shorten >=2pt},
|
||||
LineA/.style={violet!50,line width=2.0pt,{-{Triangle[width=1.1*6pt,length=2.0*6pt]}},shorten <=3pt,shorten >=2pt},
|
||||
ALine/.style={black!50, line width=1.1pt,{{Triangle[width=1.1*6pt,length=2*6pt]}-}},
|
||||
@@ -834,7 +834,6 @@ node[left=5pt,pos=0.85,black,fill=magenta!20,circle,inner sep=1pt]{2}(EKV4.north
|
||||
\end{tikzpicture}
|
||||
```
|
||||
|
||||
|
||||
### Insufficient Isolation: Jeep Cherokee Hack {#sec-security-privacy-insufficient-isolation-jeep-cherokee-hack-6a7c}
|
||||
|
||||
In 2015, security researchers remotely compromised a Jeep Cherokee's engine, transmission, and braking systems by exploiting a vulnerability in the vehicle's internet-connected Uconnect entertainment system -- without physical access to the car [@miller2015remote; @miller2019lessons]. The architectural flaw was insufficient isolation: the entertainment system shared a network path with safety-critical CAN bus controllers. The incident triggered the first cybersecurity recall in automotive history, affecting 1.4 million vehicles[^fn-automotive-recalls], and prompted NHTSA[^fn-nhtsa] to issue mandatory cybersecurity guidelines.
|
||||
|
||||
@@ -2709,16 +2709,16 @@ ax.axvspan(6, 10, alpha=0.1, color='#008F45')
|
||||
ax.axvspan(18, 22, alpha=0.1, color='#CB202D')
|
||||
|
||||
# ┌── 4. DECORATE ──────────────────────────────────────────────────────────────
|
||||
ax.text(8, 500, 'Low-carbon\nwindow',
|
||||
fontsize=9,
|
||||
ha='center',
|
||||
va='center',
|
||||
ax.text(8, 500, 'Low-carbon\nwindow',
|
||||
fontsize=9,
|
||||
ha='center',
|
||||
va='center',
|
||||
fontweight="bold",
|
||||
color='#008F45')
|
||||
ax.text(20, 500, 'Peak carbon',
|
||||
fontsize=9,
|
||||
ha='center',
|
||||
va='center',
|
||||
ax.text(20, 500, 'Peak carbon',
|
||||
fontsize=9,
|
||||
ha='center',
|
||||
va='center',
|
||||
fontweight="bold",
|
||||
color='#CB202D')
|
||||
|
||||
|
||||
Reference in New Issue
Block a user