This package implements the University of Cincinnati color scheme for Quarto revealjs presentations

All color names used follow those from the color palette defined at https://www.uc.edu/about/marketing-communications/brand-guide/visual-identity/color.html

Background gradients are defined here: https://www.uc.edu/about/marketing-communications/brand-guide/visual-identity/gradients-textures.html

The “official UC red gradient” background

The official UC red gradient background can be added to a slide in Quarto through the official-uc-red-gradient class:

## This will give your slide an official UC red gradient background {.official-uc-red-gradient}

The “beyond black gradient” background gradient slide

UC’s secondary gradient, called “beyond black”, can be added to a slide in Quarto through the beyond-black-gradient class:

## This will give your slide a beyond black gradient background {.beyond-black-gradient}

The UC “white gradient” background

UC’s other secondary gradient, called “white”, can be added to a slide in Quarto through the white-gradient class:

## This will give your slide a white gradient background {.white-gradient}

A flat UC red background

A flat UC red background can be added to a slide in Quarto through the uc-red-flat class:

## This will give your slide a flat UC red background {.uc-red-flat}

A flat UC black background

A flat black background can be added to a slide in Quarto through the uc-black-flat class:

## This will give your slide a flat black background {.beyond-black-gradient}

A black and white slide

Without applying any of the custom classes to the slides, the ucinci style package will give you slides with a white background, black text, and red secondary elements. If you need a slide that has no red elements, you can invoke the black-and-white class.

## This will give your slide black text, black navigation, and a white background {.black-and-white}

You can provide your own background image on the title slide

To use your own background on the title slide, the title-slide-background can be defined in your Quarto document’s YAML header. The file location should be relative to your main document. Included within the resources folder is the picture of Baldwin Hall used in the College of Engineering and Applied Science official PowerPoint template as a webp file:

title-slide-background: "_extensions/ucinci/images/baldwin.webp"

Title slide background image modifications

The additional available parameters (and defaults) are:
title-slide-background-size: cover
title-slide-background-position: center
title-slide-background-repeat: no-repeat
title-slide-background-opacity: 1

Title slide text and navigation colors

The text and navigation colors on the title slide can be controlled through the title-slide-classes property in the YAML header. The available classes to use are those background options described in previous slides: title-slide-classes: [official-uc-red-gradient]

Additional custom classes could be added by modifying ucinci.scss.

When using a background image with transparency, you can control the background color within the UC color schema with these same classes. For example, title-slide-background: "_extensions/ucinci/images/baldwin.webp" title-slide-classes: [beyond-black-gradient] will render Baldwin Hall with a black background instead of UC red.

Title slide extensions beyond standard Quarto

  • The ucinci title-slide partial renders an ORCID symbol and link next to the authors’ names when provided in the document yaml.
  • An additional metadata parameter, jobtitle, can be supplied under author. This will render the job title between the author’s name and affiliation, following the CEAS PowerPoint template.
  • All UC brand colors are defined as css root variables. For example, they can be called up to be applied to a text span in Quarto using [This text should be white with a black background]{style="color: var(--white); background-color: var(--uc-black);"}. The following options exist:
    • UC primary colors: uc-red, uc-black, uc-white
    • UC secondary colors: uc-dark-red, grey
    • UC extended palette: calhoun-maroon, steger-silver, main-street-mist, bearcats-black, gettler-gold, tangeman-tan

The color names are identical to those defined in the UC color palette. I don’t know why the decision was made to call regular black UC black but regular white is not UC white. I don’t know why grey is spelled according to the UK dictionary either, since the US had an English language spelling reform in 1828.

Add a source citation to the bottom of the slide

When you have a source that you want to cite on a slide, you can add the .source-citation class to a div to place it in the bottom right of the slide. For example, [This is a source citation]{.source-citation}

or

::: {.source-citation}
This is a source citation.
:::

will place “This is a source citation” in tiny gray font at the bottom of the slide. This way we can give credit where credit is due without distracting from the main content of the slide. The styling of this element can be modified by changing the .source-citation class in revealjs-supplement.css.

This is a source citation. Isn’t that useful?

Other official UC slide background images

The background images in this section come from the CEAS PowerPoint template, enabling the user to recreate this template in Revealjs presentations. They are provided in the resources folder.

Font size capabilities

The font size of each content div can be set using LaTeX font size class names:

  • ‘.font-tiny’
  • ‘.font-scriptsize’
  • ‘.font-footnotesize’
  • ‘.font-small’
  • ‘.font-normalsize’
  • ‘.font-large’
  • ‘.font-Large’
  • ‘.font-LARGE’
  • ‘.font-huge’
  • ‘.font-Huge’
  • ‘.font-HUGE’

Extended capabilities

The UC style provides additional capabilities for displaying content

These extensions were taken from Mickaël Canouil’s excellent quarto-revealjs-coeos package (which was actually part of the inspiration for this UC template).

You should follow Dr. Canouil on GitHub https://github.com/mcanouil and/or bookmark his websit https://mickael.canouil.fr/projects. He has a developed some very useful Quarto extensions and maintains a list of others worth looking at.

Tabset

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis posuere ligula sit amet lacinia. Duis dignissim pellentesque magna, rhoncus congue sapien finibus mollis. Ut eu sem laoreet, vehicula ipsum in, convallis erat. Vestibulum magna sem, blandit pulvinar augue sit amet, auctor malesuada sapien. Nullam faucibus leo eget eros hendrerit, non laoreet ipsum lacinia. Curabitur cursus diam elit, non tempus ante volutpat a. Quisque hendrerit blandit purus non fringilla. Integer sit amet elit viverra ante dapibus semper. Vestibulum viverra rutrum enim, at luctus enim posuere eu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Nunc ac dignissim magna. Vestibulum vitae egestas elit. Proin feugiat leo quis ante condimentum, eu ornare mauris feugiat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris cursus laoreet ex, dignissim bibendum est posuere iaculis. Suspendisse et maximus elit. In fringilla gravida ornare. Aenean id lectus pulvinar, sagittis felis nec, rutrum risus. Nam vel neque eu arcu blandit fringilla et in quam. Aliquam luctus est sit amet vestibulum eleifend. Phasellus elementum sagittis molestie. Proin tempor lorem arcu, at condimentum purus volutpat eu. Fusce et pellentesque ligula. Pellentesque id tellus at erat luctus fringilla. Suspendisse potenti.

Code annotation

1import numpy as np

2def f(x):
3    return np.sin(x)

# Example of a simple function using NumPy
f(0)
1
Importing the NumPy library.
2
Defining a function f that takes an argument x.
3
Returning the sine of x using NumPy’s sin function.