| Dir : /home/trave494/flavoredfog.co.uk/wp-content/themes/twentynineteen/sass/site/primary/ |
| Server: Linux ngx353.inmotionhosting.com 4.18.0-553.22.1.lve.1.el8.x86_64 #1 SMP Tue Oct 8 15:52:54 UTC 2024 x86_64 IP: 209.182.202.254 |
| Dir : //home/trave494/flavoredfog.co.uk/wp-content/themes/twentynineteen/sass/site/primary/_comments.scss |
.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;
}
.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%;
}
}