Fix View Repo outline, social-share icon stroke, and owner avatar sizing
Release / Build & publish plugin zip (push) Successful in 7s

- .project-github-button renamed to .project-repo-button (added 1px border
  for proper outline style; the old class is gone so the button was rendering
  as unstyled <a>).
- Suppress inherited stroke on the Tabler SVG <rect> viewport marker — without
  this it draws a square outline inside the round social-share button.
- Move owner avatar inline styles into CSS with object-fit: cover, explicit
  width/height, and border-radius: 50%; add flex shrink/grow rules for the
  owner row's three spans so the avatar isn't squashed by the flex layout.
This commit is contained in:
Keith Solomon
2026-08-12 08:49:56 -05:00
parent 5c843dc76f
commit 98fd2fba5a
2 changed files with 40 additions and 20 deletions
+30 -10
View File
@@ -21,6 +21,7 @@
border-radius: 50%; border-radius: 50%;
text-decoration: none; text-decoration: none;
transition: background-color 0.3s; transition: background-color 0.3s;
overflow: hidden;
} }
.project-social-sharing a:hover { .project-social-sharing a:hover {
@@ -35,6 +36,14 @@
transition: stroke 0.3s; transition: stroke 0.3s;
} }
/* Tabler-style icons include a viewport <rect> with no fill; without
`stroke="none"` it inherits the parent's stroke color and renders as
a square outline inside the round button. Suppress that stroke on
the rect alone. */
.project-social-sharing svg rect {
stroke: none;
}
.project-social-sharing a:hover svg { .project-social-sharing a:hover svg {
stroke: #ffffff; stroke: #ffffff;
} }
@@ -82,16 +91,26 @@
.project-owner img { .project-owner img {
display: block; display: block;
margin: 0 auto 0; margin: 0;
max-width: 50px; width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
} }
.project-owner span:last-of-type { .project-owner-avatar {
display: flex; flex: 0 0 auto;
justify-content: space-between; display: block;
flex-direction: column; }
flex: 1;
align-items: end; .project-owner-name {
flex: 1 1 auto;
min-width: 0;
}
.project-owner-follow {
flex: 0 0 auto;
} }
.project-meta-table th { .project-meta-table th {
@@ -119,7 +138,7 @@
color: #FFF; color: #FFF;
} }
.project-buttons a.button.project-github-button { .project-buttons a.button.project-repo-button {
display: block; display: block;
background-color: #e0e0e0; background-color: #e0e0e0;
color: #333; color: #333;
@@ -128,9 +147,10 @@
margin: 12px 0; margin: 12px 0;
border-radius: 4px; border-radius: 4px;
text-decoration: none; text-decoration: none;
border: 1px solid #c9c9c9;
} }
.project-buttons a.button.project-github-button:hover { .project-buttons a.button.project-repo-button:hover {
background-color: #c9c9c9; background-color: #c9c9c9;
color: #333; color: #333;
} }
+10 -10
View File
@@ -4,7 +4,7 @@ $is_fse_theme = wp_theme_has_theme_json() && function_exists( 'wp_is_block_theme
if ( $is_fse_theme ) { if ( $is_fse_theme ) {
wp_head(); wp_head();
echo do_blocks( '<!-- wp:template-part {"slug":"header"} /-->' ); echo do_blocks( '<!-- wp:template-part {"slug":"header"} /-->' ); // phpcs:ignore
} else { } else {
get_header(); get_header();
} }
@@ -23,11 +23,11 @@ $version = projects_portfolio_get_version( $project_id );
$owner = projects_portfolio_get_owner( $project_id ); $owner = projects_portfolio_get_owner( $project_id );
$owner_avatar = $repo_data['owner']['avatar_url'] ?? ''; $owner_avatar = $repo_data['owner']['avatar_url'] ?? '';
$owner_name = $repo_data['owner']['login'] ?? ''; $owner_name = $repo_data['owner']['login'] ?? '';
$owner_url = $repo_data['owner']['html_url'] ?? ''; $owner_url = $repo_data['owner']['html_url'] ?? '';
$last_updated = $repo_data['updated_at'] ?? ''; $last_updated = $repo_data['updated_at'] ?? '';
$language = $repo_data['language'] ?? ''; $language = $repo_data['language'] ?? '';
$license = $repo_data['license']['name'] ?? 'None'; $license = $repo_data['license']['name'] ?? 'None';
$browse_url = $repo_url ? projects_portfolio_get_repo_browse_url( $project_id ) : ''; $browse_url = $repo_url ? projects_portfolio_get_repo_browse_url( $project_id ) : '';
if ( $last_updated ) { if ( $last_updated ) {
@@ -143,15 +143,15 @@ if ( $last_updated ) {
<?php if ( $settings['templates']['github_owner'] && $owner_avatar && $owner_name ) : ?> <?php if ( $settings['templates']['github_owner'] && $owner_avatar && $owner_name ) : ?>
<a href="<?php echo esc_url( $browse_url ); ?>"> <a href="<?php echo esc_url( $browse_url ); ?>">
<div class="project-owner"> <div class="project-owner">
<span> <span class="project-owner-avatar">
<img src="<?php echo esc_url( $owner_avatar ); ?>" alt="<?php esc_attr_e( $owner_name ); ?>" class="owner-avatar" style="width: 50px; height: 50px; border-radius: 50%;" /> <img src="<?php echo esc_url( $owner_avatar ); ?>" alt="<?php esc_attr_e( $owner_name ); ?>" class="owner-avatar" />
</span> </span>
<span> <span class="project-owner-name">
<strong> <strong>
<a href="<?php echo esc_url( $owner_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( $owner_name ); ?></a> <a href="<?php echo esc_url( $owner_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( $owner_name ); ?></a>
</strong> </strong>
</span> </span>
<span> <span class="project-owner-follow">
<a class="button project-follow-button" href="<?php echo esc_url( $owner_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Follow', 'projects-wp' ); ?></a> <a class="button project-follow-button" href="<?php echo esc_url( $owner_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Follow', 'projects-wp' ); ?></a>
</span> </span>
</div> </div>