Skip to main content

Examples

Every element the atelier project type styles, rendered by the project type itself.

Set project.type: atelier in your _quarto.yml, provide a _brand.yml, then author pages as usual. The sections below exercise the elements the project type styles for dark mode and accessibility; toggle the colour scheme while scrolling to see each one hold up.

Announcement banner

The banner at the top of the page is pinned to a light tint of its alert type with a contrast-picked ink, so it reads the same in both schemes. Configure it as usual under website.announcement; without one, the rules are inert.

Code

Inline code, a highlighted block:

quarto add mcanouil/quarto-atelier@0.11.0

and a plain block with no language:

no language, still framed and styled

Hover a block: the copy button takes the palette accent instead of Quarto’s fixed grey, in both schemes.

A block with a filename shows in a code window, which takes its surfaces from the theme:

_quarto.yml

project:
  type: atelier

A collapsible window with a plain block in it:

notes.txt

no language, inside a collapsible window

Code in a callout keeps the same inset as code on the page:

NoteIn a callout

quarto preview

Annotated code keeps its rows flush with the annotation markers:

1quarto render

1

Render the whole project.

Annotated code in a code window:

publish.sh

1quarto publish gh-pages

1

Publish the site to GitHub Pages.

Syntax highlighting

These blocks hold every token type that Pandoc marks, so each colour of the highlighting theme shows on the code surface:

//BEGIN scale
#include <cstdio>

/// Scale a value.
/** @param x The input. @note Pure. @warning No bounds check. */
template <typename T>
T scale(T x) {
  const char tab = '\t';
  const float k = 1.5f;
  unsigned mask = 0x1F;
  int bad = 08;
  // TODO: clamp the result.
  if (x > 0) {
    std::printf("%d\n", mask);
    return x * k;
  }
  return 0;
}
//END

#' Scale a vector.
#' @param x A numeric vector.
scale_by <- function(x, k = 2L) {
  stopifnot(is.numeric(x), !is.null(NULL), TRUE)
  x * k
}

import re

pattern = re.compile(r"\d+")
label = f"{pattern.pattern} matches"

<?php
/** @var int $length */
$length = strlen("atelier");

export SITE="${1:-docs}"
quarto render "$SITE" --to html

Highlighted inline code, such as scale_by(x, k = 2L), takes the same token colours.

In a link, such as scale_by(x, k = 2L), it keeps its contrast too.

A code block with the .visually-hidden class is for screen readers only, so it does not show here:

quarto render docs
quarto preview docs

Tabset

First

Content of the first tab.

Second

Content of the second tab.

Code in a callout

Code that opens or closes a callout keeps the same spacing as text, and its copy button stays inside the frame:

TipPreview with quarto preview

quarto preview

Preview while you write, then render the whole project:

quarto render

The same holds for code in a computational cell:

NoteIn a cell

quarto check

Typography

Headings carry a slight positive tracking from --atelier-heading-letter-spacing. Override it in a project stylesheet, for example with a small negative value for a tight serif.

Add that stylesheet under format.atelier-html.theme, not format.html, which would replace the project type’s format and drop the theme along with the bundled scripts.

A nested heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis posuere ligula sit amet lacinia. Duis dignissim pellentesque magna, rhoncus congue sapien finibus mollis. Ut eu sem laoreet, vehicula ipsum in, convallis erat. Vestibulum magna sem, blandit pulvinar augue sit amet, auctor malesuada sapien. Nullam faucibus leo eget eros hendrerit, non laoreet ipsum lacinia. Curabitur cursus diam elit, non tempus ante volutpat a. Quisque hendrerit blandit purus non fringilla. Integer sit amet elit viverra ante dapibus semper. Vestibulum viverra rutrum enim, at luctus enim posuere eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

A heading with a link

A fifth-level heading with a link

A sixth-level heading with a link

Quarto fades the title block categories and the headings from the third level down. Atelier keeps their text readable in both schemes, and names the author email link for screen readers.

Framed embeds

.embed-art frames an embedded document or an image as a tilted card, centred on its own.

The card here is the site’s own social card, framed at its own dimensions: the frame carries no shape of its own, so the padding is the same on all four sides whatever it holds. Give an <embed> a width and a height to size it, and override the --atelier-embed-art-* properties in a project stylesheet to change the fallback or the tilt.

Table of contents

Scroll this page and watch the table of contents on the right: the active entry and its left border take the palette accent.

Sidebar

This site has no navbar: the docked sidebar on the left carries the navigation, the search field, and the repository widget instead. It is painted from the --atelier-sidebar-* tokens, which default to the navbar ones, so it holds the same pinned surface in both colour schemes, with the current page on an accent pill, muted collapse chevrons, and dividers between the sections. Narrow the window below 992px and it becomes the bar at the top that carries the toggle and the breadcrumbs.

