#

λέξις
a Quarto theme

John Paul Helveston

2026-07-08

# Text styling

Header level 1
Header level 2
Header level 3
Header level 4
Header level 5
Header level 6

Regular

Italics

Bold

Bold italics

Strikethrough

Fancy text

external link

`Inline code`

# Inverse text styling

Header level 1
Header level 2
Header level 3
Header level 4
Header level 5
Header level 6

Regular

Italics

Bold

Bold italics

Strikethrough

Fancy text

external link

`Inline code`

# Colors!

Use this…

- `[text]{.red}`
- `[text]{.orange}`
- `[text]{.yellow}`
- `[text]{.green}`
- `[text]{.darkgreen}`
- `[text]{.blue}`
- `[text]{.darkblue}`
- `[text]{.purple}`
- `[text]{.black}`

…to get this

- text
- text
- text
- text
- text
- text
- text
- text
- text

# Tables

manufacturer | model | displ | year | cyl | trans | drv | cty | hwy | fl | class
--- | --- | --- | --- | --- | --- | --- | --- | --- | --- | ---
audi | a4 | 1.8 | 1999 | 4 | auto(l5) | f | 18 | 29 | p | compact
audi | a4 | 1.8 | 1999 | 4 | manual(m5) | f | 21 | 29 | p | compact
audi | a4 | 2.0 | 2008 | 4 | manual(m6) | f | 20 | 31 | p | compact
audi | a4 | 2.0 | 2008 | 4 | auto(av) | f | 21 | 30 | p | compact
audi | a4 | 2.8 | 1999 | 6 | auto(l5) | f | 16 | 26 | p | compact
audi | a4 | 2.8 | 1999 | 6 | manual(m5) | f | 18 | 26 | p | compact

# Block quotes

Use the `>` to make block quotes:

    > This is what a block quote looks like.

> This is what a block quote looks like.

# Incremental content

Use `. . .` on its own line (xaringan’s `--`) to reveal the rest of the slide on the next click:

    Everyone sees this first.

    . . .

    Then this appears.

    . . .

    And finally this.

Everyone sees this first.

Then this appears.

And finally this.

# Github code chunk highlighting

    foo <- function(arg1 = 100, arg2 = "character string") {
      if (TRUE) {
        x = NULL  # if, function, NULL are keywords a
        for (i in 1:10) x = c(x, mean(3 * rnorm(100) + 1))
      }
    }

# Line highlighting

Highlight lines with the `code-line-numbers` cell option:

Code

    ```{r}
    #| code-line-numbers: "4,5"

    library(ggplot2)

    ggplot(mtcars) +
      aes(mpg, disp) +
      geom_point() +
      geom_smooth()
    ```

Output

    library(ggplot2)

    ggplot(mtcars) +
      aes(mpg, disp) +
      geom_point() +
      geom_smooth()

# Sizing text and code

One system for everything: wrap any content in a `.fontNN` div to scale it to NN% of the slide’s base size (5% steps, `font10`–`font200`). It works the same on paragraphs, lists, and code chunks — a chunk and its printed output always match. For inline text there’s also `[text]{.fontNN}` plus the `.small` and `.large` shortcuts.

Normal size:

    head(mtcars[, 1:4], 3)

    #>                mpg cyl disp  hp
    #> Mazda RX4     21.0   6  160 110
    #> Mazda RX4 Wag 21.0   6  160 110
    #> Datsun 710    22.8   4  108  93

Wrapped in `::: {.font70}`:

    head(mtcars[, 1:4], 3)

    #>                mpg cyl disp  hp
    #> Mazda RX4     21.0   6  160 110
    #> Mazda RX4 Wag 21.0   6  160 110
    #> Datsun 710    22.8   4  108  93

# Layouts!

# Tabset panels!

- R Code
- Plot

    ggplot(mtcars, aes(x = mpg, y = hp)) +
      geom_point() +
      theme_bw() +
      labs(color = "Cylinders")

## Three (or more) equal columns

`.col`, no `width`

Any number of `.col` divs in a row auto-splits the space evenly — no separate class for 2 vs 3 vs 4 columns.

`.col`, no `width`

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

`.col`, no `width`

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

## Two equal columns

`.col`

Two consecutive `.col` divs with no `width` split 50/50 automatically. No outer `::: {.columns}` wrapper needed either — just write the columns.

`.col`

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

## Any split you want

`.col width="65%"`

