This post demonstrates the key features of our minimal writing site: Tufte-style sidenotes, LaTeX mathematics, and inline HTML content. The design philosophy follows the principles of accessibility and simplicity outlined in modern web design.
Tufte-Style Footnotes
Edward Tufte's approach to sidenotes Edward Tufte is a statistician and artist known for his work on information design and data visualization. His books on analytical design have influenced web typography. provides an elegant way to include supplementary information without disrupting the main text flow. This approach keeps related information visually connected to the relevant text.
The sidenote system automatically adapts to different screen sizes. On narrow screens, sidenotes become expandable footnotes to maintain readability. Click the superscript numbers to reveal them. On wide screens, notes appear in the right margin. On mobile devices, they become toggleable footnotes.
Mathematical Notation
LaTeX mathematics renders beautifully with KaTeX. Here are some examples:
Inline mathematics: The quadratic formula is \(x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}\).
Display mathematics:
$$\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}$$More complex expressions work seamlessly:
$$\mathcal{L}(\theta) = \sum_{i=1}^{n} \log P(y_i | x_i, \theta) = \sum_{i=1}^{n} \log \frac{e^{\theta^T x_i y_i}}{1 + e^{\theta^T x_i}}$$The mathematics integrates with sidenotes too. KaTeX is faster than MathJax and produces better-looking output. It's also more lightweight, which aligns with our minimal design philosophy.
Inline HTML Content
The writing site supports embedding interactive HTML content. Here's a simple example:
Interactive Element
This is embedded HTML content. You could include:
- Interactive visualizations
- Custom widgets
- Research data tables
- Embedded media
Code Examples
Code blocks are styled for readability:
def fibonacci(n):
"""Generate Fibonacci sequence up to n."""
a, b = 0, 1
while a < n:
yield a
a, b = b, a + b
# Example usage
for num in fibonacci(100):
print(num)Inline code like printf("Hello, world!") is also supported.
Design Philosophy
This writing site follows several key principles: These principles are derived from Gwern's guidelines for AI-accessible writing and modern web standards for accessibility.
- Accessibility first: Content must be readable by both humans and AI systems
- Minimal dependencies: No heavy JavaScript frameworks or complex build systems
- Fast loading: Optimized for speed and crawlability
- Semantic HTML: Proper structure for screen readers and search engines
The result is a writing site that loads quickly, works without JavaScript (except for math rendering), and remains accessible to all users and automated systems.