Render this site with --profile navbar to see the same pages with the navbar the project type ships by default, and the search back in it as an overlay.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis posuere ligula sit amet lacinia. Duis dignissim pellentesque magna, rhoncus congue sapien finibus mollis. Ut eu sem laoreet, vehicula ipsum in, convallis erat. Vestibulum magna sem, blandit pulvinar augue sit amet, auctor malesuada sapien. Nullam faucibus leo eget eros hendrerit, non laoreet ipsum lacinia. Curabitur cursus diam elit, non tempus ante volutpat a. Quisque hendrerit blandit purus non fringilla. Integer sit amet elit viverra ante dapibus semper. Vestibulum viverra rutrum enim, at luctus enim posuere eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Nunc ac dignissim magna. Vestibulum vitae egestas elit. Proin feugiat leo quis ante condimentum, eu ornare mauris feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris cursus laoreet ex, dignissim bibendum est posuere iaculis. Suspendisse et maximus elit. In fringilla gravida ornare. Aenean id lectus pulvinar, sagittis felis nec, rutrum risus. Nam vel neque eu arcu blandit fringilla et in quam. Aliquam luctus est sit amet vestibulum eleifend. Phasellus elementum sagittis molestie. Proin tempor lorem arcu, at condimentum purus volutpat eu. Fusce et pellentesque ligula. Pellentesque id tellus at erat luctus fringilla. Suspendisse potenti.

Footer and back to top

The page footer below shares the sidebar surface and border, and its links take the same accent on hover. Once you scroll, the back-to-top pill appears with a hairline derived from the page scheme.

Navbar and search

Render this site with --profile navbar to see these repairs.

• Press Tab after the last link of a page to reach the back-to-top pill, and press Enter or Space to go to the top.
• The “More” menu and the menu tool open with a control that screen readers announce as a button.
• The icon beside “More” is hidden from screen readers, because the text already names the item.
• The tools that show only an icon take their name from their aria-label. A tool without one takes its name from the icon.
• The search overlay is a modal dialog. Tab stays in it, the number of results is announced, and Esc puts focus back on the search button.

Tooltips

Hover the colour-scheme toggle, or the site title, for a themed tooltip on the palette surface rather than the browser default. The named links beside them show no tooltip on purpose: an item with visible text is given an aria-label instead, because repeating the label would announce it twice to a screen reader.

Dates

This page is dated with an ordinal suffix rendered by the bundled script.

Dismiss buttons

The close button of an alert, a modal, an offcanvas, or a toast is masked from the text colour around it. It reads on the page surface, which follows the colour scheme, and on an alert tint, which does not.

A dismissible alert on the page surface.

A contextual dismissible alert, on the same light tint in both schemes.

Footnotes and appendix

A footnote sits at the end of the page.¹ The back-link of each note has a name and a 24 pixel target, and the appendix keeps its contrast. Secondary text and a folded code block are included to check that they stay readable.

A blockquote with an attribution.

A. Reader

A margin note in secondary text.

The extension icon, with a caption in secondary text.

print("A folded code block")

Theme tokens, media and callouts

The corner radius of the page, the cards and the inputs follows $border-radius, which a project theme or the brand can set.

A collapsed callout is a button that announces whether it is open:

NoteA closed callout

Its toggle exposes aria-expanded.

A callout title reads as “Note Title” to a screen reader, with a space between the type and the title.

WarningA titled callout

Body text.

A link in a callout title takes the colour of the title and keeps its underline:

TipA title with a link

Body text.

An image for one colour scheme only keeps no empty tab stop for the other scheme:

A square icon, shown in the light scheme only.

A square icon, shown in the dark scheme only.

flowchart LR
  subgraph one [A subgraph]
    a[First] --> b[Second]
  end
  subgraph two [Another subgraph]
    c[Third] --> d[Fourth]
  end
  b --> c

Everything above, in both schemes

Elements the project type styles for both colour schemes.

Feature	Light	Dark
Code surface	✓	✓
Copy button	✓	✓
Tabsets	✓	✓
Scrollbars	✓	✓
Sidebar and TOC	✓	✓
Footer	✓	✓
Announcement banner	✓	✓

Content styling

A blockquote has an inset bar and a decorative opening quote that a screen reader does not read.

A quotation that runs over a few words, so that the bar and the quote can be seen against the text.

A. Reader, An example book

The section number style is shown on the numbered sections page, which turns on number-sections for that page only.

A footer that holds a cite keeps both on one line, in the size of the footer:

A quotation with an attribution in a footer.

A. Reader, An example book

A quotation can also hold an inline cite in a sentence:

The quoted sentence names a cited title in the middle of its line.

Focus and motion

Press Tab to move through the controls on this page: the search box, the sidebar links and toggles, the copy button, the colour scheme toggle and the links. Each one shows the same 2 pixel ring, in the primary colour on the page and in the sidebar accent colour inside the sidebar and the secondary bar. In a forced colours mode, the ring uses the system highlight colour.

A link to this section lands where Quarto puts it, below the fixed navbar. A focused control keeps clear of the navbar too. With a reduced motion preference, transitions, animations and smooth scrolling are cut to a blink, so widgets that wait for them still close.

Embedded extensions

Atelier runs these extensions itself, so this site installs none of them.

An icon from the iconify shortcode: .

A code window with a title bar, framed like a plain code block:

terminal

quarto render docs

Landing page

The home page of this site is a landing page, made with the hero, feature row and card grid blocks. The Landing page guide shows each block and each modifier, with the Markdown to copy.

Footnotes

1. The note text, with a back-link.