Continuum

Meet Continuum

Wed, 28 Oct 2026 00:00:00 GMT

Continuum is an Astro theme built on one idea from Metro, the design language behind Windows Phone and Zune: you should always know where you came from.

When you tap a post in a list, its title doesn’t vanish and reappear on a new page. It lifts out of the list, everything around it turns away, and it flies up to become the header of the page you opened. Go back, and it flies home again. Windows Phone called this the continuum. The rest of the theme is built around it.

What’s here

A panorama for a home page. One wide page in sections, a giant title running off the edge, the next section peeking in from the right. Swipe it, drag it, scroll it, or use the arrow keys. It wraps around, and its title drifts slower than everything else.
The continuum, both ways. Titles fly from lists into headers and back. Covers and tiles open into their pages the way Zune opened an album.
The turnstile. Every other page change swings on a hinge at the left edge of the screen, item by item.
Live tiles. Projects sit on a start screen, and the ones with a picture turn over now and then to show it.
A cropped title at the top of every page. It’s the page you came from, still up there. Click it to go back.
Settings, like a phone. Visitors can pick dark or light, one of twenty accents, and how much moves.

Content first

None of the motion gets in the way of reading. Pages are fast static HTML with one small script, everything works without JavaScript, and anyone whose system asks for less motion gets none at all.

It’s also a Vault CMS theme: your Obsidian vault is the site. Write in Obsidian or Zeku, and links, embeds, and callouts work the way you expect.

Start here

Open src/config.ts to set your title, your accent, and the sections on the hub. Then read the-continuum-transition to see what the motion is doing.

The continuum transition

Sat, 24 Oct 2026 00:00:00 GMT

In 2009, a studio motion study for Windows Phone showed an email list. A finger taps a name. In about a tenth of a second the rest of the list is gone, the name sinks a little, and then it rises into the header of the open message, larger, settled. Tap back, and the header drops and shrinks into the list again as the list returns around it.

That’s the whole effect. It tells you, without a word, that the page you’re on is the thing you tapped.

The choreography

Continuum does the same thing in four beats:

Lift. The parts of the card that the next page shares (the title, a cover, a tile) are copied into ghosts that float above the page.
Turn away. Everything else swings away on a hinge at the left edge of the screen, top to bottom, while the title sinks a few pixels. This runs while the next page loads, so the motion covers the wait.
Fly. The new page arrives hidden. Each ghost flies to its place in it, taking on the header’s size, weight, and line breaks as it goes.
Turn in. The rest of the page turns in around the landed title, and the ghost hands over to the real header.

Back is the same thing in reverse. The header becomes the ghost, and it lands on the card it came from.

Where the pairing comes from

A card and the page it opens share an id, like posts/the-continuum-transition. The card says data-share-id, the page says data-page-id, and parts on both sides say what they are with data-share="title". That’s all a new layout needs to take part.

Why it’s worth the trouble

Most sites cut. The page you were on disappears and a new one appears, and your eyes have to find their place again. The continuum keeps one thing still in your attention the whole way through. It’s faster to read even though it takes a third of a second, which is the same thing the Windows Phone team found in their own testing: motion that explains itself feels faster than no motion at all.

It never bounces. Metro’s curve is fast out and soft to settle, and nothing overshoots.

When it stays out of the way

If your system asks for reduced motion, there’s no continuum, no turnstile, and no parallax. Pages simply change. Visitors can also turn animations off on the settings page, and the site’s owner can turn them off in src/config.ts.

Panoramas, not pages

Tue, 20 Oct 2026 00:00:00 GMT

Windows Phone’s hubs weren’t pages. They were panoramas: one long horizontal canvas, wider than the screen, that you swiped through section by section. The next section’s header always showed at the right edge, so you knew there was more without anyone telling you.

Four layers

The original design guide describes four layers, each with its own motion:

Layer	Moves
Sections	with your finger
Section headers	with their sections
Background image	slower than the sections
Title	slowest of all

Continuum’s hub follows it. Drag the sections and the title drifts behind them. When you pan past the last section, the first comes back around from the right, and the title slides home.

Every way in

Touch: swipe, or flick. A flick always moves on a section.
Mouse: drag it, use the wheel (one section per notch), or the arrows that appear at the edges.
Trackpad: swipe sideways and it follows, then settles.
Keyboard: the arrow keys move between sections, and tabbing into a section pans to it.

Each section scrolls up and down on its own, so a long list never fights the panning.

Setting it up

The sections are a list in src/config.ts:

