From cb63c7847180df8293ad817be073ca46be87d976 Mon Sep 17 00:00:00 2001 From: Andrew Scholer Date: Wed, 9 Jul 2025 09:44:42 -0700 Subject: [PATCH 1/9] CSS: update revealjs target of cssbuilder to pretext-reveal --- script/cssbuilder/cssbuilder.mjs | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/script/cssbuilder/cssbuilder.mjs b/script/cssbuilder/cssbuilder.mjs index 63e51c58a6..2081815d09 100644 --- a/script/cssbuilder/cssbuilder.mjs +++ b/script/cssbuilder/cssbuilder.mjs @@ -119,7 +119,7 @@ function getTargets(options) { { out: 'theme-tacoma', in: path.join(cssRoot, 'targets/html/tacoma/theme-tacoma.scss') }, // ------------------------------------------------------------------------- // Non-web targets - { out: 'reveal', in: path.join(cssRoot, 'targets/revealjs/reveal.scss')}, + { out: 'pretext-reveal', in: path.join(cssRoot, 'targets/revealjs/reveal.scss')}, { out: 'kindle', in: path.join(cssRoot, 'targets/ebook/kindle/kindle.scss')}, { out: 'epub', in: path.join(cssRoot, 'targets/ebook/epub/epub.scss')}, ] @@ -157,8 +157,9 @@ function getTargets(options) { // Modules build directly to destination with no subfolder targets[0].out = targets[0].out.replace('modules/', ''); } else { - // Others build as theme.css - targets[0].out = 'theme'; + // Individual HTML theme files build as theme.css + if(targets[0].in.includes("theme-")) + targets[0].out = 'theme'; } } } From 98d6eb1151b493a2850ebe83a36d34799eec7224 Mon Sep 17 00:00:00 2001 From: Andrew Scholer Date: Wed, 9 Jul 2025 09:44:01 -0700 Subject: [PATCH 2/9] CSS: update revealjs css --- css/dist/{reveal.css => pretext-reveal.css} | 53 ++++++++------- css/targets/revealjs/reveal.scss | 73 +++++++++++++-------- 2 files changed, 76 insertions(+), 50 deletions(-) rename css/dist/{reveal.css => pretext-reveal.css} (89%) diff --git a/css/dist/reveal.css b/css/dist/pretext-reveal.css similarity index 89% rename from css/dist/reveal.css rename to css/dist/pretext-reveal.css index 16e1d787f0..ff434df4d2 100644 --- a/css/dist/reveal.css +++ b/css/dist/pretext-reveal.css @@ -34,15 +34,13 @@ ul.circle { ul { display: block !important; } -dfn { - font-weight: bold; -} .cols1 li, .cols2 li, .cols3 li, .cols4 li, .cols5 li, .cols6 li { + float: left; padding-right: 2em; } .definition-like, @@ -51,7 +49,7 @@ dfn { .project-like { border-width: 0.5px; border-style: solid; - border-radius: 2px 10px; + border-radius: 2px 10px 2px; padding: 1%; margin-bottom: var(--r-block-margin); } @@ -72,18 +70,24 @@ dfn { border-radius: 2px 10px; padding: 4px; } -.ptx-content :is(.image-box, .audio-box, .video-box, .asymptote-box) { +.image-box, +.audio-box, +.video-box, +.asymptote-box { position: relative; } -.ptx-content iframe.asymptote, -.ptx-content .video-box .video, -.ptx-content .video-box .video-poster { +iframe.asymptote, +.video-box .video, +.video-box .video-poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } +div[style*="display:table-cell"] img { + width: 100%; +} .code-inline { background: color-mix(in srgb, var(--r-background-color) 75%, var(--r-link-color)); padding: 0 3px; @@ -96,20 +100,6 @@ dfn { color: black; border: 0.5px solid var(--r-main-color); } -.reveal pre { - box-shadow: none; - line-height: 1; - font-size: inherit; - width: auto; - margin: inherit; -} -.reveal pre code { - display: block; - padding: 0; - overflow: unset; - max-height: unset; - word-wrap: normal; -} .program { background: color-mix(in srgb, var(--r-background-color) 75%, var(--r-link-color)); max-height: 450px; @@ -125,5 +115,22 @@ pre[class*=language-] { padding: 0; line-height: 1.2; } +.reveal pre { + box-shadow: none; + line-height: 1; + font-size: inherit; + width: auto; + margin: inherit; +} +.reveal pre code { + display: block; + padding: 0; + overflow: unset; + max-height: unset; + word-wrap: normal; +} +dfn { + font-weight: bold; +} /*! Theme: reveal */ -/*# sourceMappingURL=reveal.css.map */ +/*# sourceMappingURL=pretext-reveal.css.map */ diff --git a/css/targets/revealjs/reveal.scss b/css/targets/revealjs/reveal.scss index 3513955371..d20bf68c79 100644 --- a/css/targets/revealjs/reveal.scss +++ b/css/targets/revealjs/reveal.scss @@ -1,23 +1,27 @@ /*! Theme: reveal */ + +// Tip: to build just this file directly to a folder for testing, do something like: +// npm run build -- -w -t pretext-reveal -o ../../examples/sample-slideshow/out/_static/pretext/css + @use "components/elements/list-styles"; +//---- List Styles ---- ul { display: block !important; } -dfn { - font-weight: bold; -} - .cols1 li, .cols2 li, .cols3 li, .cols4 li, .cols5 li, .cols6 li { + float: left; padding-right: 2em; } +//---- Container Styles ---- + /* Callout boxes */ // Note: the box around a "theorem" does not contain // the associated "proof" because the HTML does not @@ -28,7 +32,7 @@ dfn { .project-like { border-width: 0.5px; border-style: solid; - border-radius: 2px 10px; + border-radius: 2px 10px 2px; padding: 1%; margin-bottom: var(--r-block-margin); } @@ -49,20 +53,23 @@ dfn { background: color-mix(in srgb, var(--r-background-color) 75%, #608000); } -/* Image-like */ +//---- Media Styles ---- .reveal img { border: 0.5px !important; border-radius: 2px 10px; padding: 4px; } -.ptx-content :is(.image-box, .audio-box, .video-box, .asymptote-box) { +.image-box, +.audio-box, +.video-box, +.asymptote-box { position: relative; } -.ptx-content iframe.asymptote, -.ptx-content .video-box .video, -.ptx-content .video-box .video-poster { +iframe.asymptote, +.video-box .video, +.video-box .video-poster { position: absolute; top: 0; left: 0; @@ -70,7 +77,13 @@ dfn { height: 100%; } -/* Code-like blocks */ +// make small images full-width in #sidebyside +// could improve with a .sidebyside class +div[style*="display:table-cell"] img { + width: 100%; +} + +//---- Codelike Styles ---- .code-inline { background: color-mix(in srgb, var(--r-background-color) 75%, var(--r-link-color)); padding: 0 3px; @@ -85,22 +98,6 @@ dfn { border: 0.5px solid var(--r-main-color); } -.reveal pre { - box-shadow: none; - line-height: 1; - font-size: inherit; - width: auto; - margin: inherit; -} - -.reveal pre code { - display: block; - padding: 0; - overflow: unset; - max-height: unset; - word-wrap: normal; -} - .program { background: color-mix(in srgb, var(--r-background-color) 75%, var(--r-link-color)); max-height: 450px; @@ -117,4 +114,26 @@ code[class*="language-"], pre[class*="language-"] { padding: 0; line-height: 1.2; +} + +// Undo some reveal.js defaults +.reveal pre { + box-shadow: none; + line-height: 1; + font-size: inherit; + width: auto; + margin: inherit; +} + +.reveal pre code { + display: block; + padding: 0; + overflow: unset; + max-height: unset; + word-wrap: normal; +} + +//---- Other Styles ---- +dfn { + font-weight: bold; } \ No newline at end of file From f82275c29ee06192108c2ddf31dd5f35060b60ae Mon Sep 17 00:00:00 2001 From: Andrew Scholer Date: Wed, 9 Jul 2025 09:46:08 -0700 Subject: [PATCH 3/9] HTML: add flag to identify reveal builds --- xsl/pretext-html.xsl | 3 +++ xsl/pretext-revealjs.xsl | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl index 209b33a8bb..21ed74b8bb 100644 --- a/xsl/pretext-html.xsl +++ b/xsl/pretext-html.xsl @@ -208,6 +208,9 @@ along with MathBook XML. If not, see . + + + diff --git a/xsl/pretext-revealjs.xsl b/xsl/pretext-revealjs.xsl index 793fa33170..1af1ede7d5 100644 --- a/xsl/pretext-revealjs.xsl +++ b/xsl/pretext-revealjs.xsl @@ -44,6 +44,10 @@ along with PreTeXt. If not, see . + + + + From f288c242df7971a416f6a501a85da59448c6c6fb Mon Sep 17 00:00:00 2001 From: Andrew Scholer Date: Wed, 9 Jul 2025 09:54:18 -0700 Subject: [PATCH 4/9] Reveal: include prism css links --- xsl/pretext-html.xsl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/xsl/pretext-html.xsl b/xsl/pretext-html.xsl index 21ed74b8bb..f1833a0e6d 100644 --- a/xsl/pretext-html.xsl +++ b/xsl/pretext-html.xsl @@ -13264,7 +13264,7 @@ TODO: - + From 668a083042375d3e92422f009ffd564ff172a766 Mon Sep 17 00:00:00 2001 From: Andrew Scholer Date: Wed, 9 Jul 2025 09:47:55 -0700 Subject: [PATCH 5/9] Script: copy pretext-reveal.css to output dir in revealjs build --- pretext/lib/pretext.py | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/pretext/lib/pretext.py b/pretext/lib/pretext.py index 3cdefe64e5..b5439c26cc 100644 --- a/pretext/lib/pretext.py +++ b/pretext/lib/pretext.py @@ -4264,8 +4264,18 @@ def revealjs( copy_managed_directories(tmp_dir, external_abs=external_abs, generated_abs=generated_abs) # place JS in scratch directory + # TODO: audit what JS is really needed/used copy_html_js(tmp_dir) + # copy CSS + css_src = os.path.join(get_ptx_path(), "css", "dist", "pretext-reveal.css") + css_dest = os.path.join(tmp_dir, "_static", "pretext", "css", "pretext-reveal.css") + with open(css_src, 'r') as theme_file: + filedata = theme_file.read() + os.makedirs(os.path.dirname(css_dest), exist_ok=True) + with open(css_dest, 'w+') as file: + file.write(filedata) + # Write output into temporary directory log.info("converting {} to HTML in {}".format(xml, tmp_dir)) derivedname = get_output_filename(xml, out_file, dest_dir, ".html") From bde8b762b1b1e81790c3efe08015e14358b7afc2 Mon Sep 17 00:00:00 2001 From: Andrew Scholer Date: Wed, 9 Jul 2025 09:47:04 -0700 Subject: [PATCH 6/9] Reveal: replace baked in CSS with link to generated file --- xsl/pretext-revealjs.xsl | 146 +-------------------------------------- 1 file changed, 1 insertion(+), 145 deletions(-) diff --git a/xsl/pretext-revealjs.xsl b/xsl/pretext-revealjs.xsl index 1af1ede7d5..80aea889ea 100644 --- a/xsl/pretext-revealjs.xsl +++ b/xsl/pretext-revealjs.xsl @@ -115,152 +115,8 @@ along with PreTeXt. If not, see . - - - - + From b2112be3ead134b925418577b2d7cc95dda9256e Mon Sep 17 00:00:00 2001 From: Andrew Scholer Date: Wed, 9 Jul 2025 09:48:57 -0700 Subject: [PATCH 7/9] Reveal: add pub var for custom-css --- xsl/pretext-revealjs.xsl | 15 ++++++++++++++- xsl/publisher-variables.xsl | 6 ++++++ 2 files changed, 20 insertions(+), 1 deletion(-) diff --git a/xsl/pretext-revealjs.xsl b/xsl/pretext-revealjs.xsl index 80aea889ea..b7d91969c8 100644 --- a/xsl/pretext-revealjs.xsl +++ b/xsl/pretext-revealjs.xsl @@ -33,7 +33,8 @@ along with PreTeXt. If not, see . xmlns:pi="http://pretextbook.org/2020/pretext/internal" xmlns:exsl="http://exslt.org/common" xmlns:date="http://exslt.org/dates-and-times" - extension-element-prefixes="exsl date" + xmlns:str="http://exslt.org/strings" + extension-element-prefixes="exsl date str" > @@ -119,6 +120,18 @@ along with PreTeXt. If not, see . + + + + + + + + + + + + diff --git a/xsl/publisher-variables.xsl b/xsl/publisher-variables.xsl index 9f7a2838a0..1eac392937 100644 --- a/xsl/publisher-variables.xsl +++ b/xsl/publisher-variables.xsl @@ -3043,6 +3043,11 @@ along with PreTeXt. If not, see . + + + + + @@ -3236,6 +3241,7 @@ along with PreTeXt. If not, see . + From 420a49fa8478b8de4076e79bdafe15843455e6a4 Mon Sep 17 00:00:00 2001 From: Andrew Scholer Date: Wed, 9 Jul 2025 09:49:26 -0700 Subject: [PATCH 8/9] Sample Slideshow: add sample custom css file --- examples/sample-slideshow/external/custom.css | 5 +++++ examples/sample-slideshow/publication.xml | 8 +++++++- 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 examples/sample-slideshow/external/custom.css diff --git a/examples/sample-slideshow/external/custom.css b/examples/sample-slideshow/external/custom.css new file mode 100644 index 0000000000..05e266f734 --- /dev/null +++ b/examples/sample-slideshow/external/custom.css @@ -0,0 +1,5 @@ +/* Sample of custom CSS to override/extend defaults */ + +.reveal h4 { + color: #3b658f; +} \ No newline at end of file diff --git a/examples/sample-slideshow/publication.xml b/examples/sample-slideshow/publication.xml index 13a0d7429c..04028d2936 100644 --- a/examples/sample-slideshow/publication.xml +++ b/examples/sample-slideshow/publication.xml @@ -28,7 +28,13 @@ along with PreTeXt. If not, see . - + + + + + + + From 8b0a08916a5c7e0b42e01e1960a2c8ef85a1476a Mon Sep 17 00:00:00 2001 From: Andrew Scholer Date: Wed, 9 Jul 2025 09:49:50 -0700 Subject: [PATCH 9/9] Guide: document reveal custom-css pubvar --- doc/guide/publisher/publication-file.xml | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/doc/guide/publisher/publication-file.xml b/doc/guide/publisher/publication-file.xml index d91524d7bb..6d4c62d9fe 100644 --- a/doc/guide/publisher/publication-file.xml +++ b/doc/guide/publisher/publication-file.xml @@ -857,8 +857,9 @@

The /publication/revealjs/appearance - element can have the following attribute:

    -
  • theme: the base name of a file that is a reveal.js theme. For example if the desired theme/CSS file is css/theme/solarized.css, then set the value of this attribute to solarized.
    • + element can have the following attributes:
      +
    • theme: the base name of a file that is a reveal.js theme. (See the reveal.js documentation for available themes.) For example if the desired theme/CSS file is css/theme/solarized.css, then set the value of this attribute to solarized.
      • +
    • custom-css: a string separated list of custom css files to load. These may be local files or remote URLs. For local files, it is recommended to place them in the external files directory so that they are automatically copied from your source folder to the output directory. (Refer to for more information on external files.)