Mirror of https://github.com/roostorg/playground
github.com/roostorg/playground
Mockup of playground landing page
+186
+186
index.html
+186
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
+
margin-inline: auto;
69
+
max-width: var(--max-width);
70
+
padding-inline: 1rem;
71
+
}
72
+
73
+
header nav a {
74
+
color: inherit;
75
+
}
76
+
77
+
main {
78
+
margin-inline: auto;
79
+
max-width: var(--max-width);
80
+
padding-inline: 1rem;
81
+
}
82
+
83
+
h1, h2, h3, h4, h5, h6 {
84
+
font-family: var(--font-display);
85
+
}
86
+
87
+
h1 {
88
+
margin-top: 2em;
89
+
}
90
+
91
+
h1 + p {
92
+
font-size: 1.2em;
93
+
line-height: 1.33;
94
+
}
95
+
96
+
ul#projects {
97
+
list-style: none;
98
+
padding: 0;
99
+
}
100
+
101
+
#projects a {
102
+
--project-color: var(--roost-yellow);
103
+
border: 2px dashed var(--project-color);
104
+
border-radius: 1em;
105
+
color: inherit;
106
+
display: block;
107
+
margin-block: 2em;
108
+
padding: 1em 1.5em;
109
+
text-decoration: none;
110
+
}
111
+
112
+
#projects li:nth-child(3n-1) a {
113
+
--project-color: var(--roost-peach);
114
+
}
115
+
116
+
#projects li:nth-child(3n) a {
117
+
--project-color: var(--roost-muddy);
118
+
}
119
+
120
+
#projects a:hover {
121
+
background-color: color-mix(var(--project-color) 10%, transparent);
122
+
}
123
+
124
+
#projects h2 {
125
+
margin: 0 auto 0.5em;
126
+
padding: 0;
127
+
}
128
+
129
+
#projects p {
130
+
margin: 0 auto;
131
+
padding: 0;
132
+
}
133
+
</style>
134
+
</head>
135
+
<body>
136
+
<header>
137
+
<nav>
138
+
<a href="https://roost.tools">← ROOST.tools main site</a>
139
+
</nav>
140
+
</header>
141
+
<main>
142
+
<h1>ROOST Playground</h1>
143
+
<p>A collection of community projects, experiments, and demos built on or from ROOST open source projects.</p>
144
+
<p>Projects on this page are not developed or endorsed by ROOST.</p>
145
+
<ul id="projects">
146
+
<li>
147
+
<a href="#">
148
+
<h2>Project name</h2>
149
+
<p>Brief project description</p>
150
+
</a>
151
+
</li>
152
+
<li>
153
+
<a href="#">
154
+
<h2>Project name</h2>
155
+
<p>Brief project description</p>
156
+
</a>
157
+
</li>
158
+
<li>
159
+
<a href="#">
160
+
<h2>Project name</h2>
161
+
<p>Brief project description</p>
162
+
</a>
163
+
</li>
164
+
<li>
165
+
<a href="#">
166
+
<h2>Project name</h2>
167
+
<p>Brief project description</p>
168
+
</a>
169
+
</li>
170
+
<li>
171
+
<a href="#">
172
+
<h2>Project name</h2>
173
+
<p>Brief project description</p>
174
+
</a>
175
+
</li>
176
+
<li>
177
+
<a href="#">
178
+
<h2>Project name</h2>
179
+
<p>Brief project description</p>
180
+
</a>
181
+
</li>
182
+
</ul>
183
+
</main>
184
+
</body>
185
+
</html>
186
+