Miscellaneous

From R Markdown to Quarto

Andrew Bray

UC Berkeley

Mine Çetinkaya Rundel

Duke University + Posit

Tools

Logos

Places the logo on top of the sidebar and a small version in the browser tab.

website:
  sidebar:
    logo: "images/logo.png"
  favicon: "images/logo.png"

Icons

website:
  sidebar:
    logo: "images/logo.png"
    tools:
      - icon: github
        href: https://github.com/quart-cli
        text: "GitHub organization"
      - icon: code-square
        href: https://posit.cloud
        text: "Posit Cloud"

Socials

Some examples include:

• Twitter Cards provide an enhanced appearance when someone links to your site on Twitter.

• The Open Graph protocol enables richer sharing of links to articles on the web, e.g., with preview images.

website:
  twitter-card: true
  open-graph: true

Learn more

quarto.org/docs/websites/website-tools.html

Your turn

Pick up where we left off and

• Add a link to a GitHub repository with a bootstrap icon.
• Review https://quarto.org/docs/websites/website-tools.html and implement one new tool we haven’t introduced.

10:00

Theming

Theme options

• One of 25 Bootswatch themes

• Custom themes

• A combination of the two

Setting the theme

In _quarto.yml:

format:
  html:
    theme: default

Dark mode

Setting a light and dark theme makes both available with a toggle automatically added to your website:

format:
  html:
    theme:
      light: flatly
      dark: darkly

Customizing themes

To customize a theme, add a custom .scss file that is then called in _quarto.yml, e.g.:

format:
  html:
    theme:
      light: [flatly, custom.scss]
      dark: darkly

SCSS files

SCSS files have the following form:

/*-- scss:defaults --*/
$h2-font-size:          1.6rem !default;
$headings-font-weight:  500 !default;
$body-color:            $gray-700 !default;

/*-- scss:rules --*/
h1, h2, h3, h4, h5, h6 {
  text-shadow: -1px -1px 0 rgba(0, 0, 0, .3);
}

• The defaults section is where you list variables

• The rules section is where you list (CSS) rules

SASS variables

• Some examples include:

  • $body-bg: The page background color.

  • $link-color: The link color.

  • $font-family-monospace: The monospace font family for the page.

  • $callout-color-<type>: The colors for the various types of callouts.

• See the full list at https://quarto.org/docs/output-formats/html-themes.html#sass-variables.

Learn more

quarto.org/docs/output-formats/html-themes.html

Tip

Figuring out what to style

• Use your browser’s developer tools.

• Refer to the default values for SASS variables and set to something absurd (red and bold or giant size) while testing. Once you have the correct variable or rule identified, set the style values to what you want them to be.

Your turn

Pick up where we left off and

• Change the theme of your project to one of the Bootswatch themes.
• Add light / dark mode toggle, experimenting with different light and dark themes.
• Stretch goal: Customize 1-2 elements of your theme.

10:00

Request hour

Your turn

to request!

What other aspects / features of a Quarto website or book would you like to learn about?