From 6b33b82d4df1030e521261f12d77b926907a3f5c Mon Sep 17 00:00:00 2001 From: Antoine M Date: Tue, 19 May 2026 18:11:29 +0200 Subject: [PATCH] RESPONSIVE FIX --- resources/css/app.css | 1 + resources/css/base/typography.css | 5 ++++- resources/css/blocks/chapter-section.css | 4 ++-- resources/css/blocks/content-box.css | 4 ++-- resources/css/blocks/front-header.css | 2 +- resources/css/blocks/heading.css | 2 +- resources/css/blocks/narrative-card.css | 2 +- resources/css/blocks/press-ressources.css | 18 ++++++++++-------- resources/css/blocks/story-timeline.css | 8 ++++---- resources/css/blocks/wp-block-buttons.css | 5 ++++- resources/css/layout/patterns.css | 3 +++ 11 files changed, 33 insertions(+), 21 deletions(-) create mode 100644 resources/css/layout/patterns.css diff --git a/resources/css/app.css b/resources/css/app.css index f8c36e5..8517f0c 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -67,6 +67,7 @@ @import './layout/footer.css'; @import './layout/section.css'; @import './layout/gutenberg.css'; +@import './layout/patterns.css'; /* ########### PAGES ############ */ @import './pages/archive-dbmob.css'; diff --git a/resources/css/base/typography.css b/resources/css/base/typography.css index 599dd1a..828436a 100644 --- a/resources/css/base/typography.css +++ b/resources/css/base/typography.css @@ -14,7 +14,10 @@ body.front-end { } h1 { - @apply text-5xl; + @apply text-xl md:text-5xl; + @media screen and (max-width: 1024px) { + @apply !text-4xl; + } } h2 { diff --git a/resources/css/blocks/chapter-section.css b/resources/css/blocks/chapter-section.css index 472a7a5..aaaea0f 100644 --- a/resources/css/blocks/chapter-section.css +++ b/resources/css/blocks/chapter-section.css @@ -23,9 +23,9 @@ @apply subtitle-big; } &--right { - @apply flex-row-reverse; + @apply lg:flex-row-reverse; .chapter-section__inner { - @apply flex-row-reverse; + @apply lg:flex-row-reverse; } } &--has-background { diff --git a/resources/css/blocks/content-box.css b/resources/css/blocks/content-box.css index 8ce9412..ec2f2e2 100644 --- a/resources/css/blocks/content-box.css +++ b/resources/css/blocks/content-box.css @@ -3,7 +3,7 @@ } .content-box { - @apply relative px-4 md:px-8; + @apply relative px-2 md:px-8; &--variant-framed { @apply border border-carhop-green-600; @@ -64,7 +64,7 @@ &.aligncontained { /* max-width: calc(960px - 4rem) !important; */ - @apply !max-w-screen-lg ; + @apply !max-w-screen-lg; } &.alignwide { @media (max-width: 767px) { diff --git a/resources/css/blocks/front-header.css b/resources/css/blocks/front-header.css index c959a2d..3f001d2 100644 --- a/resources/css/blocks/front-header.css +++ b/resources/css/blocks/front-header.css @@ -1,5 +1,5 @@ .block-front-header { - @apply pt-16 pb-32 text-white; + @apply pt-16 pb-32 text-white px-2; background-image: url('../resources/img/shapes/background-shape-C_green.svg'); @apply bg-no-repeat bg-center; diff --git a/resources/css/blocks/heading.css b/resources/css/blocks/heading.css index 5a3104f..1225678 100644 --- a/resources/css/blocks/heading.css +++ b/resources/css/blocks/heading.css @@ -62,7 +62,7 @@ } p { - @apply !text-4xl fjalla !tracking-wider font-normal; + @apply !text-3xl md:!text-4xl fjalla !tracking-wider font-normal; } } diff --git a/resources/css/blocks/narrative-card.css b/resources/css/blocks/narrative-card.css index 8f2f150..130f44e 100644 --- a/resources/css/blocks/narrative-card.css +++ b/resources/css/blocks/narrative-card.css @@ -1,5 +1,5 @@ .narrative-card { - @apply p-12 py-16 mx-auto max-w-screen-lg relative; + @apply px-6 md:px-12 py-16 mx-auto max-w-screen-lg relative; overflow: hidden; > * { diff --git a/resources/css/blocks/press-ressources.css b/resources/css/blocks/press-ressources.css index ec19559..b357853 100644 --- a/resources/css/blocks/press-ressources.css +++ b/resources/css/blocks/press-ressources.css @@ -211,6 +211,15 @@ ul.presse-reviews__years-list { @apply sticky top-0; + @media (max-width: 1024px) { + /* @apply flex items-center gap-4 flex-wrap; */ + @apply grid grid-cols-2 gap-3; + + li.presse-reviews__year { + @apply !mt-0; + } + } + li.presse-reviews__year { @apply !list-none border border-primary border-solid text-4xl fjalla; a { @@ -224,17 +233,10 @@ } } } + li.presse-reviews__year + li.presse-reviews__year { @apply mt-4; } - - @media (max-width: 1024px) { - @apply flex items-center gap-4; - - li.presse-reviews__year { - @apply !mt-0; - } - } } } diff --git a/resources/css/blocks/story-timeline.css b/resources/css/blocks/story-timeline.css index db8b4bd..dfac3a5 100644 --- a/resources/css/blocks/story-timeline.css +++ b/resources/css/blocks/story-timeline.css @@ -1,14 +1,14 @@ .wp-block-carhop-blocks-story-timeline { - @apply flex gap-12 mx-auto max-w-screen-xl; + @apply flex flex-col md:flex-row gap-12 mx-auto max-w-screen-xl; aside.story-timeline__years { @apply text-white; ul { @apply sticky top-0 left-0 !pt-6; - @apply list-none p-0 m-0 flex flex-col gap-4; + @apply list-none p-0 m-0 grid grid-cols-2 md:flex flex-col gap-4; li { - @apply list-none bg-white text-primary p-6 border border-primary text-3xl fjalla; + @apply list-none bg-white text-primary border border-primary text-3xl fjalla p-0; a { - @apply no-underline; + @apply no-underline p-6 block; } } diff --git a/resources/css/blocks/wp-block-buttons.css b/resources/css/blocks/wp-block-buttons.css index c3e813b..d3b2996 100644 --- a/resources/css/blocks/wp-block-buttons.css +++ b/resources/css/blocks/wp-block-buttons.css @@ -1,6 +1,7 @@ .wp-block-buttons.is-style-big-buttons { @apply mx-auto flex flex-col justify-center mt-4 mb-12; @apply px-4; + @screen lg { flex-direction: row; @apply px-0; @@ -10,6 +11,7 @@ flex-shrink: 1; flex-grow: 1; flex-basis: 100%; + @screen lg { @apply w-fit; flex-grow: 0; @@ -17,7 +19,8 @@ } .wp-block-button__link { @apply fjalla uppercase text-left flex justify-between items-center bg-white text-primary; - @apply text-3xl; + @apply text-2xl md:text-3xl; + @apply px-4 md:px-10; &:after { @apply content-[''] block w-16 h-16 bg-no-repeat; diff --git a/resources/css/layout/patterns.css b/resources/css/layout/patterns.css new file mode 100644 index 0000000..e95dfb6 --- /dev/null +++ b/resources/css/layout/patterns.css @@ -0,0 +1,3 @@ +:where(.wp-block-group.has-background) { + @apply !px-2 md:!px-8 !bg-red-500; +}