templates for self-hosting game jams (or any other kind of jam tbh)
veryroundbird.house
1@import url('https://fonts.googleapis.com/css2?family=Knewave&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
2/* if you want to use different fonts, you can use other stuff from google fonts
3 if you don't want to use google, you may want to look into hosting your own fonts locally */
4
5
6/* display variables! skip the images if you don't want them */
7:root {
8 --background: #ECEBDE;
9 --foreground: #000000;
10 --accent: #A59D84;
11 --mainfont: 'Work Sans', Helvetica, Arial, sans-serif;
12 --headingfont: 'Knewave', 'Arial Black', sans-serif;
13 --roundedCorners: 0px;
14
15 --pageBgImage: url();
16 --contentBgImage: url();
17}
18
19* {
20 box-sizing: border-box;
21}
22
23body {
24 background-color: var(--background);
25 background-image: url(--pageBgImage);
26 color: var(--foreground);
27 font-family: var(--mainfont);
28 font-size: 1em;
29}
30
31a {
32 color: var(--accent);
33 text-decoration: underline;
34}
35
36a:hover {
37 color: color-mix(in srgb-linear, var(--accent), #000000 50%);
38}
39
40.icon {
41 width: 16px;
42 height: 16px;
43 display: inline-block;
44 margin-right: 5px;
45}
46
47#page {
48 max-width: 960px;
49 margin: 50px auto;
50 background-color: color-mix(in srgb-linear, var(--background), #FFFFFF 50%);
51 background-image: var(--contentBgImage);
52 border-radius: var(--roundedCorners);
53}
54
55body.wide #page {
56 max-width: none;
57 margin: 0;
58}
59
60header {
61 padding: 20px 20px 0;
62 position: relative;
63 background-color: color-mix(in srgb-linear, var(--background), #FFFFFF 25%);
64}
65
66header h1 {
67 font-size: 2.5em;
68 font-weight: bold;
69 margin: 0;
70}
71
72header .hosted {
73 margin: 0;
74}
75
76header .joined,
77header .entries {
78 text-align: center;
79 position: absolute;
80 top: 20px;
81 right: 20px;
82}
83
84header .joined .count,
85header .entries .count {
86 font-size: 2.25em;
87 display: block;
88}
89
90header .joined .caption,
91header .entries .caption {
92 font-size: .8em;c
93 display: block;
94 color: color-mix(in srgb-linear, var(--foreground) #FFFFFF, 25%);
95}
96
97header nav {
98 margin-top: 20px;
99 padding-bottom: 10px;
100}
101
102header nav ul {
103 margin-bottom: 0;
104 display: flex;
105 gap: 10px;
106 list-style: none;
107 padding: 0;
108}
109
110header nav ul li a {
111 text-decoration: none;
112 padding: 5px 0;
113 border-bottom: 5px transparent solid;
114 color: var(--foreground);
115}
116
117header nav ul li a.current,
118header nav ul li a:hover {
119 border-bottom: 5px var(--accent) solid;
120 color: var(--foreground);
121}
122
123main {
124 padding: 20px;
125 text-align: center;
126}
127
128main .clock {
129 border: 1px var(--accent) solid;
130 border-radius: 5px;
131 display: inline-grid;
132 grid-template-areas: "date date" "countdown join";
133 margin: 50px auto;
134}
135
136main .clock .dates {
137 border-bottom: 1px var(--accent) solid;
138 padding: 10px;
139 grid-area: date;
140 text-align: center;
141}
142
143main .clock .countdown {
144 grid-area: countdown;
145 border-right: 1px var(--accent) solid;
146 padding: 20px;
147 text-align: right;
148 display: flex;
149 align-items: center;
150 justify-content: flex-end;
151}
152
153main .clock .countdown .counters {
154 display: flex;
155 align-items: stretch;
156}
157
158main .clock .countdown .counters > div {
159 padding: 10px;
160 border-right: 2px var(--accent) solid;
161 display: flex;
162 flex-direction: column;
163 justify-content: center;
164 align-items: center;
165 white-space: pre;
166}
167
168main .clock .countdown .counters > div:last-child {
169 border-right: none;
170}
171
172main .clock .countdown .counters span {
173 display: block;
174 text-align: center;
175}
176
177main .clock .countdown .counters span.num {
178 font-weight: bold;
179}
180
181main .clock .countdown .counters span.caption {
182 font-size: .8em;
183 font-style: italic;
184}
185
186main .clock .join {
187 display: flex;
188 align-items: center;
189 justify-content: flex-start;
190 padding: 20px;
191}
192
193main .clock .joinbtn {
194 padding: 10px 20px;
195 font-size: 1.25em;
196 font-weight: bold;
197 border-radius: 5px;
198 background-color: var(--accent);
199 color: var(--background);
200 text-decoration: none;
201 white-space: pre;
202}
203
204main .clock .joinbtn:hover {
205 background-color: color-mix(in srgb-linear, var(--accent), #000000 50%);
206}
207
208main .content {
209 text-align: left;
210}
211
212footer {
213 text-align: center;
214 font-size: .8em;
215 padding: 5px 10px;
216 margin-top: 20px;
217}
218
219footer a {
220 text-decoration: none;
221}
222
223.submissions main {
224 display: grid;
225 grid-template-areas: "filters list";
226 grid-template-columns: 250px 1fr;
227 gap: 20px;
228}
229
230.submissions #filters {
231 grid-area: filters;
232 text-align: left;
233}
234
235.submissions #filters #tags {
236 display: flex;
237 flex-wrap: wrap;
238 gap: 5px;
239 justify-content: flex-start;
240}
241
242.submissions #filters #tags button {
243 white-space: pre;
244}
245
246.submissions #filters details {
247 margin-bottom: 10px;
248}
249
250.submissions #filters details summary,
251p.label {
252 font-size: .8em;
253 color: color-mix(in srgb-linear, var(--foreground), var(--background) 10%);
254 padding: 5px 0;
255 margin-bottom: 0;
256}
257
258.submissions #filters details ul {
259 list-style: none;
260 margin: 0;
261 padding: 0;
262}
263
264.submissions #filters ul#sorts {
265 list-style: none;
266 margin: 0 0 10px;
267 padding: 0;
268}
269
270.submissions #filters ul#sorts li button {
271 border: none;
272 background-color: transparent;
273 color: var(--foreground);
274 border-radius: 0;
275 font-family: inherit;
276 font-size: inherit;
277 font-size: .9em;
278}
279
280.submissions #filters ul#sorts li button.sort-active {
281 color: color-mix(in srgb-linear, var(--accent), #000000 10%);
282 font-weight: bold;
283}
284
285.submissions #filters ul#sorts li button img {
286 width: 16px;
287 height: 16px;
288 margin-right: 5px;
289 display: inline-block;
290 vertical-align: middle;
291}
292
293.submissions #filters .afs-btn-filter {
294 padding: 3px 0;
295 border: none;
296 border-radius: 0;
297}
298
299.submissions #filters .afs-btn-filter.active {
300 color: color-mix(in srgb-linear, var(--accent), #000000 10%);
301 background-color: transparent;
302 font-weight: bold;
303}
304
305.submissions #filters .afs-btn-filter.active img {
306 fill: color-mix(in srgb-linear, var(--accent), #000000 10%);
307}
308
309.submissions #filters .afs-filter-search {
310 width: 100%;
311 padding: 0.5rem;
312 border: 1px solid var(--accent);
313 border-radius: 0.25rem;
314 font-size: 0.875rem;
315 color: var(--foreground);
316 transition: border-color 0.2s ease;
317 margin-bottom: 10px;
318}
319
320.submissions #filters .afs-filter-counter {
321 text-align: center;
322 font-style: italic;
323 font-size: .9em;
324}
325
326.submissions #list {
327 display: grid;
328 grid-area: list;
329 grid-template-columns: repeat(4, 1fr);
330 grid-template-rows: auto;
331 gap: 10px;
332}
333
334.submissions #list .item {
335 text-align: left;
336}
337
338.submissions #list .item h3 {
339 margin: 0;
340 font-size: 1.25em;
341}
342
343.submissions #list .item h3 a {
344 color: var(--foreground);
345 text-decoration: none;
346}
347
348.submissions #list .item h3 a:hover {
349 text-decoration: underline;
350}
351
352.submissions #list .item .thumb {
353 position: relative;
354 padding-top: 75%;
355}
356
357.submissions #list .item .thumb img {
358 position: absolute;
359 top: 0;
360 left: 0;
361 width: 100%;
362 height: 100%;
363 object-fit: cover;
364}
365
366.submissions #list .item .authors {
367 font-size: .9em;
368 margin: 5px 0;
369}
370
371.submissions #list .item .authors a {
372 color: color-mix(in srgb-linear, var(--foreground), #FFFFFF 10%);
373 text-decoration: none;
374}
375
376.submissions #list .item .authors a:hover {
377 text-decoration: underline;
378}
379
380.submissions #list .item .blurb {
381 margin-top: 5px;
382 font-size: .8em;
383 color: color-mix(in srgb-linear, var(--foreground), #FFFFFF 10%);
384}