diff --git a/lib/custom_html.typ b/lib/custom_html.typ index 509259f..8e08c2f 100644 --- a/lib/custom_html.typ +++ b/lib/custom_html.typ @@ -16,3 +16,4 @@ html.elem("icon-container", attrs: args.named(), body) } #let nav-menu = html.elem.with("nav-menu") +#let home-symbol = html.elem.with("home-symbol") diff --git a/lib/html_body.typ b/lib/html_body.typ index d5e4d1c..f4d4a53 100644 --- a/lib/html_body.typ +++ b/lib/html_body.typ @@ -7,6 +7,8 @@ #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 @@ -39,6 +41,20 @@ margin-left: 0.25rem; margin-right: 0.25rem; } + + /* Typst keep inserting
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 { @@ -48,8 +64,10 @@ padding: 0 20px; header { - // display: flex - // flex-wrap: wrap; + /* + * display: flex + * flex-wrap: wrap; + */ justify-content: space-between; align-items: center; padding: 15px 5px; @@ -87,6 +105,7 @@ chtml.site-wrapper({ chtml.site-container({ html.nav({ + if home != none { chtml.home-symbol(home) } theme-picker() if menu != none { nav-menu-toggle() } }) diff --git a/lib/main.typ b/lib/main.typ index 59f85a7..fa4ec47 100644 --- a/lib/main.typ +++ b/lib/main.typ @@ -27,6 +27,8 @@ /// List of related sites for metadata me-links: (), //-- Body -- + /// Home button, more or less expect an image in a link + home: none, /// Navigation menu content, css style expect a list of links, but it can /// be anything menu: none, @@ -53,6 +55,7 @@ me-links: me-links ) html_body( + home: home, logo: logo, header: header, footer: footer, diff --git a/test_template/main.typ b/test_template/main.typ index 7f55e60..52624cb 100644 --- a/test_template/main.typ +++ b/test_template/main.typ @@ -6,8 +6,17 @@ description: "Test of the TTT template", ) + #show: webpage.with( "http://test.example.com", + home: link( + "http://test.example.com", + image( + "./platypus.png", + alt: "A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.", + height: 2em, + ) + ), logo: image( "./platypus.png", alt: "A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.",