5  Custom Styling

Useful websites:

In the Bookdown version of R4Epi, I had a custom CSS stylesheet (i.e., style.css) that I used create some custom call-out boxes and a few other things. Here is the contents of that stylesheet.

```{css}

/******************************************************************************
CSS for the R4Epi textbook
******************************************************************************/

/*
CSS that came with bookdown
*/
p.caption {
  color: #777;
  margin-top: 10px;
}
p code {
  white-space: inherit;
}
pre {
  word-break: normal;
  word-wrap: normal;
}
pre code {
  white-space: inherit;
}

/* 
Font Styles
*/
.large-bold {
  font-size: 2em;
  font-weight: bold;
}

.underline {
  text-decoration: underline;
}

.red-text {
  color: red;
}

.code {
  color: #0365C0;
  font-family: "Courier New", Courier, monospace;
}


/*
Note styles
*/
.note {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  background-color: #f0f7fb;
  border: solid 1px #3498db;
  border-radius: 6px;
  line-height: 18px;
  overflow: hidden;
  padding: 15px 15px;
}

.warning {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  background-color: #FEFBEA;
  border: solid 1px #F2E394;
  border-radius: 6px;
  line-height: 18px;
  overflow: hidden;
  padding: 15px 15px;
}


/* 
Text box with construction stripes for chapters under construction.
Helpful websites: 
https://css-tricks.com/stripes-css/
https://stackoverflow.com/questions/10422949/css-background-opacity
*/
.under-construction {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  /*background-color: rgba(248, 116, 49, 0.4);*/ /* Fourth number is opacity */
  background: repeating-linear-gradient(
    45deg,
    rgba(248, 116, 49, 0.1) /* Fourth number is opacity */,
    rgba(248, 116, 49, 0.1) 10px,
    rgba(169, 169, 169, 0.15) 10px,
    rgba(169, 169, 169, 0.15) 20px
  );
  border: solid 1px #F87431;
  border-radius: 6px;
  line-height: 26px;
  overflow: hidden;
  padding: 15px 15px;
  font-size: 24px;
}


/*
Disable the title header from the index page.
https://stackoverflow.com/questions/53399095/disable-title-author-in-the-html-output-of-bookdown
*/
#header {
    display: none;
}

```

Following the guidance on Customizing Quarto Websites, I’m going use that stylesheet for this book too.

```{scss}

/******************************************************************************
Custom CSS styling for the Test Quarto Book
******************************************************************************/

/*-- scss:defaults --*/

// Fonts
// Importing a font from Google Fonts (https://ucsb-meds.github.io/customizing-quarto-websites/#/select-fonts)
// @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap'); // For testing
$codeFont:  "Courier New", Courier, monospace;

// Colors
// $purple: #AE8BD1; // For testing
$codeBackground: #0365C0;
$noteBackground: #f0f7fb;
$noteBorder: #3498db;
$warningBackground: #FEFBEA;
$warningBorder: #F2E394;

// Adjustments to default Quarto styles
// $body-bg: $purple; // page background -- for testing


/*-- My Font Styles --*/
.large-bold {
  font-size: 2em;
  font-weight: bold;
}

.underline {
  text-decoration: underline;
}

.red-text {
  color: red;
}

.code {
  color: $codeBackground;
  font-family: $codeFont;
}


/*-- Note Styles --*/
.note {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  background-color: $noteBackground;
  border: solid 1px $noteBorder;
  border-radius: 6px;
  line-height: 18px;
  overflow: hidden;
  padding: 15px 15px;
}

.warning {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  background-color: $warningBackground;
  border: solid 1px $warningBorder;
  border-radius: 6px;
  line-height: 18px;
  overflow: hidden;
  padding: 15px 15px;
}


/* 
Text box with construction stripes for chapters under construction.
Helpful websites: 
https://css-tricks.com/stripes-css/
https://stackoverflow.com/questions/10422949/css-background-opacity

I could create SASS variables for these elements, but I don't want to take the time to do that now.
*/
.under-construction {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  /*background-color: rgba(248, 116, 49, 0.4);*/ /* Fourth number is opacity */
  background: repeating-linear-gradient(
    45deg,
    rgba(248, 116, 49, 0.1) /* Fourth number is opacity */,
    rgba(248, 116, 49, 0.1) 10px,
    rgba(169, 169, 169, 0.15) 10px,
    rgba(169, 169, 169, 0.15) 20px
  );
  border: solid 1px #F87431;
  border-radius: 6px;
  line-height: 26px;
  overflow: hidden;
  padding: 15px 15px;
  font-size: 24px;
}


/*
Disable the title header from the index page.
https://stackoverflow.com/questions/53399095/disable-title-author-in-the-html-output-of-bookdown
*/
#header {
    display: none;
}

```

