@media only screen and (min-width: 768px) {
margin: calc(3 * 1rem) calc(10% + 60px);
@media only screen and (min-width: 1168px) {
margin: calc(3 * 1rem) calc(10% + 60px);
.author-bio .author-title {
.author-bio .author-title:before {
.author-bio .author-title.has-text-align-center:before {
.author-bio .author-title.has-text-align-right:before {
.author-bio .author-description {
.author-bio .author-description .author-link {
.author-bio .author-description .author-link:hover {
/*--------------------------------------------------------------
--------------------------------------------------------------*/
margin: calc(2 * 1rem) 1rem;
/* Add extra margin when the comments section is located immediately after the
* post itself (this happens on pages).
@media only screen and (min-width: 768px) {
max-width: calc(8 * (100vw / 12) - 28px);
@media only screen and (min-width: 1168px) {
max-width: calc(6 * (100vw / 12) - 28px);
@media only screen and (min-width: 768px) {
margin: calc(3 * 1rem) calc(10% + 60px);
margin-top: calc(2 * 1rem);
margin-bottom: calc(2 * 1rem);
@media only screen and (min-width: 768px) {
margin-top: calc(3 * 1rem);
margin-bottom: calc(3 * 1rem);
.entry + .comments-area {
margin-top: calc(3 * 1rem);
@media only screen and (min-width: 768px) {
.comments-area .comments-title-wrap {
justify-content: space-between;
.comments-area .comments-title-wrap .comments-title {
.comments-area .comments-title-wrap .comments-title:before {
.comments-area .comments-title-wrap .comments-title.has-text-align-center:before {
.comments-area .comments-title-wrap .comments-title.has-text-align-right:before {
@media only screen and (min-width: 768px) {
.comments-area .comments-title-wrap .comments-title {
flex: 1 0 calc(3 * (100vw / 12));
@media only screen and (min-width: 768px) {
.comments-area .comments-title-wrap .discussion-meta {
flex: 0 0 calc(2 * (100vw / 12));
#respond .comment-user-avatar {
#respond .comment .comment-form {
#comments > .comments-title:last-child {
.comment-form-flex .comments-title {
.comment-form-flex #respond {
.comment-form-flex #respond + .comments-title {
.comment-list .children {
.comment-list > .comment:first-child {
.comment-list .pingback .comment-body,
.comment-list .trackback .comment-body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
.comment-list .pingback .comment-body a:not(.comment-edit-link),
.comment-list .trackback .comment-body a:not(.comment-edit-link) {
.comment-list .pingback .comment-body .comment-edit-link,
.comment-list .trackback .comment-body .comment-edit-link {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
#respond + .comment-reply {
.comment-reply .comment-reply-link {
@media only screen and (min-width: 768px) {
padding-left: calc(.5 * (1rem + calc(100vw / 12 )));
margin-left: calc(3.25 * 1rem);
margin: calc(2 * 1rem) 0 0;
.comment .comment-author .avatar {
@media only screen and (min-width: 768px) {
.comment .comment-author .avatar {
right: calc(100% + 1rem);
.comment .comment-author .fn {
.comment .comment-author .fn a {
.comment .comment-author .fn a:hover {
.comment .comment-author .post-author-badge {
right: calc(100% - 2.5rem);
@media only screen and (min-width: 768px) {
.comment .comment-author .post-author-badge {
right: calc(100% + 0.75rem);
.comment .comment-author .post-author-badge svg {
.comment .comment-metadata > a,
.comment .comment-metadata .comment-edit-link {
vertical-align: baseline;
.comment .comment-metadata > a time,
.comment .comment-metadata .comment-edit-link time {
vertical-align: baseline;
.comment .comment-metadata > a:hover,
.comment .comment-metadata .comment-edit-link:hover {
.comment .comment-metadata > * {
.comment .comment-metadata .edit-link-sep {
vertical-align: baseline;
.comment .comment-metadata .edit-link {
.comment .comment-metadata .edit-link svg {
vertical-align: baseline;
.comment .comment-metadata .comment-edit-link {
.comment .comment-metadata .comment-edit-link:hover {
.comment .comment-content {
@media only screen and (min-width: 1168px) {
.comment .comment-content {
.comment .comment-content > *:first-child {
.comment .comment-content > *:last-child {
.comment .comment-content blockquote {
.comment .comment-content a {
text-decoration: underline;
.comment .comment-content a:hover {
#cancel-comment-reply-link {
.comment-reply-link:hover,
#cancel-comment-reply-link:hover {
.discussion-avatar-list {
.discussion-avatar-list li {
.discussion-avatar-list .comment-user-avatar img {
height: calc(1.5 * 1rem);
.discussion-meta .discussion-meta-info {
.discussion-meta .discussion-meta-info .svg-icon {
transform: scale(0.6) scaleX(-1) translateY(-0.1em);
.comment-form .comment-notes,
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
.comment-form #wp-comment-cookies-consent {
@media only screen and (min-width: 768px) {
.comment-form .comment-form-author,
.comment-form .comment-form-email {
width: calc(50% - 0.5rem);
@media only screen and (min-width: 768px) {
.comment-form .comment-form-email {
.comment-form input[name="author"],
.comment-form input[name="email"],
.comment-form input[name="url"] {
/*--------------------------------------------------------------
--------------------------------------------------------------*/
margin: 1rem 1rem calc(3 * 1rem);
@media only screen and (min-width: 768px) {
margin: 0 calc(10% + 60px) calc(3 * 1rem);
.archive .page-header .page-title,