Freeframe
Blog7 pages · 2 downloads · Free

Ledger

An editorial magazine for long-form writing

Stack
v1.1.6 changelog

About this template

A complete magazine-style blog with a featured front page, a long-form article layout with table of contents and reading progress, a searchable archive, topic pages, a masthead and a contact page. Typography is tuned for comfortable reading in light and dark mode.

Features

  • Dark mode toggle that remembers the choice, with no flash on load
  • Reading progress bar and estimated reading time
  • Auto-generated table of contents that highlights the current section
  • Archive with live search, topic filters and shareable filter URLs
  • Share buttons with copy-link toast
  • Pull quotes, footnotes, code blocks and an accessible SVG chart
  • Validated contact, pitch and newsletter forms
  • Responsive layout with an accessible mobile menu
  • Subtle scroll-reveal animations that respect reduced motion
  • Hand-made SVG cover art and writer avatars

Pages included

Quick start

unzip ledger.zip && cd ledgeropen index.html        # that's it # optional, after adding new Tailwind classes:npm install && npm run build
Read the Ledger documentation →

Changelog

  1. v1.1.6

    Fixed

    • Reading time counts only the words a reader reads: each text node on its own (words in neighbouring tags used to run together), without the chart's SVG text (its title, description and labels), scripts, styles, hidden elements or the notes. The example essay now reads "4 min read" (it was 5 because of the chart's text), also on the home page and in the archive.
  2. v1.1.5

    Changed

    • The CSS build no longer reads the documentation and metadata files (*.md, *.json), so words in the guides can no longer add unused rules to assets/css/style.css. No visible change.
  3. v1.1.4

    Fixed

    • "Short notes" on the front page and "Masthead" and "What we believe" on the about page are <section> elements named by their headings. They were <div>s with aria-labelledby, which ARIA doesn't allow on generic elements, so the name was ignored.
    • The footer colophon no longer claims "Made with plain HTML.", which was wrong for the Astro and WordPress versions: it reads "Set in Newsreader & Inter." in every version.
  4. v1.1.3

    Fixed

    • The thin strip above the header is a labelled landmark (role="region", aria-label="About The Ledger").
    • The code block in article.html has tabindex="0", so keyboard users can scroll it on small screens.
    • 404.html has <meta name="robots" content="noindex">, so the error page is not indexed.
    • A tampered stored theme (any ledger-theme value other than "dark" or "light") no longer forces light mode; it is ignored and the page follows the system setting.
  5. v1.1.2

    Added

    • Full documentation in DOCS.md.

    Fixed

    • archive.html?topic= links match the topic regardless of case (?topic=design selects Design).
  6. v1.1.1

    Fixed

    • The accent kicker on the inverted quote band now meets WCAG AA contrast in both themes.
    • Footnote back-links are underlined so they don't rely on colour alone.
  7. v1.1.0

    Added

    • "Back to top" button on every page. It fades in after you scroll about one screen, returns to the top (instantly for visitors who prefer reduced motion), moves keyboard focus to the main content, lifts itself above toast messages, steps aside while an in-page "Back to top" link is on screen and is hidden when printing. It is styled to match the template and its dark mode.
    • data-back-to-top-avoid (lift the button above an element) and data-back-to-top-hide (hide the button while it would cover a sticky or fixed element) to keep it clear of your own UI.
    • This changelog and a version field in template.json.

    Fixed

    • Social sharing image is now a 1200×630 PNG (assets/img/og-image.png); most social sites don't display SVG. The SVG stays as the editable source.
  8. v1.0.0

    Added

    • Initial release with 7 pages: Home, Article, Archive, Topics, About, Contact, 404.
    • Dark mode toggle that remembers the choice, with no flash on load
    • Reading progress bar and estimated reading time
    • Auto-generated table of contents that highlights the current section
    • Archive with live search, topic filters and shareable filter URLs
    • Share buttons with copy-link toast
    • Pull quotes, footnotes, code blocks and an accessible SVG chart
    • Validated contact, pitch and newsletter forms
    • Responsive layout with an accessible mobile menu
    • Subtle scroll-reveal animations that respect reduced motion
    • Hand-made SVG cover art and writer avatars

More templates