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/* display variables! skip the images if you don't want them */
5:root {
6 --background: #ECEBDE;
7 --foreground: #000000;
8 --accent: #A59D84;
9 --mainfont: "Work Sans", Helvetica, Arial, sans-serif;
10 --headingfont: "Knewave", "Arial Black", sans-serif;
11 --roundedCorners: 0px;
12 --pageBgImage: url();
13 --contentBgImage: url();
14}
15
16* {
17 box-sizing: border-box;
18}
19
20body {
21 background-color: var(--background);
22 background-image: url(--pageBgImage);
23 color: var(--foreground);
24 font-family: var(--mainfont);
25 font-size: 1em;
26}
27
28a {
29 color: var(--accent);
30 text-decoration: underline;
31}
32a:hover {
33 color: color-mix(in srgb-linear, var(--accent), #000000 50%);
34}
35
36.icon {
37 width: 16px;
38 height: 16px;
39 text-indent: -999px;
40 overflow: hidden;
41 display: inline-block;
42 vertical-align: middle;
43 margin-right: 5px;
44 background-color: var(--foreground);
45}
46.icon.web {
47 mask: url(../images/web.svg);
48}
49.icon.windows {
50 mask: url(../images/windows.svg);
51}
52.icon.macos {
53 mask: url(../images/macos.svg);
54}
55.icon.linux {
56 mask: url(../images/linux.svg);
57}
58.icon.android {
59 mask: url(../images/android.svg);
60}
61.icon.random {
62 mask: url(../images/random.svg);
63}
64.icon.sort-asc {
65 mask: url(../images/sort-asc.svg);
66}
67.icon.sort-desc {
68 mask: url(../images/sort-desc.svg);
69}
70.active .icon {
71 background-color: var(--accent);
72}
73
74.btn {
75 padding: 5px 10px;
76 font-size: 1em;
77 font-weight: bold;
78 border-radius: 5px;
79 background-color: var(--accent);
80 color: var(--background);
81 text-decoration: none;
82 white-space: pre;
83}
84.btn:hover {
85 background-color: color-mix(in srgb-linear, var(--accent), #000000 50%);
86 color: var(--background);
87}
88
89#page {
90 max-width: 960px;
91 margin: 50px auto;
92 background-color: color-mix(in srgb-linear, var(--background), #FFFFFF 50%);
93 background-image: var(--contentBgImage);
94 border-radius: var(--roundedCorners);
95}
96body.wide #page {
97 max-width: none;
98 margin: 0;
99}
100
101header {
102 padding: 20px 20px 0;
103 position: relative;
104 background-color: color-mix(in srgb-linear, var(--background), #FFFFFF 25%);
105}
106header h1 {
107 font-size: 2.5em;
108 font-weight: bold;
109 margin: 0;
110}
111header .hosted {
112 margin: 0;
113}
114header .joined,
115header .entries {
116 text-align: center;
117 position: absolute;
118 top: 20px;
119 right: 20px;
120}
121header .joined .count,
122header .entries .count {
123 font-size: 2.25em;
124 display: block;
125}
126header .joined .caption,
127header .entries .caption {
128 font-size: 0.8em;
129 display: block;
130 color: color-mix(in srgb-linear, var(--foreground) #FFFFFF, 25%);
131}
132header nav {
133 margin-top: 20px;
134 padding-bottom: 10px;
135}
136header nav ul {
137 margin-bottom: 0;
138 display: flex;
139 gap: 10px;
140 list-style: none;
141 padding: 0;
142}
143header nav ul li a {
144 text-decoration: none;
145 padding: 5px 0;
146 border-bottom: 5px transparent solid;
147 color: var(--foreground);
148}
149header nav ul li a.current, header nav ul li a:hover {
150 border-bottom: 5px var(--accent) solid;
151 color: var(--foreground);
152}
153
154main {
155 padding: 20px;
156 text-align: center;
157}
158.submissions main {
159 display: grid;
160 grid-template-areas: "filters list";
161 grid-template-columns: 250px 1fr;
162}
163
164footer {
165 text-align: center;
166 font-size: 0.8em;
167 padding: 5px 10px;
168 margin-top: 20px;
169}
170footer a {
171 text-decoration: none;
172}
173
174[popover] {
175 position: fixed;
176 z-index: 99;
177 max-width: 90%;
178 max-height: 90%;
179}
180
181[popover]:-internal-popover-in-top-layer::backdrop {
182 background-color: rgba(0, 0, 0, 0.5);
183}
184
185.clock {
186 border: 1px var(--accent) solid;
187 border-radius: 5px;
188 display: inline-grid;
189 grid-template-areas: "date date" "countdown join";
190 margin: 50px auto;
191}
192.clock .dates {
193 border-bottom: 1px var(--accent) solid;
194 padding: 10px;
195 grid-area: date;
196 text-align: center;
197}
198.clock .countdown {
199 grid-area: countdown;
200 border-right: 1px var(--accent) solid;
201 padding: 20px;
202 text-align: right;
203 display: flex;
204 align-items: center;
205 justify-content: flex-end;
206}
207.clock .countdown .counters {
208 display: flex;
209 align-items: stretch;
210}
211.clock .countdown .counters > div {
212 padding: 10px;
213 border-right: 2px var(--accent) solid;
214 display: flex;
215 flex-direction: column;
216 justify-content: center;
217 align-items: center;
218 white-space: pre;
219}
220.clock .countdown .counters > div:last-child {
221 border-right: none;
222}
223.clock .countdown .counters span {
224 display: block;
225 text-align: center;
226}
227.clock .countdown .counters span.num {
228 font-weight: bold;
229}
230.clock .countdown .counters span.caption {
231 font-size: 0.8em;
232 font-style: italic;
233}
234.clock .join {
235 display: flex;
236 align-items: center;
237 justify-content: flex-start;
238 padding: 20px;
239}
240.clock .joinbtn {
241 padding: 10px 20px;
242 font-size: 1.25em;
243 font-weight: bold;
244 border-radius: 5px;
245 background-color: var(--accent);
246 color: var(--background);
247 text-decoration: none;
248 white-space: pre;
249}
250.clock .joinbtn:hover {
251 background-color: color-mix(in srgb-linear, var(--accent), #000000 50%);
252}
253
254.content {
255 text-align: left;
256}
257
258#filters {
259 grid-area: filters;
260 text-align: left;
261}
262#filters #tags {
263 display: flex;
264 flex-wrap: wrap;
265 gap: 5px;
266 justify-content: flex-start;
267}
268#filters #tags button {
269 white-space: pre;
270}
271#filters details {
272 margin-bottom: 10px;
273}
274#filters details ul {
275 list-style: none;
276 margin: 0;
277 padding: 0;
278}
279#filters p.label,
280#filters details summary {
281 font-size: 0.8em;
282 color: color-mix(in srgb-linear, var(--foreground), var(--background) 10%);
283 padding: 5px 0;
284 margin-bottom: 0;
285}
286#filters ul#sorts {
287 list-style: none;
288 margin: 0 0 10px;
289 padding: 0;
290}
291#filters ul#sorts li button {
292 appearance: none;
293 border: none;
294 background-color: transparent;
295 color: var(--foreground);
296 border-radius: 0;
297 font-family: inherit;
298 font-size: inherit;
299 font-size: 0.9em;
300}
301#filters ul#sorts li button img {
302 width: 16px;
303 height: 16px;
304 margin-right: 5px;
305 display: inline-block;
306 vertical-align: middle;
307}
308#filters ul#sorts li button.sort-active {
309 color: color-mix(in srgb-linear, var(--accent), #000000 10%);
310 font-weight: bold;
311}
312#filters .afs-btn-filter {
313 appearance: none;
314 padding: 3px 0;
315 border: none;
316 border-radius: 0;
317 font-family: inherit;
318 background-color: transparent;
319}
320#filters .afs-btn-filter.active {
321 color: color-mix(in srgb-linear, var(--accent), #000000 10%);
322 background-color: transparent;
323 font-weight: bold;
324}
325#filters .afs-filter-search {
326 width: 100%;
327 padding: 0.5rem;
328 border: 1px solid var(--accent);
329 border-radius: 0.25rem;
330 font-size: 0.875rem;
331 color: var(--foreground);
332 transition: border-color 0.2s ease;
333 margin-bottom: 10px;
334 font-family: inherit;
335}
336#filters .afs-filter-counter {
337 text-align: center;
338 font-style: italic;
339 font-size: 0.9em;
340}
341
342#list {
343 display: grid;
344 grid-area: list;
345 grid-template-columns: repeat(4, 1fr);
346 grid-template-rows: fit-content(300px);
347 gap: 10px;
348}
349
350.item {
351 text-align: left;
352 border: 1px red solid;
353}
354.item h3 {
355 margin: 0;
356 font-size: 1.25em;
357}
358.item h3 a {
359 color: var(--foreground);
360 text-decoration: none;
361}
362.item h3 a:hover {
363 text-decoration: underline;
364}
365.item .thumb {
366 position: relative;
367 padding-top: 75%;
368}
369.item .thumb img {
370 position: absolute;
371 top: 0;
372 left: 0;
373 width: 100%;
374 height: 100%;
375 object-fit: cover;
376}
377.item .authors {
378 font-size: 0.9em;
379 margin: 5px 0;
380}
381.item .authors a {
382 color: color-mix(in srgb-linear, var(--foreground), #FFFFFF 10%);
383 text-decoration: none;
384}
385.item .authors a:hover {
386 text-decoration: underline;
387}
388.item .blurb {
389 margin-top: 5px;
390 font-size: 0.8em;
391 color: color-mix(in srgb-linear, var(--foreground), #FFFFFF 10%);
392}
393
394.game main {
395 display: grid;
396 grid-template-areas: "header header" "screenshots stuff";
397 text-align: left;
398 border-bottom: 1px var(--accent) solid;
399 padding-bottom: 0;
400}
401.game main h2 {
402 margin: 0;
403}
404.game main h2 a {
405 font-size: 0.9rem;
406 margin-left: 10px;
407 display: inline-block;
408 vertical-align: middle;
409}
410.game main h3 {
411 margin: 0;
412}
413.game main .blurb {
414 margin: 1em 0;
415}
416.game main .game-header {
417 margin: -20px -20px 0;
418 width: calc(100% + 40px);
419 border-bottom: 1px var(--accent) solid;
420 padding: 20px;
421 text-align: left;
422 grid-area: header;
423}
424.game main .jamsub {
425 font-size: 0.8em;
426 font-style: italic;
427 color: color-mix(in srgb-linear, var(--foreground), var(--background) 15%);
428 margin: 0;
429}
430.game .screenshots {
431 border-right: 1px var(--accent) solid;
432 grid-area: screenshots;
433 padding: 20px;
434}
435.game .screenshots .gallery {
436 display: grid;
437 gap: 10px;
438 grid-template-columns: repeat(2, 1fr);
439 grid-template-rows: auto;
440 grid-template-areas: "featured featured";
441}
442.game .screenshots .gallery a, .game .screenshots .gallery button {
443 position: relative;
444 padding-top: 75%;
445 width: 100%;
446}
447.game .screenshots .gallery a img, .game .screenshots .gallery button img {
448 position: absolute;
449 top: 0;
450 left: 0;
451 width: 100%;
452 height: 100%;
453 object-fit: cover;
454}
455.game .screenshots .gallery > :first-child {
456 grid-area: featured;
457}
458.game .interaction {
459 grid-area: stuff;
460}
461.game .downloads {
462 padding: 20px;
463}
464.game .downloads ul {
465 list-style: none;
466 margin: 1em 0;
467 padding: 0;
468}
469.game .downloads ul li {
470 margin-bottom: 10px;
471}
472.game .downloads .size {
473 color: color-mix(in srgb-linear, var(--foreground), var(--background) 20%);
474}
475.game .downloads .platforms-label {
476 display: inline-block;
477 width: 1px;
478 overflow: hidden;
479 text-indent: -999px;
480}
481.game .downloads .icon {
482 width: 24px;
483 height: 24px;
484 background-color: color-mix(in srgb-linear, var(--foreground), var(--background) 20%);
485}
486.game .comments {
487 border-top: 1px var(--accent) solid;
488}
489
490/*# sourceMappingURL=style.css.map */