templates for self-hosting game jams (or any other kind of jam tbh)
veryroundbird.house
1---
2import siteVars from '../site.config.ts';
3---
4
5<>
6 <div class="clock">
7 <div class="dates" id="dates">Submissions open from <b id="startDate" data-raw="{ siteVars.startDate }">{ siteVars.startDate }</b> to <b id="endDate" data-raw="{ siteVars.endDate }">{ siteVars.endDate }</b></div>
8 <div class="countdown">
9 <div class="counters">
10 <div class="verb">Starts in</div>
11 <div class="days"><span class="num" id="days">#</span><span class="caption">days</span></div>
12 <div class="hours"><span class="num" id="hours">#</span><span class="caption">hours</span></div>
13 <div class="minutes"><span class="num" id="minutes">#</span><span class="caption">minutes</span></div>
14 <div class="seconds"><span class="num" id="seconds">#</span><span class="caption">seconds</span></div>
15 </div>
16 </div>
17 <div class="join">
18 <a href="{ siteVars.joinLink }" class="joinbtn">Join Jam</a>
19 </div>
20 </div>
21 <div class="content">
22 <slot />
23 </div>
24</>
25
26<style lang="scss">
27.clock {
28 border: 1px var(--accent) solid;
29 border-radius: 5px;
30 display: inline-grid;
31 grid-template-areas: "date date" "countdown join";
32 margin: 50px auto;
33
34 .dates {
35 border-bottom: 1px var(--accent) solid;
36 padding: 10px;
37 grid-area: date;
38 text-align: center;
39 }
40
41 .countdown {
42 grid-area: countdown;
43 border-right: 1px var(--accent) solid;
44 padding: 20px;
45 text-align: right;
46 display: flex;
47 align-items: center;
48 justify-content: flex-end;
49
50 .counters {
51 display: flex;
52 align-items: stretch;
53
54 & > div {
55 padding: 10px;
56 border-right: 2px var(--accent) solid;
57 display: flex;
58 flex-direction: column;
59 justify-content: center;
60 align-items: center;
61 white-space: pre;
62
63 &:last-child {
64 border-right: none;
65 }
66 }
67
68 span {
69 display: block;
70 text-align: center;
71
72 &.num {
73 font-weight: bold;
74 }
75
76 &.caption {
77 font-size: .8em;
78 font-style: italic;
79 }
80 }
81 }
82 }
83
84 .join {
85 display: flex;
86 align-items: center;
87 justify-content: flex-start;
88 padding: 20px;
89 }
90
91 .joinbtn {
92 padding: 10px 20px;
93 font-size: 1.25em;
94 font-weight: bold;
95 border-radius: 5px;
96 background-color: var(--accent);
97 color: var(--background);
98 text-decoration: none;
99 white-space: pre;
100
101 &:hover {
102 background-color: color-mix(in srgb-linear, var(--accent), #000000 50%);
103 }
104 }
105}
106
107.content {
108 text-align: left;
109}
110</style>