08: More CSS

By Garrick Aden-Buie & Silvia Canelón

Activity


Time	5 minutes
Materials	`08-more-css/08-start.Rmd`
Activity Mode	Break out room & work with your group

In this short activity, we’ll practice using CSS variables and CSS selectors to give a slide some extra style.

Restart your R session and open the files for this activity. Start infinite_moon_reader() to begin working with the slides.

At the top of the file, we see that the slides use xaringanthemer with a custom palette provided to the colors argument.

library(xaringanthemer)

palette <- c(
  orange      = "#fb5607",
  pink        = "#ff006e",
  blue_violet = "#8338ec",
  zomp        = "#38A88E",
  shadow      = "#87826E"
)

style_duo_accent(colors = palette)

The second slide of the deck describes the common and scientific names of Woolly Lemurs. Which classes are used in the slide markdown?

Slide Classes

.lemur
.common-name
.sci-name
.genus
.species
Plus one class for each species, e.g. .eastern, .western, etc.

Finally, there is a <style> tag where a small amount of CSS is ready for your help.

Update the CSS rule for .common-name so that the common names of each lemur are orange, but “Woolly lemurs” in the first paragraph is not.

Checkpoint

.lemur .common-name {
  color: var(--orange);
}

Add a new CSS rule to use the shadow color for the normal lemur species text.

When you’re done, the text describing the lemur names should look like this:

Eastern woolly lemur, Avahi laniger

Add additional CSS rules to give the genus and species each their own colors.

Use the CSS variables defined by xaringanthemer from the color palette. Hint: follow the example from .common-name with a different color name.

Bonus: If you’d like, try to also make sure that these colors aren’t applied to the genus and species classes in the first paragraph.

When you’re done, the lemur name text should look (something) like this:

Eastern woolly lemur, Avahi laniger

Checkpoint

.sci-name .genus {
  color: var(--zomp);
  font-weight: bold;
}
.sci-name .species {
  color: var(--blue_violet)
}

Make the line describing the Bemaraha lemur bold, without affecting the other lemur species.

Checkpoint

.lemur.bemaraha {
  font-weight: bold;
}