Antoine/carhop__dynamiques-theme__PROD-DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RESPONSIVE FIX refining responsivity

Browse Source
This commit is contained in:
Nonimart 2025-09-16 14:01:44 +02:00
parent a74cf0af10
commit 8211ba7a6b
1 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
.post-header { .post-header {
@apply bg-primary text-white py-32; @apply bg-primary text-white py-32 px-2 lg:px-4 md:px-8;
h1.post-header__title, h1.post-header__title,
h2.post-header__title { h2.post-header__title {
@ -7,10 +7,13 @@
line-height: 1.2; line-height: 1.2;
} }
&__inner { &__inner {
@apply container mx-auto grid gap-24; @apply mx-auto grid gap-24;
@screen xl {
@apply container;
}
&--has-thumbnail { &--has-thumbnail {
@screen lg { @screen lg {
grid-template-columns: 1fr 4fr; grid-template-columns: 4fr 1fr;
} }
} }
&--no-thumbnail { &--no-thumbnail {
@ -21,9 +24,14 @@
@apply bg-white text-primary; @apply bg-white text-primary;
} }
.thumbnail-wrapper { .thumbnail-wrapper {
@apply order-2 lg:order-1 relative z-20; @apply order-2 lg:order-1 relative z-20 h-fit;
aspect-ratio: 4/5;
padding: 1.2rem; padding: 1.2rem;
/* max-width: calc(70% - 40px);
@apply mx-auto; */
@screen lg {
transform: translateX(-40px);
}
&:before { &:before {
content: ''; content: '';
@ -31,8 +39,9 @@
} }
img { img {
aspect-ratio: 4/5;
/* max-height: 200px; */ /* max-height: 200px; */
@apply w-full h-full relative z-10; @apply max-h-[200px] lg:max-h-full w-full h-full relative z-10;
@apply object-cover; @apply object-cover;
/* width: calc(100% - 2rem); /* width: calc(100% - 2rem);
height: calc(100% - 2rem); height: calc(100% - 2rem);