More useful scss variables

[dmi3kno]

I am enjoying the easy ability to customize Quarto Reveal slides through SCSS variables, bypassing the tedious CSS work. I tend to come back and modify the same CSS properties over and over again, so I would love to see SCSS variables for them:

• Smaller text size for numbered and unnumbered lists. Proposed default $presentation-ul-font-size: 1em and $presentation-ol-font-size: 1em. Today I do

.reveal section ul {
    font-size: 0.9em;
}

• Smaller text size for tables. Proposed default $presentation-table-font-size: 1em. Today I do

.reveal section table {
    font-size: 0.6em;
}

These are not exclusive to Reveal format and might be useful for HTML as well, hence variables might need to be repeated without the presentation- prefix.

[mcanouil]

Why don't you define those in a file you could use for all your documents, or even write a format template extension with that.
This way you get access to those without having to write them every time.

Edit: in your case the scss file would be something like the following.

$presentation-ul-font-size: 1em !default;
$presentation-table-font-size: 1em !default;

.reveal section ul {
    font-size: $presentation-ul-font-size;
}
.reveal section table {
    font-size: $presentation-table-font-size;
}

[dmi3kno]

I thought the need is general enough to expose these variables through Quarto core functionality without the need for the CSS blocks below, i.e. these could be added to the core template.

[mcanouil]

The css is required, otherwise the variables are not used.

In my opinion, this is a personal customisation, because it will hardcode more CSS outside of the Reveal.js / Pandoc Reveal.js template.
Also, tweaking font-size, especially for slides has some accessibility concern.

To note, the current SCSS file for Quarto: https://github.com/quarto-dev/quarto-cli/blob/main/src/resources/formats/revealjs/quarto.scss.

[mcanouil]

By the way, you could use the already defined $presentation-font-smaller (default is 0.7)

.reveal section table {
    font-size: #{$presentation-font-smaller}em;
}

[mcanouil]

@dmi3kno Maybe better to open a separate Q&A Discussion to ease search request for anyone in the future interested in the question. (I have an answer ready for you)

[dmi3kno]

Just discovered that the revealjs YAML property smaller: true accomplishes what I need