templates for self-hosting game jams (or any other kind of jam tbh)
veryroundbird.house
1.clock {
2 border: 1px var(--accent) solid;
3 border-radius: 5px;
4 display: inline-grid;
5 grid-template-areas: "date date" "countdown join";
6 margin: 50px auto;
7
8 .dates {
9 border-bottom: 1px var(--accent) solid;
10 padding: 10px;
11 grid-area: date;
12 text-align: center;
13 }
14
15 .countdown {
16 grid-area: countdown;
17 border-right: 1px var(--accent) solid;
18 padding: 20px;
19 text-align: right;
20 display: flex;
21 align-items: center;
22 justify-content: flex-end;
23
24 .counters {
25 display: flex;
26 align-items: stretch;
27
28 & > div {
29 padding: 10px;
30 border-right: 2px var(--accent) solid;
31 display: flex;
32 flex-direction: column;
33 justify-content: center;
34 align-items: center;
35 white-space: pre;
36
37 &:last-child {
38 border-right: none;
39 }
40 }
41
42 span {
43 display: block;
44 text-align: center;
45
46 &.num {
47 font-weight: bold;
48 }
49
50 &.caption {
51 font-size: .8em;
52 font-style: italic;
53 }
54 }
55 }
56 }
57
58 .join {
59 display: flex;
60 align-items: center;
61 justify-content: flex-start;
62 padding: 20px;
63 }
64
65 .joinbtn {
66 padding: 10px 20px;
67 font-size: 1.25em;
68 font-weight: bold;
69 border-radius: 5px;
70 background-color: var(--accent);
71 color: var(--background);
72 text-decoration: none;
73 white-space: pre;
74
75 &:hover {
76 background-color: color-mix(in srgb-linear, var(--accent), #000000 50%);
77 }
78 }
79}
80
81.content {
82 text-align: left;
83}