Differences From
Artifact [ada3763759]:
1 -$color: hsl(323,100%,65%);
1 +$default-color: hsl(323,100%,65%);
2 2 %sans { font-family: "Alegreya Sans", "Open Sans", sans-serif; }
3 3 %serif { font-family: Alegreya, GaramondNo8, "Garamond Premier Pro", "Adobe Garamond", Garamond, Junicode, serif; }
4 4 %teletype { font-family: "Inconsolata LGC", Inconsolata, monospace; font-size: 12pt !important; }
5 5
6 -@function tone($pct, $alpha: 0) { @return adjust-color($color, $lightness: $pct, $alpha: $alpha) }
6 +// @function tone($pct, $alpha: 0) { @return adjust-color($color, $lightness: $pct, $alpha: $alpha) }
7 +@function tone($pct, $alpha: 0) {
8 + @return hsla(var(--hue), 100%, 65% + $pct, 1 + $alpha)
9 +}
7 10
11 +:root { --hue: 323; }
8 12 body {
9 13 @extend %sans;
10 14 background-color: tone(-55%);
11 15 color: tone(25%);
12 16 font-size: 14pt;
13 17 margin: 0;
14 18 padding: 0;
................................................................................
20 24 ::placeholder {
21 25 color: tone(0,-0.3);
22 26 font-style: italic;
23 27 }
24 28 a[href] {
25 29 color: tone(10%);
26 30 text-decoration-color: tone(10%,-0.5);
27 - &:hover {
31 + &:hover, &:focus {
28 32 color: white;
29 33 text-shadow: 0 0 15px tone(20%);
30 34 text-decoration-color: tone(10%,-0.1);
35 + outline: none;
31 36 }
32 37 &.button { @extend %button; }
33 38 }
34 39 a[href^="//"],
35 40 a[href^="http://"],
36 41 a[href^="https://"] { // external link
37 42 &:hover::after {
................................................................................
69 74 border: 1px solid black;
70 75 color: tone(25%);
71 76 text-shadow: 1px 1px black;
72 77 text-decoration: none;
73 78 text-align: center;
74 79 cursor: default;
75 80 user-select: none;
81 + -webkit-user-drag: none;
82 + -webkit-app-region: no-drag;
76 83 background: linear-gradient(to bottom,
77 84 tone(-47%),
78 85 tone(-50%) 15%,
79 86 tone(-50%) 75%,
80 87 tone(-53%)
81 88 );
82 89 &:hover, &:focus {
................................................................................
206 213 > a[href] {
207 214 display: block;
208 215 padding: 0.25in 0.10in;
209 216 //padding: calc((25% - 1em)/2) 0.15in;
210 217 &, &::after { transition: 0.3s; }
211 218 text-shadow: 1px 1px 1px black;
212 219 &:hover{
213 - transform: scale(120%);
220 + transform: scale(1.2);
214 221 }
215 222 }
216 223 }
217 224 }
218 225 }
219 226
220 227 main {
................................................................................
341 348 @extend %box;
342 349 display: block;
343 350 width: 4in;
344 351 margin:auto;
345 352 padding: 0.5in;
346 353 text-align: center;
347 354 menu:first-of-type { margin-top: 0.3in; }
355 + img.icon { width: 1.875in; height: 1.875in; }
348 356 }
349 357
350 358 div.login {
351 359 @extend %box;
352 360 width: 4in;
353 361 padding: 0.4in;
354 362 > .msg {
................................................................................
458 466 font-size: 1.5ex !important;
459 467 letter-spacing: 1.3px;
460 468 padding-bottom: 3px;
461 469 border-radius: 2px;
462 470 vertical-align: baseline;
463 471 box-shadow: 1px 1px 1px black;
464 472 }
473 +
474 +div.thread {
475 + margin-left: 0.3in;
476 + & + div.post { margin-top: 0.3in; }
477 +}
465 478
466 479 div.post {
467 480 @extend %box;
468 481 display: grid;
469 482 grid-template-columns: 1in 1fr max-content;
470 483 grid-template-rows: min-content max-content;
471 484 margin-bottom: 0.1in;
472 485 >.avatar {
473 486 grid-column: 1/2; grid-row: 1/2;
474 - img { display: block; width: 1in; margin:0; }
487 + img { display: block; width: 1in; height: 1in; margin:0; }
475 488 background: linear-gradient(to bottom, tone(-53%), tone(-57%));
476 489 }
477 490 >a[href].username {
478 491 display: block;
479 492 grid-column: 1/3;
480 493 grid-row: 2/3;
481 494 text-align: left;
................................................................................
494 507 }
495 508 >.content {
496 509 grid-column: 2/4; grid-row: 1/2;
497 510 padding: 0.2in;
498 511 @extend %serif;
499 512 font-size: 110%;
500 513 text-align: justify;
514 + color: tone(25%);
501 515 }
502 516 > a[href].permalink {
503 517 display: block;
504 518 grid-column: 3/4; grid-row: 2/3;
505 519 font-size: 80%;
506 520 text-align: right;
507 521 padding: 0.1in;
................................................................................
523 537 h1, h2, h3, h4, h5, h6 {
524 538 background: linear-gradient(to right, tone(-50%), transparent);
525 539 margin-left: -0.4in;
526 540 padding-left: 0.2in;
527 541 text-shadow: 0 2px 0 black;
528 542 }
529 543 }
544 +
545 +%navmenu, body.profile main > menu {
546 + margin-left: -0.25in;
547 + grid-column: 1/2; grid-row: 1/2;
548 + background: linear-gradient(to bottom, tone(-45%),tone(-55%));
549 + border: 1px solid black;
550 + padding: 0.1in;
551 + > a[href] {
552 + @extend %button;
553 + display: block;
554 + text-align: left;
555 + }
556 + > a[href] + a[href] {
557 + border-top: none;
558 + }
559 + hr {
560 + border: none;
561 + }
562 +}
530 563
531 564 menu { all: unset; display: block; }
532 565 body.conf main {
533 566 display: grid;
534 567 grid-template-columns: 2in 1fr;
535 568 grid-template-rows: max-content 1fr;
536 - > menu {
537 - margin-left: -0.25in;
538 - grid-column: 1/2; grid-row: 1/2;
539 - background: linear-gradient(to bottom, tone(-45%),tone(-55%));
540 - border: 1px solid black;
541 - padding: 0.1in;
542 - > a[href] {
543 - @extend %button;
544 - display: block;
545 - text-align: left;
546 - }
547 - > a[href] + a[href] {
548 - border-top: none;
549 - }
550 - hr {
551 - border: none;
552 - }
553 - }
569 + > menu { @extend %navmenu; }
554 570 > .panel {
555 571 grid-column: 2/3; grid-row: 1/3;
556 572 padding-left: 0.15in;
557 573 > h1 {
558 574 padding-bottom: 0.1in;
559 575 margin-bottom: 0.1in;
560 576 margin-left: -0.15in;
................................................................................
610 626 &.vertical-float {
611 627 flex-flow: column;
612 628 float: right;
613 629 width: 40%;
614 630 margin-left: 0.1in;
615 631 }
616 632 > %button {
617 - flex-basis: 0;
633 + flex-basis: min-content;
618 634 flex-grow: 1;
619 635 display: block; margin: 2px;
620 636 }
621 637 }
622 638
623 639 .check-panel {
624 640 display: flex;
................................................................................
664 680 100% { opacity: 0; transform: scale(0.9) translateY(-0.12in); display: none; }
665 681 }
666 682 .flashmsg {
667 683 display: block;
668 684 position: fixed;
669 685 top: 1.3in;
670 686 max-width: 3in;
671 - padding: 0.5in 0.2in;
687 + padding: 0.4in 0.2in;
672 688 left: 0; right: 0;
673 689 text-align: center;
674 690 text-shadow: 0 0 15px tone(10%);
675 691 margin: auto;
676 692 background: linear-gradient(to bottom, tone(-49%), tone(-43%,-0.1));
677 693 border: 1px solid tone(0%);
678 694 border-radius: 3px;
679 695 box-shadow: 0 0 50px tone(-55%);
680 696 color: white;
681 697 animation: ease forwards flashup;
682 698 //cubic-bezier(0.4, 0.63, 0.6, 0.31)
683 - animation-duration: 3s;
699 + animation-duration: 2.5s;
684 700 }
685 701
686 702 form.action-bar {
687 703 display: flex;
688 704 > * {
689 705 flex-grow: 1;
690 706 flex-basis: 0;
691 707 margin-left: 0.1in;
692 708 }
693 709 > *:first-child {
694 710 margin-left: 0;
695 711 }
696 712 }
713 +
714 +.color-picker {
715 + /* implemented using javascript, alas */
716 + @extend %box;
717 + label { text-shadow: 1px 1px black; }
718 + padding: 0.1in;
719 +}