templates for self-hosting game jams (or any other kind of jam tbh)
veryroundbird.house
1#filters {
2 grid-area: filters;
3 text-align: left;
4
5 #tags {
6 display: flex;
7 flex-wrap: wrap;
8 gap: 5px;
9 justify-content: flex-start;
10
11 button {
12 white-space: pre;
13 }
14 }
15
16 details {
17 margin-bottom: 10px;
18
19 ul {
20 list-style: none;
21 margin: 0;
22 padding: 0;
23 }
24 }
25
26 p.label,
27 details summary {
28 font-size: .8em;
29 color: color-mix(in srgb-linear, var(--foreground), var(--background) 10%);
30 padding: 5px 0;
31 margin-bottom: 0;
32 }
33
34 ul#sorts {
35 list-style: none;
36 margin: 0 0 10px;
37 padding: 0;
38
39 li {
40 button {
41 appearance: none;
42 border: none;
43 background-color: transparent;
44 color: var(--foreground);
45 border-radius: 0;
46 font-family: inherit;
47 font-size: inherit;
48 font-size: .9em;
49
50 img {
51 width: 16px;
52 height: 16px;
53 margin-right: 5px;
54 display: inline-block;
55 vertical-align: middle;
56 }
57
58 &.sort-active {
59 color: color-mix(in srgb-linear, var(--accent), #000000 10%);
60 font-weight: bold;
61 }
62 }
63 }
64 }
65
66 .afs-btn-filter {
67 appearance: none;
68 padding: 3px 0;
69 border: none;
70 border-radius: 0;
71 font-family: inherit;
72 background-color: transparent;
73
74 &.active {
75 color: color-mix(in srgb-linear, var(--accent), #000000 10%);
76 background-color: transparent;
77 font-weight: bold;
78 }
79 }
80
81 .afs-filter-search {
82 width: 100%;
83 padding: 0.5rem;
84 border: 1px solid var(--accent);
85 border-radius: 0.25rem;
86 font-size: 0.875rem;
87 color: var(--foreground);
88 transition: border-color 0.2s ease;
89 margin-bottom: 10px;
90 font-family: inherit;
91 }
92
93 .afs-filter-counter {
94 text-align: center;
95 font-style: italic;
96 font-size: .9em;
97 }
98}
99
100#list {
101 display: grid;
102 grid-area: list;
103 grid-template-columns: repeat(4, 1fr);
104 grid-template-rows: fit-content(300px);
105 gap: 10px;
106}