Skip to content

Commit 3e392b1

Browse files
kazuyanagimotokazuyanagimoto
authored
Merge pull request #4 from kazuyanagimoto/brand
Support brand.yml
2 parents 96ebb77 + 1ddbcdd commit 3e392b1

File tree

5 files changed

+161
-30
lines changed

5 files changed

+161
-30
lines changed

‎.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.DS_Store
22
*.pdf
33
/.luarc.json
4-
/template.typ
4+
/template*.typ
55
README.html
66
.Rproj.user
77
docs/

‎_extensions/clean/_extension.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
title: Quarto Clean Theme
22
author: Kazuharu Yanagimoto
3-
version: 0.2.2
4-
quarto-required: ">=1.5.0"
3+
version: 0.3.0
4+
quarto-required: ">=1.6.40"
55
contributes:
66
format:
77
typst:

‎_extensions/clean/typst-show.typ

Lines changed: 35 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,61 @@
33
$if(handout)$
44
handout: true,
55
$endif$
6+
// Typography ---------------------------------------------------------------
67
$if(fontsize)$
78
font-size: $fontsize$,
9+
$elseif(brand.typography.base.size)$,
10+
font-size: $brand.typography.base.size$,
811
$endif$
912
$if(sansfont)$
10-
font-heading: ("$sansfont$",),
13+
font-family-heading: ("$sansfont$",),
14+
$elseif(brand.typography.headings.family)$
15+
font-family-heading: ("$brand.typography.headings.family$",),
1116
$endif$
1217
$if(mainfont)$
13-
font-body: ("$mainfont$",),
18+
font-family-body: ("$mainfont$",),
19+
$elseif(brand.typography.base.family)$
20+
font-family-body: ("$brand.typography.base.family$",),
1421
$endif$
1522
$if(font-weight-heading)$
1623
font-weight-heading: "$font-weight-heading$",
24+
$elseif(brand.typography.headings.weight)$
25+
font-weight-heading: $brand.typography.headings.weight$,
1726
$endif$
1827
$if(font-weight-body)$
1928
font-weight-body: "$font-weight-body$",
2029
$endif$
30+
// Colors --------------------------------------------------------------------
31+
$if(jet)$
32+
color-jet: rgb("$jet$"),
33+
$elseif(brand.color.foreground)$
34+
color-jet: brand-color.foreground,
35+
$endif$
36+
$if(accent)$
37+
color-accent: rgb("$accent$"),
38+
$elseif(brand.color.primary)$
39+
color-accent: brand-color.primary,
40+
$endif$
41+
$if(accent2)$
42+
color-accent2: rgb("$accent2$"),
43+
$elseif(brand.color.secondary)$
44+
color-accent2: brand-color.secondary,
45+
$endif$
46+
// Title slide ---------------------------------------------------------------
2147
$if(font-weight-title)$
22-
font-weight-title: "$font-weight-title$",
48+
font-weight-title: $font-weight-title$,
49+
$elseif(brand.defaults.clean-typst.title-slide.title.weight)$
50+
font-weight-title: $brand.defaults.clean-typst.title-slide.title.weight$,
2351
$endif$
2452
$if(font-size-title)$
2553
font-size-title: $font-size-title$,
54+
$elseif(brand.defaults.clean-typst.title-slide.title.size)$
55+
font-size-title: $brand.defaults.clean-typst.title-slide.title.size$,
2656
$endif$
2757
$if(font-size-subtitle)$
2858
font-size-subtitle: $font-size-subtitle$,
29-
$endif$
30-
$if(jet)$
31-
color-jet: "$jet$",
32-
$endif$
33-
$if(accent)$
34-
color-accent: "$accent$",
35-
$endif$
36-
$if(accent2)$
37-
color-accent2: "$accent2$",
59+
$elseif(brand.defaults.clean-typst.title-slide.subtitle.size)$
60+
font-size-subtitle: $brand.defaults.clean-typst.title-slide.subtitle.size$,
3861
$endif$
3962
)
4063

