Differences From
Artifact [dc435bcc7e]:
224 224 transform: scale(1.2);
225 225 }
226 226 }
227 227 > a[href].bell {
228 228 content: url(/s/bell.svg);
229 229 height: 2em;
230 230 padding: 0.125in 0.10in;
231 + filter: drop-shadow(1px 1px 3px tone(-5%));
231 232 &:hover {
232 - filter: drop-shadow(0 0 10px tone(-5%));
233 + filter: drop-shadow(1px 1px 3px tone(-5%))
234 + drop-shadow(0 0 10px tone(-5%));
233 235 }
234 236 }
235 237 }
236 238 }
237 239 }
238 240
239 241 main {
................................................................................
380 382 padding: 0.4in;
381 383 > .msg {
382 384 text-align: center;
383 385 padding: 0.3in;
384 386 }
385 387 > .msg:first-child { padding-top: 0; }
386 388 > .user {
387 - width: min-content; margin: auto;
389 + width: max-content; margin: auto;
388 390 background: tone(-20%,-0.3);
389 391 border: 1px solid black;
390 392 color: tone(-50%);
391 393 padding: 0.1in;
392 - > img { width: 1in; height: 1in; border: 1px solid black; }
394 + > img { display: block; width: 1in; height: 1in; margin: auto; border: 1px solid black; }
393 395 > .name { @extend %serif; text-align: center; font-size: 130%; font-weight: bold; margin-top: 0.08in; }
394 396 }
395 397 >form {
396 398 display: grid;
397 399 grid-template-columns: 1fr 1fr;
398 400 grid-template-rows: 1.2em 1fr 1fr;
399 401 grid-gap: 5px;
................................................................................
535 537 font-size: 110%;
536 538 text-align: justify;
537 539 color: tone(25%);
538 540 }
539 541 > a[href].permalink {
540 542 display: block;
541 543 grid-column: 4/5; grid-row: 2/3;
542 - font-size: 80%;
544 + font-size: 90%;
543 545 text-align: right;
544 546 padding: 0.1in;
545 547 padding-right: 0.15in;
546 548 font-style: italic;
547 549 background: linear-gradient(to left, tone(-55%,-0.5), transparent);
548 550 }
549 551 div.stats {
................................................................................
555 557 padding-left: 1.3em;
556 558 background-size: 1.1em;
557 559 background-repeat: no-repeat;
558 560 min-width: 0.3em;
559 561 &:focus {
560 562 outline: none;
561 563 opacity: 0.9 !important;
562 - filter: brightness(1.7) drop-shadow(0 0 15px rgb(255,150,200));
564 + filter: drop-shadow(0 0 7px tone(-10%));
563 565 }
564 566 &:empty {
565 567 transition: 0.3s;
566 568 opacity: 0.0001; // qutebrowser won't show hints if opacity=0 :(
567 569 &:hover, &:focus { opacity: 0.6 !important; }
568 570 }
569 571 }
................................................................................
949 951 grid-row: 1/2; grid-column: 2/3;
950 952 text-decoration: none;
951 953 }
952 954 > .post {
953 955 grid-row: 2/3; grid-column: 1/3;
954 956 }
955 957 }
958 +
959 +body.notices {
960 + form { text-align: center; }
961 + div.notice {
962 + padding: 0.15in;
963 + background: linear-gradient(to bottom, tone(10%, -0.9), transparent);
964 + border: 1px solid tone(-60%);
965 + & + div.notice { border-top: none; }
966 + &.rt, &.like, &.reply { &::before {
967 + display: inline-block;
968 + width: 1em; height: 1em;
969 + margin-right: 1ex;
970 + background-size: contain;
971 + vertical-align: bottom;
972 + content: ""; // 🙄
973 + }}
974 + &.rt::before { background-image: url(/s/retweet.webp); }
975 + &.like::before { background-image: url(/s/heart.webp); }
976 + &.reply::before { background-image: url(/s/reply.webp); }
977 + > .action {
978 + display: inline-block;
979 + color: tone(5%);
980 + > .id {
981 + display: inline-block;
982 + > img {
983 + width: 1em; height: 1em;
984 + vertical-align: middle;
985 + margin-right: 0.5ex;
986 + }
987 + }
988 + }
989 + > a[href].quote {
990 + &::before { content: "“"; }
991 + &::after { content: "”"; }
992 + font-style: italic; color: tone(20%);
993 + text-decoration: none;
994 + }
995 + > article.post {
996 + margin: 0.1in 0.2in;
997 + margin-left: 0.4in;
998 + }
999 + }
1000 +}