Skip to main content

Gallery

Source: vignettes/articles/gallery.qmd

This site uses quartodown’s defaults. Each screenshot below shows the same site built with the settings under it; click one to enlarge it. The screenshots follow your light or dark mode. See Customizing your site for every setting.

The default

Quarto’s default theme in light mode and darkly in dark mode, with the navbar at the top.

This site with the default settings, in light mode

This site with the default settings, in dark mode

A built-in theme

theme: picks any of Quarto’s built-in themes, here cosmo in light mode and superhero in dark mode. A theme can also be your own .scss file in _quartodown/.

This site with the theme settings, in light mode

This site with the theme settings, in dark mode

_quartodown/_quartodown.yml:

theme:
  light: cosmo
  dark: superhero

A sidebar

navbar: style: sidebar moves the navigation into a sidebar beside every page, which also lists every reference page.

This site with the sidebar settings, in light mode

This site with the sidebar settings, in dark mode

_quartodown/_quartodown.yml:

navbar:
  style: sidebar

A custom look

_quartodown/extra.scss restyles any part of the site, on top of the theme: here a navbar in the accent color, serif headings, rounder code blocks and the function reference as cards.

This site with the custom settings, in light mode

This site with the custom settings, in dark mode

_quartodown/extra.scss:

/*-- scss:defaults --*/
// A teal accent and serif headings, in both themes.
$primary: #0f766e;
$headings-font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

/*-- scss:rules --*/
// The navbar as a band of the accent color, with light text and icons.
.navbar {
  background-color: $primary !important;
  --bs-navbar-color: rgba(255, 255, 255, 0.85) !important;
  --bs-navbar-hover-color: #fff !important;
  --bs-navbar-active-color: #fff !important;
  --bs-navbar-brand-color: #fff !important;
  --bs-navbar-brand-hover-color: #fff !important;
}

.navbar-title {
  font-family: $headings-font-family;
}

.navbar-nav .nav-link:hover,
.navbar .quarto-navigation-tool:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

.navbar-nav .nav-link.active {
  border-bottom-color: #fff;
}

.navbar .quarto-navigation-tool {
  color: #fff !important;
}

.navbar .quarto-color-scheme-toggle .bi::before {
  filter: brightness(0) invert(1);
}

// Rounder code blocks, marked with the accent.
div.sourceCode {
  border-radius: 0.75rem;
  border-left: 4px solid $primary;
}

// Each function on the reference index as a card.
dl.ref-index dt,
dl.ref-index dd {
  background: rgba($body-color, 0.04);
  border: 1px solid rgba($body-color, 0.1);
  padding: 0.5rem 1rem;
}

dl.ref-index dt {
  border-bottom: none;
  border-radius: 0.75rem 0.75rem 0 0;
}

dl.ref-index dd {
  border-top: none;
  border-radius: 0 0 0.75rem 0.75rem;
  margin-bottom: 0.75rem;
}