The code and data behind xeiaso.net
site update: conversation snippet fixes
Signed-off-by: Xe Iaso <me@christine.website>
+84
+76
blog/site-update-better-css.markdown
+76
blog/site-update-better-css.markdown
···
1
+
---
2
+
title: "Site Update: CSS Fixes"
3
+
date: 2023-01-21
4
+
series: site-update
5
+
tags:
6
+
- css
7
+
- xedn
8
+
---
9
+
10
+
So yesterday my blog was on the front page of [Hacker
11
+
News](https://news.ycombinator.com/news). Twice. The [comments were
12
+
brutal](https://news.ycombinator.com/item?id=34454165), however some people
13
+
politely pointed out some issues that I've brushed off in the past because it's
14
+
difficult to interpret comments like "ur website is gay furry trash because I
15
+
can't tell what is a conversation snippet lol" in a positive enough light to
16
+
want to act on it.
17
+
18
+
I decided to just fix the problem on [stream](https://twitch.tv/princessxen) and
19
+
now hopefully people should complain about this less.
20
+
21
+
<xeblog-conv standalone name="Numa" mood="delet"><span
22
+
style="color:green">>implying.</span></xeblog-conv>
23
+
24
+
Either way, things are fixed now. Here's what I fixed.
25
+
26
+
## Styling of conversation snippets
27
+
28
+
I've never spelled this out anywhere on the blog, but those interjections with
29
+
characters are called "conversation snippets". I want them to feel a bit like
30
+
IRC, Telegram, or Discord conversations to use the [Socratic
31
+
method](https://en.wikipedia.org/wiki/Socratic_method) as a teaching aid.
32
+
33
+
In the past, these snippets didn't have any solid delineation between them and
34
+
the rest of the post, which apparently is confusing. I have changed this and now
35
+
there is more of a border:
36
+
37
+
<xeblog-conv standalone name="Aoi" mood="cheer">Like this!</xeblog-conv>
38
+
39
+
When a conversation has mutiple parts, they will get smaller and look like this:
40
+
41
+
<xeblog-conv name="Numa" mood="delet">Have you ever been far even as decided to
42
+
use even go want to do look more like?</xeblog-conv>
43
+
<xeblog-conv name="Aoi" mood="coffee">What.</xeblog-conv>
44
+
<xeblog-conv name="Cadey" mood="enby">You've got to be kidding me. I've been
45
+
further even more decided to use even go need to do look more as anyone can. Can
46
+
you really be far even as decided half as much to use go wish for that? My guess
47
+
is that when one really been far even as decided once to use even go want, it is
48
+
then that he has really been far even as decided to use even go want to do look
49
+
more like. It's just common sense.</xeblog-conv>
50
+
<xeblog-conv name="Aoi" mood="coffee">Is that supposed to be
51
+
English????</xeblog-conv>
52
+
53
+
As you can see, this is a lot more clear and easy to understand. The
54
+
"standalone" snippets are a bit bigger so that the character is emphasized.
55
+
56
+
## Reader mode fixes
57
+
58
+
One of the complaints I've gotten for years from people using the site in
59
+
"reader mode" and when using an RSS feed reader is that the stickers take up the
60
+
entire screen. This is because I was serving the raw assets that I got from the
61
+
artists (recompressed with webp and avif to save bandwidth).
62
+
63
+
This has been a problem because reader mode and RSS feed readers don't let me
64
+
control how things are displayed for understandable reasons. After thinking
65
+
about the problem, I came to the conclusion that the only way I could get this
66
+
to work would be to have [XeDN resize the stickers
67
+
on-demand](https://github.com/Xe/x/commit/255d527c651c2a5b1ba82969d13b6df7a33517c7).
68
+
69
+
This will cache the resized assets so that the expensive resizing doesn't have
70
+
to be done on every request. It's done lazily by the CDN itself.
71
+
72
+
---
73
+
74
+
<xeblog-conv standalone name="Mara" mood="hacker">If you want to see these
75
+
things written live, [give a follow on
76
+
Twitch](https://twitch.tv/princessxen)!</xeblog-conv>
+8
static/css/shim.css
+8
static/css/shim.css
···
20
20
21
21
.conversation {
22
22
display: flex;
23
+
background-color: #3c3836;
24
+
border-radius: 5px;
25
+
margin-top: 0.25rem;
23
26
}
24
27
25
28
.conversation-standalone {
···
39
42
.conversation-chat {
40
43
align-self: center;
41
44
min-width: 0;
45
+
margin: 0.5rem;
42
46
}
43
47
44
48
.gruvbox-dark pre, pre {
···
96
100
.warning {
97
101
background-color: #fbf1c7;
98
102
}
103
+
104
+
.conversation {
105
+
background-color: #ebdbb2;
106
+
};
99
107
100
108
.ea-placement.ea-type-image {
101
109
background: #fbf1c7;