sections: [
  { type: 'featured', title: 'featured' },
  { type: 'posts', title: 'recent', count: 6 },
  { type: 'projects', title: 'projects', count: 7 },
  { type: 'about', title: 'about' },
  { type: 'now', title: 'now' },
  { type: 'tags', title: 'topics', count: 12 },
],

Reorder them, rename them, or drop the ones you don’t need. A page section shows the body of any page in src/content/pages.

Typography is the interface

Fri, 16 Oct 2026 00:00:00 GMT

Metro had a line for it: typography is beautiful, period. Its interfaces had almost no buttons, borders, or boxes. The type itself was the structure. Big, light headings set the hierarchy, and a single strong left edge lined everything up.

The face

Continuum is set in Segoe, the family Metro was drawn in. Windows already has it, so a Windows visitor sees the real Segoe UI. Everyone else gets Noto Sans, an open-source face that grew out of Steve Matteson’s Open Sans (he drew Segoe too), cut to Segoe’s weights and scaled to its size, so lines sit where they would in Segoe.

The ramp

Use	Size	Weight
Panorama title	a quarter of the screen	light
Page title	up to 88 px	light
Section and pivot headers	up to 60 px	light
List titles	up to 29 px	semilight
Body	18 px	regular
Labels	13 px capitals	semibold

Light weights carry the big sizes and regular carries the reading. Small labels go in capitals with wide tracking, the way Windows Phone set an app’s name above its pages.

Headers that move you around (the panorama, the pivots, the menu) are set in lowercase, as they were on the phone. Your own titles keep the case you write them in.

Live tiles, honestly

Mon, 12 Oct 2026 00:00:00 GMT

A live tile is a promise that the thing behind it is alive. On Windows Phone, the start screen was never still: a photo slid up over a contact’s tile, a count changed on the mail tile, the weather turned over to show the temperature. None of it ran on an obvious timer.

Continuum’s tiles do the same, gently. A project with a cover image turns over now and then to show it. A project with only a description shows that instead. Tiles turn only while they’re on screen, never while you’re hovering one, and never when motion is off.

Sizes

Tiles sit on a grid four columns wide and use Windows Phone 8’s sizes:

small: one square
medium: two by two
wide: four by two
large: four by four

Set one in a project’s frontmatter, or leave it out and the start screen picks a rhythm of wide, medium, and small tiles for you.

tile: wide
icon: map
accent: teal

icon picks the glyph on the tile’s face, and accent gives the tile its own color, from the twenty accents or any hex value.

Opening one

Tap a tile and the tiles around it turn away, leaving it alone for a moment. Then it grows into the project’s page while its label flies up to become the title. That’s the Zune open, and it runs backward when you go back.

This post is a folder

It’s posts/live-tiles-honestly/index.md, with its picture next to it, and its cover is written image: "[[live-tiles.png]]". Both layouts, a single file or a folder per post, work side by side.

Writing in Obsidian, publishing with Continuum

Thu, 08 Oct 2026 00:00:00 GMT

src/content is an Obsidian vault. Open it in Obsidian with Vault CMS, or open the project in Zeku, and every note in posts, projects, and pages is a page on your site.

Folders

Folder	Becomes
`posts/`	`/posts/your-note/`
`projects/`	`/projects/your-note/`, and a tile on the start screen
`pages/`	`/your-note/`
`special/`	the titles and intros of the site’s own pages

A note can be a single file (posts/hello.md) or a folder (posts/hello/index.md) with its images beside it. The address comes from the file or folder name, or from a slug property if you set one.

Properties

title: Writing in Obsidian
date: 2026-10-08
description: One or two sentences for lists and search results.
tags: [obsidian, vault-cms]
image: "[[attachments/cover.png]]"
imageAlt: What the cover shows.
featured: false
accent: magenta
draft: false

Only title matters. Everything else has a sensible default, and a blank date or a cover written either way (as a wikilink, a path, or a web address) won’t stop a build.

Links and images

Write links the way Obsidian does. the-continuum-transition resolves by name from anywhere in the vault, a heading works too, and a link to a draft shows faded until it’s published, like this one: a-draft-that-isnt-here.

Paste an image and it goes in an attachments folder beside the note. While the dev server runs, a new image shows on the next reload. There’s no copy step and nothing to restart.

In Zeku

Zeku reads the collections from src/content.config.ts and the settings from src/config.ts, where every value has a [CONFIG] marker, so the theme’s options show up as a form.

A note on accents

Sun, 04 Oct 2026 00:00:00 GMT

Windows Phone let you pick one color for the whole phone. Every tile, every link, every highlighted word took it on. Continuum keeps that idea and the twenty accents Windows Phone 8 shipped: lime, green, emerald, teal, blue, cobalt, indigo, violet, pink, magenta, crimson, red, orange, amber, yellow, brown, olive, steel, mauve, and taupe.

