Chapter 25 Make it fancier

Distill looks pretty sleek on its own using the default settings, but fancy knows no limits! Let’s put on our finest pearls, and customizate Distill even further with CSS.

25.1 Before you begin

I’m making a few assumptions that by this point you have already updated your Distill site with your own content in the Make it yours section and added whatever built-in options you wanted.

For the demo that follows, I’ll keep using the Distill site skeleton with a few additions. I’ve added a few things to the site skeleton, aside from what we’ve walked through in the previous chapters, so that the following examples make more sense. It is okay that your content does not match up exactly with mine.

  • Added thing
  • Added thing
  • Added thing
  • A logo
  • Footnotes
  • Acknowledgments
  • Reuse statement

25.2 Anatomy of a fancy Distill page

25.3 Adding custom CSS to your site

For any of these changes, we first have to create a CSS file and then link it to our site via the _site.yml page.

  1. Make a CSS file by going to File > New File > Text File.
  2. Save this file in your root directory as styles.css. You can choose a different name if you’d like, but the extension must be .css.
  3. Open _site.yml and add css: styles.css like we do below. You’ll need to make sure that distill::distill_article is now on its own line and ends with a :, too.
name: "basic-course-distill"
title: "Demo Website"
favicon: images/favicon.ico
description: |
  A site for a course
output_dir: "docs"
creative_commons: CC BY
navbar:
  logo:
    image: images/logo.png
    href: https://www.rstudio.com
  right:
    - text: "Home"
      href: index.html
    - text: "Lectures"
      href: about.html
output: 
  distill::distill_article
    css: styles.css

Now we can start styling!

25.4 Aesthetics and branding

  • Google fonts
  • Link color and hover behavior

25.4.1 Google Fonts

First, We can choose new body and header fonts from Google Fonts.

The first thing we need to do is add the following line to the top of our CSS file. This will import all of the Google Fonts that are listed within |. We chose these specifically from the Google Fonts website.

@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Asap:400,400i,700,700i|Roboto:400,400i,700,700i&display=swap');

25.4.1.1 Header fonts

Let’s change all the header fonts to a serif font, like “Playfair Display”.

h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display";
}

I like this font, but the letters are a bit too squished for my taste. Let’s fix this by adding someletter-spacing:. We will also increase the line-height: so that if our headers wrap onto a second line, the text won’t overlap with the line above it.

h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display";
  letter-spacing: 2px;  
  line-height: 2rem; /* increases, so wrapping headers don't overlap */ 

}

25.4.1.2 Body font

While we’re here, let’s also change the body’s text color to be more of an off-black.

Choosing colors that are not at the complete extreme of the color spectrum (e.g. avoiding pure black), leaves you some room to be able to go darker when you want to emphasize something later. If you start out by making your body’s text black–then you’ve already maxed out this option.

All illustrations CC-BY-NC : You can download them by clicking here
All other materials CC-BY unless noted otherwise.