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

✨feature: Post cards built
Deploy to Dreamhost (dev) / build (push) Successful in 33s
Details
Sync TODOs with Issues / sync_todos (push) Successful in 5s
Details

Browse Source
This commit is contained in:
Keith Solomon
2026-07-05 14:25:33 -05:00
parent ef0b542e9d
commit 21657173e0
2 changed files with 40 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+14 -12
View File
@@ -23,13 +23,13 @@ get_header();
<?php if ( have_posts() ) : ?>
<div class="blog-posts <?php echo esc_attr( $clsEntry ); ?>">
<div class="post-list">
<div class="post-list__posts grid grid-cols-[repeat(auto-fit,minmax(20rem,1fr))] gap-6">
<div class="post-list__posts grid grid-cols-[repeat(auto-fit,minmax(26rem,1fr))] gap-12">
<?php
while ( have_posts() ) :
the_post();
?>
<div class="post-list__post flex flex-col border border-secondary rounded-md shadow-lg hover:prose-img:scale-110 hover:prose-img:origin-center hover:prose-img:duration-500">
<figure class="post-list__img aspect-video border-b border-secondary rounded-t-md block h-auto w-full overflow-hidden m-0 p-0">
<div class="post-list__post flex flex-col rounded-md shadow-lg hover:prose-img:scale-110 hover:prose-img:origin-center hover:prose-img:duration-500">
<figure class="post-list__img aspect-video rounded-t-md block h-auto w-full overflow-hidden m-0! p-0!">
<?php if ( has_post_thumbnail() ) : ?>
<?php
$featImg = get_the_post_thumbnail_url();
@@ -41,17 +41,19 @@ get_header();
<?php endif; ?>
</figure>
<div class="post-list__details px-4 py-6 flex flex-col grow">
<a href="<?php the_permalink(); ?>" class="">
<h2 class="post-list__title font-normal text-25px text-balance line-clamp-4 truncate mt-0 mb-5 mx-0"><?php the_title(); ?></h2>
</a>
<div class="post-list__details p-8 pb-10 flex flex-col justify-between grow">
<h2 class="post-list__title font-normal text-32px mt-0 mx-0">
<a href="<?php the_permalink(); ?>" class=""><?php the_title(); ?></a>
</h2>
<div class="post-list__byline mt-auto">
<span class="post-list__author"><?php echo esc_html( ucfirst( get_the_author() ) ); ?> &mdash;</span>
<span class="post-list__date"><?php echo get_the_date(); ?></span>
</div>
<div class="post-list__excerpt line-clamp-5 mb-4">
<?php the_excerpt(); ?>
</div>
<a class="post-list__read-more" href="<?php the_permalink(); ?>">Read more &rarr;</a>
<?php /* translators: %s: Post title. */ ?>
<a class="post-list__read-more border-b-2 border-b-secondary w-fit" href="<?php echo esc_url( $post_permalink ); ?>" aria-label="<?php echo esc_attr( sprintf( __( 'Continue reading %s', 'cwc' ), $post_title ) ); ?>">
<?php echo esc_html__( 'Read More', 'cwc' ); ?>
</a>
</div>
</div>
<?php endwhile; ?>
styles/components/post-list.css
+26 -19
View File
@@ -1,32 +1,39 @@
/* Blog/post index listing styles */
.post-list__h1 {
color: var(--color-cwc-blue-01);
font-family: var(--font-quincy, 'Quincy', serif);
font-size: var(--h1);
font-weight: 700;
line-height: 1.2;
margin: 0 0 2rem;
text-align: left;
}
.post-list__post { overflow: hidden; }
.post-list__post {
border-color: var(--color-cwc-blue-03);
overflow: hidden;
}
.post-list__img {
border-bottom: 0;
}
.post-list__img { border-bottom: 0; }
.post-list__details {
background: var(--color-cwc-blue-03);
background: color-mix(in oklch, var(--color-cwc-blue-03) 80%, white);
color: var(--color-cwc-blue-01);
}
.post-list__title {
color: var(--color-cwc-blue-01);
font-weight: 700;
line-height: 1.1;
a {
color: var(--color-cwc-blue-01);
text-decoration: none;
&::after {
background: var(--color-secondary);
content: "";
display: block;
height: 4px;
margin-top: 0.45rem;
width: 3rem;
}
}
}
.post-list__excerpt {
color: var(--color-dark);
font-size: var(--text-18px);
font-weight: 300;
line-height: 1.5;
}
.post-list__byline {
@@ -42,5 +49,5 @@
}
.post-list__read-more:hover {
text-decoration: underline;
}