diff options
Diffstat (limited to 'themes/twentynineteen/sass/site/primary/_comments.scss')
| -rw-r--r-- | themes/twentynineteen/sass/site/primary/_comments.scss | 400 |
1 files changed, 400 insertions, 0 deletions
diff --git a/themes/twentynineteen/sass/site/primary/_comments.scss b/themes/twentynineteen/sass/site/primary/_comments.scss new file mode 100644 index 00000000..411db449 --- /dev/null +++ b/themes/twentynineteen/sass/site/primary/_comments.scss @@ -0,0 +1,400 @@ +.comment-content a { + word-wrap: break-word; +} + +.bypostauthor { + display: block; +} + +.comments-area { + margin: calc(2 * #{$size__spacing-unit}) $size__spacing-unit; + @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; + } + + .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%; + } +} |