Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

theme: add rectangles #131

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions book/src/SUMMARY.md
Original file line number Diff line number Diff line change
@@ -21,6 +21,7 @@
- [Metropolis](./themes/gallery/metropolis.md)
- [University](./themes/gallery/university.md)
- [Bipartite](./themes/gallery/bipartite.md)
- [Rectangles](./themes/gallery/rectangles.md)
- [Build your own](./themes/your-own.md)
- [Utilities](./utils/utils.md)
- [Side by side](./utils/side-by-side.md)
59 changes: 59 additions & 0 deletions book/src/themes/gallery/rectangles.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
# Rectangles theme

![rectangles](rectangles.png)

This theme is inspired by the LaTeX beamer outer theme "miniframes" and inner theme "rectangles". It is similar to the `university` theme. but designed to be easier to use at the cost of customizability.

Use it via
```typ
{{#include ../../IMPORT.typ}}
#import themes.rectangles: *

#show: rectangles-theme.with(...)
```

`rectangles` uses polylux' section handling, the regular `#outline()` will not work
properly, use `#polylux-outline` instead.
Starting a new section is done via the `#new-section()` function.

Text is configured to have a base font size of 25 pt.

## Options for initialisation
`rectangles-theme` accepts the following optional keyword arguments:

- `aspect-ratio`: the aspect ratio of the slides, either `"16-9"` or `"4-3"`,
default is `"16-9"`
- `title`: title of the presentation, default: `none`
- `subtitle`: subtitle of the presentation, default: `none`
- `authors`: authors of presentation, can be an array of contents or a single content, default: `none`
- `date`: date of the presentation, default: `none`
- `short-title`: short title of the presentation to display in the footer of each slide, default: `none`, falls back to `title + [ – ] + subtitle` if `subtitle` was given and `title` otherwise
- `short-authors`: short authors of the presentation to display in the footer of each slide, default: `none`, falls back to `authors.join(", ")`
- `accent-fill-color`: fill color of the decorations, default: `rgb("#008ccc")`
- `accent-text-color`: text color of the decorations, default: `white`

## Slide functions
`rectangles` provides the following custom slide functions:

```typ
#title-slide()
```
Creates a title slide where title and subtitle are displayed in a solid box and the authors and date are displayed below.

Does not accept arguments or additional content.

---

```typ
#slide(...)[
...
]
```
Decorates the provided content with a header containing the current section (if any) and a footer containing the short authors, short presentation title, and the slide number.

## Example code
The image at the top is created by the following code:
```typ
{{#include ../../IMPORT.typ}}
{{#include rectangles.typ:3:}}
```
Binary file added book/src/themes/gallery/rectangles.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 37 additions & 0 deletions book/src/themes/gallery/rectangles.typ
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
#import "../../../../polylux.typ": *

#import themes.rectangles: *

#set text(font: "Fira Sans", weight: "regular")

#show: rectangles-theme.with(
authors: ("Author A", "Author B"),
title: "Title",
subtitle: "Subtitle",
date: "Date",
)

#title-slide()

#new-section("First section")

#slide[
= First slide

#lorem(20)
]

#slide[
= Second slide

- Bullet points...
- They are using the accent color!
]

#slide[
= Third slide
Did you know that...

#pause
...you can see the current section at the top of the slide?
]
146 changes: 146 additions & 0 deletions themes/rectangles.typ
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
#import "../logic.typ"
#import "../utils/utils.typ"

// Rectangles theme by Ruben Felgenhauer (felsenhower).
// This theme was inspired by LaTeX presentations using the outer theme "miniframes" and inner theme "rectangles".

#let rectangles-title = state("rectangles-title", none)
#let rectangles-subtitle = state("rectangles-subtitle", none)
#let rectangles-authors = state("rectangles-authors", none)
#let rectangles-date = state("rectangles-date", none)
#let rectangles-short-title = state("rectangles-short-title", none)
#let rectangles-short-authors = state("rectangles-short-authors", none)
#let rectangles-accent-fill-color = state("rectangles-accent-fill-color", none)
#let rectangles-accent-text-color = state("rectangles-accent-text-color", none)

#let rectangles-theme(
aspect-ratio: "16-9",
title: none,
subtitle: none,
authors: none,
date: none,
short-title: none,
short-authors: none,
accent-fill-color: rgb("#008ccc"),
accent-text-color: white,
body
) = {
set page(
paper: "presentation-" + aspect-ratio,
margin: 0em,
header: none,
footer: none,
)
set text(size: 25pt)
show footnote.entry: set text(size: .6em)
show heading.where(level: 1): it => pad(bottom: 1em, it)
set list(marker: text(accent-fill-color, sym.square.filled))

if short-title == none and title != none {
short-title = if subtitle != none {
title + [ – ] + subtitle
} else {
title
}
}
if authors != none and type(authors) != "array" {
authors = (authors, )
}
if short-authors == none and authors != none {
short-authors = authors.join(", ")
}

rectangles-short-title.update(short-title)
rectangles-title.update(title)
rectangles-subtitle.update(subtitle)
rectangles-accent-fill-color.update(accent-fill-color)
rectangles-accent-text-color.update(accent-text-color)
rectangles-authors.update(authors)
rectangles-date.update(date)
rectangles-short-authors.update(short-authors)

body
}

#let title-slide() = {
let content = locate(loc => {
let authors = rectangles-authors.at(loc)
let title = rectangles-title.at(loc)
let subtitle = rectangles-subtitle.at(loc)
let date = rectangles-date.at(loc)
let accent-fill-color = rectangles-accent-fill-color.at(loc)
let accent-text-color = rectangles-accent-text-color.at(loc)

align(center + horizon, [
#block(fill: accent-fill-color, width: 60%, inset: 1em)[
#set text(accent-text-color)
#text(1.5em, weight: 500, title) \
#{
if subtitle != none {
parbreak()
subtitle
}
}
]
#set text(size: .8em)
#grid(
columns: 1,
row-gutter: 1em,
..authors, "", date
)
])
})

logic.polylux-slide(content)
}

#let slide(
body
) = {
body = pad(x: 2em, y: .5em, body)

let decoration(body) = {
locate(loc => {
let accent-fill-color = rectangles-accent-fill-color.at(loc)
let accent-text-color = rectangles-accent-text-color.at(loc)
set text(accent-text-color, size: 11pt)
block(
fill: accent-fill-color,
width: 100%,
inset: 0.75em,
height: 2.2em,
align(horizon, body)
)
})
}

let header = {
align(top, decoration(
align(center, utils.current-section),
))
}

let footer = {
align(bottom,
decoration(grid(
columns: (1fr, auto, 1fr),
align(left, rectangles-short-authors.display()),
align(center, rectangles-short-title.display()),
align(right, logic.logical-slide.display() + [~/~] + utils.last-slide-number)
)))
}

set page(
margin: (top: 2em, bottom: 1em, x: 0em),
header: header,
footer: footer,
footer-descent: 0em,
header-ascent: 0em,
)

logic.polylux-slide(body)
}

#let new-section(name) = {
utils.register-section(name)
}
1 change: 1 addition & 0 deletions themes/themes.typ
Original file line number Diff line number Diff line change
@@ -3,3 +3,4 @@
#import "bipartite.typ"
#import "university.typ"
#import "metropolis.typ"
#import "rectangles.typ"