.comment-content a { word-wrap: break-word; } .bypostauthor { display: block; } .comments-area { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit; word-wrap: break-word; @include postContentMaxWidth(); @include media(tablet) { margin: calc(3 * #{$size__spacing-unit}) $size__site-margins; } & > * { margin-top: calc(2 * #{$size__spacing-unit}); margin-bottom: calc(2 * #{$size__spacing-unit}); @include media(tablet) { margin-top: calc(3 * #{$size__spacing-unit}); margin-bottom: calc(3 * #{$size__spacing-unit}); } } /* Add extra margin when the comments section is located immediately after the * post itself (this happens on pages). */ .entry + & { margin-top: calc(3 * #{$size__spacing-unit}); } .comments-title-wrap { @include media(tablet) { align-items: baseline; display: flex; justify-content: space-between; } .comments-title { @include post-section-dash; margin: 0; @include media(tablet) { flex: 1 0 calc(3 * (100vw / 12)); } } .discussion-meta { @include media(tablet) { flex: 0 0 calc(2 * (100vw / 12)); margin-left: #{$size__spacing-unit}; } } } } #comment { max-width: 100%; box-sizing: border-box; } #respond { position: relative; .comment-user-avatar { margin: $size__spacing-unit 0 -#{$size__spacing-unit}; } .comment .comment-form { padding-left: 0; } > small { display: block; font-size: $font__size_base; position: absolute; left: calc(#{$size__spacing-unit} + 100%); top: calc(-3.5 * #{$size__spacing-unit}); width: calc(100vw / 12 ); } } #comments { > .comments-title:last-child { display: none; } } .comment-form-flex { display: flex; flex-direction: column; .comments-title { display: none; margin: 0; order: 1; } #respond { order: 2; + .comments-title { display: block; } } } .comment-list { list-style: none; padding: 0; .children { margin: 0; padding: 0 0 0 $size__spacing-unit; } > .comment:first-child { margin-top: 0; } .pingback, .trackback { .comment-body { color: $color__text-light; @include font-family( $font__heading ); font-size: $font__size-xs; font-weight: 500; margin-top: $size__spacing-unit; margin-bottom: $size__spacing-unit; a:not(.comment-edit-link) { font-weight: bold; font-size: $font__size-base / (1 * $font__size-ratio); line-height: 1.5; padding-right: #{0.5 * $size__spacing-unit}; display: block; } .comment-edit-link { color: $color__text-light; @include font-family( $font__heading ); font-weight: 500; } } } } .comment-reply { #respond + & { display: none; } .comment-reply-link { display: inline-block; } } .comment { list-style: none; position: relative; @include media(tablet) { padding-left: calc(.5 * (#{$size__spacing-unit} + calc(100vw / 12 ))); &.depth-1, .children { padding-left: 0; } &.depth-1 { margin-left: calc(3.25 * #{$size__spacing-unit}); } } .comment-body { margin: calc(2 * #{$size__spacing-unit}) 0 0; } .comment-meta { position: relative; } .comment-author { .avatar { float: left; margin-right: $size__spacing-unit; position: relative; @include media(tablet) { float: inherit; margin-right: inherit; position: absolute; top: 0; right: calc(100% + #{$size__spacing-unit}); } } .fn { position: relative; display: block; a { color: inherit; &:hover { color: $color__link-hover; } } } .post-author-badge { border-radius: 100%; display: block; height: 18px; position: absolute; background: lighten( $color__link, 8% ); right: calc(100% - #{$size__spacing-unit * 2.5}); top: -3px; width: 18px; @include media(tablet) { right: calc(100% + #{$size__spacing-unit * .75}); } svg { width: inherit; height: inherit; display: block; fill: white; transform: scale(0.875); } } } .comment-metadata { > a, .comment-edit-link { display: inline; font-weight: 500; color: $color__text-light; vertical-align: baseline; time { vertical-align: baseline; } &:hover { color: $color__link-hover; text-decoration: none; } } > * { display: inline-block; } .edit-link-sep { color: $color__text-light; margin: 0 0.2em; vertical-align: baseline; } .edit-link { color: $color__text-light; svg { transform: scale(0.8); vertical-align: baseline; margin-right: 0.1em; } } .comment-edit-link { position: relative; padding-left: $size__spacing-unit; margin-left: -#{$size__spacing-unit}; z-index: 1; &:hover { color: $color__link; } } } .comment-content { margin: $size__spacing-unit 0; @include media(desktop) { padding-right: $size__spacing-unit; } > *:first-child { margin-top: 0; } > *:last-child { margin-bottom: 0; } blockquote { margin-left: 0; } a { text-decoration: underline; &:hover { text-decoration: none; } } } } .comment-reply-link, #cancel-comment-reply-link { font-weight: 500; &:hover { color: $color__link-hover; } } .discussion-avatar-list { @include clearfix; margin: 0; padding: 0; li { position: relative; list-style: none; margin: 0 -8px 0 0; padding: 0; float: left; } .comment-user-avatar { img { height: calc(1.5 * #{$size__spacing-unit}); width: calc(1.5 * #{$size__spacing-unit}); } } } .discussion-meta { .discussion-meta-info { margin: 0; .svg-icon { vertical-align: middle; fill: currentColor; transform: scale( 0.6 ) scaleX(-1) translateY(-0.1em); margin-left: -#{.25 * $size__spacing-unit}; // Align icon with avatars above. } } } .comment-form { .comment-notes, label { @include font-family( $font__heading ); font-size: $font__size-xs; color: $color__text-light; } #wp-comment-cookies-consent { margin: 0 10px 0 0; } .comment-form-author, .comment-form-email { @include media(tablet) { width: calc(50% - #{$size__spacing-unit / 2}); float: left; } } .comment-form-email { @include media(tablet) { margin-left: $size__spacing-unit; } } input[name="author"], input[name="email"], input[name="url"] { display: block; width: 100%; } }