‎_extensions/clean/typst-template.typ

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
#let new-section-slide(self: none, body) = touying-slide-wrapper(self => {
55
let main-body = {
66
set align(left + horizon)
7-
set text(size: 2.5em, fill: self.colors.primary, weight: "bold")
7+
set text(size: 2em, fill: self.colors.primary, weight: "bold", font: self.store.font-family-heading)
88
utils.display-current-heading(level: 1)
99
}
1010
self = utils.merge-dicts(
@@ -29,7 +29,7 @@
2929
size: 1.4em,
3030
fill: self.colors.neutral-darkest,
3131
weight: self.store.font-weight-heading,
32-
font: self.store.font-heading,
32+
font: self.store.font-family-heading,
3333
)
3434
utils.call-or-display(self, self.store.header)
3535
}
@@ -60,20 +60,21 @@
6060
header: utils.display-current-heading(level: 2),
6161
footer: [],
6262
font-size: 20pt,
63-
font-heading: ("Roboto"),
64-
font-body: ("Roboto"),
63+
font-family-heading: ("Roboto"),
64+
font-family-body: ("Roboto"),
6565
font-weight-heading: "light",
6666
font-weight-body: "light",
6767
font-weight-title: "light",
68+
font-weight-subtitle: "light",
6869
font-size-title: 1.4em,
6970
font-size-subtitle: 1em,
70-
color-jet: "131516",
71-
color-accent: "107895",
72-
color-accent2: "9a2515",
71+
color-jet: rgb("131516"),
72+
color-accent: rgb("107895"),
73+
color-accent2: rgb("9a2515"),
7374
..args,
7475
body,
7576
) = {
76-
set text(size: font-size, font: font-body, fill: rgb(color-jet),
77+
set text(size: font-size, font: font-family-body, fill: color-jet,
7778
weight: font-weight-body)
7879

7980
show: touying-slides.with(
@@ -118,7 +119,7 @@
118119
set text(
119120
size: 1.1em,
120121
fill: self.colors.primary,
121-
font: font-body,
122+
font: font-family-body,
122123
weight: "light",
123124
style: "italic",
124125
)
@@ -132,20 +133,22 @@
132133
alert: (self: none, it) => text(fill: self.colors.secondary, it),
133134
),
134135
config-colors(
135-
primary: rgb(color-accent),
136-
secondary: rgb(color-accent2),
136+
primary: color-accent,
137+
secondary: color-accent2,
137138
neutral-lightest: rgb("#ffffff"),
138-
neutral-darkest: rgb(color-jet),
139+
neutral-darkest: color-jet,
139140
),
140141
// save the variables for later use
141142
config-store(
142143
header: header,
143144
footer: footer,
144-
font-heading: font-heading,
145+
font-family-heading: font-family-heading,
146+
font-family-body: font-family-body,
145147
font-size-title: font-size-title,
146148
font-size-subtitle: font-size-subtitle,
147-
font-weight-title: font-weight-title,
148149
font-weight-heading: font-weight-heading,
150+
font-weight-title: font-weight-title,
151+
font-weight-subtitle: font-weight-subtitle,
149152
..args,
150153
),
151154
)
@@ -164,13 +167,16 @@
164167
[#text(size: self.store.font-size-title,
165168
fill: self.colors.neutral-darkest,
166169
weight: self.store.font-weight-title,
170+
font: self.store.font-family-heading,
167171
info.title)
168172
#if info.subtitle != none {
169173
linebreak()
170174
v(-0.3em)
171175
text(size: self.store.font-size-subtitle,
172176
style: "italic",
173177
fill: self.colors.primary,
178+
weight: self.store.font-weight-subtitle,
179+
font: self.store.font-family-body,
174180
info.subtitle)
175181
}]
176182
)
@@ -231,4 +237,4 @@
231237
]
232238
}
233239

234-
#let button(it) = touying-fn-wrapper(_button.with(it))
240+
#let button(it) = touying-fn-wrapper(_button.with(it))

‎template-brand.qmd

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
---
2+
title: A title
3+
subtitle: A subtitle
4+
format: clean-typst
5+
author:
6+
- name: Your Name
7+
orcid: 0000-0000-0000-0000
8+
email: [email protected]
9+
affiliations: Your Institution
10+
date: today
11+
date-format: long
12+
brand:
13+
typography:
14+
fonts:
15+
- family: Montserrat
16+
source: google
17+
- family: Josefin Sans
18+
source: google
19+
- family: Fira Code
20+
source: bunny
21+
base: Montserrat
22+
headings:
23+
family: Josefin Sans
24+
weight: semi-bold
25+
monospace:
26+
family: Fira Code
27+
size: 0.9em
28+
color:
29+
palette:
30+
black: "#131516"
31+
green: "#009F8C"
32+
pink: "#B75C9D"
33+
foreground: black
34+
primary: green
35+
secondary: pink
36+
defaults:
37+
clean-typst:
38+
title-slide:
39+
title:
40+
size: 1.8em
41+
weight: 600
42+
subtitle:
43+
size: 1em
44+
---
45+
46+
# Section Slide as Header Level 1
47+
48+
## Slide Title as Header Level 2
49+
50+
### Subtitle as Header Level 3
51+
52+
You can put any content here, including text, images, tables, code blocks, etc.
53+
54+
- first unorder list item
55+
- A sub item
56+
57+
1. first ordered list item
58+
1. A sub item
59+
60+
Next, we'll brief review some theme-specific components.
61+
62+
- Note that _all_ of the standard Quarto + Typst
63+
[features](https://quarto.org/docs/output-formats/typst.html)
64+
can be used with this theme
65+
- Also, all the [Touying](https://touying-typ.github.io) features can be used by **Typst native code**
66+
67+
## Additional Theme Classes
68+
69+
### Some extra things you can do with the clean theme
70+
71+
Special classes for emphasis
72+
73+
- `.alert` class for default emphasis, e.g. [the second accent color]{.alert}.
74+
- `.fg` class for custom color, e.g. [with `options='fill: rgb("#5D639E")'`]{.fg options='fill: rgb("#5D639E")'}.
75+
- `.bg` class for custom background, e.g. [with the default color]{.bg}.
76+
77+
Cross-references
78+
79+
- `.button` class provides a Beamer-like button, e.g.
80+
[[Summary]{.button}](#sec-summary)
81+
82+
83+
## Summary {#sec-summary}
84+
85+
### A Minimalistic Presentation Theme for Quarto + Typst with Touying
86+
87+
Add the theme to an existing project
88+
89+
```{.bash}
90+
quarto install extension kazuyanagimoto/quarto-clean-typst
91+
```
92+
93+
... or, create a new project using this slide deck as a lean template
94+
95+
```{.bash}
96+
quarto use template kazuyanagimoto/quarto-clean-typst
97+
```
98+
99+
100+
### Longer Demo
101+
102+
For a more comprehensive demo, see the [demo slides](https://kazuyanagimoto.com/quarto-slides-typst/slides/quarto-clean-typst/clean.pdf) and [code](https://github.com/kazuyanagimoto/quarto-slides-typst/blob/main/slides/quarto-clean-typst/clean.qmd)!

0 commit comments

Comments
 (0)