138 lines
2.8 KiB
Typst
138 lines
2.8 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,
|
|
/// The footer of the page
|
|
footer: none,
|
|
/// Logo of the site
|
|
logo: none,
|
|
/// Array of element to add before the theme switcher on top of the page
|
|
nav-elements: 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.5rem;
|
|
margin-right: 0.5rem;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Typst keep inserting <p> tags everywhere */
|
|
& > p {
|
|
margin-top: 0.25rem;
|
|
margin-bottom: 0.25rem;
|
|
|
|
& > * {
|
|
margin-left: 0.5rem;
|
|
margin-right: 0.5rem;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
a {
|
|
/* Unstyle link */
|
|
color: inherit;
|
|
text-decoration: inherit;
|
|
/* cursor: inherit; // we want to keep the clickable cursor */
|
|
|
|
& > .icon {
|
|
&:hover {
|
|
box-shadow: inset 0px 0px 0.4em 0px var(--color-button-shadow);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
site-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 60em;
|
|
width: 100%;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
```
|
|
set figure(supplement: none)
|
|
html.body({
|
|
chtml.site-wrapper({
|
|
chtml.site-container({
|
|
html.nav({
|
|
if nav-elements != none { for elt in nav-elements { elt }}
|
|
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)
|
|
}
|
|
})
|
|
})
|
|
})
|
|
}
|