Solo-Web-Works/Projects-Portfolio
1
1
Fork 1
Code Issues 1 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

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

Browse Source 
- .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
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/style.css
+30 -10
View File
@@ -21,6 +21,7 @@
border-radius: 50%;
text-decoration: none;
transition: background-color 0.3s;
overflow: hidden;
}
.project-social-sharing a:hover {
@@ -35,6 +36,14 @@
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 {
stroke: #ffffff;
}
@@ -82,16 +91,26 @@
.project-owner img {
display: block;
margin: 0 auto 0;
max-width: 50px;
margin: 0;
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.project-owner span:last-of-type {
display: flex;
justify-content: space-between;
flex-direction: column;
flex: 1;
align-items: end;
.project-owner-avatar {
flex: 0 0 auto;
display: block;
}
.project-owner-name {
flex: 1 1 auto;
min-width: 0;
}
.project-owner-follow {
flex: 0 0 auto;
}
.project-meta-table th {
@@ -119,7 +138,7 @@
color: #FFF;
}
.project-buttons a.button.project-github-button {
.project-buttons a.button.project-repo-button {
display: block;
background-color: #e0e0e0;
color: #333;
@@ -128,9 +147,10 @@
margin: 12px 0;
border-radius: 4px;
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;
color: #333;
}
templates/single-projects.php
+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 ) {
wp_head();
echo do_blocks( '<!-- wp:template-part {"slug":"header"} /-->' );
echo do_blocks( '<!-- wp:template-part {"slug":"header"} /-->' ); // phpcs:ignore
} else {
get_header();
}
@@ -23,11 +23,11 @@ $version = projects_portfolio_get_version( $project_id );
$owner = projects_portfolio_get_owner( $project_id );
$owner_avatar = $repo_data['owner']['avatar_url'] ?? '';
$owner_name = $repo_data['owner']['login'] ?? '';
$owner_url = $repo_data['owner']['html_url'] ?? '';
$last_updated = $repo_data['updated_at'] ?? '';
$language = $repo_data['language'] ?? '';
$license = $repo_data['license']['name'] ?? 'None';
$owner_name = $repo_data['owner']['login'] ?? '';
$owner_url = $repo_data['owner']['html_url'] ?? '';
$last_updated = $repo_data['updated_at'] ?? '';
$language = $repo_data['language'] ?? '';
$license = $repo_data['license']['name'] ?? 'None';
$browse_url = $repo_url ? projects_portfolio_get_repo_browse_url( $project_id ) : '';
if ( $last_updated ) {
@@ -143,15 +143,15 @@ if ( $last_updated ) {
<?php if ( $settings['templates']['github_owner'] && $owner_avatar && $owner_name ) : ?>
<a href="<?php echo esc_url( $browse_url ); ?>">
<div class="project-owner">
<span>
<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%;" />
<span class="project-owner-avatar">
<img src="<?php echo esc_url( $owner_avatar ); ?>" alt="<?php esc_attr_e( $owner_name ); ?>" class="owner-avatar" />
</span>
<span>
<span class="project-owner-name">
<strong>
<a href="<?php echo esc_url( $owner_url ); ?>" target="_blank" rel="noopener noreferrer"><?php esc_html_e( $owner_name ); ?></a>
</strong>
</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>
</span>
</div>