Differences From
Artifact [4fd9d6949f]:
79 79 text-shadow: 1px 1px black;
80 80 text-decoration: none;
81 81 text-align: center;
82 82 cursor: default;
83 83 user-select: none;
84 84 -webkit-user-drag: none;
85 85 -webkit-app-region: no-drag;
86 - background: linear-gradient(to bottom,
86 + --icon: url(/s/heart.webp);
87 + background-image: linear-gradient(to bottom,
87 88 otone(-47%),
88 89 otone(-50%) 15%,
89 90 otone(-50%) 75%,
90 91 otone(-53%)
91 92 );
92 93 &:hover, &:focus {
93 94 @extend %glow;
................................................................................
482 483 }
483 484
484 485 div.thread {
485 486 margin-left: 0.3in;
486 487 & + div.post { margin-top: 0.3in; }
487 488 }
488 489
490 +a[href].username {
491 + >.nym { font-weight: bold; }
492 + color: tone(0%,-0.4);
493 + > span.nym { color: tone(10%) }
494 + > span.handle { color: tone(-5%) }
495 + &:hover {
496 + > span.nym { color: white; }
497 + > span.handle { color: tone(15%) }
498 + }
499 +}
489 500 div.post {
490 501 @extend %box;
491 502 display: grid;
492 - grid-template-columns: 1in 1fr max-content;
503 + margin: unset;
504 + grid-template-columns: 1in 1fr max-content max-content;
493 505 grid-template-rows: min-content max-content;
494 506 margin-bottom: 0.1in;
495 507 >.avatar {
496 508 grid-column: 1/2; grid-row: 1/2;
497 509 img { display: block; width: 1in; height: 1in; margin:0; }
498 510 background: linear-gradient(to bottom, tone(-53%), tone(-57%));
499 511 }
................................................................................
501 513 display: block;
502 514 grid-column: 1/3;
503 515 grid-row: 2/3;
504 516 text-align: left;
505 517 text-decoration: none;
506 518 padding: 0.1in;
507 519 padding-left: 0.15in;
508 - >.nym { font-weight: bold; }
509 - color: tone(0%,-0.4);
510 - > span.nym { color: tone(10%) }
511 - > span.handle { color: tone(-5%) }
512 520 background: linear-gradient(to right, tone(-55%), transparent);
513 - &:hover {
514 - > span.nym { color: white; }
515 - > span.handle { color: tone(15%) }
516 - }
517 521 }
518 522 >.content {
519 - grid-column: 2/4; grid-row: 1/2;
523 + grid-column: 2/5; grid-row: 1/2;
520 524 padding: 0.2in;
521 525 @extend %serif;
522 526 font-size: 110%;
523 527 text-align: justify;
524 528 color: tone(25%);
525 529 }
526 530 > a[href].permalink {
527 531 display: block;
528 - grid-column: 3/4; grid-row: 2/3;
532 + grid-column: 4/5; grid-row: 2/3;
529 533 font-size: 80%;
530 534 text-align: right;
531 535 padding: 0.1in;
532 536 padding-right: 0.15in;
533 537 font-style: italic;
534 538 background: linear-gradient(to left, tone(-55%,-0.5), transparent);
535 539 }
540 + div.stats {
541 + display: flex;
542 + grid-column: 3/4; grid-row: 2/3;
543 + justify-content: center;
544 + > .like, > .rt {
545 + margin: 0.5em 0.3em;
546 + padding-left: 1.3em;
547 + background-size: 1.1em;
548 + background-repeat: no-repeat;
549 + min-width: 0.3em;
550 + &:empty {
551 + transition: 0.3s;
552 + opacity: 0.1;
553 + &:hover { opacity: 0.6 !important; }
554 + }
555 + }
556 + > .like {
557 + background-image: url(/s/heart.webp);
558 + }
559 + > .rt {
560 + background-image: url(/s/retweet.webp);
561 + }
562 + }
536 563 }
564 +
565 +div.post:hover div.stats { > .like, > .rt { &:empty {opacity: 0.3;} } }
537 566
538 567 a[href].rawlink {
539 568 @extend %teletype;
540 569 }
541 570
542 571 body.doc main {
543 572 @extend %serif;
................................................................................
810 839 &+label:hover {
811 840 background-color: otone(-35%);
812 841 color: white;
813 842 }
814 843 &:checked+label {
815 844 border-top: 1px solid otone(-10%);
816 845 border-bottom: 1px solid otone(-50%);
817 - background: linear-gradient(to bottom, otone(-25%,-0.2), otone(-28%,-0.4) 35%, otone(-30%,-0.7));
846 + background: linear-gradient(to bottom, otone(-25%,-0.2), otone(-28%,-0.3) 35%, otone(-30%,-0.5));
818 847 color: white;
819 848 box-shadow: 0 0 0 1px tone(-60%);
820 849 &:hover {
821 850 border-top: 1px solid otone(10%);
822 851 border-bottom: 1px solid otone(-60%);
823 852 font-weight: bold;
824 853 }
................................................................................
870 899 transform: rotate(90deg) scale(1.1);
871 900 color: tone(-20%);
872 901 text-shadow: 0 0 8px tone(-30%);
873 902 }
874 903 }
875 904 }
876 905 }
906 +
907 +div.lede {
908 + display: grid;
909 + grid-template-columns: 1fr min-content;
910 + grid-template-rows: 1.5em 1fr;
911 + padding: 0.1in 0.3in;
912 + margin: 0 -0.2in;
913 + margin-top: 0.2in;
914 + border-radius: 3px;
915 + background: linear-gradient(to bottom, tone(-40%,-0.5), transparent);
916 + border-top: 1px solid tone(-5%,-0.7);
917 + > .promo {
918 + grid-row: 1/2; grid-column: 1/2;
919 + font-style: italic;
920 + font-size: 90%;
921 + color: tone(-10%);
922 + > img {
923 + vertical-align: middle;
924 + margin-right: 0.4em;
925 + width: 1em; height: 1em;
926 + }
927 + }
928 + > a[href].del {
929 + grid-row: 1/2; grid-column: 2/3;
930 + text-decoration: none;
931 + }
932 + > .post {
933 + grid-row: 2/3; grid-column: 1/3;
934 + }
935 +}