diff options
Diffstat (limited to 'demo-standard.md')
| -rw-r--r-- | demo-standard.md | 213 |
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> + + + +--- + +<!-- 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 + + + +--- + +<!-- _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 + + + +</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"> + + + +</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> + + + +<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. |
