templates for self-hosting game jams (or any other kind of jam tbh)
veryroundbird.house
1.game {
2 main {
3 display: grid;
4 grid-template-areas: "header header" "screenshots stuff";
5 text-align: left;
6 border-bottom: 1px var(--accent) solid;
7 padding-bottom: 0;
8
9 h2 {
10 margin: 0;
11
12 a {
13 font-size: .9rem;
14 margin-left: 10px;
15 display: inline-block;
16 vertical-align: middle;
17 }
18 }
19
20 h3 {
21 margin: 0;
22 }
23
24 .blurb {
25 margin: 1em 0;
26 }
27
28 .game-header {
29 margin: -20px -20px 0;
30 width: calc(100% + 40px);
31 border-bottom: 1px var(--accent) solid;
32 padding: 20px;
33 text-align: left;
34 grid-area: header;
35 }
36
37 .jamsub {
38 font-size: .8em;
39 font-style: italic;
40 color: color-mix(in srgb-linear, var(--foreground), var(--background) 15%);
41 margin: 0;
42 }
43 }
44
45 .screenshots {
46 border-right: 1px var(--accent) solid;
47 grid-area: screenshots;
48 padding: 20px;
49
50 .gallery {
51 display: grid;
52 gap: 10px;
53 grid-template-columns: repeat(2, 1fr);
54 grid-template-rows: auto;
55 grid-template-areas: "featured featured";
56
57 a, button {
58 position: relative;
59 padding-top: 75%;
60 width: 100%;
61
62 img {
63 position: absolute;
64 top: 0;
65 left: 0;
66 width: 100%;
67 height: 100%;
68 object-fit: cover;
69 }
70 }
71
72 & > :first-child {
73 grid-area: featured;
74 }
75 }
76 }
77
78 .interaction {
79 grid-area: stuff;
80 }
81
82 .downloads {
83 padding: 20px;
84
85 ul {
86 list-style: none;
87 margin: 1em 0;
88 padding: 0;
89
90 li {
91 margin-bottom: 10px;
92 }
93 }
94
95 .size {
96 color: color-mix(in srgb-linear, var(--foreground), var(--background) 20%);
97 }
98
99 .platforms-label {
100 display: inline-block;
101 width: 1px;
102 overflow: hidden;
103 text-indent: -999px;
104 }
105
106 .icon {
107 width: 24px;
108 height: 24px;
109 background-color: color-mix(in srgb-linear, var(--foreground), var(--background) 20%);
110 }
111 }
112
113 .comments {
114 border-top: 1px var(--accent) solid;
115 }
116}