Custom CSS breaking pdf formatting

[zsofiaj]

In our Italian Paintings project, I added this to the custom.css file to change block quote text from italicized to roman:

blockquote {
p {
font-style: normal;
}
}

It worked fine on the web version. For examples, see the block quotes at notes 1 and 2 here:

https://volume-2-batch-1--italian-paintings-live.netlify.app/catalogue/volume-2/the-florentine-school/82/#fnref1

However, after saving this in the custom.css file, when I try to output a new pdf using "quire build" and "quire pdf --lib prince," the formatting is all over the place in the pdf. Most of the formatting is gone. The error in the build log said this:

quire] ERROR transforms:pdf:writer Eleventy transform for PDF error compiling SASS. Error message: expected ":".
╷
247 │ p {
│ ^
╵

I tried adjusting the CSS in various ways, but everything I tried ended up reverting the block quote text to italics. Is there a better way to do this? I'm still newish to CSS and am fumbling through all of my attempts at customization.

Thanks, in advance, for any advice!

[zsofiaj]

I also tried the below, which I pasted from the quire-page.scss file, removing the unnecessary parts, and switching the italic with the normal. When I adjusted those elements in the quire-page.scss file, it worked, but it did not work when I tried it in the custom.css file.

blockquote {
font-style: normal;

em {
font-style: italic;
}

}

[cbutcosk]

@zsofiaj In quire's style setup custom.css cannot have nesting, but SCSS files can, which may be why the styling you've posted works in quire-pages.scss but not in custom.css. The PDF process tries to compile custom.css manually and so at the moment that file can only include valid CSS without nesting.

I much prefer working in sass/scss so if I want to use nesting in a quire project, I add a custom.scss to the project and import it in application.scss. Or you may be able to use the CSS you posted in its unnested form and use it as-is in custom.css:

blockquote {
  font-style: normal;
}

blockquote em {
  font-style: italic;
}

[zsofiaj]

Thanks so much, @cbutcosk. That is all very helpful. I didn't realize I cannot use nesting in CSS. For some reason when I use the below in custom.css, it seems to have no effect, and the block quotes still appear italicized. I'll just make the adjustments in quire-page.scss instead, but I'm still curious if I could get this to work somehow in custom.css.

blockquote {
  font-style: normal;
}

blockquote em {
  font-style: italic;
}