diff options
| -rw-r--r-- | assets/css/_webmention.scss | 68 |
1 files changed, 57 insertions, 11 deletions
diff --git a/assets/css/_webmention.scss b/assets/css/_webmention.scss index 4f5d861a..2e88481a 100644 --- a/assets/css/_webmention.scss +++ b/assets/css/_webmention.scss @@ -1,17 +1,63 @@ + #webmentions { - .comments { - list-style: none; - padding-inline-start: 0; + margin: 0; + position: relative; + z-index: 100; + line-height: 1.2em; + + ul.comments { + max-height: 20em; + overflow-x: hidden; + overflow-y: scroll; + list-style-type: none; + margin: 0; + padding: 4px; + li { - display: flex; - align-items: center; - .reaction { - img { - height: 2rem; - width: 2rem; - border-radius: 50%; - } + text-indent: -1em; + padding-left: 1em; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + a.source { + font-weight: 700; } + .text { + color: #555; + font-style: italic; + text-decoration: none; + } + .name { + color: var(--secondary-text-color) + } + } + } + h2 { + display: none; + } + .reacts img { + margin: 3px -1ex 1px 0; + } + img.missing { + background: white; + border: dashed black 1px; + } + a.reaction { + position: relative; + text-decoration: none; + text-shadow: 0px 0px 3px white; + margin-right: 0; + letter-spacing: -1ex; + margin-right: 2ex; + font-size: 80%; + img { + max-height: 1.3rem; + width: auto; + margin-right: -1ex; + border-radius: 25%; + } + sub { + font-size: 50%; } } } |