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; + } } - home-symbol, home-symbol a { - display: flex; - justify-content: center; - align-items: center; - /*height: 100%;*/ - } - home-symbol a { + 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; + } + } } } @@ -96,8 +110,8 @@ html.body({ chtml.site-wrapper({ chtml.site-container({ - html.nav({ - if home != none { chtml.home-symbol(home) } + html.nav({ + if nav-elements != none { for elt in nav-elements { elt }} theme-picker() if menu != none { nav-menu-toggle() } }) diff --git a/lib/icons.typ b/lib/icons.typ new file mode 100644 index 0000000..24cdf7a --- /dev/null +++ b/lib/icons.typ @@ -0,0 +1,130 @@ +// Need inline svg for css color control, so no `image` element :( +#let menu-icon = html.elem( + "svg", + attrs: ( + class: "menu-icon icon", + //width: "24", + //height: "24", + style: "width: 2em; height: 2em;", + fill: "currentcolor", + viewBox: "0 0 24 24", + xmlns: "http://www.w3.org/2000/svg", + aria-hidden: "true", // Assume decorative icons inside element with addequate label + ), + html.elem("path", attrs: ( + clip-rule: "evenodd", + fill-rule: "evenodd", + d: "M3 6.75A.75.75.0 013.75 6h16.5a.75.75.0 010 1.5H3.75A.75.75.0 013 6.75zM3 12a.75.75.0 01.75-.75h16.5a.75.75.0 010 1.5H3.75A.75.75.0 013 12zm0 5.25a.75.75.0 01.75-.75h16.5a.75.75.0 010 1.5H3.75A.75.75.0 013 17.25z" + )) +) +#let close-icon = html.elem( + "svg", + attrs: ( + class: "close-icon icon", + //width: "24", + //height: "24", + style: "width: 2em; height: 2em;", + fill: "currentcolor", + viewBox: "0 0 24 24", + xmlns: "http://www.w3.org/2000/svg", + aria-hidden: "true", // Assume decorative icons inside element with addequate label + ), + html.elem("path", attrs: ( + clip-rule: "evenodd", + fill-rule: "evenodd", + d: "M5.47 5.47a.75.75.0 011.06.0L12 10.94l5.47-5.47a.75.75.0 111.06 1.06L13.06 12l5.47 5.47a.75.75.0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75.0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75.0 010-1.06z" + )) +) + +#let home-icon = html.elem( + "svg", + attrs: ( + class: "home-icon icon", + //width: "24", + //height: "24", + style: "width: 2em; height: 2em;", + stroke: "currentcolor", + fill-opacity: "0", + viewBox: "0 0 24 24", + xmlns: "http://www.w3.org/2000/svg", + aria-hidden: "true", // Assume decorative icons inside element with addequate label + ), { + ```raw-css + .home-icon { + padding: 0.2em; + border-radius: 0.5em; + } + ``` + html.elem("path", attrs: ( + stroke-width: "2", + stroke-linecap: "round", + d: "M22 22L2 22" + )) + html.elem("path", attrs: ( + stroke-width: "2", + stroke-linecap: "round", + d: "M2 11L10.1259 4.49931C11.2216 3.62279 12.7784 3.62279 13.8741 4.49931L22 11" + )) + html.elem("path", attrs: ( + stroke-width: "2", + stroke-linecap: "round", + d: "M15.5 5.5V3.5C15.5 3.22386 15.7239 3 16 3H18.5C18.7761 3 19 3.22386 19 3.5V8.5" + )) + html.elem("path", attrs: ( + stroke-width: "2", + stroke-linecap: "round", + d: "M4 22V9.5" + )) + html.elem("path", attrs: ( + stroke-width: "2", + stroke-linecap: "round", + d: "M20 22V9.5" + )) + html.elem("path", attrs: ( + stroke-width: "2", + d: "M15 22V17C15 15.5858 15 14.8787 14.5607 14.4393C14.1213 14 13.4142 14 12 14C10.5858 14 9.87868 14 9.43934 14.4393C9 14.8787 9 15.5858 9 17V22" + )) + } +) + +#let rss-icon = html.elem( + "svg", + attrs: ( + class: "rss-icon icon", + //width: "24", + //height: "24", + style: "width: 2em; height: 2em;", + stroke: "currentcolor", + fill: "currentcolor", + //fill-opacity: "0", + viewBox: "0 0 24 24", + xmlns: "http://www.w3.org/2000/svg", + aria-hidden: "true", // Assume decorative icons inside element with addequate label + ), { + ```raw-css + .rss-icon { + padding: 0.2em; + border-radius: 0.5em; + } + ``` + html.elem("circle", attrs: ( + cx: "6", + cy: "18", + r: "3", + )) + html.elem("path", attrs: ( + stroke-width: "3", + fill: "none", + stroke-linecap: "round", + d: "M3 10a11 11 0 0 1 11 11", + )) + html.elem("path", attrs: ( + stroke-width: "3", + fill: "none", + stroke-linecap: "round", + d: "M3 4a17 17 0 0 1 17 17", + )) + } +) + + diff --git a/lib/main.typ b/lib/main.typ index 4004770..93cefae 100644 --- a/lib/main.typ +++ b/lib/main.typ @@ -3,6 +3,7 @@ #import "./html_utils.typ": html_show #import "./summary.typ": summary, card-list #import "./rss.typ": rss +#import "./icons.typ" /// Mail template function @@ -31,8 +32,8 @@ /// List of related sites for metadata me-links: (), //-- Body -- - /// Home button, more or less expect an image in a link - home: none, + /// Array of element to add on the top left of the page + nav-elements: none, /// Navigation menu content, css style expect a list of links, but it can /// be anything menu: none, @@ -61,10 +62,10 @@ me-links: me-links ) html_body( - home: home, logo: logo, header: header, footer: footer, + nav-elements: nav-elements, menu: menu, body ) diff --git a/lib/nav_menu.typ b/lib/nav_menu.typ index 66a4763..4af3b62 100644 --- a/lib/nav_menu.typ +++ b/lib/nav_menu.typ @@ -1,38 +1,5 @@ #import "./custom_html.typ" as chtml - -// Need inline svg for css color control, so no `image` element :( -#let menu-icon = html.elem( - "svg", - attrs: ( - //width: "24", - //height: "24", - style: "width: 2em; height: 2em;", - fill: "currentcolor", - viewBox: "0 0 24 24", - xmlns: "http://www.w3.org/2000/svg" - ), - html.elem("path", attrs: ( - clip-rule: "evenodd", - fill-rule: "evenodd", - d: "M3 6.75A.75.75.0 013.75 6h16.5a.75.75.0 010 1.5H3.75A.75.75.0 013 6.75zM3 12a.75.75.0 01.75-.75h16.5a.75.75.0 010 1.5H3.75A.75.75.0 013 12zm0 5.25a.75.75.0 01.75-.75h16.5a.75.75.0 010 1.5H3.75A.75.75.0 013 17.25z" - )) -) -#let close-icon = html.elem( - "svg", - attrs: ( - //width: "24", - //height: "24", - style: "width: 2em; height: 2em;", - fill: "currentcolor", - viewBox: "0 0 24 24", - xmlns: "http://www.w3.org/2000/svg" - ), - html.elem("path", attrs: ( - clip-rule: "evenodd", - fill-rule: "evenodd", - d: "M5.47 5.47a.75.75.0 011.06.0L12 10.94l5.47-5.47a.75.75.0 111.06 1.06L13.06 12l5.47 5.47a.75.75.0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75.0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75.0 010-1.06z" - )) -) +#import "./icons.typ": menu-icon, close-icon /// Buttons to toggle the navigation menu. /// aria-label is the accessibility label for the toggle. diff --git a/test_template/main.typ b/test_template/main.typ index 89ac7b3..4c71c42 100644 --- a/test_template/main.typ +++ b/test_template/main.typ @@ -18,14 +18,6 @@ ) #show: webpage.with( ..summ.template-args, - 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.", @@ -40,6 +32,19 @@ #sym.copyright #document.date.display("[year]") Histausse \ Please don't train AI on my stuff without explicit permission ], + nav-elements: ( + /* + 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, + ) + ),*/ + html.a(href: "http://test.example.com", aria-label: "Home", icons.home-icon), // /!\ aria-label is important for accessibility /!\ + html.a(href: "http://test.example.com/feed.rss", aria-label: "RSS feed", icons.rss-icon), + ), menu: [ - #link("example.com")[Hello Void!] - #link("example.com")[Demons] @@ -191,7 +196,7 @@ thead { "TeTyTe test typst template", "https://test.example.com", "Test of the TTT template", - "https://test.example.com/rss.xml", + "https://test.example.com/rss.rss", summaries, webmaster: "me@example.com (Me)", ))