`width` takes any percentage — 65/35, 42/58, whatever the content needs. No fixed set of splits to remember.

`.col width="35%"`

Only one side needs a `width`; a column left without one just takes whatever space remains.

## Uneven columns, custom gap & alignment

`gap` and `valign`

Set `gap` or `valign` on any `.col` in the row and it applies to the whole row — handy here since this column’s text is shorter than the code beside it, so `valign="middle"` centers them against each other.

    foo <- function(x) {
      x + 1
    }

    bar <- function(y) {
      y * 2
    }

# Cards!

## Grids of icon + text boxes

## Card grids

Plan

Make a plan before doing big work.

read-only

Manual

Approve or deny each edit.

safe but slow

Accept Edits

Auto-applies file edits.

semi engagement

Auto

Approves everything.

use with care

## Just write the boxes

Consecutive `::: {.card}` divs are grouped into a grid automatically — same idea as `.col`, no wrapper to write. The previous slide is just:

    ::: {.card .icon-left color="dodgerblue"}

    ### Plan

    Make a plan before doing big work.

    [read-only]{.tag}
    :::

    ::: {.card .icon-left color="gray"}

    ...
    :::

An icon on the card’s first line becomes the tile — from any icon library, since the shortcode has already expanded by the time lexis sees it.

Attribute | Effect
--- | ---
first line | ``, `{{< bi map >}}`, an emoji, `![](icon.svg)`
`icon=` | Shorthand for an image file or an emoji
`image=` | A cropped photo band across the card top
`color=` | Accent color: a palette name or any CSS color
`badge=` | Small accent flag in the top-right corner
`cols=` | Cards per row (default: up to 4 in one row)
`gap=` | Gutter between cards

Class | Effect
--- | ---
`.icon-left` | Icon beside the heading instead of above it
`.tint` | Paint the accent color through an SVG icon file
`.highlight` | Accent fill + halo — “this one”
`.center` | Center the card’s contents
`.fragment` | Reveal this card on its own click

## Eight cards, `cols="4"`

Write code

Debug

Analyze data

Generate images

Summarize docs

Write & edit

Automate tasks

today's focus

Build HTML

## Cards with images: `image=`

Blue Ridge

`image=` crops a photo band across the top of the card, bled out to the rounded corners.

morning

Sunset

The band is `object-fit: cover`, so any aspect ratio fills it without squashing.

evening

🏔️

Emoji work too

An `icon=` that isn’t a file path is set as text in the tile.

So do SVG files

`.tint` paints the accent color through the file, so one gray icon set works with any color.

## Cards on an inverse slide

Plan

Same accent, mixed toward black instead of white.

Auto

No extra classes needed — the card reads the slide.

Edit

`.highlight` still marks one out.

# Full image background

    {{< bg-image "images/blue_ridge_mountains.jpg" >}}

# Full background color

    {{< bg-color "#909099" >}}

# Images!

# Images have no border by default

This code produces the image on the right:

    ![](images/blue_ridge_sunset.jpg)

# Add a thin border with `.border`

This code produces the image on the right:

    ::: {.border}
    ![](images/blue_ridge_sunset.jpg)
    :::

## Or modify the border: `.borderthick`

This code produces the image on the right:

    ::: {.borderthick}
    ![](images/blue_ridge_sunset.jpg)
    :::

## Or modify the border: `.whiteborder`

This code produces the image on the right:

    ::: {.whiteborder}
    ![](images/blue_ridge_sunset.jpg)
    :::

## Or modify the border: `.whiteborderthick`

This code produces the image on the right:

    ::: {.whiteborderthick}
    ![](images/blue_ridge_sunset.jpg)
    :::

# Make a polaroid image: `.polaroid`

This code produces the image on the right:

    ::: {.polaroid}
    ![](images/blue_ridge_sunset.jpg)
    :::

# Make a circle image: `.circle`

This code produces the image on the right:

    ::: {.circle}
    ![](images/blue_ridge_sunset.jpg)
    :::

# Make a thumbnail image: `.thumbnail`

This code produces the image on the right:

    ::: {.thumbnail}
    ![](images/blue_ridge_sunset.jpg)
    :::

# Image classes work on rendered charts too

    ::: {.border}

    ```{r}
    ggplot(mtcars, aes(mpg, hp)) +
      geom_point()
    ```

    :::

    ::: {.circle}

    ```{r}
    ggplot(mtcars, aes(mpg, hp)) +
      geom_point()
    ```

    :::

# Thanks!