tweak icons framework and header banner
This commit is contained in:
Jean-Marie 'Histausse' Mineau
parent
afc446bc9e
commit
9d09803ddc
GPG key ID:
B66AEEDA9B645AD2
5 changed files with 177 additions and 60 deletions
|
|
@ -7,12 +7,12 @@
|
|||
#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
|
||||
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
|
||||
|
|
@ -38,27 +38,41 @@
|
|||
margin-left: auto;
|
||||
}
|
||||
& > * {
|
||||
margin-left: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
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() }
|
||||
})
|
||||
|
|
|
|||
130
lib/icons.typ
Normal file
130
lib/icons.typ
Normal file
|
|
@ -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",
|
||||
))
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
|
|
@ -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
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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)",
|
||||
))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue