Who are you?

You joined the “Custom-Branded Quarto | Small-Group Webinar ✨”

You are a Quarto user or quarturious
Can create documents of various types (because Quarto is awesome)
Haven’t ventured beyond into styling

Imagine

You are doing

weekly reports

at work

and the

higher ups

want you to use the

corporate design

styling can be daunting

but it doesn’t have to

I have

the

opposite

problem

I spend

too much

time

writing slides

The most with little effort

you can go far

with styling using

minimal changes

colors

fonts

sizes

How do you write a theme?

It will depend on format

latex - html - powerpoint - other?

Done differently for different formats

🤫 unified branding with quarto 🤫

color:
  palette:
    orange: "#F96302"
    white: "#FFFFFF"
    black: "#000000"
  theme:
    primary: orange
    secondary: "#747474"
    light: white
    dark: black

typography:
  body:
    family: Helvetica Nueue LT Pro
  headings:
    family: Helvetica Nueue LT Pro Condensed
    weight: bold

Carlos: It’ll definitely not be in 1.5

i am assuming

that you know

what you want

HTML documents

index.qmd

---
title: "HTML document"
format: html
---

## Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

## Running Code

When you click the **Render** button a document will be generated that includes both content and the output of embedded code. You can embed code like this:

::: {.cell}

```{.r .cell-code}
1 + 1
```

::: {.cell-output .cell-output-stdout}

```
[1] 2
```


:::
:::

You can add options to executable code like this

::: {.cell}
::: {.cell-output .cell-output-stdout}

```
[1] 4
```


:::
:::

The `echo: false` option disables the printing of code (only output is displayed).

index.html

HTML theming - Sass Variables

index.qmd

---
title: "HTML document"
format: html
theme:
  - styles.scss
---

## Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

## Running Code

When you click the **Render** button a document will be generated that includes both content and the output of embedded code. You can embed code like this:

::: {.cell}

```{.r .cell-code}
1 + 1
```

::: {.cell-output .cell-output-stdout}

```
[1] 2
```


:::
:::

You can add options to executable code like this

::: {.cell}
::: {.cell-output .cell-output-stdout}

```
[1] 4
```


:::
:::

The `echo: false` option disables the printing of code (only output is displayed).

styles.scss

/*-- scss:defaults --*/

/*-- scss:rules --*/

How to change colors

styles.scss

/*-- scss:defaults --*/
$theme-black: #4c4c4c;
$theme-white: white;
$theme-teal: #50847B;
$theme-blue: #76AADB;

$body-bg: $theme-white;
$body-color: $theme-black;
$link-color: $theme-teal;
$code-color: $theme-teal;

/*-- scss:rules --*/
h1 {
color: darken($theme-blue, 50%);
}

h2, h3, h4 {
color: $theme-blue;
}

index.html

How to change fonts

styles.scss

/*-- scss:defaults --*/
$theme-black: #4c4c4c;
$theme-white: white;
$theme-teal: #50847B;
$theme-blue: #76AADB;

@import url(‘https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,600;1,400;1,600&display=swap’);
@import url(‘https://fonts.googleapis.com/css2?family=Source+Code_Pro&display=swap’);

$body-bg: $theme-white;
$body-color: $theme-black;
$link-color: $theme-teal;
$code-color: $theme-teal;

$font-family-sans-serif: ‘Montserrat’, sans-serif;
$font-family-monospace: ‘Source Code Pro’, monospace;

/*-- scss:rules --*/
h1 {
color: darken($theme-blue, 50%);
}

h2, h3, h4 {
color: $theme-blue;
}

index.html

How to change sizes

styles.scss

/*-- scss:defaults --*/
$theme-black: #4c4c4c;
$theme-white: white;
$theme-teal: #50847B;
$theme-blue: #76AADB;

$font-size-root: 20px;
$h1-font-size: $font-size-root * 3;

$body-bg: $theme-white;
$body-color: $theme-black;
$link-color: $theme-teal;
$code-color: $theme-teal;

$font-family-sans-serif: ‘Montserrat’, sans-serif;
$font-family-monospace: ‘Source Code Pro’, monospace;

pre, pre.sourceCode {
font-size: 1.175em;
}

/*-- scss:rules --*/
h1 {
color: darken($theme-blue, 50%);
}

h2, h3, h4 {
color: $theme-blue;
}

index.html

✨✨ Difference ✨✨

index.html

You did it!

Quarto Templates

When you need the same styling 3 times

which we do

write a Quarto Template

Creating a Template

Create Github repository (or folder)

Rename file template.qmd

hidden files not copied

use .quartoignore

zsh

corp-theme-html/
├── .Rhistory
├── .Rproj.user/
├── .git/
├── .gitignore
├── corp-theme-html.Rproj
├── index.qmd template.qmd
└── styles.scss

quarto use template <gh-organization>/<extension>

personal template

quarto use template EmilHvitfeldt/quarto-revealjs-template

index.qmd

---
format:
  revealjs: 
    theme: [default, styles.scss]
    width: 1280
    height: 720
    include-after-body: 
      - "all-the-js-code.html"
echo: false
code-line-numbers: false
---

styles.scss

/*-- scss:defaults --*/

/*-- scss:rules --*/

all-the-js-code.html

<script type="text/javascript">

</script>

Make pretty things!

quarto.org

Github quarto-template

Slidecraft 101

EmilHvitfeldt