fjordxy

A content site with no menu. You move through it with h j k l — on desktop as keys, on mobile as four buttons pinned to the bottom of the screen.

                 pages  ──  l / h  ──▶
  categories   ┌──────────┬──────────┬──────────┐
      │        │  index   │  index   │  index   │
    j │ k      ├──────────┼──────────┼──────────┘
      │        │   work   │   work   │   work
      ▼        ├──────────┼──────────┴──────────┐
               │  notes   │  notes              │
               ├──────────┴─────────────────────┘
               │ contact
               └─────────

key	move
j	down to the next category
k	up to the previous category
l	further into the current category — "read more"
h	back out

Arrow keys work as an accessibility alias. Moving between categories lands you at that category's first page.

Running it

No build step, no dependencies. Open index.html, or serve the folder:

python3 -m http.server 8000

Editing content

All content lives in index.html.

• A category is <section class="cat" data-slug="…" data-label="…">. Its data-slug is what appears in the URL; data-label is what the rail shows.
• A page is an <article class="page"> inside a category.

Add or reorder either and everything else follows — the rail, the page counters, the URLs and the enabled/disabled state of the four buttons are all derived from the markup at load time. Nothing is hardcoded in the JS.

The 01/03 counters inside .eyebrow are written by hand in the markup; update them if you add pages, or delete the <span class="count"> and rely on the rail and statusline instead.

URLs

Every position is addressable: #work is the first page of work, #work/3 the third. Back and forward in the browser walk your actual path through the grid.

Without JavaScript

The grid collapses to a plain vertical stack of every page, in order, fully readable. The keys and rail hide themselves.

Theme

Colours are bases / bases-light, taken from the Forgejo theme in that repo. The site follows the visitor's system light/dark preference. All tokens are CSS custom properties at the top of assets/css/style.css.

Typeface is IBM Plex — Sans for reading, Mono for chrome, loaded from Google Fonts. To self-host, drop the woff2 files in assets/fonts/ and replace the <link> in index.html with @font-face rules.

Still to do

The copy in index.html is placeholder. So is the contact address (hei@fjordxy.example).