Improve SCSS in Revealjs - Part 2 : Callouts

[cderv]

This PR focus on Callouts

• styles-callout.html has been integrated for Revealjs into quarto.scss. This way SCSS variable can be used to tweak callouts.

• This goes with SCSS refactoring to

  • Regroup all rules for callouts in same place
  • Use nested structured to better understand what is common rules, and specific rules
  • Prepare for more customisation

• Callouts in Revealjs has been made closer looking to the one in Boostrap

  • Same default colors (slightly different from current 1.5 default)
  • Same logic to apply Callout Type in SCSS meaning same SCSS variable can be used.
  • Those variables and there defaults are

     $callout-border-width: 0.3rem !default;
     $callout-border-scale: 0% !default;
     $callout-icon-scale: 10% !default;
     $callout-margin-top: 1rem !default;
     $callout-margin-bottom: 1rem !default;
     $callout-color-note: #0d6efd !default;
     $callout-color-tip: #198754 !default;
     $callout-color-important: #dc3545 !default;
     $callout-color-caution: #fd7e14 !default;
     $callout-color-warning: #ffc107 !default;

  • Same SVG icons as bootstrap are used now instead of PNG

• It also solves some issues

  • Background problem on div.sourceCode when it is last element of Callout. A duplicated color was shown.
    • Currently with 1.5
      
    • Now
      
  • When div.sourceCode is last element of simple style callout, there was border merging. Some margin have been added
    • 1.5
      
    • Now
      

The new looks can be found at https://examples.quarto.pub/revealjs-default-callouts-styles/
Not easy to compare, but everything should be good looking.

I used this presentation to check visually that new SCSS gives same results a current version. If anything seems odd to any of you, please tell me.

Opening as a draft, as I need to run a few more examples and checks

[cderv]

I updated the online example with new content I used to check everything

One improvment to add

It seems we never styled correctly the simple callout content.

FWIW in HTML it looks like

[cderv]

So I think we are missing some structure in the HTML that would require to modify the Lua filter for revealjs.

We need a wrapper for the flex display, so that we can apply flex-grow on the inside content.

I don't want to handle that in same PR as this is about style. And maybe we'll want to push to 1.7 instead for this fix - I am not sure about touching the Lua filter this late.