this repo has no description
Experiment more minimalistic account sheet
+46
-36
+20
-6
src/components/account-info.css
+20
-6
src/components/account-info.css
···
136
136
137
137
.account-container .stats {
138
138
display: flex;
139
-
flex-wrap: wrap;
140
-
justify-content: space-around;
141
-
gap: 16px;
139
+
/* flex-wrap: wrap; */
140
+
column-gap: 24px;
141
+
row-gap: 8px;
142
142
opacity: 0.75;
143
143
font-size: 90%;
144
144
background-color: var(--bg-faded-color);
145
145
padding: 12px;
146
146
border-radius: 16px;
147
147
line-height: 1.25;
148
+
overflow-x: auto;
149
+
justify-content: flex-start;
150
+
position: relative;
151
+
}
152
+
.timeline-start .account-container .stats {
153
+
flex-wrap: wrap;
148
154
}
149
155
.account-container .stats > * {
150
-
text-align: center;
156
+
/* text-align: center; */
157
+
flex-shrink: 0;
158
+
display: flex;
159
+
gap: 0.5em;
151
160
}
152
-
.account-container .stats a {
161
+
.account-container .stats a:hover {
153
162
color: inherit;
154
163
}
155
164
···
169
178
170
179
.account-container .profile-metadata {
171
180
display: flex;
172
-
flex-wrap: wrap;
181
+
/* flex-wrap: wrap; */
173
182
gap: 2px;
174
183
border-radius: 16px;
175
184
overflow: hidden;
185
+
overflow-x: auto;
186
+
}
187
+
.timeline-start .account-container .profile-metadata {
188
+
flex-wrap: wrap;
176
189
}
177
190
.account-container .profile-field {
178
191
min-width: 0;
···
183
196
border-radius: 4px;
184
197
filter: saturate(0.75);
185
198
line-height: 1.25;
199
+
flex-shrink: 0;
186
200
}
187
201
188
202
.account-container :is(.note, .profile-field) .invisible {
+26
-30
src/components/account-info.jsx
+26
-30
src/components/account-info.jsx
···
316
316
</div>
317
317
)}
318
318
<p class="stats">
319
-
<span>
320
-
Followers
321
-
<br />
322
-
<b title={followersCount}>
319
+
<div>
320
+
<span title={followersCount}>
323
321
{shortenNumber(followersCount)}
324
-
</b>{' '}
325
-
</span>
326
-
<span>
322
+
</span>{' '}
323
+
Followers
324
+
</div>
325
+
<div class="insignificant">
326
+
<span title={followingCount}>
327
+
{shortenNumber(followingCount)}
328
+
</span>{' '}
327
329
Following
328
330
<br />
329
-
<b title={followingCount}>
330
-
{shortenNumber(followingCount)}
331
-
</b>{' '}
332
-
</span>
331
+
</div>
333
332
{standalone ? (
334
-
<span>
335
-
Posts
336
-
<br />
337
-
<b title={statusesCount}>
333
+
<div class="insignificant">
334
+
<span title={statusesCount}>
338
335
{shortenNumber(statusesCount)}
339
-
</b>{' '}
340
-
</span>
336
+
</span>{' '}
337
+
Posts
338
+
</div>
341
339
) : (
342
340
<Link
341
+
class="insignificant"
343
342
to={instance ? `/${instance}/a/${id}` : `/a/${id}`}
344
343
onClick={() => {
345
344
hideAllModals();
346
345
}}
347
346
>
348
-
Posts
349
-
<br />
350
-
<b title={statusesCount}>
347
+
<span title={statusesCount}>
351
348
{shortenNumber(statusesCount)}
352
-
</b>{' '}
349
+
</span>{' '}
350
+
Posts
353
351
</Link>
354
352
)}
355
353
{!!createdAt && (
356
-
<span>
354
+
<div class="insignificant">
357
355
Joined
358
356
<br />
359
-
<b>
360
-
<time datetime={createdAt}>
361
-
{niceDateTime(createdAt, {
362
-
hideTime: true,
363
-
})}
364
-
</time>
365
-
</b>
366
-
</span>
357
+
<time datetime={createdAt}>
358
+
{niceDateTime(createdAt, {
359
+
hideTime: true,
360
+
})}
361
+
</time>
362
+
</div>
367
363
)}
368
364
</p>
369
365
<RelatedActions