1@font-face {
2 font-family: "recu";
3 src: url("/recqa.eot");
4 src:
5 url("/recqa.eot?#iefix") format("embedded-opentype"),
6 url("/recqa.woff2") format("woff2"),
7 url("/recqa.ttf") format("truetype");
8 font-weight: 400 800;
9 font-style: normal;
10 font-display: swap;
11 font-variation-settings: "CASL" 0 1, "MONO" 0 1;
12 font-style: oblique -15deg 0deg;
13 unicode-range: U+0020-007E;
14}
15@font-face {
16 font-family: recu;
17 src: url("/recexotic.eot");
18 src:
19 url("/recexotic.eot?#iefix") format("embedded-opentype"),
20 url("/recexotic.woff2") format("woff2"),
21 url("/recexotic.ttf") format("truetype");
22 font-weight: 400 800;
23 font-style: normal;
24 font-display: swap;
25 font-variation-settings: CASL 0.1 0.75, MONO 0 1;
26 font-style: oblique -15deg 0deg;
27 unicode-range:
28 U+00C0-00FF,
29 U+00A9,
30 U+2190-2193,
31 U+2018,
32 U+2019,
33 U+201C,
34 U+201D,
35 U+2022,
36 U+00A0-00A8,
37 U+00AA-00BF,
38 U+2194-2199,
39 U+0100-017F;
40}
41
42.qa {
43 --a: #5bcefa;
44 --b: #f5a9b8;
45 --as: #278bb3;
46 --bs: #b75e70;
47
48 main {
49 margin: auto;
50 max-width: 80ch;
51 }
52
53 e- {
54 --fg: #58ff71;
55 --new: #8c78ff;
56 display: block;
57 color: var(--fg);
58 margin: 0rem -1rem;
59 display: block;
60 padding: 1rem;
61 overflow-x: hidden;
62 font-variation-settings: "CASL" 1, "MONO" 0;
63 }
64
65 p,
66 q- {
67 margin-top: 0rem;
68 margin-bottom: 0.6rem;
69 display: block;
70 }
71
72 q- {
73 color: #fffff0;
74 --fg: white;
75 font-weight: 630;
76 font-size: 1.15em;
77 font-variation-settings: "CASL" 0, "MONO" 0;
78 }
79
80 e-[f] {
81 --fg: #8c78ff;
82 }
83
84 /* admin-only edit link: hidden so the page screenshots like the public
85 view, revealed when hovering (or keyboard-focusing) the entry. */
86 .edit-link {
87 display: none;
88 margin-right: 0.5rem;
89 }
90 e-:hover > .edit-link,
91 .edit-link:focus {
92 display: inline;
93 }
94
95 h1 {
96 display: flex;
97 flex-wrap: wrap;
98 cursor: pointer;
99 margin-top: 0;
100 margin-bottom: 1rem;
101 line-height: 1.15em;
102 user-select: none;
103 -webkit-user-select: none;
104 font-weight: 800;
105 font-size: 3rem;
106 font-weight: 862;
107 }
108
109 h1 span {
110 text-shadow: 1px 1px var(--s), 2px 2px var(--s);
111 }
112
113 time {
114 width: max-content;
115 color: #999;
116 font-size: 0.9rem;
117 line-height: 1.5rem;
118 }
119
120 e- > a[href] {
121 /* reset global.css */
122 text-decoration: none !important;
123 font-weight: normal !important;
124
125 &:hover time {
126 color: var(--a);
127 }
128 &:hover time:not(.winner)::after {
129 content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjRweCI+PHBhdGggZD0iTTQ0MC0yODBIMjgwcS04MyAwLTE0MS41LTU4LjVUODAtNDgwcTAtODMgNTguNS0xNDEuNVQyODAtNjgwaDE2MHY4MEgyODBxLTUwIDAtODUgMzV0LTM1IDg1cTAgNTAgMzUgODV0ODUgMzVoMTYwdjgwWk0zMjAtNDQwdi04MGgzMjB2ODBIMzIwWm0yMDAgMTYwdi04MGgxNjBxNTAgMCA4NS0zNXQzNS04NXEwLTUwLTM1LTg1dC04NS0zNUg1MjB2LTgwaDE2MHE4MyAwIDE0MS41IDU4LjVUODgwLTQ4MHEwIDgzLTU4LjUgMTQxLjVUNjgwLTI4MEg1MjBaIiBmaWxsPSIjNWJjZWZhIi8+PC9zdmc+);
130 display: inline-block;
131 position: absolute;
132 transform: translateY(1px);
133 }
134 &:active {
135 filter: hue-rotate(155deg)brightness(1.3);
136 }
137 }
138 .winner {
139 color: #58ff71 !important;
140 }
141 textarea, button {
142 font-family: monospace;
143 border: 2px solid black;
144 background-color: #242424;
145 color: #fff;
146 box-sizing: content-box;
147 padding: 0.5rem;
148 font-size: inherit;
149
150 &:focus-visible {
151 outline: 2px solid var(--a);
152 border-color: var(--a);
153 &::placeholder {
154 opacity: 0;
155 }
156 }
157 }
158 button:disabled, .disabled-button {
159 font-family: monospace;
160 border: 2px solid #141414;
161 background-color: #1a1a1a;
162 color: #999;
163 box-sizing: content-box;
164 padding: 0.5rem;
165 font-size: inherit;
166 }
167 .title {
168 position: absolute;
169 transform: translateY(-0.5rem);
170 font-weight: bold;
171 z-index: -1;
172 }
173 form {
174 display: flex;
175 flex-direction: column;
176 button, .disabled-button {
177 margin-top: 0.5rem;
178 align-self: flex-start;
179 }
180 }
181 textarea {
182 width: 100%;
183 max-width: calc(60ch);
184 height: 4rem;
185 resize: vertical;
186 /* Note: safari overrides this */
187 margin-top: 1rem !important;
188 &:placeholder-shown:not(:focus) {
189 min-height: 0px;
190 height: calc(1ch + 0.5rem);
191 resize: none;
192 margin-top: 0 !important;
193 & + .title {
194 transform: translateY(0.5rem);
195 }
196 }
197 &:not(:placeholder-shown) ~ .disabled-button,
198 &:placeholder-shown ~ button {
199 display: none;
200 }
201 }
202 .dead {
203 color: var(--bg);
204 color: rgb(from var(--bg) r g b / 0.6);
205 background-color: var(--fg);
206 padding: 0.04rem 0.5rem;
207 font-size: 82%;
208 text-decoration: line-through;
209 text-decoration-thickness: 3px;
210 text-decoration-color: var(--bg);
211 white-space: nowrap;
212 }
213 .question-ref, .artifact {
214 --o: #5bcefa;
215 background-color: #5bcefa33;
216 padding: 0.15em 0.2em;
217 border-radius: 4px;
218 color: var(--o);
219 font-size: 90%;
220 white-space: nowrap;
221
222 &::before {
223 transform: translateY(0.2em);
224 display: inline-block;
225 margin-right: 3px;
226 }
227
228 &:hover {
229 background-color: #5bcefa66;
230 text-decoration: none;
231 }
232
233 &:active {
234 background-color: var(--o);
235 color: var(--bg);
236 &::before {
237 filter: brightness(0.1);
238 }
239 }
240 }
241 .question-ref::before {
242 content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIxNnB4IiBmaWxsPSIjNWJjZWZhIj48cGF0aCBkPSJNODAtODB2LTcyMHEwLTMzIDIzLjUtNTYuNVQxNjAtODgwaDY0MHEzMyAwIDU2LjUgMjMuNVQ4ODAtODAwdjQ4MHEwIDMzLTIzLjUgNTYuNVQ4MDAtMjQwSDI0MEw4MC04MFoiLz48L3N2Zz4=);
243 }
244 .artifact-game::before {
245 content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMThweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIxOHB4IiBmaWxsPSIjZmE1YjViIj48cGF0aCBkPSJNMTg4LTI0MHEtNDQgMC03MS41LTMzLjVUOTctMzUwbDU3LTI5N3E4LTQyIDQwLjg1LTY5LjVUMjcyLTc0NGg0MTZxNDQuMyAwIDc3LjE1IDI3LjVRNzk4LTY4OSA4MDYtNjQ2bDU3IDI5N3E4IDQzLTIwIDc2dC03MiAzM3EtMTYgMC0zMS00LjVUNzE0LTI2MGwtOTUtNzZIMzQxbC05NSA3NnEtMTEgMTEtMjYuNSAxNS41VDE4OC0yNDBabTQ3MS43OS0yMTZxMTUuMjEgMCAyNS43MS0xMC4yOXQxMC41LTI1LjVxMC0xNS4yMS0xMC4yOS0yNS43MXQtMjUuNS0xMC41cS0xNS4yMSAwLTI1LjcxIDEwLjI5dC0xMC41IDI1LjVxMCAxNS4yMSAxMC4yOSAyNS43MXQyNS41IDEwLjVabS03Mi05NnExNS4yMSAwIDI1LjcxLTEwLjI5dDEwLjUtMjUuNXEwLTE1LjIxLTEwLjI5LTI1LjcxdC0yNS41LTEwLjVxLTE1LjIxIDAtMjUuNzEgMTAuMjl0LTEwLjUgMjUuNXEwIDE1LjIxIDEwLjI5IDI1LjcxdDI1LjUgMTAuNVpNMzM2LTQ1Nmg0OHYtNjBoNjB2LTQ4aC02MHYtNjBoLTQ4djYwaC02MHY0OGg2MHY2MFoiLz48L3N2Zz4=);
246 }
247 .artifact-music::before {
248 content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMThweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIxOHB4IiBmaWxsPSIjZmE1YjViIj48cGF0aCBkPSJNNDA4LTE0NHEtNjAgMC0xMDItNDJ0LTQyLTEwMnEwLTYwIDQyLTEwMnQxMDItNDJxMjAgMCAzOCA1LjV0MzQgMTQuNXYtNDA0aDIxNnYxNDRINTUydjM4NHEwIDYwLTQyIDEwMnQtMTAyIDQyWiIvPjwvc3ZnPg==);
249 }
250 .artifact {
251 --o: #fa5b5b;
252 background-color: #fa5b5b33;
253 &:hover {
254 background-color: #fa5b5b66;
255 }
256 }
257}
258@media screen and (min-width: 550px) {
259 .qa h1 span {
260 transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
261 }
262
263 .invert {
264 .a {
265 transform: translateX(280px);
266 }
267 .n {
268 transform: translateX(40px);
269 }
270 .q {
271 transform: translateX(calc(-100%));
272 }
273 }
274}