diff --git a/resources/css/components/post-card.css b/resources/css/components/post-card.css index 18158da..dd45148 100644 --- a/resources/css/components/post-card.css +++ b/resources/css/components/post-card.css @@ -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 { diff --git a/resources/css/components/post-header.css b/resources/css/components/post-header.css index de4b040..e6ed323 100644 --- a/resources/css/components/post-header.css +++ b/resources/css/components/post-header.css @@ -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); diff --git a/template-parts/components/cards/post-card.php b/template-parts/components/cards/post-card.php index 5fe445d..86d1330 100644 --- a/template-parts/components/cards/post-card.php +++ b/template-parts/components/cards/post-card.php @@ -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'); + ?>
<?php echo $title; ?> + +
+