System Documentation on AI and Society Course

System Overview

Mon, 01 Jan 0001 00:00:00 +0000

System Architecture Overview

This page explains how all the pieces of the course infrastructure fit together.

The Big Picture

 Hugo Site (Content)
 │
 ┌─────────┼─────────┐
 │ │ │
 Markdown Theme CSS
 Content (Terminal) (A11y)
 │ │ │
 └─────────┼─────────┘
 │
 [Website Output]
 (HTML, CSS, JS)
 │
 ┌─────────┴─────────┐
 │ │
 [Browser] [D2L Generator]
 (Website) │
 ┌─────────┴──────────┐
 │ │
 Typst PDF Pandoc DOCX
 (Beautiful) (Editable)
 │ │
 [PDF Output] [DOCX Output]
 (For Reading) (For Editing)
 │ │
 └─────────┬──────────┘
 │
 [Brightspace Upload]
 (PDF + DOCX Files)

Component Breakdown

1. Hugo Site Generator

What it does: Converts markdown content + templates into a static website

Accessibility Features

Mon, 01 Jan 0001 00:00:00 +0000

Accessibility Features & WCAG AAA Compliance

This site includes a separate accessibility layer that provides WCAG AAA and UDL (Universal Design for Learning) compliance without modifying the base theme.

What’s Included

🎯 Core Features

Skip Navigation Link — Keyboard users jump to main content (Tab at page top)
ARIA Landmarks — Semantic roles for screen readers (main, nav, contentinfo)
Enhanced Focus Styles — 3px white outline with 2px offset for keyboard navigation
Color Contrast — All text meets 7:1+ AAA ratio (dark theme, white text)
Form Accessibility — Proper labels, 44px touch targets, error messaging
Reduced Motion Support — Respects prefers-reduced-motion user preference
Dark/Light Mode — Adapts to prefers-color-scheme setting
Alt Text Validation — Build-time checks for missing image descriptions
Print-Friendly Styles — Optimized for paper and PDF output
Screen Reader Support — Content hidden from view but available to assistive tech

WCAG AAA Compliance

All elements meet or exceed AAA (Triple-A) standards:

D2L Document Generation

Mon, 01 Jan 0001 00:00:00 +0000

D2L Document Generation

Python-based system to generate professional, WCAG AAA-compliant PDFs and DOCX files from course content for Brightspace (D2L) upload.

Features

📄 Dual-path generation — PDFs via Typst (beautiful), DOCXs via Pandoc (editable)
🎯 Flexible modes — Combined or individual files per content item
✅ WCAG AAA compliant — Both formats meet accessibility standards
🎨 Professional styling — MSU green branding template
📊 Multiple content types — Readings, assignments, resources, docs
🔄 Batch processing — Generate all at once or by type

Quick Start

Generate readings as PDF + DOCX

cd /path/to/repo
source venv/bin/activate.fish
python scripts/generate-d2l-docs.py --type readings --format both

Output:

Template Customization

Mon, 01 Jan 0001 00:00:00 +0000

Typst PDF Template Guide

Complete guide to the Typst template used for professional PDF generation.

Overview

The template is located at: templates/typst/clean/

Used by the D2L document generator to create beautiful, WCAG AAA-compliant PDFs.

Design Specifications

Typography

Element	Font	Size	Color	Weight	Notes
Body	Roboto	11pt	White	Normal	Main text, 17.4:1 contrast
h1	Roboto	15pt	MSU Green	Bold	Title, 10.75:1 contrast
h2	Roboto	12.5pt	MSU Green	Semibold	Section heading
h3	Roboto	11pt	Gray	Semibold	Subsection
Code (inline)	Roboto	9.9pt	Green	Normal	Highlighted background
Code (block)	Roboto	9.68pt	Green	Normal	Light green box
Footer	Roboto	9pt	Gray	Normal	Page numbers, 8.06:1 contrast

Colors

// MSU Green palette
#let green = rgb("#18453B") // Main color
#let green-light = green.lighten(88%) // Light background

// Grays
body text: luma(30) // Very dark (17.4:1)
footer text: luma(80) // Medium gray (8.06:1)
heading h3: luma(50) // Dark gray
borders: luma(210) // Light gray

All colors tested for AAA contrast (7:1+ ratio).