Differences From
Artifact [a7ffc6f8bf]:
1 +$color: hsl(323,100%,65%);
2 +%sans { font-family: "Alegreya Sans", "Open Sans", sans-serif; }
3 +%serif { font-family: Alegreya, GaramondNo8, "Garamond Premier Pro", "Adobe Garamond", Garamond, Junicode, serif; }
4 +%teletype { font-family: "Inconsolata LGC", Inconsolata, monospace; font-size: 12pt !important; }
5 +
6 +@function tone($pct) { @return adjust-color($color, $lightness: $pct) }
7 +
8 +body {
9 + @extend %sans;
10 + background-color: adjust-color($color, $lightness: -55%);
11 + color: adjust-color($color, $lightness: 25%);
12 + font-size: 14pt;
13 + margin: 0;
14 + padding: 0;
15 +}
16 +a[href] {
17 + color: adjust-color($color, $lightness: 10%);
18 + &:hover {
19 + color: white;
20 + text-shadow: 0 0 15px adjust-color($color, $lightness: 20%);
21 + }
22 +}
23 +a[href^="//"],
24 +a[href^="http://"],
25 +a[href^="https://"] { // external link
26 + &:hover::after {
27 + color: black;
28 + background-color: white;
29 + }
30 + &::after {
31 + content: "↗";
32 + display: inline-block;
33 + color: black;
34 + margin-left: 4pt;
35 + background-color: adjust-color($color, $lightness: 10%);
36 + padding: 0 4px;
37 + text-shadow: none;
38 + padding-right: 5px;
39 + vertical-align: baseline;
40 + font-size: 80%;
41 + }
42 +}
43 +
44 +%content {
45 + width: 8in;
46 + margin: auto;
47 +}
48 +
49 +%glow {
50 + box-shadow: 0 0 20px adjust-color($color, $alpha: -0.8);
51 +}
52 +
53 +%button {
54 + @extend %sans;
55 + font-size: 14pt;
56 + padding: 0.1in 0.2in;
57 + border: 1px solid black;
58 + color: adjust-color($color, $lightness: 25%);
59 + text-shadow: 1px 1px black;
60 + text-decoration: none;
61 + text-align: center;
62 + background: linear-gradient(to bottom,
63 + adjust-color($color, $lightness: -45%),
64 + adjust-color($color, $lightness: -50%) 15%,
65 + adjust-color($color, $lightness: -50%) 75%,
66 + adjust-color($color, $lightness: -55%)
67 + );
68 + &:hover, &:focus {
69 + @extend %glow;
70 + outline: none;
71 + color: adjust-color($color, $lightness: -55%);
72 + text-shadow: none;
73 + background: linear-gradient(to bottom,
74 + adjust-color($color, $lightness: -25%),
75 + adjust-color($color, $lightness: -30%) 15%,
76 + adjust-color($color, $lightness: -30%) 75%,
77 + adjust-color($color, $lightness: -35%)
78 + );
79 + }
80 + &:active {
81 + color: black;
82 + padding-bottom: calc(0.1in - 2px);
83 + padding-top: calc(0.1in + 2px);
84 + background: linear-gradient(to top,
85 + adjust-color($color, $lightness: -25%),
86 + adjust-color($color, $lightness: -30%) 15%,
87 + adjust-color($color, $lightness: -30%) 75%,
88 + adjust-color($color, $lightness: -35%)
89 + );
90 + }
91 +}
92 +
93 +button { @extend %button;
94 + &:first-of-type {
95 + @extend %button;
96 + color: white;
97 + box-shadow: inset 0 1px adjust-color($color, $lightness: -25%),
98 + inset 0 -1px adjust-color($color, $lightness: -50%);
99 + background: linear-gradient(to bottom,
100 + adjust-color($color, $lightness: -35%),
101 + adjust-color($color, $lightness: -40%) 15%,
102 + adjust-color($color, $lightness: -40%) 75%,
103 + adjust-color($color, $lightness: -45%)
104 + );
105 + &:hover, &:focus {
106 + box-shadow: inset 0 1px adjust-color($color, $lightness: -15%),
107 + inset 0 -1px adjust-color($color, $lightness: -40%);
108 + }
109 + &:active {
110 + box-shadow: inset 0 1px adjust-color($color, $lightness: -50%),
111 + inset 0 -1px adjust-color($color, $lightness: -25%);
112 + background: linear-gradient(to top,
113 + adjust-color($color, $lightness: -30%),
114 + adjust-color($color, $lightness: -35%) 15%,
115 + adjust-color($color, $lightness: -35%) 75%,
116 + adjust-color($color, $lightness: -40%)
117 + );
118 + }
119 + }
120 + &:hover { font-weight: bold; }
121 +}
122 +
123 +$grad-ui-focus: linear-gradient(to bottom,
124 + adjust-color($color, $lightness: -50%),
125 + adjust-color($color, $lightness: -35%)
126 +);
127 +
128 +input[type='text'], input[type='password'], textarea {
129 + @extend %serif;
130 + padding: 0.08in 0.1in;
131 + border: 1px solid black;
132 + background: linear-gradient(to bottom,
133 + adjust-color($color, $lightness: -55%),
134 + adjust-color($color, $lightness: -40%)
135 + );
136 + font-size: 16pt;
137 + color: adjust-color($color, $lightness: 25%);
138 + box-shadow: inset 0 0 20px -3px adjust-color($color, $lightness: -55%);
139 + &:focus {
140 + color: white;
141 + border-image: linear-gradient(to bottom,
142 + adjust-color($color, $lightness: -10%),
143 + adjust-color($color, $lightness: -30%)
144 + ) 1 / 1px;
145 + background: $grad-ui-focus;
146 + outline: none;
147 + @extend %glow;
148 + }
149 +}
150 +
151 +@mixin glass {
152 + @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
153 + backdrop-filter: blur(40px);
154 + -webkit-backdrop-filter: blur(40px);
155 + background-color: adjust-color($color, $lightness: -53%, $alpha: -0.7);
156 + }
157 + @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
158 + background-color: adjust-color($color, $lightness: -53%, $alpha: -0.1);
159 + }
160 +}
161 +
162 +header {
163 + position: fixed;
164 + height: min-content;
165 + width: 100vw;
166 + margin: 0;
167 + padding: 0;
168 + border-bottom: 1px solid black;
169 + z-index: 1;
170 + @include glass;
171 + background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3));
172 + > div {
173 + position: relative;
174 + max-width: 10in;
175 + margin: auto;
176 +
177 + display: grid;
178 + grid-template-columns: 1fr max-content;
179 + grid-template-rows: 1fr;
180 + h1 {
181 + all: unset;
182 + display: block;
183 + font-size: 1.4em;
184 + padding: 0.25in 0;
185 + text-shadow: 2px 2px 1px black;
186 + grid-column: 1/2; grid-row: 1/2;
187 + }
188 + nav {
189 + all: unset;
190 + display: flex;
191 + justify-content: flex-end;
192 + align-items: center;
193 + grid-column: 2/3; grid-row: 1/2;
194 + > a[href] {
195 + display: block;
196 + padding: 0.25in 0.15in;
197 + //padding: calc((25% - 1em)/2) 0.15in;
198 + &, &::after { transition: 0.3s; }
199 + text-shadow: 1px 1px 1px black;
200 + &:hover{
201 + transform: scale(120%);
202 + }
203 + }
204 + }
205 + }
206 +}
207 +
208 +main {
209 + @extend %content;
210 + display: block;
211 + position: relative;
212 + min-height: calc(100vh - 1.1in);
213 + margin-top: 0;
214 + margin-bottom: 0;
215 + padding: 0 0.4in;
216 + padding-top: 1.1in;
217 + background-color: adjust-color($color, $lightness: -45%, $alpha: 0.4);
218 + border: {
219 + left: 1px solid black;
220 + right: 1px solid black;
221 + }
222 +}
223 +
224 +div.profile {
225 + @extend %box;
226 + padding: 0.1in;
227 + position: relative;
228 + display: grid;
229 + grid-template-columns: 2fr 1fr;
230 + grid-template-rows: 1fr 1fr;
231 + width: 100%;
232 + > .banner {
233 + grid-column: 1 / 3;
234 + grid-row: 1 / 2;
235 + display: grid;
236 + grid-template-columns: 1.1in 1fr;
237 + grid-template-rows: 0.3in 1fr;
238 + > .avatar {
239 + display: block;
240 + width: 1in; height: 1in;
241 + grid-column: 1 / 2;
242 + grid-row: 1 / 3;
243 + border: 1px solid black;
244 + }
245 + > .id {
246 + grid-column: 2 / 3;
247 + grid-row: 1 / 2;
248 + color: adjust-color($color, $lightness: 25%, $alpha: -0.4);
249 + > .nym {
250 + font-weight: bold;
251 + color: adjust-color($color, $lightness: 25%);
252 + }
253 + > .xid {
254 + color: adjust-color($color, $lightness: 20%, $alpha: -0.1);
255 + font-size: 80%;
256 + vertical-align: text-top;
257 + }
258 + }
259 + > .bio {
260 + grid-column: 2 / 3;
261 + grid-row: 2 / 3;
262 + }
263 + }
264 + > .stats {
265 + grid-column: 3 / 4;
266 + grid-row: 1 / 3;
267 + }
268 + > .menu {
269 + grid-column: 1 / 3;
270 + grid-row: 2 / 3;
271 + display: flex;
272 + justify-content: center;
273 + align-items: center;
274 + > a[href] {
275 + @extend %button;
276 + display: block;
277 + margin: 0 0.05in;
278 + }
279 + > hr {
280 + all: unset;
281 + display: block;
282 + height: 0.3in;
283 + width: 1px;
284 + border-left: 1px solid rgba(0,0,0,0.6);
285 + }
286 + }
287 +}
288 +
289 +%box {
290 + margin: auto;
291 + border: 1px solid adjust-color($color, $lightness: -55%);
292 + border-bottom: 3px solid black;
293 + box-shadow: 0 0 1px black;
294 + border-image: linear-gradient(to bottom,
295 + adjust-color($color, $lightness: -40%),
296 + adjust-color($color, $lightness: -52%) 10%,
297 + adjust-color($color, $lightness: -55%) 90%,
298 + adjust-color($color, $lightness: -60%)
299 + ) 1 / 1px;
300 + background: linear-gradient(to bottom,
301 + adjust-color($color, $lightness: -58%),
302 + adjust-color($color, $lightness: -55%) 10%,
303 + adjust-color($color, $lightness: -50%) 80%,
304 + adjust-color($color, $lightness: -45%)
305 + );
306 + // outline: 1px solid black;
307 +}
308 +
309 +body.error .message {
310 + @extend %box;
311 + width: 4in;
312 + margin:auto;
313 + padding: 0.5in;
314 + text-align: center;
315 +}
316 +
317 +div.login {
318 + @extend %box;
319 + width: 4in;
320 + padding: 0.4in;
321 + > .msg {
322 + text-align: center;
323 + padding: 0.3in;
324 + }
325 + > .msg:first-child { padding-top: 0; }
326 + > .user {
327 + width: min-content; margin: auto;
328 + background: adjust-color($color, $lightness: -20%, $alpha: -0.3);
329 + border: 1px solid black;
330 + color: adjust-color($color, $lightness: -50%);
331 + padding: 0.1in;
332 + > img { width: 1in; height: 1in; border: 1px solid black; }
333 + > .name { @extend %serif; text-align: center; font-size: 130%; font-weight: bold; margin-top: 0.08in; }
334 + }
335 + >form {
336 + display: grid;
337 + grid-template-columns: 1fr 1fr;
338 + grid-template-rows: 1.2em 1fr 1fr;
339 + grid-gap: 5px;
340 + > label, input, button { display: block; }
341 + > label { grid-column: 1 / 3; grid-row: 1/2; font-weight: bold }
342 + > input { grid-column: 1 / 3; grid-row: 2/3; }
343 + > button { grid-column: 2 / 3; grid-row: 3/4; }
344 + > a { @extend %button; grid-column: 1 / 2; grid-row: 3/4; }
345 + }
346 +}
347 +
348 +form.compose {
349 + @extend %box;
350 + display: grid;
351 + grid-template-columns: 1.1in 2fr min-content 1fr;
352 + grid-template-rows: 1fr min-content;
353 + grid-gap: 2px;
354 + padding: 0.1in;
355 + > img { grid-column: 1/2; grid-row: 1/3; width: 1in; height: 1in;}
356 + > textarea { grid-column: 2/5; grid-row: 1/2; height: 3in;}
357 + > input[name="acl"] { grid-column: 2/3; grid-row: 2/3; }
358 + > button { grid-column: 4/5; grid-row: 2/3; }
359 + a.help[href] { margin-right: 0.05in }
360 +}
361 +
362 +a.help[href] {
363 + display: block;
364 + text-align: center;
365 + padding: 0.09in 0.2in;
366 + background: tone(-40%);
367 + border: 1px solid black;
368 + font-weight: bold;
369 + text-decoration: none;
370 + cursor: help;
371 +}
372 +
373 +input.acl {
374 + @extend %teletype;
375 + background: url(/s/padlock.webp) no-repeat;
376 + background-size: 20pt;
377 + background-position: 0.05in 50%;
378 + &:focus {
379 + background: url(/s/padlock.webp) no-repeat, $grad-ui-focus;
380 + background-size: 20pt;
381 + background-position: 0.05in 50%;
382 + };
383 + padding-left: 0.40in;
384 +}
385 +
386 +div.modal {
387 + @extend %box;
388 + position: fixed;
389 + display: none;
390 + left: 0; right: 0; bottom: 0; top: 0;
391 + max-width: 7in;
392 + margin: 1in auto;
393 + padding: 0.2in 0.3in;
394 + &:target { display: block; }
395 + box-shadow: 0 0 4in 5in rgba(0,0,0,0.5);
396 + z-index: 2;
397 + > div {
398 + height: 100%;
399 + overflow-y: scroll;
400 + >p:first-of-type { margin-top: 0; }
401 + }
402 + >a[href="#0"] { // close link
403 + @extend %button;
404 + cursor: default;
405 + display: block;
406 + position: absolute;
407 + top: -0.3in;
408 + right: 0.1in;
409 + margin: 0.1in;
410 + padding: 0.1in;
411 + &:hover { font-weight: bold; }
412 + }
413 +}
414 +
415 +code {
416 + @extend %teletype;
417 + background: adjust-color($color, $lightness: -50%);
418 + border: 1px solid adjust-color($color, $lightness: -20%);
419 + padding: 2px 6px;
420 + text-shadow: 2px 2px black;
421 +}