templates for self-hosting game jams (or any other kind of jam tbh)
veryroundbird.house
1---
2const { game } = Astro.props;
3---
4<article class="item" data-date="{ game.date }" data-categories="" data-title="{ game.title }" data-authors={ game.authors.map(a => a.name).join(", ") }>
5 <div class="thumb">
6 <a href="/games/{ game.id }"><img src="{ game.thumbnail }" alt="{ game.title } thumbnail image" class="thumb-img" /></a>
7 <div class="platform-icons">
8 <span class="icon " title=""></span>
9 </div>
10 </div>
11 <h3><a href=`/games/${ game.id }`>{ game.title }</a></h3>
12 <div class="authors">
13 { game.authors ? game.authors.map((a) => {
14 if (a.link && a.link !== "") {
15 return (<a href="{ a.link }" target="_blank">{ a.name }</a>)
16 } else {
17 return (a.name);
18 }
19 )}.join(", ") : 'Anonymous' }
20 </div>
21</article>
22
23<style lang="scss">
24.item {
25 text-align: left;
26 border: 1px red solid;
27
28 h3 {
29 margin: 0;
30 font-size: 1.25em;
31
32 a {
33 color: var(--foreground);
34 text-decoration: none;
35
36 &:hover {
37 text-decoration: underline;
38 }
39 }
40 }
41
42 .thumb {
43 position: relative;
44 padding-top: 75%;
45
46 img {
47 position: absolute;
48 top: 0;
49 left: 0;
50 width: 100%;
51 height: 100%;
52 object-fit: cover;
53 }
54 }
55
56 .authors {
57 font-size: .9em;
58 margin: 5px 0;
59
60 a {
61 color: color-mix(in srgb-linear, var(--foreground), #FFFFFF 10%);
62 text-decoration: none;
63
64 &:hover {
65 text-decoration: underline;
66 }
67 }
68 }
69
70 .blurb {
71 margin-top: 5px;
72 font-size: .8em;
73 color: color-mix(in srgb-linear, var(--foreground), #FFFFFF 10%);
74 }
75}
76</style>