From 462716289947a30686694fcabaf47f04f8ab4e02 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20Kr=C3=B6pelin?= Date: Sat, 26 Aug 2023 15:36:00 +0200 Subject: [PATCH] Implement side by side and remove functionality from themes --- book/src/themes/gallery/university.typ | 7 ------- examples/demo.typ | 18 ++++++++++-------- polylux.typ | 4 ++-- themes/clean.typ | 19 ++++++------------- themes/metropolis.typ | 8 ++++---- themes/university.typ | 22 +++++++--------------- utils/utils.typ | 16 ++++++++++++++-- 7 files changed, 43 insertions(+), 51 deletions(-) diff --git a/book/src/themes/gallery/university.typ b/book/src/themes/gallery/university.typ index 5f6b71e..35d0472 100644 --- a/book/src/themes/gallery/university.typ +++ b/book/src/themes/gallery/university.typ @@ -21,13 +21,6 @@ #lorem(40) ] - -#slide(title: "A longer slide title with 2 columns")[ - #lorem(30) -][ - #lorem(30) -] - #focus-slide(background-img: image("background.svg"))[ *Another variant with an image in background...* ] diff --git a/examples/demo.typ b/examples/demo.typ index fac8d88..96af3c9 100644 --- a/examples/demo.typ +++ b/examples/demo.typ @@ -316,11 +316,6 @@ It's very minimalist and helps the audience focus on an important point. ] -#slide( - title: [The `clean` theme also makes multiple colums very easy!], - lorem(20), lorem(30), lorem(25) -) - #slide(title: "Your own theme?")[ If you want to create your own design for slides, you can define custom themes! @@ -331,8 +326,8 @@ #new-section-slide("Utilities") -#slide(title: [The `helpers` module])[ - Polylux ships a `helpers` module with solutions for common tasks in slide +#slide(title: [The `utils` module])[ + Polylux ships a `utils` module with solutions for common tasks in slide building. ] @@ -340,7 +335,7 @@ You can scale content such that it has a certain height using `#fit-to-height(height, content)`: - #helpers.fit-to-height(2.5cm)[Height is `2.5cm`] + #fit-to-height(2.5cm)[Height is `2.5cm`] ] #slide(title: "Fill remaining space")[ @@ -350,6 +345,13 @@ #fit-to-height(1fr)[Wow!] ] +#slide(title: "Side by side content")[ + Often you want to put different content next to each other. + We have the function `#side-by-side` for that: + + #side-by-side(lorem(10), lorem(20), lorem(15)) +] + #slide(title: "Outline")[ Why not include an outline? #polylux-outline(padding: 1em, enum-args: (tight: false)) diff --git a/polylux.typ b/polylux.typ index a727ddc..25cfea1 100644 --- a/polylux.typ +++ b/polylux.typ @@ -1,5 +1,5 @@ #import "themes/themes.typ" #import "logic.typ" #import "logic.typ": polylux-slide, uncover, only, alternatives, alternatives-match, alternatives-fn, alternatives-cases, one-by-one, line-by-line, list-one-by-one, enum-one-by-one, terms-one-by-one, pause, enable-handout-mode -#import "helpers.typ" -#import "helpers.typ": polylux-outline, fit-to-height, pdfpc +#import "utils/utils.typ" +#import "utils/utils.typ": polylux-outline, fit-to-height, side-by-side, pdfpc diff --git a/themes/clean.typ b/themes/clean.typ index 9ebc9ef..a37905c 100644 --- a/themes/clean.typ +++ b/themes/clean.typ @@ -2,7 +2,7 @@ // https://github.com/MarkBlyth #import "../logic.typ" -#import "../helpers.typ" +#import "../utils/utils.typ" #let clean-footer = state("clean-footer", []) #let clean-short-title = state("clean-short-title", none) @@ -104,7 +104,7 @@ logic.polylux-slide(content) } -#let slide(title: none, columns: none, gutter: none, ..bodies) = { +#let slide(title: none, body) = { let header = align(top, locate( loc => { let color = clean-color.at(loc) let logo = clean-logo.at(loc) @@ -124,10 +124,10 @@ align(horizon + right, grid( columns: 1, rows: 1em, gutter: .5em, short-title, - helpers.current-section + utils.current-section )) } else { - align(horizon + right, helpers.current-section) + align(horizon + right, utils.current-section) } ) })) @@ -153,14 +153,7 @@ header-ascent: 1.5em, ) - let bodies = bodies.pos() - let gutter = if gutter == none { 1em } else { gutter } - let columns = if columns == none { (1fr,) * bodies.len() } else { columns } - if columns.len() != bodies.len() { - panic("number of columns must match number of content arguments") - } - - let body = pad(x: .0em, y: .5em, grid(columns: columns, gutter: gutter, ..bodies)) + let body = pad(x: .0em, y: .5em, body) let content = { @@ -189,7 +182,7 @@ show: block.with(stroke: ( bottom: 1mm + color ), inset: 1em,) set text(size: 1.5em) strong(name) - helpers.register-section(name) + utils.register-section(name) }) logic.polylux-slide(content) } diff --git a/themes/metropolis.typ b/themes/metropolis.typ index 95aa7e9..cb1a7f2 100644 --- a/themes/metropolis.typ +++ b/themes/metropolis.typ @@ -8,7 +8,7 @@ // #set par(justify: true) #import "../logic.typ" -#import "../helpers.typ" +#import "../utils/utils.typ" #let m-dark-teal = rgb("#23373b") #let m-light-brown = rgb("#eb811b") @@ -25,7 +25,7 @@ breakable: false ) -#let m-progress-bar = helpers.polylux-progress( ratio => { +#let m-progress-bar = utils.polylux-progress( ratio => { grid( columns: (ratio * 100%, 1fr), m-cell(fill: m-light-brown), @@ -124,7 +124,7 @@ #let new-section-slide(name) = { let content = { - helpers.register-section(name) + utils.register-section(name) set align(horizon) show: pad.with(20%) set text(size: 1.5em) @@ -142,4 +142,4 @@ #let alert = text.with(fill: m-light-brown) -#let metropolis-outline = helpers.polylux-outline(enum-args: (tight: false,)) +#let metropolis-outline = utils.polylux-outline(enum-args: (tight: false,)) diff --git a/themes/university.typ b/themes/university.typ index c73416c..f78b2fe 100644 --- a/themes/university.typ +++ b/themes/university.typ @@ -1,5 +1,5 @@ #import "../logic.typ" -#import "../helpers.typ" +#import "../utils/utils.typ" // University theme // @@ -97,28 +97,20 @@ #let slide( title: none, - columns: none, - gutter: none, header: none, footer: none, new-section: none, - ..bodies + body ) = { - let bodies = bodies.pos() - let gutter = if gutter == none { 1em } else { gutter } - let columns = if columns == none { (1fr,) * bodies.len() } else { columns } - if columns.len() != bodies.len() { - panic("number of columns must match number of content arguments") - } - let body = pad(x: 2em, y: .5em, grid(columns: columns, gutter: gutter, ..bodies)) + let body = pad(x: 2em, y: .5em, body) let progress-barline = locate( loc => { if uni-progress-bar.at(loc) { let cell = block.with( width: 100%, height: 100%, above: 0pt, below: 0pt, breakable: false ) let colors = uni-colors.at(loc) - helpers.polylux-progress( ratio => { + utils.polylux-progress( ratio => { grid( rows: 2pt, columns: (ratio * 100%, 1fr), cell(fill: colors.a), @@ -133,14 +125,14 @@ header } else if title != none { if new-section != none { - helpers.register-section(new-section) + utils.register-section(new-section) } locate( loc => { let colors = uni-colors.at(loc) block(fill: colors.c, inset: (x: .5em), grid( columns: (60%, 40%), align(top + left, heading(level: 2, text(fill: colors.a, title))), - align(top + right, text(fill: colors.a.lighten(65%), helpers.current-section)) + align(top + right, text(fill: colors.a.lighten(65%), utils.current-section)) )) }) } else { [] } @@ -171,7 +163,7 @@ cell(fill: colors.a, uni-short-author.display()), cell(uni-short-title.display()), cell(uni-short-date.display()), - cell(logic.logical-slide.display() + [~/~] + helpers.last-slide-number) + cell(logic.logical-slide.display() + [~/~] + utils.last-slide-number) ) }) } diff --git a/utils/utils.typ b/utils/utils.typ index b15ee14..773adc4 100644 --- a/utils/utils.typ +++ b/utils/utils.typ @@ -1,4 +1,6 @@ -#import "logic.typ" +#import "../logic.typ" + +#import "pdfpc.typ" // SECTIONS @@ -129,4 +131,14 @@ }) } -#import "utils/pdfpc.typ" +// SIDE BY SIDE + +#let side-by-side(columns: none, gutter: 1em, ..bodies) = { + let bodies = bodies.pos() + let columns = if columns == none { (1fr,) * bodies.len() } else { columns } + if columns.len() != bodies.len() { + panic("number of columns must match number of content arguments") + } + + grid(columns: columns, gutter: gutter, ..bodies) +} \ No newline at end of file