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 {
@apply gap-2;
.post-card__content {
@apply pl-6;
@apply md:pl-6;
}
}
.post-card__title {

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

@ -1,9 +1,19 @@
.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;
}
&.has-cover {
.post-card__cover {
@apply col-span-1;
}
@screen lg {
grid-template-columns: 1fr 3fr 40px;
.post-card__cover {
@apply col-span-1;
}
}
}
.content-meta {
@ -20,8 +30,9 @@
}
&__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;
img {
@apply w-full h-full object-cover;
}
@ -46,8 +57,13 @@
}
}
&__content {
@apply order-2 lg:order-1;
}
.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;
}
}

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

@ -1,6 +1,6 @@
.post-grid {
&__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 {
@apply flex items-end gap-2;
@ -16,20 +16,20 @@
}
.search-bar {
@apply justify-self-end;
@apply md:justify-self-end text-primary;
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 {
@apply text-sm text-carhop-green-700;
@apply text-base font-normal text-carhop-green-700;
}
}
}
}
&__toolbar-actions {
@apply col-span-2 flex items-center gap-4;
@apply col-span-2 flex flex-wrap items-center gap-4;
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'] {
@ -41,7 +41,7 @@
}
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 {
@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,
h2.post-header__title {
@ -25,12 +25,13 @@
}
.thumbnail-wrapper {
@apply order-2 lg:order-1 relative z-20 h-fit;
width: calc(100% - 40px);
padding: 1.2rem;
/* max-width: calc(70% - 40px);
@apply mx-auto; */
@screen lg {
transform: translateX(-40px);
/* transform: translateX(-10px); */
}
&:before {
@ -41,15 +42,17 @@
img {
aspect-ratio: 4/5;
/* 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;
/* width: calc(100% - 2rem);
height: calc(100% - 2rem);
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(12px, 12px) rotate(3deg);
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;