Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add documentation for SCSS variables in revealjs #1446

Merged
merged 3 commits into from
Nov 7, 2024
Merged

Add documentation for SCSS variables in revealjs #1446

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
487716a
Add documentation for SCSS variables in revealjs
cderv Nov 6, 2024
e58bb75
Add a not about how color is used
cderv Nov 6, 2024
3883e6e
Add a color box to show which color it is as hexcode is not really th…
cderv Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions _quarto.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -672,6 +672,7 @@ format:

filters:
- filters/tools-tabset.lua
- filters/color-box.lua

freeze: true

Expand Down
28 changes: 28 additions & 0 deletions docs/presentations/revealjs/themes.qmd
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,34 @@ 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-<type>` | The colors for the various types of callouts. Defaults: |
| | |
| | | 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. |
+--------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------+

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.
Expand Down
19 changes: 19 additions & 0 deletions filters/color-box.lua
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
13 changes: 13 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
}