-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.njk
89 lines (80 loc) · 2.61 KB
/
index.njk
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IndieWeb icons</title>
<meta name="description" content="{{ pkg.description }}">
<meta property="og:title" name="description" content="IndieWeb icons">
<meta property="og:description" name="description" content="{{ pkg.description }}">
<meta property="og:image" content="https://repository-images.githubusercontent.com/711834387/87d98397-eb61-4017-95f4-593c057b090d">
<style>
body {
font: 1rem/1.5 system-ui, sans-serif;
margin: 1rem;
min-height: 100vh;
}
body, h1, h2, h3, p, figure {
margin-block-end: 0;
margin-block-start: 0.5em;
}
ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
}
h2 {
margin-block-end: 0;
margin-block-start: 2em;
}
figure {
align-items: center;
display: flex;
flex-direction: column;
& svg {
block-size: 4rem;
color: var(--color);
fill: currentcolor;
inline-size: 4rem;
padding: 0.5em;
}
}
figcaption {
font: icon;
}
footer {
padding-block: 2rem;
}
</style>
</head>
<body>
<header>
<h1>IndieWeb icons</h1>
</header>
<main>
<p>Building block icons are used to quickly identify IndieWeb <a href="https://indieweb.org/building_blocks">building block</a> practices, features, and standards.</p>
<p>This page provides a preview of icons in the 2023 proposal.</p>
<p><a href="https://indieweb.org/Building_block_icons">Read more about this proposal and submit feedback on these icons on the IndieWeb wiki</a>.</p>
{%- for c, category in icons %}
<h2>{{ category.title }}</h2>
<p>{{ category.description }}</p>
<ul>
{%- for i, icon in category.icons %}
<li>
{%- set path = "icons/" + c + "/" + i + ".svg" %}
<figure style="--color: #{{ category.color or icon.color }}">
{% set svg %}{% include path %}{% endset %}{{ svg | replace("\n", "") | replace(" ", "") | safe }}
<figcaption>
<a href="{{ pkg.homepage }}/blob/main/{{ path }}">{{ icon.name }}</a>
</figcaption>
</article>
</li>
{%- endfor %}
</ul>
{%- endfor %}
</main>
<footer>
<small>Icons released under a <a rel="licence" href="{{ metadata.homepage }}/LICENSE">{{ pkg.license }} license</a></small>
</footer>
</body>
</html>