From 90eddc0630539a60ec776642e3adba472a000bf3 Mon Sep 17 00:00:00 2001
From: "David A. Kennedy" <davidakennedy@git.wordpress.org>
Date: Fri, 21 Oct 2016 20:36:24 +0000
Subject: [PATCH] Twenty Seventeen: Add post author comment styles

Currently, it's hard to output an SVG in the comment function without a lot of extra effort. So this adds a simple border to the author avatar and removes previous code related to SVGs and/or Genericons.

Props laurelfulford.

Fixes #38403.


git-svn-id: https://develop.svn.wordpress.org/trunk@38865 602fd350-edb4-49c9-b593-d223f7449a82
---
 .../assets/css/colors-dark.css                |  8 ++----
 .../twentyseventeen/inc/color-patterns.php    |  8 ++----
 src/wp-content/themes/twentyseventeen/rtl.css | 11 --------
 .../themes/twentyseventeen/style.css          | 27 +++----------------
 4 files changed, 7 insertions(+), 47 deletions(-)

diff --git a/src/wp-content/themes/twentyseventeen/assets/css/colors-dark.css b/src/wp-content/themes/twentyseventeen/assets/css/colors-dark.css
index 3b1b94b79c..ffcec065c6 100644
--- a/src/wp-content/themes/twentyseventeen/assets/css/colors-dark.css
+++ b/src/wp-content/themes/twentyseventeen/assets/css/colors-dark.css
@@ -7,7 +7,6 @@
 .colors-dark button,
 .colors-dark input[type="button"],
 .colors-dark input[type="submit"],
-.colors-dark .bypostauthor > .comment-body > .comment-meta > .comment-author:before,
 .colors-dark .entry-footer .edit-link a.post-edit-link {
 	background-color: #fff;
 }
@@ -87,7 +86,8 @@ body.colors-dark,
 .colors-dark input[type="datetime"]:focus,
 .colors-dark input[type="datetime-local"]:focus,
 .colors-dark input[type="color"]:focus,
-.colors-dark textarea:focus {
+.colors-dark textarea:focus,
+.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
 	border-color: #eee;
 }
 
@@ -405,10 +405,6 @@ body.colors-dark,
 	background: #222;
 }
 
-.colors-dark .bypostauthor > .comment-body > .comment-meta > .comment-author:before {
-	border-color: #222;
-}
-
 .colors-dark .menu-toggle,
 .colors-dark .menu-toggle:hover,
 .colors-dark .menu-toggle:focus,
diff --git a/src/wp-content/themes/twentyseventeen/inc/color-patterns.php b/src/wp-content/themes/twentyseventeen/inc/color-patterns.php
index af44ee8d85..acc1c0ce02 100644
--- a/src/wp-content/themes/twentyseventeen/inc/color-patterns.php
+++ b/src/wp-content/themes/twentyseventeen/inc/color-patterns.php
@@ -31,7 +31,6 @@ function twentyseventeen_custom_colors_css() {
 .colors-custom button,
 .colors-custom input[type="button"],
 .colors-custom input[type="submit"],
-.colors-custom .bypostauthor > .comment-body > .comment-meta > .comment-author:before,
 .colors-custom .entry-footer .edit-link a.post-edit-link {
 	background-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 13% ); /* base: #222; */
 }
@@ -111,7 +110,8 @@ body.colors-custom,
 .colors-custom input[type="datetime"]:focus,
 .colors-custom input[type="datetime-local"]:focus,
 .colors-custom input[type="color"]:focus,
-.colors-custom textarea:focus {
+.colors-custom textarea:focus,
+.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
 	border-color: hsl( ' . esc_attr( $hue ) . ', ' . $reduced_saturation . ', 20% ); /* base: #333; */
 }
 
@@ -408,10 +408,6 @@ body.colors-custom,
 	background: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 100% ); /* base: #fff; */
 }
 
-.colors-custom .bypostauthor > .comment-body > .comment-meta > .comment-author:before {
-	border-color: hsl( ' . esc_attr( $hue ) . ', ' . esc_attr( $saturation ) . ', 100% ); /* base: #fff; */
-}
-
 .colors-custom .menu-toggle,
 .colors-custom .menu-toggle:hover,
 .colors-custom .menu-toggle:focus,
diff --git a/src/wp-content/themes/twentyseventeen/rtl.css b/src/wp-content/themes/twentyseventeen/rtl.css
index edb812d651..37e3906a1a 100644
--- a/src/wp-content/themes/twentyseventeen/rtl.css
+++ b/src/wp-content/themes/twentyseventeen/rtl.css
@@ -178,17 +178,6 @@ input[type="checkbox"] {
 	right: -45px;
 }
 
-.bypostauthor > .comment-body > .comment-meta > .comment-author:before {
-	left: auto;
-	right: -65px;
-	margin: -6px -6px 0 0;
-}
-
-.children .bypostauthor > .comment-body > .comment-meta > .comment-author:before {
-	left: auto;
-	right: -45px;
-}
-
 .form-submit {
 	text-align: left;
 }
diff --git a/src/wp-content/themes/twentyseventeen/style.css b/src/wp-content/themes/twentyseventeen/style.css
index adcc960efc..0b6764b426 100644
--- a/src/wp-content/themes/twentyseventeen/style.css
+++ b/src/wp-content/themes/twentyseventeen/style.css
@@ -2333,30 +2333,9 @@ body:not(.twentyseventeen-front-page) .entry-header {
 	width: 30px;
 }
 
-.bypostauthor > .comment-body > .comment-meta > .comment-author:before {
-	background: #222;
-	-webkit-border-radius: 20px;
-	border-radius: 20px;
-	border: 1px solid #fff;
-	color: #fff;
-	left: -65px;
-	font-size: 16px;
-	font-size: 1rem;
-	height: 20px;
-	line-height: 1;
-	margin: -6px 0 0 -6px;
-	position: absolute;
-	text-align: center;
-	width: 20px;
-	z-index: 2;
-}
-
-.children .bypostauthor > .comment-body > .comment-meta > .comment-author:before {
-	font-size: 12px;
-	font-size: 0.75rem;
-	height: 16px;
-	left: -45px;
-	width: 16px;
+.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
+	border: 1px solid #333;
+	padding: 2px;
 }
 
 .no-comments,