80 lines
1.7 KiB
Typst
80 lines
1.7 KiB
Typst
#import "./custom_html.typ" as chtml
|
|
#import "./theme_picker.typ": theme_picker
|
|
#import "./theme_colors.typ": theme_colors_css
|
|
|
|
/// Make the body of the webpage
|
|
#let html_body(
|
|
/// The visible header of the page
|
|
header: [],
|
|
/// Logo of the site, must be an url (TODO)
|
|
logo,
|
|
/// Logo alt-text
|
|
logo_alt,
|
|
body
|
|
) = {
|
|
theme_colors_css
|
|
```raw-css
|
|
site-wrapper {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
justify-content: center;
|
|
|
|
nav {
|
|
display: flex;
|
|
theme-picker {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
site-container {
|
|
width: 1050px;
|
|
padding: 0 20px;
|
|
|
|
header {
|
|
// display: flex
|
|
// flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px 5px;
|
|
border-bottom: solid 1px var(--color-border);
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
|
|
code-block {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
pre {
|
|
width: min-content;
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
background-color: var(--color-code-bg);
|
|
box-shadow: inset 0px 0px 5px 0px #000;
|
|
}
|
|
}
|
|
}
|
|
```
|
|
html.body({
|
|
chtml.site-wrapper({
|
|
chtml.site-container({
|
|
html.nav({
|
|
theme_picker()
|
|
})
|
|
html.header(style: "display: flex; flex-wrap: wrap-reverse;", {
|
|
html.hgroup({
|
|
header
|
|
})
|
|
// typst `image` function embed the image in the html, which is not great,
|
|
// and logo is also used for icon, so it's necessarily an url
|
|
if logo != none {
|
|
html.img(src: logo, alt: logo_alt, height: 100) // TODO: height bad
|
|
}
|
|
})
|
|
body
|
|
})
|
|
})
|
|
})
|
|
}
|