Hello Distill

Arnav Wadehra

1

Introduction

This article tests every component in the Distill-inspired article system. The text column should be roughly 700px wide on large screens, with a gutter for sidenotes to the right and a kicker margin to the left.

The transformer architecture [?] revolutionized natural language processing. Subsequent work on pre-training [?] and scaling [?] further demonstrated the power of attention mechanisms.

Here is a footnote¹ demonstrating the hover popup system, and here is another² .

2

Mathematics

Inline math works naturally: the quadratic formula is $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ .

Display math is left-aligned, following the Distill convention:

\nabla_\theta J(\theta) = \mathbb{E}_{\pi_\theta} \left[ \sum_{t=0}^{T} \nabla_\theta \log \pi_\theta(a_t | s_t) \cdot R_t \right]

The softmax function applied to attention scores:

\text{Attention}(Q, K, V) = \text{softmax}\left(\frac{QK^T}{\sqrt{d_k}}\right)V

Dynamic Math

The slider below controls a value that is rendered dynamically using the <Math> component:

Current value: 50. The expression $f(x) = 50^2 = 2500$ is computed dynamically.

3

Figures

Body-width figure

Figure -1:A standard-width figure in the text column.

As shown in fig-body, figures can occupy the standard text column width.

Middle-width figure (outset)

Figure -1:A wider figure using the middle breakout.

Page-width figure

Figure -1:A full-page-width figure.

4

Code

Code blocks with syntax highlighting:

python

def attention(query, key, value):
    """Scaled dot-product attention."""
    d_k = query.shape[-1]
    scores = torch.matmul(query, key.transpose(-2, -1)) / math.sqrt(d_k)
    weights = F.softmax(scores, dim=-1)
    return torch.matmul(weights, value)

javascript

function softmax(logits) {
  const maxLogit = Math.max(...logits);
  const scores = logits.map(l => Math.exp(l - maxLogit));
  const denom = scores.reduce((a, b) => a + b, 0);
  return scores.map(s => s / denom);
}

5

Typography

Edward Tufte’s principles of data visualization [?] emphasize the importance of clear, honest representation of data. This paragraph tests the typographic rhythm at various viewport widths.

Third-Level Heading

Subheadings are 18px on mobile, 20px on desktop, with weight 700.

Fourth-Level Heading

These are uppercase, 14px, weight 600 — used sparingly for categorical labels.

6

Lists

Unordered:

First item with enough text to wrap to a second line if the viewport is narrow enough
Second item
Third item

Ordered:

Step one
Step two
Step three

Blockquote

The purpose of visualization is insight, not pictures. — Ben Shneiderman

Table

Model	Parameters	Year
GPT-2	1.5B	2019
GPT-3	175B	2020
GPT-4	~1.7T	2023

Horizontal Rule

The horizontal rule above should span the full screen width (edge to edge), using grid-column: screen.

Citation

For attribution in academic contexts, please cite this work as

Arnav Wadehra, "Hello Distill", 2026.

BibTeX citation

@article{wadehra2026,
  author = {Arnav Wadehra},
  title  = {Hello Distill},
  year   = {2026},
  url    = {http://sveltekit-prerender/posts/hello-distill}
}