.webmentions{margin-top:var(--huge-space);.webmention-form { margin-top: var(--large-space); margin-bottom: var(--standard-space); display: flex; gap: var(--small-space); flex-direction: column; .webmention-label { color: var(--standard-font-color); } .webmention-input { display: flex; gap: var(--small-space); flex-wrap: wrap; .webmention-source { flex: 1; padding: var(--little-space); background-color: var(--box-background-color); border: var(--border-width) solid var(--secondary-color); border-radius: var(--border-button); &:focus { background-color: var(--tertiary-color); } } } } .webmentions-container { margin-top: var(--huge-space); .webmention-item { margin-bottom: var(--large-space); display: flex; gap: var(--standard-space); .webmention-photo { width: var(--comment-avatar-icon-size); height: var(--comment-avatar-icon-size); border-radius: var(--border-radius); background-image: url(/images/comments/avatar.png); } .webmention-content { flex: 1; .webmention-date { color: var(--date-color); } .webmention-author-container { display: flex; gap: var(--little-space); .webmention-author { font-weight: bold; font-size: var(--standard-font-size); } .webmention-type { &.in-reply-to {} &.like-of {} &.repost-of {} &.mention-of {} &.bookmark-of {} &.rsvp {} } } } } }}