131 lines
2.6 KiB
Typst
131 lines
2.6 KiB
Typst
#import "./custom_html.typ" as chtml
|
|
#import "./theme_picker.typ": theme-picker
|
|
#import "./theme_colors.typ": theme-colors-css
|
|
#import "./nav_menu.typ": nav-menu, nav-menu-toggle
|
|
|
|
/// Make the body of the webpage
|
|
#let html_body(
|
|
/// The visible header of the page
|
|
header: none,
|
|
/// Home button, more or less expect an image in a link
|
|
home: none,
|
|
/// The footer of the page
|
|
footer: none,
|
|
/// Logo of the site
|
|
logo: none,
|
|
/// Navigation menu content, css style expect a list
|
|
menu: none,
|
|
body
|
|
) = {
|
|
theme-colors-css
|
|
```raw-css
|
|
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
site-wrapper {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
justify-content: center;
|
|
|
|
nav {
|
|
display: flex;
|
|
theme-picker {
|
|
margin-left: auto;
|
|
}
|
|
& > * {
|
|
margin-left: 0.25rem;
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
/* Typst keep inserting <p> tags everywhere */
|
|
& > p {
|
|
margin-top: 0.25rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
home-symbol, home-symbol a {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/*height: 100%;*/
|
|
|
|
}
|
|
}
|
|
|
|
site-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
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;
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
}
|
|
|
|
footer {
|
|
border-top: 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({
|
|
if home != none { chtml.home-symbol(home) }
|
|
theme-picker()
|
|
if menu != none { nav-menu-toggle() }
|
|
})
|
|
if menu != none {
|
|
nav-menu(menu)
|
|
}
|
|
if header != none or logo != none {
|
|
html.header(style: "display: flex; flex-wrap: wrap-reverse;", {
|
|
html.hgroup({
|
|
header
|
|
})
|
|
logo
|
|
})
|
|
}
|
|
|
|
html.main(body)
|
|
|
|
if footer != none {
|
|
html.footer(footer)
|
|
}
|
|
})
|
|
})
|
|
})
|
|
}
|