ids theme: scale nested list items progressively smaller
Second and deeper list levels are now rendered at 80% of their parent
font size (level 2: 80%, level 3: 64%, level 4: 51%), mimicking the
IDS reference decks and emphasising list hierarchy. Markers and
indentation scale along automatically.
Change-Id: Ibbdad55e86c4346843621b73accff4eda1104ed0
diff --git a/NEWS.md b/NEWS.md
index 3bade25..c7a875b 100644
--- a/NEWS.md
+++ b/NEWS.md
@@ -1,5 +1,9 @@
# revealjs (development version)
+## OTHER CHANGES
+
+- `ids` theme: second- and higher-level list items are now rendered progressively smaller (each nesting level at 80% of its parent), emphasising list hierarchy as in the IDS reference decks.
+
## REVEAL JS LIBRARY UPDATE
This version of the package comes with reveal.js v4 which is a major update from previous reveal.js v3. Built-in plugins (`zoom`, `search` and `notes`) have been updated, as well as third party plugin included in this package (`menu` and `chalkboard`). A lot of bugfixes and improvements have been made in the upstream library and now the R package can benefit from it. However, this cause also some breaking changes for **revealjs** R package that we described below.
diff --git a/examples/ids.Rmd b/examples/ids.Rmd
index a7e62f7..013b7bc 100644
--- a/examples/ids.Rmd
+++ b/examples/ids.Rmd
@@ -45,6 +45,10 @@
- Bullet 1
- Bullet 2
+ - Second-level bullet
+ - Second-level bullet
+ - Third-level bullet
+ - Third-level bullet
- Bullet 3
<aside class="notes">
diff --git a/inst/reveal.js-5.1.0/css/theme/source/ids.scss b/inst/reveal.js-5.1.0/css/theme/source/ids.scss
index e97f0c7..b069d58 100644
--- a/inst/reveal.js-5.1.0/css/theme/source/ids.scss
+++ b/inst/reveal.js-5.1.0/css/theme/source/ids.scss
@@ -269,6 +269,16 @@
}
}
+// Nested list items are set progressively smaller, both to emphasise the
+// hierarchy and to keep deeply nested lists from visually competing with the
+// first level. The em size compounds down the nesting levels, so each deeper
+// level is 80% of its parent (level 2: 80%, level 3: 64%, level 4: 51%).
+// Markers and the hanging indentation (padding-left: 0.7em above) scale with
+// the text automatically.
+.reveal li li {
+ font-size: 0.8em;
+}
+
/*********************************************
* FOOTER
diff --git a/inst/reveal.js-5.1.0/dist/theme/ids.css b/inst/reveal.js-5.1.0/dist/theme/ids.css
index ef9e1f5..3a5dcb0 100644
--- a/inst/reveal.js-5.1.0/dist/theme/ids.css
+++ b/inst/reveal.js-5.1.0/dist/theme/ids.css
@@ -482,6 +482,15 @@
color: var(--r-list-bullet-color) !important;
}
+/* Nested list items are set progressively smaller, both to emphasise the
+ hierarchy and to keep deeply nested lists from visually competing with the
+ first level. The em size compounds down the nesting levels, so each deeper
+ level is 80% of its parent (level 2: 80%, level 3: 64%, level 4: 51%).
+ Markers and the hanging indentation scale with the text automatically. */
+.reveal li li {
+ font-size: 0.8em;
+}
+
/*********************************************
* FOOTER
*********************************************/