For testing, I’m going to add a note, a warning, and a construction box.

🗒Side Note: Here is a note. 

<p class="note"> 🗒**Side Note:** Here is a note. </p>

⚠️Warning: Here is a warning. 

<p class="warning"> ⚠️**Warning:** Here is a warning. </p>

r fontawesome::fa("hammer", fill = "#000000", height="1em") Here is the under construction box. 

<p class="under-construction"> `r fontawesome::fa("hammer", fill = "#000000", height="1em")` Here is the under construction box.</p>

Note that Font Awesome is not currently working and none of these call out boxes work in PDF format. Quarto’s built-in call out boxes do work in PDF format, though.

5.1 Font Awesome

Font Awesome seems like a great tool for adding an additional visual dimension to our Quarto projects. Here are some links with useful information about adding Font Awesome graphics to Quarto documents:

  • How to include fontawesome icons in Quarto documents: basic styling AND special effects (YouTube)

Here are the basics:

  1. Install the Font Awesome Quarto Extension by typing quarto install extension quarto-ext/fontawesome in the terminal.
  2. We will be asked, “Do you trust the authors of this extension?” Type “Yes.”
  3. We will be asked, “Would you like to continue?” Type “Yes.”
  4. There should be a new folder called _extensions. Inside that folder, there should be a folder named fontawesome.
  5. We will have to repeat this process any time we create a new Quarto project.

Now that the extension is installed, we can use the following syntax to insert Font Awesome icons: \{\{< fa name-of-icon >}} (don’t include the backslashes. They are just there to prevent GitHub from attempting to render the code). We can find a list of icons on the Font Awesome website.

For example, this code creates a Font Awesome envelope: 

\{\{< fa envelope >}} (don't include the backslashes. They are just there to prevent GitHub from attempting to render the code)

However, the example above doesn’t work when we render the file to GitHub flavored markdown (format: gfm) instead of html (format: html).

Here are some links with notes on using Font Awesome with GitHub flavored markdown:

  • Add to markdown: https://stackoverflow.com/questions/63913973/how-can-i-put-fontawesome-icons-in-markdown-readme
  • GitHub repository: https://github.com/FortAwesome/Font-Awesome
  • R font awesome package: https://github.com/rstudio/fontawesome

For example:

<img src="https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs/solid/crown.svg" width="50" height="50">

Produces:

The YouTube video, How to include fontawesome icons in Quarto documents: basic styling AND special effects has more information on styling Font Awesome icons. For example, the following code:

<div class="fa-3x">
  <i class="fa-solid fa-circle-plus fa-beat"></i>
  <i class="fa-solid fa-heart fa-beat"></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s;" ></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 2s;"></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-beat-scale: 2.0;"></i>
</div>

Produces this:

Note on rendering to PDF: The double curly brace syntax renders in the PDF document, but the HTML code does not.

Another weird thing: When I was trying to include fontawesome icons in the “About the Authors” page of the Quarto version of R4Epi, I found that I had to include at least one code chunk in the file to get the fontawesome icons to render. Here is an example of the code I used that included fontawesome icons:

<a href="https://www.bradcannell.com" target="_blank">`r fontawesome::fa("globe", fill = "#003087", height="2em")`</a>