Update slide configuration

Author: Daniel Precioso, PhD

_quarto.yml

@@ -183,5 +183,21 @@ format:
       body-width: 900px
       margin-width: 300px
       gutter-width: 1.5rem
+  revealjs:
+    transition: slide
+    margin: 0.2
+    smaller: false
+    subtitle: ''
+    output-ext: htm
+    toc: true
+    toc-depth: 1
+    menu: true
 
 jupyter: python3
+
+# Inherit some presentation defaults from the project slide template
+from: markdown+raw_attribute+raw_tex
+standalone: true
+self-contained: true
+slide-level: 2
+date-format: long

slides/_metadata.yml

@@ -16,11 +16,20 @@ format:
     history: true
     center: false
     mouse-wheel: true
-    transition: fade
+    transition: slide
     background-transition: fade
     preview-links: auto
     footer: Applied Math Lab
     width: 1400
     height: 900
-    margin: 0.08
+    margin: 0.2
     code-overflow: wrap
+    scrollable: true
+    # Increase default code block height to reduce inline scrollbars on slides
+    code-block-height: "650"
+    # Template-provided options
+    subtitle: ''
+    output-ext: htm
+    toc: true
+    toc-depth: 1
+    menu: true

slides/amlab-slides.css

@@ -381,3 +381,65 @@ img.figure-frame,
     font-size: 30px;
   }
 }
+
+/* Responsive overflow rules: prevent slide content from spilling out
+   Ensure vertical scrolling inside slides when content exceeds viewport
+   and make images/code blocks scale and wrap appropriately. */
+.reveal .slides section {
+  box-sizing: border-box;
+  max-height: 100vh;
+  overflow: auto; /* enable internal scrolling rather than overflowing */
+}
+
+.reveal .slides section * {
+  /* allow grid/flex children to shrink below their content size on small screens */
+  min-height: 0;
+}
+
+.reveal p,
+.reveal li,
+.reveal h2,
+.reveal h3 {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+
+.reveal .columns,
+.reveal .grid-2,
+.reveal .grid-3,
+.reveal .workflow-grid,
+.reveal .metric-grid,
+.reveal .link-grid {
+  /* make sure nested grids can shrink on small viewports */
+  min-height: 0;
+}
+
+.reveal img,
+.reveal .figure-frame img,
+.reveal img.figure-frame,
+.reveal .columns img {
+  max-width: 100%;
+  height: auto;
+  max-height: calc(100vh - 160px);
+  object-fit: contain;
+}
+
+.reveal pre,
+.reveal pre code {
+  overflow: auto;
+  max-height: 55vh;
+}
+
+/* If a slide has exceptionally large content, let the entire deck scale down slightly
+   on narrower screens to avoid overflow while preserving readability. */
+@media (max-width: 900px) {
+  .reveal {
+    font-size: 26px;
+  }
+  .reveal .title-slide .quarto-title-block {
+    padding: 1.1rem 1.2rem;
+  }
+}

slides/amlab-style-previews.css

@@ -502,4 +502,44 @@
     min-height: 360px;
     height: 360px;
   }
-}
+}
+
+/* Prevent content spillover: enable internal scrolling on slides and
+   ensure images/code wrap and scale responsively. */
+.reveal .slides section {
+  box-sizing: border-box;
+  max-height: 100vh;
+  overflow: auto;
+}
+
+.reveal .slides section * {
+  min-height: 0;
+}
+
+.reveal p,
+.reveal li,
+.reveal h2,
+.reveal h3 {
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  hyphens: auto;
+}
+
+.reveal img,
+.reveal .columns img,
+.reveal .mermaid svg {
+  max-width: 100%;
+  height: auto;
+  max-height: calc(100vh - 160px);
+  object-fit: contain;
+}
+
+.reveal pre,
+.reveal pre code {
+  overflow: auto;
+  max-height: 55vh;
+}
+
+@media (max-width: 900px) {
+  .reveal { font-size: 28px; }
+}