1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
.toots {
max-width: 400px;
list-style: none;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
}
.toot {
border-bottom: 1px solid #ccc;
padding: 1rem;
}
/* Posting user. */
.toot .user {
display: flex;
flex-flow: column wrap;
justify-content: space-evenly;
align-content: flex-start;
height: 46px; /* Avatar height. */
column-gap: 0.5rem;
text-decoration: none;
color: inherit;
}
.toot .avatar {
border-radius: 4px;
}
.toot .display-name {
font-weight: bold;
display: block;
}
.toot .user:hover .display-name {
text-decoration: underline;
}
.toot .username {
display: block;
margin-right: 1em;
color: #999;
}
/* Boosting user is smaller and above the posting user. */
.toot .boost {
height: 23px;
margin-bottom: 0.25rem;
column-gap: 0.25rem;
}
.toot .boost:before {
content: "♺";
font-size: 140%;
}
.toot .boost .username {
display: none;
}
.toot .permalink {
text-decoration: none;
display: block;
color: #999;
float: right;
}
.toot .permalink:hover {
text-decoration: underline;
}
.toot .body {
clear: both;
margin-top: 1em;
}
.toot .body a {
overflow-wrap: anywhere;
}
/* Weird trick to keep the text in the page but not display it. */
.toot .body .invisible {
display: inline-block;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
position: absolute;
}
.toot .body .ellipsis::after {
content: "…";
}
.toot .attachment {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 4px;
}
.toot .attachment img {
width: 100%;
height: 100%;
object-fit: cover;
}
|
