Mirror of https://github.com/roostorg/playground
github.com/roostorg/playground
Jekyllize it
+259
-192
+15
CONTRIBUTING.md
+15
CONTRIBUTING.md
···
1
+
# Contributing
2
+
3
+
Contributions welcome! Please open a PR for simple/straightforward changes, or open an issue to discuss things before writing code.
4
+
5
+
## Building
6
+
7
+
I recommend using `toolbox` for local development, especially if you're on Endless OS or Fedora Silverblue. See [this blog post](https://cassidyjames.com/blog/github-pages-jekyll-fedora-silverblue/) for details on how to get set up.
8
+
9
+
Once you're set up, build and serve locally with:
10
+
11
+
```shell
12
+
bundle exec jekyll serve --host 0.0.0.0
13
+
```
14
+
15
+
The site should now be available at http://0.0.0.0:4000/ on your local machine, and your local machine's IP address on your network—great for testing on mobile OSes.
+6
Gemfile
+6
Gemfile
+19
_config.yml
+19
_config.yml
···
1
+
title: ROOST Community Playground
2
+
description: A collection of community projects, experiments, and demos built on or from ROOST open source projects.
3
+
theme-color: "rgb(238, 238, 0)"
4
+
5
+
mastodon:
6
+
handle: "@roost@hachyderm.io"
7
+
url: "https://hachyderm.io/@roost"
8
+
bluesky:
9
+
handle: "@roost.tools"
10
+
url: "https://bsky.app/profile/roost.tools"
11
+
12
+
markdown: kramdown
13
+
kramdown:
14
+
syntax_highlighter: rouge
15
+
16
+
plugins:
17
+
- jekyll-feed
18
+
- jekyll-redirect-from
19
+
- jekyll-sitemap
+40
_layouts/default.html
+40
_layouts/default.html
···
1
+
---
2
+
layout: default
3
+
---
4
+
<!DOCTYPE html>
5
+
<html lang="en-us">
6
+
<head>
7
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+
<meta charset="UTF-8">
9
+
<meta name="theme-color" content="{{ site.theme-color }}" />
10
+
11
+
<title>{% if page.title %}{{ page.title }} ⋅ {% endif %}{{ site.title }}</title>
12
+
<meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
13
+
<meta property="og:site_name" content="{{ site.title }}" />
14
+
<meta itemprop="name" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
15
+
16
+
<meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}" />
17
+
<meta property="og:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}" />
18
+
<meta itemprop="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}" />
19
+
20
+
<link rel="me" href="{{ site.mastodon.url }}" />
21
+
<meta name="fediverse:creator" content="{{ site.mastodon.handle }}" />
22
+
23
+
<link rel="preconnect" href="https://fonts.googleapis.com">
24
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
25
+
<link href="https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
26
+
<link rel="stylesheet" type="text/css" media="all" href="style.css">
27
+
</head>
28
+
<body>
29
+
<header>
30
+
<nav>
31
+
<a href="https://roost.tools">← ROOST.tools main site</a>
32
+
<a href="https://github.com/roostorg/playground">Source Code</a>
33
+
</nav>
34
+
</header>
35
+
<main>
36
+
{{ content }}
37
+
</main>
38
+
</body>
39
+
</html>
40
+
+44
-192
index.html
+44
-192
index.html
···
1
-
<!DOCTYPE html>
2
-
<html lang="en-us">
3
-
<head>
4
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5
-
<meta charset="UTF-8" />
6
-
<title>Playground · ROOST (Robust Open Online Safety Tools)</title>
7
-
<link rel="preconnect" href="https://fonts.googleapis.com">
8
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
-
<link href="https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
10
-
<style>
11
-
:root {
12
-
--roost-gray: rgb(187, 193, 190);
13
-
--roost-dark: hsl(80, 22%, 13%);
14
-
--roost-yellow: rgb(238, 238, 0);
15
-
--roost-peach: rgb(247, 187, 128);
16
-
--roost-muddy: rgb(229, 217, 136);
17
-
18
-
--bg: white;
19
-
--fg: var(--roost-dark);
20
-
--font-sans: "Funnel Sans", sans-serif;
21
-
--font-display: "Funnel Display", sans-serif;
22
-
--max-width: 800px;
23
-
24
-
background-color: var(--bg);
25
-
color: var(--fg);
26
-
color-scheme: light dark;
27
-
font-family: var(--font-sans);
28
-
font-optical-sizing: auto;
29
-
font-style: normal;
30
-
scroll-behavior: smooth;
31
-
text-wrap: balance;
32
-
}
33
-
34
-
@media (prefers-color-scheme: dark) {
35
-
:root {
36
-
--bg: var(--roost-dark);
37
-
--fg: rgba(255, 255, 255, 0.9);
38
-
}
39
-
}
40
-
41
-
*, *::before, *::after {
42
-
box-sizing: border-box;
43
-
}
44
-
45
-
html, body {
46
-
margin: 0;
47
-
}
48
-
49
-
@media (min-width: 320px) {
50
-
body {
51
-
font-size: 15px;
52
-
}
53
-
}
54
-
55
-
@media (min-width: 600px) {
56
-
body {
57
-
font-size: 18px;
58
-
}
59
-
}
60
-
61
-
header {
62
-
background-color: var(--roost-dark);
63
-
color: var(--roost-yellow);
64
-
padding-block: 1em;
65
-
}
66
-
67
-
header nav {
68
-
display: flex;
69
-
justify-content: space-between;
70
-
margin-inline: auto;
71
-
max-width: var(--max-width);
72
-
padding-inline: 1rem;
73
-
}
74
-
75
-
header nav a {
76
-
color: inherit;
77
-
}
78
-
79
-
main {
80
-
margin-inline: auto;
81
-
max-width: var(--max-width);
82
-
padding-inline: 1rem;
83
-
}
84
-
85
-
h1, h2, h3, h4, h5, h6 {
86
-
font-family: var(--font-display);
87
-
}
88
-
89
-
h1 {
90
-
margin-top: 2em;
91
-
}
92
-
93
-
h1 + p {
94
-
font-size: 1.2em;
95
-
line-height: 1.33;
96
-
}
97
-
98
-
ul#projects {
99
-
display: flex;
100
-
flex-wrap: wrap;
101
-
gap: 1em;
102
-
list-style: none;
103
-
margin-block-start: 3em;
104
-
padding: 0;
105
-
}
106
-
107
-
#projects a {
108
-
--project-color: var(--roost-yellow);
109
-
border: 2px dashed var(--project-color);
110
-
border-radius: 1em;
111
-
color: inherit;
112
-
display: block;
113
-
padding: 1em 1.5em;
114
-
text-decoration: none;
115
-
}
116
-
117
-
#projects li:nth-child(3n-1) a {
118
-
--project-color: var(--roost-peach);
119
-
}
120
-
121
-
#projects li:nth-child(3n) a {
122
-
--project-color: var(--roost-muddy);
123
-
}
124
-
125
-
#projects a:hover,
126
-
#projects a:focus {
127
-
background-color: color-mix(var(--project-color) 10%, transparent);
128
-
}
129
-
130
-
#projects h2 {
131
-
margin: 0 auto 0.5em;
132
-
padding: 0;
133
-
}
134
-
135
-
#projects p {
136
-
margin: 0 auto;
137
-
padding: 0;
138
-
}
139
-
</style>
140
-
</head>
141
-
<body>
142
-
<header>
143
-
<nav>
144
-
<a href="https://roost.tools">← ROOST.tools main site</a>
145
-
<a href="https://github.com/roostorg/playground">Source Code</a>
146
-
</nav>
147
-
</header>
148
-
<main>
149
-
<h1>ROOST Playground</h1>
150
-
<p>A collection of community projects, experiments, and demos built on or from ROOST open source projects.</p>
151
-
<p>Projects on this page are not developed or endorsed by ROOST.</p>
152
-
<ul id="projects">
153
-
<li>
154
-
<a href="#">
155
-
<h2>Project name</h2>
156
-
<p>Brief project description</p>
157
-
</a>
158
-
</li>
159
-
<li>
160
-
<a href="#">
161
-
<h2>Different project name</h2>
162
-
<p>Brief but slightly longer project description</p>
163
-
</a>
164
-
</li>
165
-
<li>
166
-
<a href="#">
167
-
<h2>Another project name</h2>
168
-
<p>Briefer project description</p>
169
-
</a>
170
-
</li>
171
-
<li>
172
-
<a href="#">
173
-
<h2>Project name</h2>
174
-
<p>Brief project description</p>
175
-
</a>
176
-
</li>
177
-
<li>
178
-
<a href="#">
179
-
<h2>Project name</h2>
180
-
<p>Brief project description</p>
181
-
</a>
182
-
</li>
183
-
<li>
184
-
<a href="#">
185
-
<h2>Project name</h2>
186
-
<p>Brief project description</p>
187
-
</a>
188
-
</li>
189
-
</ul>
190
-
</main>
191
-
</body>
192
-
</html>
1
+
---
2
+
layout: default
3
+
---
193
4
5
+
<h1>ROOST Playground</h1>
6
+
<p>A collection of community projects, experiments, and demos built on or from ROOST open source projects.</p>
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
+
<ul id="projects">
9
+
<li>
10
+
<a href="#">
11
+
<h2>Project name</h2>
12
+
<p>Brief project description</p>
13
+
</a>
14
+
</li>
15
+
<li>
16
+
<a href="#">
17
+
<h2>Different project name</h2>
18
+
<p>Brief but slightly longer project description</p>
19
+
</a>
20
+
</li>
21
+
<li>
22
+
<a href="#">
23
+
<h2>Another project name</h2>
24
+
<p>Briefer project description</p>
25
+
</a>
26
+
</li>
27
+
<li>
28
+
<a href="#">
29
+
<h2>Project name</h2>
30
+
<p>Brief project description</p>
31
+
</a>
32
+
</li>
33
+
<li>
34
+
<a href="#">
35
+
<h2>Project name</h2>
36
+
<p>Brief project description</p>
37
+
</a>
38
+
</li>
39
+
<li>
40
+
<a href="#">
41
+
<h2>Project name</h2>
42
+
<p>Brief project description</p>
43
+
</a>
44
+
</li>
45
+
</ul>
+128
style.css
+128
style.css
···
1
+
:root {
2
+
--roost-gray: rgb(187, 193, 190);
3
+
--roost-dark: hsl(80, 22%, 13%);
4
+
--roost-yellow: rgb(238, 238, 0);
5
+
--roost-peach: rgb(247, 187, 128);
6
+
--roost-muddy: rgb(229, 217, 136);
7
+
8
+
--bg: white;
9
+
--fg: var(--roost-dark);
10
+
--font-sans: "Funnel Sans", sans-serif;
11
+
--font-display: "Funnel Display", sans-serif;
12
+
--max-width: 800px;
13
+
14
+
background-color: var(--bg);
15
+
color: var(--fg);
16
+
color-scheme: light dark;
17
+
font-family: var(--font-sans);
18
+
font-optical-sizing: auto;
19
+
font-style: normal;
20
+
scroll-behavior: smooth;
21
+
text-wrap: balance;
22
+
}
23
+
24
+
@media (prefers-color-scheme: dark) {
25
+
:root {
26
+
--bg: var(--roost-dark);
27
+
--fg: rgba(255, 255, 255, 0.9);
28
+
}
29
+
}
30
+
31
+
*, *::before, *::after {
32
+
box-sizing: border-box;
33
+
}
34
+
35
+
html, body {
36
+
margin: 0;
37
+
}
38
+
39
+
@media (min-width: 320px) {
40
+
body {
41
+
font-size: 15px;
42
+
}
43
+
}
44
+
45
+
@media (min-width: 600px) {
46
+
body {
47
+
font-size: 18px;
48
+
}
49
+
}
50
+
51
+
header {
52
+
background-color: var(--roost-dark);
53
+
color: var(--roost-yellow);
54
+
padding-block: 1em;
55
+
}
56
+
57
+
header nav {
58
+
display: flex;
59
+
justify-content: space-between;
60
+
margin-inline: auto;
61
+
max-width: var(--max-width);
62
+
padding-inline: 1rem;
63
+
}
64
+
65
+
header nav a {
66
+
color: inherit;
67
+
}
68
+
69
+
main {
70
+
margin-inline: auto;
71
+
max-width: var(--max-width);
72
+
padding-inline: 1rem;
73
+
}
74
+
75
+
h1, h2, h3, h4, h5, h6 {
76
+
font-family: var(--font-display);
77
+
}
78
+
79
+
h1 {
80
+
margin-top: 2em;
81
+
}
82
+
83
+
h1 + p {
84
+
font-size: 1.2em;
85
+
line-height: 1.33;
86
+
}
87
+
88
+
ul#projects {
89
+
display: flex;
90
+
flex-wrap: wrap;
91
+
gap: 1em;
92
+
list-style: none;
93
+
margin-block-start: 3em;
94
+
padding: 0;
95
+
}
96
+
97
+
#projects a {
98
+
--project-color: var(--roost-yellow);
99
+
border: 2px dashed var(--project-color);
100
+
border-radius: 1em;
101
+
color: inherit;
102
+
display: block;
103
+
padding: 1em 1.5em;
104
+
text-decoration: none;
105
+
}
106
+
107
+
#projects li:nth-child(3n-1) a {
108
+
--project-color: var(--roost-peach);
109
+
}
110
+
111
+
#projects li:nth-child(3n) a {
112
+
--project-color: var(--roost-muddy);
113
+
}
114
+
115
+
#projects a:hover,
116
+
#projects a:focus {
117
+
background-color: color-mix(var(--project-color) 10%, transparent);
118
+
}
119
+
120
+
#projects h2 {
121
+
margin: 0 auto 0.5em;
122
+
padding: 0;
123
+
}
124
+
125
+
#projects p {
126
+
margin: 0 auto;
127
+
padding: 0;
128
+
}