diff options
| -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; + } } |