Mirror of https://github.com/roostorg/playground
github.com/roostorg/playground
Use data file, add tags
+29
-1
+6
_data/projects.yml
+6
_data/projects.yml
+11
index.html
+11
index.html
···
6
6
<p>A collection of community projects, experiments, and demos built on or from ROOST open source projects.</p>
7
7
<p>Projects on this page are not developed or endorsed by ROOST, and may not be intended for production use. Check each project’s documentation for details.</p>
8
8
<ul id="projects">
9
+
{% for project in site.data.projects %}
10
+
<li>
11
+
<a href="{{ project.url }}">
12
+
<h2>{{ project.title }}</h2>
13
+
<p>{{ project.description }}</p>
14
+
{% for tag in project.tags %}
15
+
<span class="tag {{ tag }}">{{ tag }}</span>
16
+
{% endfor %}
17
+
</a>
18
+
</li>
19
+
{% endfor %}
9
20
<li>
10
21
<a href="#">
11
22
<h2>Project name</h2>
+12
-1
style.css
+12
-1
style.css
···
9
9
--fg: var(--roost-dark);
10
10
--font-sans: "Funnel Sans", sans-serif;
11
11
--font-display: "Funnel Display", sans-serif;
12
-
--max-width: 800px;
12
+
--max-width: 1000px;
13
13
14
14
background-color: var(--bg);
15
15
color: var(--fg);
···
100
100
border-radius: 1em;
101
101
color: inherit;
102
102
display: block;
103
+
max-width: calc(var(--max-width) / 2);
103
104
padding: 1em 1.5em;
104
105
text-decoration: none;
105
106
}
···
126
127
margin: 0 auto;
127
128
padding: 0;
128
129
}
130
+
131
+
#projects .tag {
132
+
background-color: var(--project-color);
133
+
border-radius: 999px;
134
+
color: var(--roost-dark);
135
+
display: inline-block;
136
+
font-size: 0.8em;
137
+
padding: 0.125em 0.5em;
138
+
margin-top: 1em;
139
+
}