CSS Styles for Distill HTML Article

[asolisc]

Hi, I wanted to change the font for my code chunks in a distill HTML article. I would like to use a custom font (which I've downloaded from Google Fonts). I've used a custom "style.css" file. In that file I'm typing the following code:

@import url('https://fonts.googleapis.com/css2?family=Fira+Mono');

d-code {
    overflow-x: auto !important;
    font-size: 14px;
    font-family: 'Fira Mono', monospace;
  }

However, nothing happens in the output. In the .Rmd file, I've added this in the YAML header:

output: 
  distill::distill_article:
    css: "style.css"

Any ideas?

Thank you in advance!!

[apreshill]

Hi there,

I recently challenged myself to customize a Distill site, which should be similar to customizing the CSS for a Distill article. My site is here, and you can click on the github icon at the top to find the repo:

RStudio Education: Teaching in Production

Here are the relevant lines- they are in my _site.yml but same should work inside the YAML of an article (your CSS filename is in quotes and mine is not, I'm not sure if that is the main difference here?):

rstudio-education/teaching-in-production/blob/9d5ca7176964515ccdde55d807152d22eaf2650b/_site.yml#L17-L20

Hopefully that gives you enough to get yours going!
Alison

[asolisc]

Thank you so much for the quick reply Alison!

I checked and there's no difference in using the CSS filename in quotes (or not). Your styles.css file is very useful indeed (I checked it out and learned even more customization for the distill article) .

However, what I wanted to change is the font for my printed code chunks, such as this one from your site:

Unfortunately, you didn't customize them, so I can't figure it out from your styles.css file.

Do you happen to know how to do this?
Once again, thank you very much for the help!

[apreshill]

Aha you are correct! That is unlike me I just updated to use a custom monospace font, here is the CSS I added:

d-article div.sourceCode code, 
d-article pre code {
	font-family: "DM Mono", monospace;
	font-size: 1rem;
}

It looks like it updated, does that help?

[asolisc]

My God, you are the absolute best!!! Thank you so much for digging into this. So it looks like I had to use the d-article div.sourceCode code and d-article pre code headers to do that. I was just using: d-code.

Thank you, thank you, thank you!!

[asolisc]

Hmm sorry to bother but this is not working for me.

I've tried the following but it's not working:

@import url('https://fonts.googleapis.com/css2?family=Fira+Mono');

d-article div.sourceCode code, 
d-article pre code {
	font-family: 'Fira Code', monospace;
	font-size: 1rem;
}

Maybe it's because I have a distill article and not a webpage?

I've also tried (unsuccesfully) to change the position of the TOC to the left, and outside of the boxed AUTHOR, PUBLISHED, AFFILIATION headers. Is this again, because you havea webpage and I just have an article?

[apreshill]

Hi there!

Did a bit of digging and it sounds like you are running up against something in Distill that has been fixed in the development version available on GitHub, but not yet on CRAN yet. The TOC placement then will also be available to you as well if you update your Distill:

install.packages("remotes")
library(remotes)
install_github("rstudio/distill")

Let me know here if you give it a try and it works

[asolisc]

Thank you so much for looking into this Alison!

This kind of solved my last problem but now, the update has created two different problems (so sorry to keep asking!). The first issue is that my table of contents gets mixed up with the text (see below):

I've seen it be pushed to the left (the Mockup Blog from Thomas Mock is a great example). Is there any way to do this in a Distill Article? Or is it just for websites?

The other issue is that... before installing the GitHub version, I could format the text code (i.e. text that was wrapped in ``) with the following CSS:

/* Tweak code text */
code {
  font-family: 'Fira Code', monospace;
color: #224888; 
background: #F4F3EE; 
  font-weight: 400;
  font-size: 0.8em;
}

which yielded something like this:

while my code chunks were exempted from such formattings, like so:

But after the update, now my code chunks also follow the above CSS formatting, so my chunks look like:

which is not ideal haha. My question is: is there any way to ONLY format the outside code text? (i.e. text wrapped in `` )?

Once again, thank you so much in advance! Please let me know how I can repay the much-needed help! I could donate to some Patreon account or something!

Best,
Alexis