Differences From
Artifact [b0a8082b0c]:
11 11 color: tone(25%);
12 12 font-size: 14pt;
13 13 margin: 0;
14 14 padding: 0;
15 15 }
16 16 a[href] {
17 17 color: tone(10%);
18 - text-decoration-color: adjust-color($color, $lightness: 10%, $alpha: -0.5);
18 + text-decoration-color: tone(10%,-0.5);
19 19 &:hover {
20 20 color: white;
21 21 text-shadow: 0 0 15px tone(20%);
22 - text-decoration-color: adjust-color($color, $lightness: 10%, $alpha: -0.1);
22 + text-decoration-color: tone(10%,-0.1);
23 23 }
24 24 }
25 25 a[href^="//"],
26 26 a[href^="http://"],
27 27 a[href^="https://"] { // external link
28 28 &:hover::after {
29 29 color: black;
................................................................................
30 30 background-color: white;
31 31 }
32 32 &::after {
33 33 content: "↗";
34 34 display: inline-block;
35 35 color: black;
36 36 margin-left: 4pt;
37 - background-color: adjust-color($color, $lightness: 10%);
37 + background-color: tone(10%);
38 38 padding: 0 4px;
39 39 text-shadow: none;
40 40 padding-right: 5px;
41 41 vertical-align: baseline;
42 42 font-size: 80%;
43 43 }
44 44 }
................................................................................
45 45
46 46 %content {
47 47 width: 8in;
48 48 margin: auto;
49 49 }
50 50
51 51 %glow {
52 - box-shadow: 0 0 20px adjust-color($color, $alpha: -0.8);
52 + box-shadow: 0 0 20px tone(0%,-0.8);
53 53 }
54 54
55 55 %button {
56 56 @extend %sans;
57 57 font-size: 14pt;
58 58 padding: 0.1in 0.2in;
59 59 border: 1px solid black;
60 - color: adjust-color($color, $lightness: 25%);
60 + color: tone(25%);
61 61 text-shadow: 1px 1px black;
62 62 text-decoration: none;
63 63 text-align: center;
64 + cursor: default;
64 65 background: linear-gradient(to bottom,
65 - adjust-color($color, $lightness: -45%),
66 - adjust-color($color, $lightness: -50%) 15%,
67 - adjust-color($color, $lightness: -50%) 75%,
68 - adjust-color($color, $lightness: -55%)
66 + tone(-47%),
67 + tone(-50%) 15%,
68 + tone(-50%) 75%,
69 + tone(-53%)
69 70 );
70 71 &:hover, &:focus {
71 72 @extend %glow;
72 73 outline: none;
73 - color: adjust-color($color, $lightness: -55%);
74 + color: tone(-55%);
74 75 text-shadow: none;
75 76 background: linear-gradient(to bottom,
76 - adjust-color($color, $lightness: -25%),
77 - adjust-color($color, $lightness: -30%) 15%,
78 - adjust-color($color, $lightness: -30%) 75%,
79 - adjust-color($color, $lightness: -35%)
77 + tone(-27%),
78 + tone(-30%) 15%,
79 + tone(-30%) 75%,
80 + tone(-35%)
80 81 );
81 82 }
82 83 &:active {
83 84 color: black;
84 85 padding-bottom: calc(0.1in - 2px);
85 86 padding-top: calc(0.1in + 2px);
86 87 background: linear-gradient(to top,
87 - adjust-color($color, $lightness: -25%),
88 - adjust-color($color, $lightness: -30%) 15%,
89 - adjust-color($color, $lightness: -30%) 75%,
90 - adjust-color($color, $lightness: -35%)
88 + tone(-25%),
89 + tone(-30%) 15%,
90 + tone(-30%) 75%,
91 + tone(-35%)
91 92 );
92 93 }
93 94 }
94 95
95 96 button { @extend %button;
96 97 &:first-of-type {
97 98 @extend %button;
98 99 color: white;
99 - box-shadow: inset 0 1px adjust-color($color, $lightness: -25%),
100 - inset 0 -1px adjust-color($color, $lightness: -50%);
100 + box-shadow: inset 0 1px tone(-25%),
101 + inset 0 -1px tone(-50%);
101 102 background: linear-gradient(to bottom,
102 - adjust-color($color, $lightness: -35%),
103 - adjust-color($color, $lightness: -40%) 15%,
104 - adjust-color($color, $lightness: -40%) 75%,
105 - adjust-color($color, $lightness: -45%)
103 + tone(-35%),
104 + tone(-40%) 15%,
105 + tone(-40%) 75%,
106 + tone(-45%)
106 107 );
107 108 &:hover, &:focus {
108 - box-shadow: inset 0 1px adjust-color($color, $lightness: -15%),
109 - inset 0 -1px adjust-color($color, $lightness: -40%);
109 + box-shadow: inset 0 1px tone(-15%),
110 + inset 0 -1px tone(-40%);
110 111 }
111 112 &:active {
112 - box-shadow: inset 0 1px adjust-color($color, $lightness: -50%),
113 - inset 0 -1px adjust-color($color, $lightness: -25%);
113 + box-shadow: inset 0 1px tone(-50%),
114 + inset 0 -1px tone(-25%);
114 115 background: linear-gradient(to top,
115 - adjust-color($color, $lightness: -30%),
116 - adjust-color($color, $lightness: -35%) 15%,
117 - adjust-color($color, $lightness: -35%) 75%,
118 - adjust-color($color, $lightness: -40%)
116 + tone(-30%),
117 + tone(-35%) 15%,
118 + tone(-35%) 75%,
119 + tone(-40%)
119 120 );
120 121 }
121 122 }
122 123 &:hover { font-weight: bold; }
123 124 }
124 125
125 126 $grad-ui-focus: linear-gradient(to bottom,
126 - adjust-color($color, $lightness: -50%),
127 - adjust-color($color, $lightness: -35%)
127 + tone(-50%),
128 + tone(-35%)
128 129 );
129 130
130 131 input[type='text'], input[type='password'], textarea {
131 132 @extend %serif;
132 133 padding: 0.08in 0.1in;
133 134 border: 1px solid black;
134 - background: linear-gradient(to bottom,
135 - adjust-color($color, $lightness: -55%),
136 - adjust-color($color, $lightness: -40%)
137 - );
135 + background: linear-gradient(to bottom, tone(-55%), tone(-40%));
138 136 font-size: 16pt;
139 - color: adjust-color($color, $lightness: 25%);
140 - box-shadow: inset 0 0 20px -3px adjust-color($color, $lightness: -55%);
137 + color: tone(25%);
138 + box-shadow: inset 0 0 20px -3px tone(-55%);
141 139 &:focus {
142 140 color: white;
143 - border-image: linear-gradient(to bottom,
144 - adjust-color($color, $lightness: -10%),
145 - adjust-color($color, $lightness: -30%)
146 - ) 1 / 1px;
141 + border-image: linear-gradient(to bottom, tone(-10%), tone(-30%)) 1 / 1px;
147 142 background: $grad-ui-focus;
148 143 outline: none;
149 144 @extend %glow;
150 145 }
151 146 }
152 147
153 148 @mixin glass {
154 149 @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
155 150 backdrop-filter: blur(40px);
156 151 -webkit-backdrop-filter: blur(40px);
157 - background-color: adjust-color($color, $lightness: -53%, $alpha: -0.7);
152 + background-color: tone(-53%, -0.7);
158 153 }
159 154 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
160 - background-color: adjust-color($color, $lightness: -53%, $alpha: -0.1);
155 + background-color: tone(-53%, -0.1);
161 156 }
162 157 }
163 158
164 159 h1 { margin-top: 0 }
165 160
166 161 header {
167 162 position: fixed;
................................................................................
215 210 position: relative;
216 211 min-height: calc(100vh - 1.1in);
217 212 margin-top: 0;
218 213 margin-bottom: 0;
219 214 padding: 0 0.4in;
220 215 padding-top: 1.1in;
221 216 padding-bottom: 0.1in;
222 - background-color: adjust-color($color, $lightness: -45%, $alpha: 0.4);
217 + background-color: tone(-45%,-0.3);
223 218 border: {
224 219 left: 1px solid black;
225 220 right: 1px solid black;
226 221 }
227 222 }
228 223
229 224 div.profile {
................................................................................
246 241 grid-column: 1 / 2;
247 242 grid-row: 1 / 3;
248 243 border: 1px solid black;
249 244 }
250 245 > .id {
251 246 grid-column: 2 / 3;
252 247 grid-row: 1 / 2;
253 - color: adjust-color($color, $lightness: 25%, $alpha: -0.4);
248 + color: tone(25%,-0.4);
254 249 > .nym {
255 250 font-weight: bold;
256 - color: adjust-color($color, $lightness: 25%);
251 + color: tone(25%);
257 252 }
258 253 > .xid {
259 - color: adjust-color($color, $lightness: 20%, $alpha: -0.1);
254 + color: tone(20%,-0.1);
260 255 font-size: 80%;
261 256 vertical-align: text-top;
262 257 }
263 258 }
264 259 > .bio {
265 260 grid-column: 2 / 3;
266 261 grid-row: 2 / 3;
................................................................................
287 282 display: block;
288 283 height: 0.3in;
289 284 width: 1px;
290 285 border-left: 1px solid rgba(0,0,0,0.6);
291 286 }
292 287 }
293 288 }
289 +
290 +.epithet {
291 + display: inline-block;
292 + background: tone(20%);
293 + color: tone(-45%);
294 + text-shadow: 0 0 3px tone(-30%, -0.4);
295 + border-radius: 3px;
296 + padding: 6px;
297 + padding-top: 2px;
298 + padding-bottom: 4px;
299 + font-size: 80%;
300 + vertical-align: top;
301 + font-weight: 300;
302 + letter-spacing: 0.5px;
303 + margin: 0 5pt;
304 + // transform: scale(80%) translateX(-10pt); // cheating!
305 +}
294 306
295 307 %box {
296 308 margin: auto;
297 - border: 1px solid adjust-color($color, $lightness: -55%);
309 + border: 1px solid tone(-55%);
298 310 border-bottom: 3px solid black;
299 311 box-shadow: 0 0 1px black;
300 312 border-image: linear-gradient(to bottom,
301 - adjust-color($color, $lightness: -40%),
302 - adjust-color($color, $lightness: -52%) 10%,
303 - adjust-color($color, $lightness: -55%) 90%,
304 - adjust-color($color, $lightness: -60%)
313 + tone(-40%),
314 + tone(-52%) 10%,
315 + tone(-55%) 90%,
316 + tone(-60%)
305 317 ) 1 / 1px;
306 318 background: linear-gradient(to bottom,
307 - adjust-color($color, $lightness: -58%),
308 - adjust-color($color, $lightness: -55%) 10%,
309 - adjust-color($color, $lightness: -50%) 80%,
310 - adjust-color($color, $lightness: -45%)
319 + tone(-58%),
320 + tone(-55%) 10%,
321 + tone(-50%) 80%,
322 + tone(-45%)
311 323 );
312 324 // outline: 1px solid black;
313 325 }
314 326
315 327 body.error .message {
316 328 @extend %box;
317 329 width: 4in;
................................................................................
327 339 > .msg {
328 340 text-align: center;
329 341 padding: 0.3in;
330 342 }
331 343 > .msg:first-child { padding-top: 0; }
332 344 > .user {
333 345 width: min-content; margin: auto;
334 - background: adjust-color($color, $lightness: -20%, $alpha: -0.3);
346 + background: tone(-20%,-0.3);
335 347 border: 1px solid black;
336 - color: adjust-color($color, $lightness: -50%);
348 + color: tone(-50%);
337 349 padding: 0.1in;
338 350 > img { width: 1in; height: 1in; border: 1px solid black; }
339 351 > .name { @extend %serif; text-align: center; font-size: 130%; font-weight: bold; margin-top: 0.08in; }
340 352 }
341 353 >form {
342 354 display: grid;
343 355 grid-template-columns: 1fr 1fr;
................................................................................
355 367 @extend %box;
356 368 display: grid;
357 369 grid-template-columns: 1.1in 2fr min-content 1fr;
358 370 grid-template-rows: 1fr min-content;
359 371 grid-gap: 2px;
360 372 padding: 0.1in;
361 373 > img { grid-column: 1/2; grid-row: 1/3; width: 1in; height: 1in;}
362 - > textarea { grid-column: 2/5; grid-row: 1/2; height: 3in;}
374 + > textarea {
375 + grid-column: 2/5; grid-row: 1/2; height: 3in;
376 + resize: vertical;
377 + margin-bottom: 0.08in;
378 + }
363 379 > input[name="acl"] { grid-column: 2/3; grid-row: 2/3; }
364 380 > button { grid-column: 4/5; grid-row: 2/3; }
365 381 a.help[href] { margin-right: 0.05in }
366 382 }
367 383
368 384 a.help[href] {
369 385 display: block;
................................................................................
457 473 background: linear-gradient(to right, tone(-55%), transparent);
458 474 }
459 475 >.content {
460 476 grid-column: 2/4; grid-row: 1/2;
461 477 padding: 0.2in;
462 478 @extend %serif;
463 479 font-size: 110%;
480 + text-align: justify;
464 481 }
465 482 > a[href].permalink {
466 483 display: block;
467 484 grid-column: 3/4; grid-row: 2/3;
468 485 font-size: 80%;
469 486 text-align: right;
470 487 padding: 0.1in;
................................................................................
476 493
477 494 a[href].rawlink {
478 495 @extend %teletype;
479 496 }
480 497
481 498 body.doc main {
482 499 @extend %serif;
500 + text-align: justify;
483 501 li { margin-top: 0.05in; }
484 502 li:first-child { margin-top: 0; }
485 503 h1, h2, h3, h4, h5, h6 {
486 504 background: linear-gradient(to right, tone(-50%), transparent);
487 505 margin-left: -0.4in;
488 506 padding-left: 0.2in;
489 507 text-shadow: 0 2px 0 black;
490 508 }
491 509 }
510 +
511 +body.conf main {
512 + display: grid;
513 + grid-template-columns: 2in 1fr;
514 + grid-template-rows: max-content 1fr;
515 + > .menu {
516 + margin-left: -0.25in;
517 + grid-column: 1/2; grid-row: 1/2;
518 + background: linear-gradient(to bottom, tone(-45%),tone(-55%));
519 + border: 1px solid black;
520 + padding: 0.1in;
521 + > a[href] {
522 + @extend %button;
523 + display: block;
524 + text-align: left;
525 + }
526 + > a[href] + a[href] {
527 + border-top: none;
528 + }
529 + hr {
530 + border: none;
531 + }
532 + }
533 + > .panel {
534 + grid-column: 2/3; grid-row: 1/3;
535 + padding-left: 0.15in;
536 + > h1 {
537 + padding-bottom: 0.1in;
538 + margin-bottom: 0.1in;
539 + margin-left: -0.15in;
540 + padding-left: 0.15in;
541 + padding-top: 0.12in;
542 + background: linear-gradient(to right, tone(-50%), tone(-50%,-0.7));
543 + border: 1px solid tone(-55%);
544 + border-left: none;
545 + text-shadow: 1px 1px 0 black;
546 + }
547 + }
548 +}