feat(projects): add reusable project-card component + styles
This commit is contained in:
Keith Solomon
@@ -6,3 +6,4 @@
|
|||||||
@import "./sidebar.css";
|
@import "./sidebar.css";
|
||||||
@import "./pagination.css";
|
@import "./pagination.css";
|
||||||
@import "./site-footer.css";
|
@import "./site-footer.css";
|
||||||
|
@import "./project-card.css";
|
||||||
|
|||||||
@@ -0,0 +1,119 @@
|
|||||||
|
/* Project card — Carbon Blue surface */
|
||||||
|
.project-card {
|
||||||
|
background: var(--color-surface-container, #1e1f25);
|
||||||
|
border: 1px solid var(--color-outline-variant, #444651);
|
||||||
|
border-radius: 1rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
transition: border-color 200ms ease, transform 200ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card:hover,
|
||||||
|
.project-card:focus-within {
|
||||||
|
border-color: var(--color-primary, #b6c4ff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card:focus-within {
|
||||||
|
outline: 2px solid var(--color-primary, #b6c4ff);
|
||||||
|
outline-offset: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.project-card { transition: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__type {
|
||||||
|
background: rgba(182, 196, 255, 0.12);
|
||||||
|
color: var(--color-primary, #b6c4ff);
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__provider { color: var(--color-on-surface-variant, #c5c5d3); }
|
||||||
|
|
||||||
|
.project-card__title {
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
line-height: 1.4;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--color-on-surface, #e3e1e9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__title-link {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__title-link:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
.project-card__excerpt {
|
||||||
|
color: var(--color-on-surface-variant, #c5c5d3);
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin: 0;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 4;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__foot {
|
||||||
|
margin-top: auto;
|
||||||
|
padding-top: 0.75rem;
|
||||||
|
border-top: 1px solid var(--color-outline-variant, #444651);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__meta { display: inline-flex; gap: 0.75rem; align-items: center; color: var(--color-on-surface-variant, #c5c5d3); font-size: 0.875rem; }
|
||||||
|
|
||||||
|
.project-card__actions { display: inline-flex; gap: 0.5rem; }
|
||||||
|
|
||||||
|
.project-card__action {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem 0.75rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
line-height: 1.1;
|
||||||
|
text-decoration: none;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__action--primary {
|
||||||
|
background: var(--color-primary, #b6c4ff);
|
||||||
|
color: var(--color-on-primary, #05297a);
|
||||||
|
border-color: var(--color-primary, #b6c4ff);
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-card__action--primary:hover { background: #dce1ff; border-color: #dce1ff; }
|
||||||
|
|
||||||
|
.project-card__action--secondary {
|
||||||
|
color: var(--color-on-surface, #e3e1e9);
|
||||||
|
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 {
|
||||||
|
outline: 2px solid var(--color-primary, #b6c4ff);
|
||||||
|
outline-offset: 3px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Project Card Component
|
||||||
|
*
|
||||||
|
* Renders one project card. Used by front-page (Recent Projects) and
|
||||||
|
* archive-projects. Expects $post (WP_Post) in scope.
|
||||||
|
*
|
||||||
|
* @package KsPortfolio
|
||||||
|
*/
|
||||||
|
|
||||||
|
namespace KsPortfolio;
|
||||||
|
|
||||||
|
if ( ! isset( $post ) || ! ( $post instanceof \WP_Post ) ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
$post_id = (int) $post->ID;
|
||||||
|
$type_label = '';
|
||||||
|
$type_terms = get_the_terms( $post_id, 'project-type' );
|
||||||
|
if ( ! empty( $type_terms ) && ! is_wp_error( $type_terms ) ) {
|
||||||
|
$type_label = strtoupper( $type_terms[0]->name );
|
||||||
|
}
|
||||||
|
$release_url = Projects::get_release_url( $post_id );
|
||||||
|
$repo_url = Projects::get_repo_browse_url( $post_id );
|
||||||
|
$repo_data = Projects::get_repo_data( $post_id );
|
||||||
|
$language = is_array( $repo_data ) && ! empty( $repo_data['language'] ) ? (string) $repo_data['language'] : '';
|
||||||
|
$stars = is_array( $repo_data ) && isset( $repo_data['stargazers_count'] ) ? (int) $repo_data['stargazers_count'] : 0;
|
||||||
|
$excerpt = has_excerpt( $post_id ) ? get_the_excerpt( $post_id ) : wp_trim_words( wp_strip_all_tags( $post->post_content ), 30, '…' );
|
||||||
|
$card_classes = 'project-card group';
|
||||||
|
?>
|
||||||
|
|
||||||
|
<article class="<?php echo esc_attr( $card_classes ); ?>" aria-labelledby="project-<?php echo esc_attr( (string) $post_id ); ?>-title">
|
||||||
|
<header class="project-card__head">
|
||||||
|
<?php if ( $type_label ) : ?>
|
||||||
|
<span class="project-card__type"><?php echo esc_html( $type_label ); ?></span>
|
||||||
|
<?php endif; ?>
|
||||||
|
<span class="project-card__provider" aria-hidden="true">
|
||||||
|
<?php echo esc_html( Projects::get_provider_label( $post_id ) ); ?>
|
||||||
|
</span>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<h3 id="project-<?php echo esc_attr( (string) $post_id ); ?>-title" class="project-card__title">
|
||||||
|
<a class="project-card__title-link" href="<?php echo esc_url( get_permalink( $post_id ) ); ?>">
|
||||||
|
<?php echo esc_html( get_the_title( $post_id ) ); ?>
|
||||||
|
</a>
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<?php if ( $excerpt ) : ?>
|
||||||
|
<p class="project-card__excerpt"><?php echo esc_html( $excerpt ); ?></p>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<footer class="project-card__foot">
|
||||||
|
<?php if ( $language || $stars > 0 ) : ?>
|
||||||
|
<div class="project-card__meta">
|
||||||
|
<?php if ( $language ) : ?>
|
||||||
|
<span class="project-card__lang"><?php echo esc_html( $language ); ?></span>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php if ( $stars > 0 ) : ?>
|
||||||
|
<span class="project-card__stars" aria-label="<?php echo esc_attr( $stars . ' stars' ); ?>">★ <?php echo esc_html( (string) $stars ); ?></span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<div class="project-card__actions">
|
||||||
|
<?php if ( $release_url ) : ?>
|
||||||
|
<a class="project-card__action project-card__action--primary" href="<?php echo esc_url( Projects::get_download_url( $post_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; ?>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
Reference in New Issue
Block a user