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