From 487716a5f5046680af2870e6683a4a6490fce2fc Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Wed, 6 Nov 2024 15:05:32 +0100 Subject: [PATCH 1/3] Add documentation for SCSS variables in revealjs --- docs/presentations/revealjs/themes.qmd | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/docs/presentations/revealjs/themes.qmd b/docs/presentations/revealjs/themes.qmd index e82a752d70..7a90736ed4 100644 --- a/docs/presentations/revealjs/themes.qmd +++ b/docs/presentations/revealjs/themes.qmd @@ -176,6 +176,32 @@ Here's a list of all Sass variables (and their default values) used by Reveal th | `$presentation-slide-text-align` | left | | `$presentation-title-slide-text-align` | center | +### Callouts + ++--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| Variable | Notes | ++==========================+====================================================================================================================================================================+ +| `$callout-border-width` | The left border width of callouts. Defaults to `0.3rem`. | ++--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `$callout-border-scale` | The border color of callouts computed by shifting the callout color by this amount. Defaults to `0%`. | ++--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `$callout-icon-scale` | The color of the callout icon computed by shifting the callout color by this amount. Defaults to `10%`. | ++--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `$callout-margin-top` | The amount of top margin on the callout. Defaults to `1rem`. | ++--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `$callout-margin-bottom` | The amount of bottom margin on the callout. Defaults to `1rem`. | ++--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+ +| `$callout-color-` | The colors for the various types of callouts. Defaults: | +| | | +| | | type | default | | +| | |-------------|-----------| | +| | | `note` | `#0d6efd` | | +| | | `tip` | `#198754` | | +| | | `caution` | `#dc3545` | | +| | | `warning` | `#fd7e14` | | +| | | `important` | `#ffc107` | | ++--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+ + You'll notice that some of the Sass variables use a `presentation-` prefix and some do not. The `presentation-` prefixed variables are specific to presentations, whereas the other variables are the same as ones used for standard Quarto [HTML Themes](/docs/output-formats/html-themes.qmd). Since all Quarto themes use the same Sass format, you can use a single theme file for both HTML / website documents and presentations. From e58bb75ccbc53b5c95b9682f0259757d459fae31 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Wed, 6 Nov 2024 15:54:45 +0100 Subject: [PATCH 2/3] Add a not about how color is used --- docs/presentations/revealjs/themes.qmd | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/presentations/revealjs/themes.qmd b/docs/presentations/revealjs/themes.qmd index 7a90736ed4..b27f7cca8e 100644 --- a/docs/presentations/revealjs/themes.qmd +++ b/docs/presentations/revealjs/themes.qmd @@ -200,6 +200,7 @@ Here's a list of all Sass variables (and their default values) used by Reveal th | | | `caution` | `#dc3545` | | | | | `warning` | `#fd7e14` | | | | | `important` | `#ffc107` | | +| | Note that style for callout is to have left border using type color, and header background to use a variation of this color. | +--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+ You'll notice that some of the Sass variables use a `presentation-` prefix and some do not. The `presentation-` prefixed variables are specific to presentations, whereas the other variables are the same as ones used for standard Quarto [HTML Themes](/docs/output-formats/html-themes.qmd). From 3883e6ea31c46c11cc7faad2d839a4c124159e32 Mon Sep 17 00:00:00 2001 From: Christophe Dervieux Date: Wed, 6 Nov 2024 15:55:31 +0100 Subject: [PATCH 3/3] Add a color box to show which color it is as hexcode is not really that readable in documentation --- _quarto.yml | 1 + docs/presentations/revealjs/themes.qmd | 15 ++++++++------- filters/color-box.lua | 19 +++++++++++++++++++ styles.css | 13 +++++++++++++ 4 files changed, 41 insertions(+), 7 deletions(-) create mode 100644 filters/color-box.lua diff --git a/_quarto.yml b/_quarto.yml index 0a03fb1969..c265cb0138 100644 --- a/_quarto.yml +++ b/_quarto.yml @@ -672,6 +672,7 @@ format: filters: - filters/tools-tabset.lua + - filters/color-box.lua freeze: true diff --git a/docs/presentations/revealjs/themes.qmd b/docs/presentations/revealjs/themes.qmd index b27f7cca8e..f60a189ae4 100644 --- a/docs/presentations/revealjs/themes.qmd +++ b/docs/presentations/revealjs/themes.qmd @@ -193,13 +193,14 @@ Here's a list of all Sass variables (and their default values) used by Reveal th +--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+ | `$callout-color-` | The colors for the various types of callouts. Defaults: | | | | -| | | type | default | | -| | |-------------|-----------| | -| | | `note` | `#0d6efd` | | -| | | `tip` | `#198754` | | -| | | `caution` | `#dc3545` | | -| | | `warning` | `#fd7e14` | | -| | | `important` | `#ffc107` | | +| | | type | default | | +| | |-------------|-------------------------| | +| | | `note` | [`#0d6efd`]{.color-box} | | +| | | `tip` | [`#198754`]{.color-box} | | +| | | `caution` | [`#dc3545`]{.color-box} | | +| | | `warning` | [`#fd7e14`]{.color-box} | | +| | | `important` | [`#ffc107`]{.color-box} | | +| | | | | Note that style for callout is to have left border using type color, and header background to use a variation of this color. | +--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+ diff --git a/filters/color-box.lua b/filters/color-box.lua new file mode 100644 index 0000000000..4aeafe0ba5 --- /dev/null +++ b/filters/color-box.lua @@ -0,0 +1,19 @@ +Span = function(s) + if not quarto.format.isHtmlOutput() then + return nil + end + if s.classes:includes('color-box') then + local color + if s.attributes['color'] then + quarto.log.output("HERE") + color = s.attributes['color'] + s.attributes.color = nil + elseif #s.content == 1 and s.content[1] and s.content[1].t == "Code" and s.content[1].text and s.content[1].text:sub(1, 1) == '#' then + color = s.content[1].text + end + if color then + s.content:insert(1, pandoc.Span('', pandoc.Attr('', { 'color-box' }, { style ="background-color:" .. color .. ";"}))) + return pandoc.Span( s.content , { "", { "color-box-container" } }) + end + end +end \ No newline at end of file diff --git a/styles.css b/styles.css index 0ee2b85d03..644c891e55 100644 --- a/styles.css +++ b/styles.css @@ -337,3 +337,16 @@ iframe.reveal-demo { .illustration { border: 1px solid #dee2e6; } + +span.color-box-container { + display: inline-flex; + align-items: center; /* Align vertically */ +} + +span.color-box { + display: inline-block; + width: 1em; /* Width of the color box */ + height: 1em; /* Height of the color box */ + margin-right: 0.2em; /* Space between box and text */ + border: 1px solid #000; /* Border color */ +} \ No newline at end of file