diff options
| author | EuAndreh <eu@euandre.org> | 2026-09-08 17:42:58 -0300 |
|---|---|---|
| committer | EuAndreh <eu@euandre.org> | 2026-09-08 17:43:09 -0300 |
| commit | b98adc5a2bca712898be024a1120cd175569be68 (patch) | |
| tree | acb3a529b08fae0d3b5b739efe8c2eca5bfc8430 /src/content/style.css | |
| parent | m (diff) | |
| download | euandre.org-b98adc5a2bca712898be024a1120cd175569be68.tar.gz euandre.org-b98adc5a2bca712898be024a1120cd175569be68.tar.xz | |
style.css: Keep a reply's nesting on a narrow screen
Below 40rem every message was pushed flush left, so a thread arrived
as a flat list and nothing said what answered what. It was pushed
there for a reason: this site's threads reach depth 8, and a rem a
level leaves about 220px for the words on a 390px phone.
A third of a rem a level costs 45px at the deepest and keeps every
depth apart, with a rail down the left of each reply carrying the
nesting that an offset that small cannot hold on its own.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KxLpaNQThKfMG3ecCJptP9
Diffstat (limited to 'src/content/style.css')
| -rw-r--r-- | src/content/style.css | 22 |
1 files changed, 21 insertions, 1 deletions
diff --git a/src/content/style.css b/src/content/style.css index 6c69152..d63b51f 100644 --- a/src/content/style.css +++ b/src/content/style.css @@ -373,6 +373,26 @@ h2:hover a.anchor { #comments div.message-body p:first-child { margin-top: 0; } #comments div.message-body p:last-child { margin-bottom: 0; } +/* A narrow screen has no room for a rem a level: at depth 8, which + this site's threads reach, an eight-rem indent leaves about ten for + the words. The step shrinks to a third of a rem, and the rail down + the left of every reply carries the nesting that an offset that + small no longer can on its own. */ @media (max-width: 40rem) { - #comments .message[data-depth] { margin-left: 0; } + #comments .message { margin-left: 3.15rem; } + #comments .message[data-depth="0"] { margin-left: 0; } + #comments .message[data-depth="1"] { margin-left: 0.35rem; } + #comments .message[data-depth="2"] { margin-left: 0.7rem; } + #comments .message[data-depth="3"] { margin-left: 1.05rem; } + #comments .message[data-depth="4"] { margin-left: 1.4rem; } + #comments .message[data-depth="5"] { margin-left: 1.75rem; } + #comments .message[data-depth="6"] { margin-left: 2.1rem; } + #comments .message[data-depth="7"] { margin-left: 2.45rem; } + #comments .message[data-depth="8"] { margin-left: 2.8rem; } + + #comments .message[data-depth]:not([data-depth="0"]) { + border-left: 3px solid var(--color-accent); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } } |