keith/Portfolio-2026
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance project handling for websites in portfolio
Sync TODOs with Issues / sync_todos (push) Successful in 6s
Details

Browse Source 
- Added methods in Projects class to determine if a project is a website, retrieve its URL, platform, and screenshot.
- Updated single-project template to display website-specific information and actions.
- Modified project card component to show website details and adjust action buttons accordingly.
- Improved CSS for project cards and buttons to align with new website features.
This commit is contained in:
Keith Solomon
2026-08-22 15:14:28 -05:00
parent d0dd9fa98a
commit 0613e33411
7 changed files with 382 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/class-projects.php
+53
View File
@@ -139,4 +139,57 @@ class Projects {
} }
return number_format( $value ); return number_format( $value );
} }
/**
* Whether the project is configured as a website rather than a git repo.
*
* @param int $post_id Project post ID.
* @return bool
*/
public static function is_website( int $post_id ): bool {
if ( ! self::is_plugin_active() ) {
return false;
}
return (bool) projects_portfolio_is_website( $post_id );
}
/**
* Public URL for the project's website (or empty string).
*
* @param int $post_id Project post ID.
* @return string
*/
public static function get_site_url( int $post_id ): string {
if ( ! self::is_plugin_active() ) {
return '';
}
return (string) projects_portfolio_get_site_url( $post_id );
}
/**
* Platform label for the project's website (or empty string).
*
* @param int $post_id Project post ID.
* @return string
*/
public static function get_site_platform( int $post_id ): string {
if ( ! self::is_plugin_active() ) {
return '';
}
return (string) projects_portfolio_get_site_platform( $post_id );
}
/**
* Screenshot attachment URL for the project's website (or empty string).
*
* @param int $post_id Project post ID.
* @param string $size Registered image size.
* @return string
*/
public static function get_site_screenshot_url( int $post_id, string $size = 'large' ): string {
if ( ! self::is_plugin_active() ) {
return '';
}
return (string) projects_portfolio_get_site_screenshot_url( $post_id, $size );
}
} }
single-projects.php
+130 -99
View File
@@ -16,16 +16,20 @@ get_header();
while ( have_posts() ) : while ( have_posts() ) :
the_post(); the_post();
$project_id = (int) get_the_ID(); $project_id = (int) get_the_ID();
$provider = Projects::get_provider_label( $project_id ); $is_website = Projects::is_website( $project_id );
$version = Projects::get_latest_version( $project_id ); $site_url = Projects::get_site_url( $project_id );
$release = Projects::get_release_url( $project_id ); $site_platform = Projects::get_site_platform( $project_id );
$repo = Projects::get_repo_browse_url( $project_id ); $site_shot_url = Projects::get_site_screenshot_url( $project_id, 'large' );
$repo_data = Projects::get_repo_data( $project_id ); $provider = $is_website ? __( 'Website', 'ks-portfolio' ) : Projects::get_provider_label( $project_id );
$owner = Projects::get_owner_data( $project_id ); $version = Projects::get_latest_version( $project_id );
$type_terms = get_the_terms( $project_id, 'project-type' ); $release = Projects::get_release_url( $project_id );
$type_label = ! empty( $type_terms ) && ! is_wp_error( $type_terms ) ? strtoupper( $type_terms[0]->name ) : ''; $repo = Projects::get_repo_browse_url( $project_id );
$excerpt = has_excerpt( $project_id ) ? get_the_excerpt( $project_id ) : ''; $repo_data = Projects::get_repo_data( $project_id );
$owner = Projects::get_owner_data( $project_id );
$type_terms = get_the_terms( $project_id, 'project-type' );
$type_label = ! empty( $type_terms ) && ! is_wp_error( $type_terms ) ? strtoupper( $type_terms[0]->name ) : '';
$excerpt = has_excerpt( $project_id ) ? get_the_excerpt( $project_id ) : '';
?> ?>
<article class="single-project"> <article class="single-project">
<div class="container mx-auto my-section"> <div class="container mx-auto my-section">
@@ -39,7 +43,7 @@ while ( have_posts() ) :
</p> </p>
<h1 class="single-project__title"> <h1 class="single-project__title">
<?php echo esc_html( get_the_title( $project_id ) ); ?> <?php echo esc_html( get_the_title( $project_id ) ); ?>
<?php if ( 'Unknown' !== $version ) : ?> <?php if ( ! $is_website && 'Unknown' !== $version ) : ?>
<span class="single-project__version">v<?php echo esc_html( $version ); ?></span> <span class="single-project__version">v<?php echo esc_html( $version ); ?></span>
<?php endif; ?> <?php endif; ?>
</h1> </h1>
@@ -48,25 +52,39 @@ while ( have_posts() ) :
<?php endif; ?> <?php endif; ?>
<div class="single-project__actions"> <div class="single-project__actions">
<?php if ( $release ) : ?> <?php if ( $is_website ) : ?>
<a class="button button--primary" href="<?php echo esc_url( Projects::get_download_url( $project_id ) ); ?>" rel="nofollow"> <?php if ( $site_url ) : ?>
<?php echo esc_html__( 'Download', 'ks-portfolio' ); ?> <a class="button button--primary" href="<?php echo esc_url( $site_url ); ?>" target="_blank" rel="noopener noreferrer">
<?php if ( 'Unknown' !== $version ) : ?> <?php echo esc_html__( 'Visit Site', 'ks-portfolio' ); ?>
v<?php echo esc_html( $version ); ?> </a>
<?php endif; ?> <?php endif; ?>
</a> <?php else : ?>
<?php endif; ?> <?php if ( $release ) : ?>
<?php if ( $repo ) : ?> <a class="button button--primary" href="<?php echo esc_url( Projects::get_download_url( $project_id ) ); ?>" rel="nofollow">
<a class="button button--outline" href="<?php echo esc_url( $repo ); ?>" target="_blank" rel="noopener noreferrer"> <?php echo esc_html__( 'Download', 'ks-portfolio' ); ?>
<?php echo esc_html__( 'View Repo', 'ks-portfolio' ); ?> <?php if ( 'Unknown' !== $version ) : ?>
</a> v<?php echo esc_html( $version ); ?>
<?php endif; ?>
</a>
<?php endif; ?>
<?php if ( $repo ) : ?>
<a class="button button--outline" href="<?php echo esc_url( $repo ); ?>" target="_blank" rel="noopener noreferrer">
<?php echo esc_html__( 'View Repo', 'ks-portfolio' ); ?>
</a>
<?php endif; ?>
<?php endif; ?> <?php endif; ?>
</div> </div>
</header> </header>
<div class="single-project__layout"> <div class="single-project__layout">
<div class="single-project__body"> <div class="single-project__body">
<?php if ( has_post_thumbnail( $project_id ) ) : ?> <?php if ( $is_website && $site_shot_url ) : ?>
<figure class="single-project__screenshot">
<a href="<?php echo esc_url( $site_url ); ?>" target="_blank" rel="noopener noreferrer">
<img src="<?php echo esc_url( $site_shot_url ); ?>" alt="<?php echo esc_attr( get_the_title( $project_id ) ); ?>" />
</a>
</figure>
<?php elseif ( has_post_thumbnail( $project_id ) ) : ?>
<figure class="single-project__featured"> <figure class="single-project__featured">
<?php echo get_the_post_thumbnail( $project_id, 'large' ); ?> <?php echo get_the_post_thumbnail( $project_id, 'large' ); ?>
</figure> </figure>
@@ -78,83 +96,96 @@ while ( have_posts() ) :
</section> </section>
</div> </div>
<aside class="single-project__sidebar" aria-label="<?php echo esc_attr__( 'Repository details', 'ks-portfolio' ); ?>"> <aside class="single-project__sidebar" aria-label="<?php echo esc_attr__( $is_website ? __( 'Website details', 'ks-portfolio' ) : __( 'Repository details', 'ks-portfolio' ) ); ?>">
<?php if ( $owner ) : ?> <?php if ( $is_website ) : ?>
<section class="single-project__maintainer"> <?php if ( $site_platform ) : ?>
<h3><?php echo esc_html__( 'Maintainer', 'ks-portfolio' ); ?></h3> <section class="single-project__details">
<div class="single-project__owner"> <h3><?php echo esc_html__( 'Website Details', 'ks-portfolio' ); ?></h3>
<?php if ( ! empty( $owner['avatar_url'] ) ) : ?> <?php
<span class="single-project__owner-avatar" style="background-image: url('<?php echo esc_url( $owner['avatar_url'] ); ?>');" aria-hidden="true"></span> set_query_var( 'label', __( 'Platform', 'ks-portfolio' ) );
<?php endif; ?> set_query_var( 'value', $site_platform );
<a class="single-project__owner-link" href="<?php echo esc_url( ! empty( $owner['html_url'] ) ? $owner['html_url'] : ( 'https://github.com/' . $owner['login'] ) ); ?>" target="_blank" rel="noopener noreferrer"> get_template_part( 'views/components/project-meta-row' );
<?php echo esc_html( $owner['login'] ); ?> ?>
</a> </section>
</div> <?php endif; ?>
<?php else : ?>
<?php if ( $owner ) : ?>
<section class="single-project__maintainer">
<h3><?php echo esc_html__( 'Maintainer', 'ks-portfolio' ); ?></h3>
<div class="single-project__owner">
<?php if ( ! empty( $owner['avatar_url'] ) ) : ?>
<span class="single-project__owner-avatar" style="background-image: url('<?php echo esc_url( $owner['avatar_url'] ); ?>');" aria-hidden="true"></span>
<?php endif; ?>
<a class="single-project__owner-link" href="<?php echo esc_url( ! empty( $owner['html_url'] ) ? $owner['html_url'] : ( 'https://github.com/' . $owner['login'] ) ); ?>" target="_blank" rel="noopener noreferrer">
<?php echo esc_html( $owner['login'] ); ?>
</a>
</div>
</section>
<?php endif; ?>
<section class="single-project__details">
<h3><?php echo esc_html__( 'Repository Details', 'ks-portfolio' ); ?></h3>
<?php
$updated_at = is_array( $repo_data ) && ! empty( $repo_data['updated_at'] )
? human_time_diff( strtotime( $repo_data['updated_at'] ) ) . ' ' . __( 'ago', 'ks-portfolio' )
: '—';
$license = is_array( $repo_data ) && ! empty( $repo_data['license']['name'] ) ? $repo_data['license']['name'] : __( 'None', 'ks-portfolio' );
$language = is_array( $repo_data ) && ! empty( $repo_data['language'] ) ? $repo_data['language'] : '—';
$rows = array();
$rows[] = array(
'label' => __( 'Version', 'ks-portfolio' ),
'value' => 'Unknown' !== $version ? 'v' . $version : __( 'Unknown', 'ks-portfolio' ),
);
$rows[] = array(
'label' => __( 'Last Updated', 'ks-portfolio' ),
'value' => $updated_at,
);
$rows[] = array(
'label' => __( 'License', 'ks-portfolio' ),
'value' => $license,
);
$rows[] = array(
'label' => __( 'Language', 'ks-portfolio' ),
'value' => $language,
);
foreach ( $rows as $row ) :
set_query_var( 'label', $row['label'] );
set_query_var( 'value', $row['value'] );
get_template_part( 'views/components/project-meta-row' );
endforeach;
?>
</section>
<section class="single-project__stats" aria-label="<?php echo esc_attr__( 'Repository statistics', 'ks-portfolio' ); ?>">
<?php
$stats = array();
$stats[] = array(
'label' => __( 'Downloads', 'ks-portfolio' ),
'value' => Projects::format_stat( get_post_meta( $project_id, '_projects_portfolio_download_count', true ) ),
);
$stats[] = array(
'label' => __( 'Stars', 'ks-portfolio' ),
'value' => Projects::format_stat( is_array( $repo_data ) ? ( $repo_data['stargazers_count'] ?? 0 ) : 0 ),
);
$stats[] = array(
'label' => __( 'Forks', 'ks-portfolio' ),
'value' => Projects::format_stat( is_array( $repo_data ) ? ( $repo_data['forks_count'] ?? 0 ) : 0 ),
);
$stats[] = array(
'label' => __( 'Issues', 'ks-portfolio' ),
'value' => Projects::format_stat( is_array( $repo_data ) ? ( $repo_data['open_issues_count'] ?? 0 ) : 0 ),
);
foreach ( $stats as $stat ) :
set_query_var( 'label', $stat['label'] );
set_query_var( 'value', $stat['value'] );
get_template_part( 'views/components/project-stat-card' );
endforeach;
?>
</section> </section>
<?php endif; ?> <?php endif; ?>
<section class="single-project__details">
<h3><?php echo esc_html__( 'Repository Details', 'ks-portfolio' ); ?></h3>
<?php
$updated_at = is_array( $repo_data ) && ! empty( $repo_data['updated_at'] )
? human_time_diff( strtotime( $repo_data['updated_at'] ) ) . ' ' . __( 'ago', 'ks-portfolio' )
: '—';
$license = is_array( $repo_data ) && ! empty( $repo_data['license']['name'] ) ? $repo_data['license']['name'] : __( 'None', 'ks-portfolio' );
$language = is_array( $repo_data ) && ! empty( $repo_data['language'] ) ? $repo_data['language'] : '—';
$rows = array();
$rows[] = array(
'label' => __( 'Version', 'ks-portfolio' ),
'value' => 'Unknown' !== $version ? 'v' . $version : __( 'Unknown', 'ks-portfolio' ),
);
$rows[] = array(
'label' => __( 'Last Updated', 'ks-portfolio' ),
'value' => $updated_at,
);
$rows[] = array(
'label' => __( 'License', 'ks-portfolio' ),
'value' => $license,
);
$rows[] = array(
'label' => __( 'Language', 'ks-portfolio' ),
'value' => $language,
);
foreach ( $rows as $row ) :
set_query_var( 'label', $row['label'] );
set_query_var( 'value', $row['value'] );
get_template_part( 'views/components/project-meta-row' );
endforeach;
?>
</section>
<section class="single-project__stats" aria-label="<?php echo esc_attr__( 'Repository statistics', 'ks-portfolio' ); ?>">
<?php
$stats = array();
$stats[] = array(
'label' => __( 'Downloads', 'ks-portfolio' ),
'value' => Projects::format_stat( get_post_meta( $project_id, '_projects_portfolio_download_count', true ) ),
);
$stats[] = array(
'label' => __( 'Stars', 'ks-portfolio' ),
'value' => Projects::format_stat( is_array( $repo_data ) ? ( $repo_data['stargazers_count'] ?? 0 ) : 0 ),
);
$stats[] = array(
'label' => __( 'Forks', 'ks-portfolio' ),
'value' => Projects::format_stat( is_array( $repo_data ) ? ( $repo_data['forks_count'] ?? 0 ) : 0 ),
);
$stats[] = array(
'label' => __( 'Issues', 'ks-portfolio' ),
'value' => Projects::format_stat( is_array( $repo_data ) ? ( $repo_data['open_issues_count'] ?? 0 ) : 0 ),
);
foreach ( $stats as $stat ) :
set_query_var( 'label', $stat['label'] );
set_query_var( 'value', $stat['value'] );
get_template_part( 'views/components/project-stat-card' );
endforeach;
?>
</section>
</aside> </aside>
</div> </div>
</div> </div>
styles/base/colors.css
+26 -26
View File
@@ -1,6 +1,6 @@
/* Theme color definitions */ /* Theme color definitions */
@theme { @theme static {
--color-black: oklch(0% 0 0); --color-black: oklch(0% 0 0);
--color-white: oklch(100% 0 0); --color-white: oklch(100% 0 0);
@@ -38,32 +38,32 @@
--color-dark: oklch(34.51% 0.0133 248.2); --color-dark: oklch(34.51% 0.0133 248.2);
/* Carbon Blue / dark surface tokens (Portfolio 2026) */ /* Carbon Blue / dark surface tokens (Portfolio 2026) */
--color-surface: #121318; --color-surface: oklch(18.79% 0.0103 276.4);
--color-surface-dim: #121318; --color-surface-dim: oklch(18.79% 0.0103 276.4);
--color-surface-bright: #38393f; --color-surface-bright: oklch(34.59% 0.0105 278.3);
--color-surface-container-lowest: #0d0e13; --color-surface-container-lowest: oklch(16.51% 0.0106 276.3);
--color-surface-container-low: #1a1b21; --color-surface-container-low: oklch(22.37% 0.0117 277.9);
--color-surface-container: #1e1f25; --color-surface-container: oklch(24.08% 0.0115 278);
--color-surface-container-high: #292a2f; --color-surface-container-high: oklch(28.6% 0.0092 276.8);
--color-surface-container-highest: #34343a; --color-surface-container-highest: oklch(32.74% 0.0105 285.8);
--color-on-surface: #e3e1e9; --color-on-surface: oklch(91.36% 0.011 297.6);
--color-on-surface-variant: #c5c5d3; --color-on-surface-variant: oklch(82.77% 0.0194 286);
--color-outline: #8f909d; --color-outline: oklch(65.68% 0.0192 282.3);
--color-outline-variant: #444651; --color-outline-variant: oklch(39.65% 0.0187 277.4);
--color-page-base: #100e0b; --color-page-base: oklch(16.5% 0.007 78.1);
--color-backlight: rgba(96, 165, 250, 0.20); --color-backlight: oklch(71.37% 0.1434 254.6 / 0.2);
--color-primary-fixed: #dce1ff; --color-primary-fixed: oklch(91.52% 0.0412 278.1);
--color-primary-fixed-dim: #b6c4ff; --color-primary-fixed-dim: oklch(83.03% 0.0845 274.1);
--color-on-primary: #05297a; --color-on-primary: oklch(32.02% 0.1432 262.8);
--color-on-primary-fixed: #00164e; --color-on-primary-fixed: oklch(23.06% 0.1072 262.1);
--color-on-primary-fixed-variant: #264191; --color-on-primary-fixed-variant: oklch(40.35% 0.1363 266.3);
--color-primary-12: rgba(182, 196, 255, 0.12); --color-primary-12: oklch(83.03% 0.0845 274.1 / 0.12);
--color-primary-87: #dce1ff; --color-primary-87: oklch(91.52% 0.0412 278.1);
--color-success: #5ccf91; --color-success: oklch(77.17% 0.1386 157.2);
--color-warning: #f4e04d; --color-warning: oklch(91.37% 0.1234 97.2);
--color-danger: #cc3b3b; --color-danger: oklch(54.12% 0.1456 29.8);
--color-info: #3d7ab0; --color-info: oklch(45.67% 0.1345 210.3);
} }
styles/base/typography.css
+9 -4
View File
@@ -39,7 +39,7 @@
* text-75px | 32.00 | 39.46 | 43.25 | 50.30 | 57.36 | 61.77 | 75.00 * text-75px | 32.00 | 39.46 | 43.25 | 50.30 | 57.36 | 61.77 | 75.00
*/ */
@theme { @theme static {
--font-sans: "Raleway", sans-serif; --font-sans: "Raleway", sans-serif;
--font-headings: var(--font-sans); --font-headings: var(--font-sans);
--line-height: 1.6; --line-height: 1.6;
@@ -140,10 +140,15 @@ p {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
ul, ol { margin: 0 0 1rem 1.5rem; padding: 0; }
ul { list-style-type: disc; } ul {
list-style-type: disc;
}
ol { list-style-type: decimal; } ol {
list-style-type: decimal;
}
li ul, li ol { margin: 0 1rem; } li ul, li ol { margin: 0 1rem; }
@@ -169,7 +174,7 @@ pre code {
padding: 0; padding: 0;
} }
code { @apply bg-black/30 px-0.25 py-0.5 font-mono text-black text-xs rounded-sm; } code { @apply bg-white/30 px-0.25 py-0.25 font-mono text-black rounded-sm; }
hr { hr {
background-color: black; background-color: black;
styles/blocks/buttons.css
+127 -119
View File
@@ -1,95 +1,117 @@
/* Button styles */ /* Button styles */
@theme { @theme inline {
/* Configuration */ /* Configuration */
/** /**
* Button component settings * Button component settings
* *
* The variables below are used to define the button styles. * The variables below are used to define the button styles.
* Most of these variables come from the main theme configuration. * Most of these variables come from the main theme configuration.
* The following variables are not defined, but have fallback values * The following variables are not defined, but have fallback values
* in their respective locations and can be added if needed: * in their respective locations and can be added if needed:
* *
* --button-font-weight (fallback is 600/semibold) * --button-font-weight (fallback is 600/semibold)
* --button-font-size (fallback is 1rem) * --button-font-size (fallback is 1rem)
* --button-outline-width (fallback is --button-border-width) * --button-outline-width (fallback is --button-border-width)
* --button-outline-style (fallback is --button-border-style) * --button-outline-style (fallback is --button-border-style)
* --button-outline-color (fallback is --button-border-color) * --button-outline-color (fallback is --button-border-color)
*/ */
--button-bg: var(--color-primary); --button-bg: var(--color-on-primary-fixed-variant);
--button-color: var(--color-white); --button-color: var(--color-primary-fixed-dim);
--button-hover-bg: var(--color-info); --button-hover-bg: var(--color-info);
--button-hover-border-color: var(--color-info); --button-hover-border-color: var(--color-info);
--button-hover-color: var(--color-white); --button-hover-color: var(--color-white);
--button-border-width: 3px; --button-border-width: 3px;
--button-border-style: solid; --button-border-style: solid;
--button-border-color: var(--button-bg); --button-border-color: var(--color-primary-fixed-dim);
--button-radius: 0.5rem; --button-radius: 0.5rem;
} }
.btn, .button, .acf-block-preview .button { .btn, .button, .acf-block-preview .button {
@apply px-8 py-2 min-w-0; @apply px-8 py-2 min-w-0;
background: var(--button-bg); background: var(--button-bg);
color: var(--button-color); color: var(--button-color);
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
transition: background 200ms, border-color 200ms, color 200ms; transition: background 200ms, border-color 200ms, color 200ms;
border-width: var(--button-border-width); border-width: var(--button-border-width);
border-style: var(--button-border-style); border-style: var(--button-border-style);
border-color: var(--button-border-color); border-color: var(--button-border-color);
border-radius: var(--button-radius); border-radius: var(--button-radius);
text-decoration: none; text-decoration: none;
font-weight: var(--button-font-weight, 600); font-weight: var(--button-font-weight, 600);
font-size: var(--button-font-size, 1rem); font-size: var(--button-font-size, 1rem);
line-height: 1.1; line-height: 1.1;
&[data-button-variant="outline"] { &[data-button-variant="outline"] {
background: transparent; background: transparent;
&:hover { background: transparent; } color: var(--button-border-color);
border-color: var(--button-bg);
--button-color: var(--button-outline-color, var(--button-bg)); &:hover {
--button-hover-border-color: var(--button-hover-bg); background: transparent;
--button-hover-color: var(--button-hover-bg); border-color: var(--button-hover-bg);
} color: var(--button-hover-color);
}
}
} }
/* Hover/focus/active */ /* Hover/focus/active */
.btn:hover, .button:hover, .acf-block-preview .button:hover { .btn:hover, .button:hover, .acf-block-preview .button:hover {
background: var(--button-hover-bg); background: var(--button-hover-bg);
border-color: var(--button-hover-border-color); border-color: var(--button-hover-border-color);
color: var(--button-hover-color); color: var(--button-hover-color);
} }
.btn:focus, .button:focus { .btn:focus, .button:focus {
outline-width: var(--button-outline-width, var(--button-border-width)); outline-width: var(--button-outline-width, var(--button-border-width));
outline-style: var(--button-outline-style, var(--button-border-style)); outline-style: var(--button-outline-style, var(--button-border-style));
outline-color: var(--button-outline-color, var(--button-border-color)); outline-color: var(--button-outline-color, var(--button-border-color));
outline-offset: calc(var(--button-border-width) * 2); outline-offset: calc(var(--button-border-width) * 2);
} }
.btn:active, .button:active { transform: scale(99%); } .btn:active, .button:active { transform: scale(99%); }
/* Back To Top Button */ /* Back To Top Button */
#backToTopBtn { #backToTopBtn {
display:none; background: var(--color-primary,#3857BC);
position:fixed; border: none;
bottom:2rem; border-radius: 2em;
right:2rem; bottom: 2rem;
z-index:1000; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
padding:0.75em 1.5em; color: #fff;
font-size:1.1rem; cursor: pointer;
border-radius:2em; display: none;
background:var(--color-primary,#3857BC); font-size: 1.1rem;
color:#fff; padding: 0.75em 1.5em;
border:none; position: fixed;
box-shadow:0 2px 8px rgba(0,0,0,0.15); right: 2rem;
cursor:pointer; transition: opacity 0.2s;
transition:opacity 0.2s; z-index: 1000;
}
.back-to-top {
background: var(--color-primary, #3857BC);
border: none;
border-radius: 2em;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
color: #fff;
cursor: pointer;
font-size: 1.1rem;
opacity: 0.85;
padding: 0.75em 1.5em;
transition: opacity 0.2s, background 0.2s;
&:hover, &:focus {
background: var(--color-info, #233a7a);
opacity: 1;
outline: 2px solid var(--color-info, #233a7a);
}
} }
/** /**
@@ -121,58 +143,40 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
* like the ones below and changing the color values. * like the ones below and changing the color values.
*/ */
.btn[data-button-color="secondary"], .button[data-button-color="secondary"] { .btn[data-button-color="secondary"], .button[data-button-color="secondary"] {
--button-bg: var(--color-secondary); --button-bg: var(--color-secondary);
--button-color: var(--color-white); --button-color: var(--color-white);
--button-border-color: var(--color-secondary); --button-border-color: var(--color-secondary);
--button-outline-color: oklch(0.48 0.0136 252.2); --button-outline-color: oklch(0.48 0.0136 252.2);
--button-hover-bg: var(--color-dark); --button-hover-bg: var(--color-dark);
--button-hover-border-color: var(--color-dark); --button-hover-border-color: var(--color-dark);
--button-hover-color: var(--color-white); --button-hover-color: var(--color-white);
} }
.btn[data-button-color="light"], .button[data-button-color="light"] { .btn[data-button-color="light"], .button[data-button-color="light"] {
--button-bg: var(--color-white); --button-bg: var(--color-white);
--button-color: var(--color-dark); --button-color: var(--color-dark);
--button-border-color: var(--color-white); --button-border-color: var(--color-white);
--button-hover-bg: var(--color-dark); --button-hover-bg: var(--color-dark);
--button-hover-border-color: var(--color-dark); --button-hover-border-color: var(--color-dark);
--button-hover-color: var(--color-white); --button-hover-color: var(--color-white);
} }
.btn[data-button-color="white"], .button[data-button-color="white"] { .btn[data-button-color="white"], .button[data-button-color="white"] {
--button-bg: var(--color-white); --button-bg: var(--color-white);
--button-color: var(--color-black); --button-color: var(--color-black);
--button-border-color: var(--color-white); --button-border-color: var(--color-white);
--button-hover-bg: var(--color-secondary-200); --button-hover-bg: var(--color-secondary-200);
--button-hover-border-color: var(--color-secondary-200); --button-hover-border-color: var(--color-secondary-200);
--button-hover-color: var(--color-black); --button-hover-color: var(--color-black);
} }
.btn[data-button-color="black"], .button[data-button-color="black"] { .btn[data-button-color="black"], .button[data-button-color="black"] {
--button-bg: var(--color-black); --button-bg: var(--color-black);
--button-color: var(--color-white); --button-color: var(--color-white);
--button-border-color: var(--color-black); --button-border-color: var(--color-black);
--button-hover-bg: var(--color-secondary); --button-hover-bg: var(--color-secondary);
--button-hover-border-color: var(--color-secondary); --button-hover-border-color: var(--color-secondary);
--button-hover-color: var(--color-dark); --button-hover-color: var(--color-dark);
}
.back-to-top {
background: var(--color-primary, #3857BC);
color: #fff;
border: none;
border-radius: 2em;
padding: 0.75em 1.5em;
font-size: 1.1rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
cursor: pointer;
transition: opacity 0.2s, background 0.2s;
opacity: 0.85;
}
.back-to-top:hover, .back-to-top:focus {
background: var(--color-info, #233a7a);
opacity: 1;
outline: 2px solid var(--color-info, #233a7a);
} }
/* Dark-surface button variants (WCAG-AA against #100e0b) */ /* Dark-surface button variants (WCAG-AA against #100e0b) */
@@ -191,6 +195,7 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
} }
.button:active { transform: scale(0.99); } .button:active { transform: scale(0.99); }
@media (prefers-reduced-motion: reduce) { .button:active { transform: none; } } @media (prefers-reduced-motion: reduce) { .button:active { transform: none; } }
.button:focus-visible { outline: 2px solid var(--color-primary, #b6c4ff); outline-offset: 3px; } .button:focus-visible { outline: 2px solid var(--color-primary, #b6c4ff); outline-offset: 3px; }
@@ -199,20 +204,22 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
background: var(--color-primary, #b6c4ff); background: var(--color-primary, #b6c4ff);
color: var(--color-on-primary, #05297a); color: var(--color-on-primary, #05297a);
border-color: var(--color-primary, #b6c4ff); border-color: var(--color-primary, #b6c4ff);
&:hover { background: var(--color-primary-87, #dce1ff); border-color: var(--color-primary-87, #dce1ff); }
} }
.button--primary:hover { background: var(--color-primary-87, #dce1ff); border-color: var(--color-primary-87, #dce1ff); }
.button--outline { .button--outline {
background: transparent; background: transparent;
color: var(--color-on-surface, #e3e1e9);
border-color: var(--color-outline, #8f909d); border-color: var(--color-outline, #8f909d);
color: var(--color-on-surface, #e3e1e9);
&:hover { border-color: var(--color-primary, #b6c4ff); color: var(--color-primary, #b6c4ff); }
} }
.button--outline:hover { border-color: var(--color-primary, #b6c4ff); color: var(--color-primary, #b6c4ff); }
.button--secondary { .button--secondary {
background: var(--color-surface-container-high, #292a2f); background: var(--color-surface-container-high, #292a2f);
color: var(--color-on-surface, #e3e1e9);
border-color: var(--color-outline-variant, #444651); border-color: var(--color-outline-variant, #444651);
color: var(--color-on-surface, #e3e1e9);
} }
/* Outline button over the site-header's bg-secondary surface needs lighter text /* Outline button over the site-header's bg-secondary surface needs lighter text
@@ -220,10 +227,11 @@ x-button:has(.button[data-button-width="full"]) { @apply w-full; }
* Pure white clears 4.5:1 against #6e757f; --color-on-primary (#05297a) is too * Pure white clears 4.5:1 against #6e757f; --color-on-primary (#05297a) is too
* dark and drops to 2.81:1, so we go to --color-white instead. */ * dark and drops to 2.81:1, so we go to --color-white instead. */
.site-header .button--outline { .site-header .button--outline {
color: var(--color-white, #ffffff);
border-color: var(--color-white, #ffffff); border-color: var(--color-white, #ffffff);
} color: var(--color-white, #ffffff);
.site-header .button--outline:hover {
color: var(--color-primary-87, #dce1ff); &:hover {
border-color: var(--color-primary-87, #dce1ff); border-color: var(--color-primary-87, #dce1ff);
color : var(--color-primary-87, #dce1ff);
}
} }
styles/components/project-card.css
+11 -5
View File
@@ -66,6 +66,7 @@
margin: 0; margin: 0;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 4; -webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
} }
@@ -96,23 +97,22 @@
text-decoration: none; text-decoration: none;
border: 2px solid transparent; border: 2px solid transparent;
transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease; transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
&:hover { background: var(--color-primary-87); border-color: var(--color-primary-87); }
} }
.project-card__action--primary { .project-card__action--primary {
background: var(--color-primary, #b6c4ff); background: var(--color-primary);
color: var(--color-on-primary, #05297a); color: #fff;
border-color: var(--color-primary, #b6c4ff); border-color: var(--color-primary, #b6c4ff);
} }
.project-card__action--primary:hover { background: var(--color-primary-87); border-color: var(--color-primary-87); }
.project-card__action--secondary { .project-card__action--secondary {
color: var(--color-on-surface, #e3e1e9); color: var(--color-on-surface, #e3e1e9);
border-color: var(--color-outline, #8f909d); border-color: var(--color-outline, #8f909d);
} }
.project-card__action--secondary:hover { border-color: var(--color-primary, #b6c4ff); color: var(--color-primary, #b6c4ff); }
.project-card__action:focus-visible { .project-card__action:focus-visible {
outline: 2px solid var(--color-primary, #b6c4ff); outline: 2px solid var(--color-primary, #b6c4ff);
outline-offset: 3px; outline-offset: 3px;
@@ -327,3 +327,9 @@
} }
.home-recent__empty { text-align: center; padding: 4rem 1rem; color: var(--color-on-surface-variant, #c5c5d3); } .home-recent__empty { text-align: center; padding: 4rem 1rem; color: var(--color-on-surface-variant, #c5c5d3); }
/* Website-mode project card + single-project screenshot/platform */
.single-project__screenshot { margin: 0 0 1.5rem; }
.single-project__screenshot img { width: 100%; height: auto; border-radius: 0.75rem; display: block; border: 1px solid var(--color-outline-variant, #444651); }
.project-card__platform { color: var(--color-on-surface-variant, #c5c5d3); font-size: 0.875rem; }
views/components/project-card.php
+26 -11
View File
@@ -20,6 +20,9 @@ $type_terms = get_the_terms( $project_id, 'project-type' );
if ( ! empty( $type_terms ) && ! is_wp_error( $type_terms ) ) { if ( ! empty( $type_terms ) && ! is_wp_error( $type_terms ) ) {
$type_label = strtoupper( $type_terms[0]->name ); $type_label = strtoupper( $type_terms[0]->name );
} }
$is_website = Projects::is_website( $project_id );
$site_url = Projects::get_site_url( $project_id );
$site_platform = Projects::get_site_platform( $project_id );
$release_url = Projects::get_release_url( $project_id ); $release_url = Projects::get_release_url( $project_id );
$repo_url = Projects::get_repo_browse_url( $project_id ); $repo_url = Projects::get_repo_browse_url( $project_id );
$repo_data = Projects::get_repo_data( $project_id ); $repo_data = Projects::get_repo_data( $project_id );
@@ -35,7 +38,7 @@ $card_classes = 'project-card group';
<span class="project-card__type"><?php echo esc_html( $type_label ); ?></span> <span class="project-card__type"><?php echo esc_html( $type_label ); ?></span>
<?php endif; ?> <?php endif; ?>
<span class="project-card__provider" aria-hidden="true"> <span class="project-card__provider" aria-hidden="true">
<?php echo esc_html( Projects::get_provider_label( $project_id ) ); ?> <?php echo esc_html( $is_website ? __( 'Website', 'ks-portfolio' ) : Projects::get_provider_label( $project_id ) ); ?>
</span> </span>
</header> </header>
@@ -50,7 +53,7 @@ $card_classes = 'project-card group';
<?php endif; ?> <?php endif; ?>
<footer class="project-card__foot"> <footer class="project-card__foot">
<?php if ( $language || $stars > 0 ) : ?> <?php if ( ! $is_website && ( $language || $stars > 0 ) ) : ?>
<div class="project-card__meta"> <div class="project-card__meta">
<?php if ( $language ) : ?> <?php if ( $language ) : ?>
<span class="project-card__lang"><?php echo esc_html( $language ); ?></span> <span class="project-card__lang"><?php echo esc_html( $language ); ?></span>
@@ -59,18 +62,30 @@ $card_classes = 'project-card group';
<span class="project-card__stars" aria-label="<?php echo esc_attr( $stars . ' stars' ); ?>">★ <?php echo esc_html( (string) $stars ); ?></span> <span class="project-card__stars" aria-label="<?php echo esc_attr( $stars . ' stars' ); ?>">★ <?php echo esc_html( (string) $stars ); ?></span>
<?php endif; ?> <?php endif; ?>
</div> </div>
<?php elseif ( $is_website && $site_platform ) : ?>
<div class="project-card__meta">
<span class="project-card__platform"><?php echo esc_html( $site_platform ); ?></span>
</div>
<?php endif; ?> <?php endif; ?>
<div class="project-card__actions"> <div class="project-card__actions">
<?php if ( $release_url ) : ?> <?php if ( $is_website ) : ?>
<a class="project-card__action project-card__action--primary" href="<?php echo esc_url( Projects::get_download_url( $project_id ) ); ?>" rel="nofollow"> <?php if ( $site_url ) : ?>
<?php echo esc_html__( 'Download', 'ks-portfolio' ); ?> <a class="project-card__action project-card__action--primary" href="<?php echo esc_url( $site_url ); ?>" target="_blank" rel="noopener noreferrer">
</a> <?php echo esc_html__( 'Visit Site', 'ks-portfolio' ); ?>
<?php endif; ?> </a>
<?php if ( $repo_url ) : ?> <?php endif; ?>
<a class="project-card__action project-card__action--secondary" href="<?php echo esc_url( $repo_url ); ?>" target="_blank" rel="noopener noreferrer"> <?php else : ?>
<?php echo esc_html__( 'View Repo', 'ks-portfolio' ); ?> <?php if ( $release_url ) : ?>
</a> <a class="project-card__action project-card__action--primary" href="<?php echo esc_url( Projects::get_download_url( $project_id ) ); ?>" rel="nofollow">
<?php echo esc_html__( 'Download', 'ks-portfolio' ); ?>
</a>
<?php endif; ?>
<?php if ( $repo_url ) : ?>
<a class="project-card__action project-card__action--secondary" href="<?php echo esc_url( $repo_url ); ?>" target="_blank" rel="noopener noreferrer">
<?php echo esc_html__( 'View Repo', 'ks-portfolio' ); ?>
</a>
<?php endif; ?>
<?php endif; ?> <?php endif; ?>
</div> </div>
</footer> </footer>