Reveal CSS structural update

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,28 +53,37 @@ 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;
   width: 100%;
   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;
 }

doc/guide/publisher/publication-file.xml

@@ -857,8 +857,9 @@
 
             <p>The<cd>
                 <cline>/publication/revealjs/appearance</cline>
-            </cd>element can have the following attribute:<ul>
-                <li><attr>theme</attr>: the base name of a file that is a reveal.js theme.  For example if the desired theme/CSS file is <c>css/theme/solarized.css</c>, then set the value of this attribute to <c>solarized</c>.</li>
+            </cd>element can have the following attributes:<ul>
+                <li><attr>theme</attr>: the base name of a file that is a reveal.js theme. (See the <url href="https://revealjs.com/themes/">reveal.js documentation</url> for available themes.)  For example if the desired theme/CSS file is <c>css/theme/solarized.css</c>, then set the value of this attribute to <c>solarized</c>.</li>
+                <li><attr>custom-css</attr>: 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 <term>external</term> files directory so that they are automatically copied from your source folder to the output directory. (Refer to <xref ref="processing-directory-management"/> for more information on external files.)</li>
             </ul></p>
         </subsection>
 

examples/sample-slideshow/external/custom.css

@@ -0,0 +1,5 @@
+/* Sample of custom CSS to override/extend defaults */
+
+.reveal h4 {
+  color: #3b658f;
+}

examples/sample-slideshow/publication.xml

@@ -28,7 +28,13 @@ along with PreTeXt.  If not, see <http://www.gnu.org/licenses/>.
     </source>
 
     <revealjs>
-        <appearance theme="solarized"/>
+        <!-- theme="solarized" is the default, see https://revealjs.com/themes/ -->
+        <!-- for other theme options.                                           -->
+        <!-- custom-css is a space-separated list of CSS files to include.      -->
+        <!-- They can be local or remote. If local, they should be under your   -->
+        <!-- "external files" directory if you want them automatically copied   -->
+        <!-- to the output folder.                                              -->
+        <appearance theme="solarized" custom-css="external/custom.css"/>
         <!-- this is a "resources" default, but best for a sample -->
         <resources host="cdn"/>
         <!-- display="yes" is the default so we can see arrows          -->

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")

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';
         }
       }
     }

xsl/pretext-html.xsl

@@ -208,6 +208,9 @@ along with MathBook XML.  If not, see <http://www.gnu.org/licenses/>.
 <xsl:param name="html.presentation" select="'no'" />
 <xsl:variable name="b-html-presentation" select="$html.presentation = 'yes'" />
 
+<!-- Used to identify if target is reveal.js instead of vanilla html -->
+<xsl:variable name="b-reveal-build" select="false()" />
+
 <!-- ############### -->
 <!-- Source Analysis -->
 <!-- ############### -->
@@ -13261,7 +13264,7 @@ TODO:
         <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.26.0/plugins/autoloader/prism-autoloader.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.26.0/plugins/line-numbers/prism-line-numbers.min.js" integrity="sha512-dubtf8xMHSQlExGRQ5R7toxHLgSDZ0K7AunqPWHXmJQ8XyVIG19S1T95gBxlAeGOK02P4Da2RTnQz0Za0H0ebQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.26.0/plugins/line-highlight/prism-line-highlight.min.js" integrity="sha512-93uCmm0q+qO5Lb1huDqr7tywS8A2TFA+1/WHvyiWaK6/pvsFl6USnILagntBx8JnVbQH5s3n0vQZY6xNthNfKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <xsl:if test="$b-html-theme-legacy">
+        <xsl:if test="$b-html-theme-legacy or $b-reveal-build" >
             <!-- Legacy themes rely on external css for prism, but newer ones have it built in -->
             <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.26.0/themes/prism.css" rel="stylesheet"/>
             <!-- We could conditionally load the following based on line number -->