diff options
| -rw-r--r-- | acarp-beamer.css | 30 | ||||
| -rw-r--r-- | acarp.css | 51 | ||||
| -rw-r--r-- | demo-beamer.md | 34 | ||||
| -rw-r--r-- | demo-standard.md | 8 |
4 files changed, 97 insertions, 26 deletions
diff --git a/acarp-beamer.css b/acarp-beamer.css index 376929a..c60fab6 100644 --- a/acarp-beamer.css +++ b/acarp-beamer.css @@ -21,6 +21,7 @@ :root { --slide-width: 1280px !important; --slide-height: 960px !important; + --padding: 80px !important; } /* Force 4:3 dimensions on all sections */ @@ -34,6 +35,35 @@ section { font-size: 37px !important; } +/* Adjust code blocks for 4:3 aspect ratio */ +pre { + font-size: 55% !important; +} + +pre > code { + min-width: 280px !important; +} + +/* Adjust 2-column layout for 4:3 format */ +section.layout-2col > h1:first-child, +section.layout-2col > h2:first-child, +section.layout-2col > h3:first-child { + padding: 40px 80px 0 80px !important; +} + +section.layout-2col .left-column { + padding: 0 1em 0 80px !important; +} + +section.layout-2col .right-column { + padding: 0 150px 0 1em !important; +} + +section.layout-2col::after { + bottom: 40px !important; + right: 80px !important; +} + /* Larger pagination for beamer theme */ section::after { font-size: 24px !important; @@ -172,6 +172,11 @@ pre { position: relative; } +/* Hide scrollbar when pre is inside a width-constrained container */ +div[style*="max-width"] pre { + overflow-x: hidden; +} + /* Add subtle background pattern for code blocks */ pre::before { content: ''; @@ -345,8 +350,15 @@ section.title { flex-direction: column; justify-content: center; align-items: center; - min-height: 100vh; + height: 100%; + width: 100%; box-sizing: border-box; + position: relative; +} + +/* Wrapper for title content to ensure proper centering */ +section.title > * { + flex: 0 0 auto; } section.title > h1 { @@ -371,6 +383,16 @@ section.title > img { height: auto; } +/* Ensure proper title slide alignment in fullscreen mode */ +div.marpit > svg > foreignObject > section.title, +svg.marpit > foreignObject > section.title, +.marpit svg > foreignObject > section.title { + width: 100%; + height: 100%; + display: grid; + place-items: center; +} + /* ============================================================================ LAYOUT: layout-2col @@ -400,8 +422,8 @@ section.layout-2col { "title title" "left right" "buffer buffer"; - row-gap: 0.8em; - column-gap: 1em; + row-gap: 1em; + column-gap: 0; padding: 0; height: 100%; width: 100%; @@ -412,33 +434,30 @@ section.layout-2col > h1:first-child, section.layout-2col > h2:first-child, section.layout-2col > h3:first-child { grid-area: title; - padding: 30px var(--padding) 0; - margin: 0 0 10px 0; + padding: 30px 70px 0 70px; + margin: 15px 0 0; position: static; } section.layout-2col .left-column { grid-area: left; - padding: 0 1.5em 0 var(--padding); + padding: 0 1em 0 70px; min-height: 0; } section.layout-2col .right-column { grid-area: right; - padding: 0 150px 0 1.5em; + padding: 0 150px 0 1em; min-height: 0; } section.layout-2col::after { position: absolute; - bottom: 0; - right: 0; + bottom: 30px; + right: 70px; color: #888888 !important; font-size: 18px !important; font-family: 'EB Garamond', 'Times New Roman', serif !important; - grid-area: unset; - padding: 30px var(--padding); - margin: 0; } section.layout-2col img { @@ -572,12 +591,4 @@ section pre code .hljs-string, } -/* ============================================================================ - LAYOUT: default (no class) - - Simple single-column layout - just use normal document flow. - ============================================================================ */ -section:not(.title):not(.layout-2col) { - padding: 30px var(--padding); -} diff --git a/demo-beamer.md b/demo-beamer.md index db2efa7..0a8205e 100644 --- a/demo-beamer.md +++ b/demo-beamer.md @@ -62,13 +62,13 @@ A minimal, grid-based setup for Marp presentations: The TF-IDF model for term weighting: -$\text{tf-idf}(t, d, D) = \text{tf}(t, d) \times \text{idf}(t, D)$ +$\quad \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}}$ +$\quad \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\}|}$ +$\quad \text{idf}(t, D) = \log \frac{|D|}{|\{d \in D : t \in d\}|}$ The 4:3 format provides better vertical space for multi-line equations. @@ -76,9 +76,12 @@ The 4:3 format provides better vertical space for multi-line equations. --- +<!-- _class: layout-2col --> ### Code Examples -Python implementation: +<div class="left-column"> + +<div class="vspace-medium"></div> ```python def tfidf(term, doc, corpus): @@ -91,9 +94,24 @@ score = tfidf("grid", doc1, docs) print(f"TF-IDF: {score:.3f}") ``` - +</div> + +<div class="right-column"> + +<div class="vspace-medium"></div> -*Top-right logo: university/conference branding* +```bash +# Build presentation +marp --theme acarp-beamer demo.md + +# Watch for changes +marp --theme acarp-beamer --watch demo.md + +# Export to PDF +marp --theme acarp-beamer --pdf demo.md +``` + +</div> --- @@ -169,12 +187,16 @@ Large vertical space (3em) - for major separations ## Spacing Examples +<div style="max-width: 300px;"> + ```python def calculate(): result = 42 return result ``` +</div> + <div class="vspace-medium"></div> The function returns a simple value. diff --git a/demo-standard.md b/demo-standard.md index 1cf44df..72f7d9b 100644 --- a/demo-standard.md +++ b/demo-standard.md @@ -192,12 +192,16 @@ Large vertical space (3em) - for major separations ## Spacing Examples +<div style="max-width: 300px;"> + ```python def calculate(): result = 42 return result ``` +</div> + <div class="vspace-medium"></div> The function returns a simple value. @@ -228,12 +232,16 @@ $\quad \text{score} = \text{tf} \times \log\frac{|D|}{|d_t|}$ **And code blocks:** + +<div style="max-width: 300px;"> + ```python def score(term, doc): tf = freq(term, doc) idf = log(N / df) return tf * idf ``` +</div> </div> |