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

RESPONSIVE FIX

Browse Source
This commit is contained in:
Nonimart 2025-09-18 11:04:57 +02:00
parent d6c0c32290
commit f4c9649f70
4 changed files with 37 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/css/components/post-card--article.css
View File

@ -2,7 +2,7 @@
&.has-cover { &.has-cover {
@apply gap-2; @apply gap-2;
.post-card__content { .post-card__content {
@apply pl-6; @apply md:pl-6;
} }
} }
.post-card__title { .post-card__title {

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

@ -1,9 +1,19 @@
.post-card { .post-card {
@apply p-8 border border-primary relative grid gap-12 bg-white; @apply p-8 border border-primary relative grid gap-y-4 gap-12 bg-white;
grid-template-columns: 1fr;
@screen lg {
grid-template-columns: 1fr 40px; grid-template-columns: 1fr 40px;
}
&.has-cover { &.has-cover {
.post-card__cover {
@apply col-span-1;
}
@screen lg {
grid-template-columns: 1fr 3fr 40px; grid-template-columns: 1fr 3fr 40px;
.post-card__cover {
@apply col-span-1;
}
}
} }
.content-meta { .content-meta {
@ -20,8 +30,9 @@
} }
&__cover { &__cover {
@apply p-2 object-cover w-full h-36 relative; @apply order-3 lg:order-1 p-2 object-cover w-full h-36 md:h-56 lg:h-36 md:mt-6 lg:mt-0 relative mb-6 lg:mb-0;
z-index: 10; z-index: 10;
img { img {
@apply w-full h-full object-cover; @apply w-full h-full object-cover;
} }
@ -46,8 +57,13 @@
} }
} }
&__content {
@apply order-2 lg:order-1;
}
.issue-number { .issue-number {
@apply bg-primary text-white w-full h-auto flex items-center justify-center; @apply order-1 lg:order-1;
@apply bg-primary text-white w-[40px] h-auto flex items-center justify-center;
aspect-ratio: 1/1; aspect-ratio: 1/1;
} }
} }

14
resources/css/components/post-grid.css
View File

@ -1,6 +1,6 @@
.post-grid { .post-grid {
&__toolbar { &__toolbar {
@apply grid grid-cols-1 md:grid-cols-2 gap-4 items-center justify-between pb-12; @apply flex flex-col md:grid md:grid-cols-2 gap-4 md:items-center justify-between pb-12;
h2.post-count { h2.post-count {
@apply flex items-end gap-2; @apply flex items-end gap-2;
@ -16,20 +16,20 @@
} }
.search-bar { .search-bar {
@apply justify-self-end; @apply md:justify-self-end text-primary;
input { input {
@apply py-2 px-4 border border-primary rounded-full; @apply w-full md:w-auto py-2 px-4 border border-primary rounded-full;
&::placeholder { &::placeholder {
@apply text-sm text-carhop-green-700; @apply text-base font-normal text-carhop-green-700;
} }
} }
} }
} }
&__toolbar-actions { &__toolbar-actions {
@apply col-span-2 flex items-center gap-4; @apply col-span-2 flex flex-wrap items-center gap-4;
select { select {
@apply border border-carhop-green-700 rounded-full py-2 px-4; @apply w-full md:w-auto border border-carhop-green-700 text-carhop-green-700 rounded-full py-2 px-4 max-w-full text-base;
} }
select[name='etiquettes'] { select[name='etiquettes'] {
@ -41,7 +41,7 @@
} }
select[name='sort_by'] { select[name='sort_by'] {
@apply ml-auto; @apply md:ml-auto;
} }
} }

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

@ -1,5 +1,5 @@
.post-header { .post-header {
@apply bg-primary text-white py-32 px-2 lg:px-4 md:px-8; @apply bg-primary text-white py-32 px-2 lg:px-4 md:px-8 overflow-x-hidden;
h1.post-header__title, h1.post-header__title,
h2.post-header__title { h2.post-header__title {
@ -25,12 +25,13 @@
} }
.thumbnail-wrapper { .thumbnail-wrapper {
@apply order-2 lg:order-1 relative z-20 h-fit; @apply order-2 lg:order-1 relative z-20 h-fit;
width: calc(100% - 40px);
padding: 1.2rem; padding: 1.2rem;
/* max-width: calc(70% - 40px); /* max-width: calc(70% - 40px);
@apply mx-auto; */ @apply mx-auto; */
@screen lg { @screen lg {
transform: translateX(-40px); /* transform: translateX(-10px); */
} }
&:before { &:before {
@ -41,15 +42,17 @@
img { img {
aspect-ratio: 4/5; aspect-ratio: 4/5;
/* max-height: 200px; */ /* max-height: 200px; */
@apply max-h-[200px] lg:max-h-full w-full h-full relative z-10; @apply max-h-[200px] lg:max-h-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);
margin: 0 auto; */ margin: 0 auto; */
} }
.thumbnail-overlay { .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; @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(12px, 12px) rotate(3deg); transform: translate(2px, 2px) rotate(2deg);
/* transform: translate(12px, 12px) rotate(3deg); */
background-image: linear-gradient(#efe8ff, #efe8ff); background-image: linear-gradient(#efe8ff, #efe8ff);
background-size: calc(100% - 12px) calc(100% - 12px); background-size: calc(100% - 12px) calc(100% - 12px);
background-repeat: no-repeat; background-repeat: no-repeat;