aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--README16
-rw-r--r--acarp.css17
-rw-r--r--demo-standard.md26
-rw-r--r--justfile2
4 files changed, 60 insertions, 1 deletions
diff --git a/README b/README
index b2c936b..5e4c0b6 100644
--- a/README
+++ b/README
@@ -60,6 +60,22 @@ Text content
</div>
```
+### `highlight-left` / `highlight-right` - Column Emphasis
+```markdown
+---
+<!-- _class: layout-2col-center highlight-left -->
+
+<div class="left-column">
+Normal opacity
+</div>
+
+<div class="right-column">
+Faded out
+</div>
+```
+
+Dims the other column of `layout-2col` / `layout-2col-center`. Use across slides to build up a comparison.
+
### `cite` - Citation/Attribution
```markdown
---
diff --git a/acarp.css b/acarp.css
index ed10edb..2e4c05a 100644
--- a/acarp.css
+++ b/acarp.css
@@ -598,6 +598,23 @@ section.layout-2col-center img {
}
/* ============================================================================
+ LAYOUT: highlight-left / highlight-right
+
+ Modifiers that fade out one column of a two-column slide to draw
+ attention to the other. Combine with layout-2col or layout-2col-center:
+
+ <!-- _class: layout-2col-center highlight-left -->
+
+ Use across consecutive slides to build up a two-sided comparison,
+ introducing one half first, then the other.
+ ============================================================================ */
+
+section.highlight-left .right-column,
+section.highlight-right .left-column {
+ opacity: 0.35;
+}
+
+/* ============================================================================
SYNTAX HIGHLIGHTING OVERRIDE
Override highlight.js theme colors for consistent academic styling.
diff --git a/demo-standard.md b/demo-standard.md
index 72f7d9b..88e48f5 100644
--- a/demo-standard.md
+++ b/demo-standard.md
@@ -259,6 +259,32 @@ def score(term, doc):
---
+<!-- _class: layout-2col-center highlight-left -->
+
+### Column Emphasis
+
+<div class="left-column">
+
+<div class="vspace-large"></div>
+
+## Focus here
+
+Full opacity.
+
+</div>
+
+<div class="right-column">
+
+<div class="vspace-large"></div>
+
+## Faded
+
+`highlight-left` dims this column. Swap to `highlight-right` to fade the left instead.
+
+</div>
+
+---
+
## Thank You
This theme provides a clean, academic-focused foundation for your presentations.
diff --git a/justfile b/justfile
index 19b52f2..f24548e 100644
--- a/justfile
+++ b/justfile
@@ -16,7 +16,7 @@ help:
@echo " demo - Build demo presentations"
@echo ""
@echo "Themes: acarp (16:9), acarp-beamer (4:3)"
- @echo "Layouts: title, layout-2col"
+ @echo "Layouts: title, layout-2col, highlight-left/right"
# Install dependencies
install: