aboutsummaryrefslogtreecommitdiff
path: root/demo-standard.md
diff options
context:
space:
mode:
Diffstat (limited to 'demo-standard.md')
-rw-r--r--demo-standard.md213
1 files changed, 213 insertions, 0 deletions
diff --git a/demo-standard.md b/demo-standard.md
new file mode 100644
index 0000000..20d887f
--- /dev/null
+++ b/demo-standard.md
@@ -0,0 +1,213 @@
+---
+marp: true
+theme: acarp
+style: |
+ :root {
+ --logo-image: url('acarp.png');
+ --logo-width: 120px;
+ --logo-height: 120px;
+ --logo-opacity: 0.8;
+ }
+---
+
+<!-- _class: title -->
+# Academic Marp Theme
+
+Modern presentations with CSS Grid
+
+## Grid-based layouts for academic content
+
+<div class="vspace-large"></div>
+
+![width:120px](acarp.png)
+
+---
+
+<!-- paginate: true -->
+
+## Overview
+
+A minimal, grid-based setup for Marp presentations:
+
+- **Grid-only layouts** - No flexbox, no utility classes
+- **Explicit contracts** - Clear layout structure in CSS
+- **Two aspect ratios** - 16:9 (standard) and 4:3 (beamer)
+- **Academic focus** - Optimized for technical content
+
+![width:400px](figs/example.png)
+
+---
+
+<!-- _class: layout-2col -->
+### Key Features
+
+<div class="left-column">
+
+**Grid-based Design**
+- CSS Grid for all layouts
+- No hidden behaviors
+- Maintainable structure
+
+**Academic Ready**
+- Math support: $\Delta x$
+- Code highlighting
+- Clean typography
+
+</div>
+
+<div class="right-column">
+
+**Simple Usage**
+- Markdown-only workflow
+- No complex classes
+- Focus on content
+
+![width:350px](figs/example.png)
+
+</div>
+
+---
+
+## Mathematical Content
+
+The TF-IDF model for term weighting:
+
+$$\text{tf-idf}(t, d, D) = \text{tf}(t, d) \times \text{idf}(t, D)$$
+
+Where term frequency is:
+$$\text{tf}(t, d) = \frac{f_{t,d}}{\sum_{t'\in d} f_{t',d}}$$
+
+And inverse document frequency:
+$$\text{idf}(t, D) = \log \frac{|D|}{|\{d \in D : t \in d\}|}$$
+
+---
+
+<!-- _class: layout-2col -->
+### Code Examples
+
+<div class="left-column">
+
+```python
+def tfidf(term, doc, corpus):
+ tf = term_frequency(term, doc)
+ idf = inverse_df(term, corpus)
+ return tf * idf
+
+# Example usage
+score = tfidf("grid", doc1, docs)
+print(f"TF-IDF: {score:.3f}")
+```
+
+</div>
+
+<div class="right-column">
+
+```bash
+# Build presentation
+marp --theme acarp demo.md
+
+# Watch for changes
+marp --theme acarp --watch demo.md
+
+# Export to PDF
+marp --theme acarp --pdf demo.md
+```
+
+</div>
+
+---
+
+## Layout Patterns
+
+**Default Layout** - Single column, clean presentation
+
+**Two-Column Layout** - Perfect for code + output or text + image
+
+**Title Layout** - Impactful opening slides
+
+All layouts use CSS Grid with explicit contracts - no positioning hacks needed.
+
+---
+
+<!-- _class: layout-2col -->
+### Performance Comparison
+
+<div class="left-column">
+
+**Traditional Approach**
+- Complex positioning
+- Flexbox overrides
+- Utility classes
+- Hidden behaviors
+
+**Grid-Only Approach**
+- Explicit layouts
+- Clear structure
+- Predictable behavior
+- Easy maintenance
+
+</div>
+
+<div class="right-column">
+
+![width:100%](figs/example.png)
+
+</div>
+
+---
+
+## Getting Started
+
+1. Install dependencies: `npm install`
+2. Create your markdown file
+3. Add `theme: acarp` in frontmatter
+4. Use layout classes as needed
+5. Build with: `marp --theme acarp file.md`
+
+---
+
+## Vertical Spacing
+
+Use spacing utilities for better content flow:
+
+<div class="vspace-small"></div>
+
+Small vertical space (1em)
+
+<div class="vspace-medium"></div>
+
+Medium vertical space (2em) - good for section breaks
+
+<div class="vspace-large"></div>
+
+Large vertical space (3em) - for major separations
+
+---
+
+## Spacing Examples
+
+```python
+def calculate():
+ result = 42
+ return result
+```
+
+<div class="vspace-medium"></div>
+
+The function returns a simple value.
+
+<div class="vspace-small"></div>
+
+![width:300px](figs/example.png)
+
+<div class="push-up"></div>
+
+Images can have custom spacing too.
+
+---
+
+## Thank You
+
+This theme provides a clean, academic-focused foundation for your presentations.
+
+Visit the repository for more examples and documentation.