Code, highlighted

Fenced code blocks are syntax-highlighted by Rouge. Here’s a little Ruby:

class Greeter
  def initialize(name)
    @name = name
  end

  def greet
    "Hello, #{@name}!"
  end
end

Greeter.new("world").greet

And some YAML, the language your front matter speaks:

layout: post
title: "My First Post"
categories:
  - Writing
tags:
  - hello

You can also use inline code mid-sentence.

Tables

Blockquotes and lists

Good typography is invisible. You notice it only when it’s missing.

An ordered list:

1. Write the post in Markdown.
2. Add front matter (title, categories, tags).
3. Run bundle exec jekyll serve.

And an unordered one:

• Headings, bold, and italic all just work.
• Links are styled to match the active theme.
• Images get rounded corners automatically:

That’s the full toolkit — drop in your words and the theme handles the rest.

Categories grouped into themes

Categories aren’t a flat list — you group them into themes in _data/taxonomy.yml. This demo defines one theme, “Theme Features”, that gathers the five categories used across these posts:

themes:
  - id: features
    title: "Theme Features"
    description: "Everything System Halted can do, one post at a time."
    categories:
      - "Getting Started"
      - "Search"
      - "Theming"
      - "Organization"
      - "Writing"

The Categories page renders each theme as a section. Any category you use that isn’t listed simply falls under “Other categories”, so nothing gets lost.

Tags and archives

• Tags give you a finer-grained, free-form way to cross-link posts, with quick links to jump to any tag.
• Archives group posts by year and can be sorted by year or post count, ascending or descending — all client-side.

Featuring your best

Add featured: true to a post’s front matter and it appears on the Featured Posts page:

featured: true

The “Welcome” and “Search” posts on this site are featured — that’s why they show up there.

The toggle

There’s a theme toggle in the masthead. When a reader flips it:

• The choice is saved to localStorage, so it sticks across visits.
• On a reader’s first visit, the theme follows their operating system via prefers-color-scheme — dark if their system is dark, light otherwise.
• The switch is applied before paint, so there’s no flash of the wrong theme.

Typography

The palette is paired with a typographic system that scales fluidly across screen sizes:

• Rubik for body and headings.
• Source Code Pro for inline code and code blocks.

Because the colors are defined as theme variables, both modes stay consistent across cards, tables, blockquotes, code blocks, and the search overlay — you don’t have to restyle anything to support dark mode.

Try it

• Press / anywhere to open the search overlay.
• Start typing — results appear live as you go.
• Use Tab to move through results; focus stays trapped inside the dialog for keyboard users.
• Press Esc to close.

Why client-side

• Nothing to host. The search index is a static file shipped with your site, so there’s no API to run or pay for.
• Private. Queries never leave the reader’s browser.
• Fast. Results come back instantly, with no network round-trip.

If you’d like to keep a page out of the index, add search_exclude: true to its front matter. Everything else is searchable the moment you publish it.

What you get

• A responsive card grid on the home page — featured images, excerpts, and author bylines, laid out in columns that adapt from phone to desktop.
• Built-in search powered by elasticlunr. It runs entirely in the browser, so there’s no server to host and no third-party service to sign up for. Press / to try it.
• Light and dark themes based on the Nord palette. The toggle remembers your choice and respects your system preference on first visit.
• Organized content through categories, tags, sortable archives, and a Featured Posts page — categories are grouped into themed sections you control.
• SEO, a sitemap, and an RSS feed, generated automatically via jekyll-seo-tag, jekyll-sitemap, and jekyll-feed.
• Accessibility baked in — ARIA labels, a focus trap in the search dialog, a skip link, and full keyboard navigation.

Getting started

Add the theme to your Gemfile:

gem "jekyll-theme-systemhalted"

Then point your _config.yml at it and set your own title, tagline, and author:

theme: jekyll-theme-systemhalted
title: Your Site Name
tagline: A short, memorable line
author:
  name: Your Name

Run bundle exec jekyll serve, open the local URL, and you’re publishing. Read on to see each feature in action.