templates for self-hosting game jams (or any other kind of jam tbh)
veryroundbird.house
1* {
2 box-sizing: border-box;
3}
4
5body {
6 background-color: var(--background);
7 background-image: url(--pageBgImage);
8 color: var(--foreground);
9 font-family: var(--mainfont);
10 font-size: 1em;
11}
12
13a {
14 color: var(--accent);
15 text-decoration: underline;
16
17 &:hover {
18 color: color-mix(in srgb-linear, var(--accent), #000000 50%);
19 }
20}
21
22.icon {
23 width: 16px;
24 height: 16px;
25 text-indent: -999px;
26 overflow: hidden;
27 display: inline-block;
28 vertical-align: middle;
29 margin-right: 5px;
30 background-color: var(--foreground);
31
32 &.web {
33 mask: url(../images/web.svg);
34 }
35
36 &.windows {
37 mask: url(../images/windows.svg);
38 }
39
40 &.macos {
41 mask: url(../images/macos.svg);
42 }
43
44 &.linux {
45 mask: url(../images/linux.svg);
46 }
47
48 &.android {
49 mask: url(../images/android.svg);
50 }
51
52 &.random {
53 mask: url(../images/random.svg);
54 }
55
56 &.sort-asc {
57 mask: url(../images/sort-asc.svg);
58 }
59
60 &.sort-desc {
61 mask: url(../images/sort-desc.svg);
62 }
63
64 .active & {
65 background-color: var(--accent);
66 }
67}
68
69.btn {
70 padding: 5px 10px;
71 font-size: 1em;
72 font-weight: bold;
73 border-radius: 5px;
74 background-color: var(--accent);
75 color: var(--background);
76 text-decoration: none;
77 white-space: pre;
78
79 &:hover {
80 background-color: color-mix(in srgb-linear, var(--accent), #000000 50%);
81 color: var(--background);
82 }
83}
84
85#page {
86 max-width: 960px;
87 margin: 50px auto;
88 background-color: color-mix(in srgb-linear, var(--background), #FFFFFF 50%);
89 background-image: var(--contentBgImage);
90 border-radius: var(--roundedCorners);
91
92 body.wide & {
93 max-width: none;
94 margin: 0;
95 }
96}
97
98header {
99 padding: 20px 20px 0;
100 position: relative;
101 background-color: color-mix(in srgb-linear, var(--background), #FFFFFF 25%);
102
103 h1 {
104 font-size: 2.5em;
105 font-weight: bold;
106 margin: 0;
107 }
108
109 .hosted {
110 margin: 0;
111 }
112
113 .joined,
114 .entries {
115 text-align: center;
116 position: absolute;
117 top: 20px;
118 right: 20px;
119
120 .count {
121 font-size: 2.25em;
122 display: block;
123 }
124
125 .caption {
126 font-size: .8em;
127 display: block;
128 color: color-mix(in srgb-linear, var(--foreground) #FFFFFF, 25%);
129 }
130 }
131
132 nav {
133 margin-top: 20px;
134 padding-bottom: 10px;
135
136 ul {
137 margin-bottom: 0;
138 display: flex;
139 gap: 10px;
140 list-style: none;
141 padding: 0;
142
143 li {
144 a {
145 text-decoration: none;
146 padding: 5px 0;
147 border-bottom: 5px transparent solid;
148 color: var(--foreground);
149
150 &.current,
151 &:hover {
152 border-bottom: 5px var(--accent) solid;
153 color: var(--foreground);
154 }
155 }
156 }
157 }
158 }
159}
160
161main {
162 padding: 20px;
163 text-align: center;
164
165 .submissions & {
166 display: grid;
167 grid-template-areas: "filters list";
168 grid-template-columns: 250px 1fr;
169 }
170}
171
172footer {
173 text-align: center;
174 font-size: .8em;
175 padding: 5px 10px;
176 margin-top: 20px;
177
178 a {
179 text-decoration: none;
180 }
181}
182
183[popover] {
184 position: fixed;
185 z-index: 99;
186 max-width: 90%;
187 max-height: 90%;
188}
189
190[popover]:-internal-popover-in-top-layer::backdrop {
191 background-color: rgba(0,0,0,.5);
192}