Add the main header component.
This commit is contained in:
parent
007e711c2c
commit
e58397a59f
|
@ -0,0 +1,64 @@
|
|||
#import "../utilities/icon-with-text.typ": icon_with_text
|
||||
#import "../utilities/localize.typ": localize
|
||||
|
||||
#let header(data, language, include_links, image_size: 6em, margin_size: 1em) = {
|
||||
let info_section = {
|
||||
block(
|
||||
// Set the height explicitly so it fills the container properly.
|
||||
height: 100%,
|
||||
stroke: (bottom: 1pt + black),
|
||||
align(
|
||||
horizon,
|
||||
// Use a 2x2 grid for the name and personal information.
|
||||
grid(
|
||||
columns: (1fr, 1fr),
|
||||
row-gutter: 0.5em,
|
||||
heading(data.name),
|
||||
..("email", "home", "phone").map(info_key => icon_with_text(
|
||||
icon: "../images/" + info_key + ".svg",
|
||||
icon_alt_text: localize(data, info_key, language),
|
||||
localize(data, info_key, language),
|
||||
)),
|
||||
),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
let links_section = if include_links {
|
||||
let link_keys = data.links.keys()
|
||||
|
||||
// Use a block to explicitly grow the size to fill the container.
|
||||
block(height: 100%, width: 100%, align(
|
||||
horizon,
|
||||
// Then use a grid to layout the links with equal spacing in between.
|
||||
grid(
|
||||
columns: link_keys.len(),
|
||||
column-gutter: 0.5em,
|
||||
// Render the any links with their icons.
|
||||
..link_keys.map(link_key => icon_with_text(
|
||||
icon: "../images/" + link_key + ".svg",
|
||||
icon_alt_text: localize(data, link_key, language),
|
||||
link(data.links.at(link_key), localize(data, link_key, language)),
|
||||
)),
|
||||
),
|
||||
))
|
||||
}
|
||||
|
||||
// Position the header image to the right of the main header content.
|
||||
grid(
|
||||
columns: (1fr, image_size),
|
||||
grid(
|
||||
// Space the rows out so the first is two-thirds of the image size and the
|
||||
// second is the remaining third.
|
||||
rows: (image_size * 67%, image_size * 33%),
|
||||
info_section,
|
||||
links_section,
|
||||
),
|
||||
// Use a box to round off the corners of the image.
|
||||
box(
|
||||
clip: true,
|
||||
radius: image_size / 4,
|
||||
image("../" + data.paths.header_image, height: image_size),
|
||||
),
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue