Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE Handling post card overlay

Browse Source
This commit is contained in:
Antoine M 2026-03-23 15:27:21 +01:00
parent 06270d27cb
commit eb55c9d82b
3 changed files with 40 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
resources/css/components/post-card.css
View File

@ -6,7 +6,7 @@
}
&--has-thumbnail {
@apply grid gap-6;
@apply grid gap-10;
grid-template-columns: 1fr 3fr;
}
&.post-card--has-numerotation.post-card--has-thumbnail {
@ -14,13 +14,34 @@
}
&__thumbnail {
@apply bg-white border border-solid border-primary p-2 h-fit grayscale hover:grayscale-0;
@apply h-fit relative;
transition: all 0.3s ease-out;
img {
@apply grayscale;
aspect-ratio: 108/137;
@apply w-full bg-green-400 object-cover;
@apply w-full object-cover relative z-10 bg-white border border-solid border-primary p-2;
height: auto;
}
&:hover img {
@apply grayscale-0;
}
.thumbnail-overlay {
@apply absolute z-0 rotate-3 top-2 left-2 w-full h-full border border-primary bg-white flex items-center justify-center;
transform: translate(2px, 2px) rotate(2deg);
/* transform: translate(12px, 12px) rotate(3deg); */
background-image: linear-gradient(#efe8ff, #efe8ff);
background-size: calc(100% - 12px) calc(100% - 12px);
background-repeat: no-repeat;
background-position: center;
/* background-blend-mode: color-burn; */
/* background-size: calc(100% - 12px) calc(100% - 12px); */
/* &:after {
content: '';
width: calc(100% - 2rem);
height: calc(100% - 2rem);
} */
}
}
&:hover .post-card__thumbnail {

15
resources/css/components/post-header.css
View File

@ -1,6 +1,10 @@
.post-header {
@apply bg-primary text-white py-8 2xl:py-16 px-2 lg:px-4 md:px-8 overflow-x-hidden;
&:has(.post-header__inner--has-thumbnail) {
@apply pb-16 2xl:!pb-20;
}
h1.post-header__title,
h2.post-header__title {
@apply uppercase font-medium text-4xl md:text-5xl lg:text-5xl text-white;
@ -64,8 +68,10 @@
@apply text-white;
}
.thumbnail-wrapper {
@apply relative z-20 h-fit;
width: calc(100% - 40px);
@apply relative z-20 h-fit w-full;
@screen lg {
width: calc(100% - 40px);
}
padding: 1.2rem;
/* max-width: calc(70% - 40px);
@apply mx-auto; */
@ -90,8 +96,9 @@
margin: 0 auto; */
}
.thumbnail-overlay {
@apply absolute z-0 rotate-3 top-6 left-6 w-full h-full border border-primary bg-white flex items-center justify-center;
transform: translate(2px, 2px) rotate(2deg);
/* display: none !important; */
@apply hidden lg:flex absolute z-0 rotate-3 top-6 left-6 w-full h-full border border-primary bg-white items-center justify-center;
transform: translate(2px, 2px) rotate(3deg);
/* transform: translate(12px, 12px) rotate(3deg); */
background-image: linear-gradient(#efe8ff, #efe8ff);
background-size: calc(100% - 12px) calc(100% - 12px);

5
template-parts/components/cards/post-card.php
View File

@ -11,6 +11,7 @@ $link = get_the_permalink($ID);
$has_post_thumbnail = has_post_thumbnail($ID);
$thumbnail_url = get_the_post_thumbnail_url($ID) ?? null;
$has_thumbnail_overlay = $args['has_thumbnail_overlay'] ?? false;
$date = get_the_date('F Y', $ID);
@ -26,12 +27,16 @@ $publication_directors = get_field('publication_directors', $ID);
$numerotation = get_post_meta($ID, 'post_numerotation', true);
$tags = get_the_terms($ID, 'etiquettes');
?>
<a class="post-card post-card--<?php echo $current_post_type . ' ' . ($has_post_thumbnail ? 'post-card--has-thumbnail' : ''); ?> card" href="<?php echo $link; ?> ">
<?php if ($has_post_thumbnail) : ?>
<div class="post-card__thumbnail">
<img src="<?php echo $thumbnail_url; ?>" alt="<?php echo $title; ?>">
<?php if ($has_thumbnail_overlay) : ?>
<div class="thumbnail-overlay"></div>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="card__inner">