Website Tools and Customisation

Session 3: Producing and Publishing Websites

Cynthia Huang

Wednesday, July 19, 2023

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 with a bootstrap icon.
• Review https://quarto.org/docs/websites/website-tools.html and implement one new tool we haven’t introduced.

10:00

About Pages

Quarto includes 5 built in templates for About pages that can be created from metadata specified in the about YAML option:

about.qmd

---
title: "Finley Malloc"
about:
  template: jolla # OR trestles, solana, marquee, broadside #
  image: profile.jpg
  links:
    - icon: twitter
      text: twitter
      href: https://twitter.com
    - icon: github
      text: Github
      href: https://github.com
---

Finley Malloc is the Chief Data Scientist at Wengo Analytics. When not innovating on data platforms, Finley enjoys spending  time unicycling and playing with her pet iguana.

Learn More

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

Your Turn: About Page

Pick up where we left off and

• Add an about page.
• Try a different theme.
• Update the image
• Add or update a Social Media link

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