The default is blue, the one most people remember. It was Windows Phone 7’s, and Windows Phone 8 kept it under a new name, cyan, which Continuum still answers to.

Fills and text are different jobs

A tile is a big block of color, and it should look exactly like the phone did. Small accent-colored text is another matter: cobalt on black is hard to read at fifteen pixels. So each accent gets a text tone for each background, lightened on black and darkened on white until it passes 4.5 to 1, while the fills stay untouched.

Labels on tiles are white, the way the phone drew them. Only the three palest, lime, amber, and yellow, get black labels, because white on them stops reading at all.

Per post, per project

This post is magenta because its frontmatter says accent: magenta. Give any post, project, or page an accent and its links, dates, and tile follow it.

Visitors choose too

With visitorChoice on in src/config.ts, visitors get a settings page with the same accent list a phone had, plus dark and light. Their choice stays on their device. Turn it off and everyone sees the site the way you set it.

Formatting reference

Wed, 30 Sep 2026 00:00:00 GMT

This page shows every kind of formatting the theme styles, in the order you’re likely to reach for it.

Text

Regular text, bold, italic, ~~struck through~~, inline code, and a highlight. Inline tags like #design link to their topic when it has a page.

A link to another site opens in a new tab. A link to a note works by name: meet-continuum, or with your own words: the type post.

Headings

A third-level heading

A fourth-level heading

Headings get anchors, so you can link straight to them: Callouts.

Lists

A plain list
With a second item
- And a nested one
Back out again

A numbered list
Counts on its own
In the accent color

A finished task
One still to do

Quotes

Typography is beautiful. Period.

Callouts

Note

A note, with the default title.

Tips can have their own title

And more than one paragraph.

Like this.

A folded callout

It stays shut until you open it.

An open one that can fold

Click the title to close it.

Quote

Every Obsidian callout type works, along with its aliases.

Code

// The curve every Continuum motion uses: fast out, soft settle, no bounce.
export const metro = 'cubic-bezier(0.1, 0.9, 0.2, 1)';

export function turn(el: Element, dir: 'forward' | 'back') {
  return el.animate([{ transform: 'rotateY(0)' }, { transform: `rotateY(${dir === 'forward' ? 64 : -52}deg)` }], 200);
}

Tables

Gesture	On the hub	In a list
Swipe	next section	scrolls
Tap	opens	opens
Back	pans home	flies back

Images

An image from the attachments folder, sized to 480 pixels:

The same with Markdown’s syntax:

Embedded notes

A note embedded with ![[...]] shows as a card that opens it:

Video

A YouTube link as an image becomes a player that loads only when you press play:

Math

Inline math like $e^{i\pi} + 1 = 0$ , and a block:

\frac{d}{dt}\, x(t) = v_0 \cdot 2^{-10t} \cdot 10 \ln 2

Diagrams

flowchart LR
  tap[Tap a card] --> lift[Title lifts]
  lift --> turn[List turns away]
  turn --> fly[Title flies to the header]
  fly --> land[Page turns in]

Footnotes

Metro’s curve is fast out and soft to settle.¹

It’s cubic-bezier(0.1, 0.9, 0.2, 1), the same one the Metro documentary’s motion uses. ↩

Continuum

Meet Continuum

What’s here#

Content first#

The continuum transition

The choreography#

Why it’s worth the trouble#

When it stays out of the way#

Panoramas, not pages

Four layers#

Every way in#

Setting it up#

Typography is the interface

The face#

The ramp#

Lowercase where it’s navigation#

Live tiles, honestly

Sizes#

Opening one#

Writing in Obsidian, publishing with Continuum

Folders#

Properties#

Links and images#

A note on accents

Fills and text are different jobs#

Per post, per project#

Visitors choose too#

Formatting reference

Text#

Headings#

A third-level heading#

A fourth-level heading#

Lists#

Quotes#

Callouts#

Code#

Tables#

Images#

Embedded notes#

Video#

Math#

Diagrams#

Footnotes#

Footnotes#

What’s here

Content first

The choreography

Why it’s worth the trouble

When it stays out of the way

Four layers

Every way in

Setting it up

The face

The ramp

Lowercase where it’s navigation

Sizes

Opening one

Folders

Properties

Links and images

Fills and text are different jobs

Per post, per project

Visitors choose too

Text

Headings

A third-level heading

A fourth-level heading

Lists

Quotes

Callouts

Code

Tables

Images

Embedded notes

Video

Math

Diagrams

Footnotes

Footnotes