130 lines
3.5 KiB
Typst
130 lines
3.5 KiB
Typst
// 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",
|
|
))
|
|
}
|
|
)
|
|
|
|
|