Margin
An editorial author site.
Margin is a website for a novelist and a new book, in the Editorial style: warm paper, ink, grey captions and one deep sea blue for the jacket and links; a soft high-contrast serif (Fraunces) for the big lines, a book serif (Newsreader) for reading, and small caps in Hanken Grotesk for kickers and meta. A centred nameplate, hairline rules, drop caps, page numbers and captions under every photo. The sample author, Ruth Calder, her novels, essays, readings and the first chapter are invented sample content.
- For
- Author site
- Built with
- HTML, CSS, ES modules, Motion 14.6.0, anime.js 4.5.0 (no build step)
- Pages
- 3 designed pages
- Themes
- Light and dark, following the system, with a switch
Draft listing: this template is finished but still in review before it goes on sale.
Screens from the template
Every page is laid out for a 390 pixel phone as well as for tablet and desktop.
More pages
The 3D moment
A hardback in the hero opens on its spine: the jacket swings round in 3D to show the endpaper and dedication, then the printed first page settles in paragraph by paragraph; Close and Open the book.
What you get
Straight from the template's README, the same file you will find in the repository.
- Home (
index.html): the nameplate in the top bar; the new book's title, standfirst and links beside a hardback that opens to its dedication and first page; a line from the novel as a full-width pull quote with its page number; the books as a contents page (number, jacket, title, description, year, link); a notebook of essays with a featured photo; a full-bleed sea photograph; a readings table with seat states; a two-column biography with a drop cap; a letter sign-up beside where to buy; the author's name large in the footer. - First chapter (
chapter.html): a reading page with a chapter number, title, word count and reading time worked out from the text, a header photograph, drop cap, section breaks, a 68-character measure, a reading progress line, and an end-of-chapter block. - 404 (
404.html): "This page was borrowed by the sea." - Sign-up states: empty, invalid, adding, done. Visible focus everywhere. "Close the book" and "Open the book".
- Light and dark themes (follows the system, with a toggle that remembers the choice), phone to desktop.
Pages and stack
Every page below is designed and built, in both themes, at phone, tablet and desktop sizes.
Pages
- Home
- First chapter
- 404
Stack
- HTML
- CSS
- ES modules
- Motion 14.6.0
- anime.js 4.5.0 (no build step)
The licence, in short
One purchase covers every site you build. Read the whole licence
You can
- Build as many websites and web apps with it as you like, for yourself or for clients.
- Change anything: code, design, copy, colours and layout.
- Charge clients for the work and hand them the finished site with its source code.
You cannot
- Sell, give away or publish the template itself, changed or not, as a template, theme, starter, kit or design file.
- Use it in a product whose main purpose is letting others build sites, like a site builder or theme marketplace.
