From df13b97ba3a28f37916a4f13e808cfa5b9e26a7f Mon Sep 17 00:00:00 2001 From: Antoine M Date: Tue, 5 Sep 2023 14:27:32 +0200 Subject: [PATCH] adding aside, refactoring blocks --- css/app.css | 215 +++++++++++++++--- resources/css/app.css | 2 + resources/css/blocks/aside.css | 3 + resources/css/blocks/chapter-header-block.css | 16 -- resources/css/blocks/focused-schema.css | 14 ++ resources/css/blocks/highlight.css | 5 +- .../css/blocks/questions-container-block.css | 2 +- .../editor-content/color-taxonomy-scheme.css | 42 +++- resources/css/editor-content/gutenberg.css | 34 ++- resources/css/pages/single-conseils.css | 7 +- single-conseils.php | 2 +- .../post-conseils/chapter-header.css | 2 + 12 files changed, 262 insertions(+), 82 deletions(-) create mode 100644 resources/css/blocks/aside.css delete mode 100644 resources/css/blocks/chapter-header-block.css diff --git a/css/app.css b/css/app.css index 3722a20..f0fc2b3 100644 --- a/css/app.css +++ b/css/app.css @@ -2094,6 +2094,7 @@ summary { margin-top: 2rem; display: flex; max-width: 1440px; + flex-direction: column; align-items: center; justify-content: center; border-radius: 1rem; @@ -2107,6 +2108,12 @@ summary { } } +@media (min-width: 960px) { + .post-conseils-chapter-header { + flex-direction: row; + } +} + .post-conseils-chapter-header { margin-bottom: 20px; } @@ -3128,17 +3135,22 @@ header#main-header { background-color: rgb(223 241 255 / var(--tw-bg-opacity)); } -.entry-content--acoustique-coproprietes .chapter_index__position-indicator, - .entry-content--acoustique-coproprietes homegrade-blocks-focus-point-bullet, - body.acoustique-coproprietes .chapter_index__position-indicator, - body.acoustique-coproprietes homegrade-blocks-focus-point-bullet, - .post-conseil-page--acoustique-coproprietes .chapter_index__position-indicator, - .post-conseil-page--acoustique-coproprietes homegrade-blocks-focus-point-bullet, - .post-question-page--acoustique-coproprietes .chapter_index__position-indicator, - .post-question-page--acoustique-coproprietes homegrade-blocks-focus-point-bullet { -} - - { +.entry-content--acoustique-coproprietes .chapter_index__position-indicator, + .entry-content--acoustique-coproprietes .homegrade-blocks-focus-point-bullet, + .entry-content--acoustique-coproprietes .homegrade-blocks-focused-schema ol li:before, + .entry-content--acoustique-coproprietes .wp-block-button__link, + body.acoustique-coproprietes .chapter_index__position-indicator, + body.acoustique-coproprietes .homegrade-blocks-focus-point-bullet, + body.acoustique-coproprietes .homegrade-blocks-focused-schema ol li:before, + body.acoustique-coproprietes .wp-block-button__link, + .post-conseil-page--acoustique-coproprietes .chapter_index__position-indicator, + .post-conseil-page--acoustique-coproprietes .homegrade-blocks-focus-point-bullet, + .post-conseil-page--acoustique-coproprietes .homegrade-blocks-focused-schema ol li:before, + .post-conseil-page--acoustique-coproprietes .wp-block-button__link, + .post-question-page--acoustique-coproprietes .chapter_index__position-indicator, + .post-question-page--acoustique-coproprietes .homegrade-blocks-focus-point-bullet, + .post-question-page--acoustique-coproprietes .homegrade-blocks-focused-schema ol li:before, + .post-question-page--acoustique-coproprietes .wp-block-button__link { --tw-bg-opacity: 1; background-color: rgb(36 94 242 / var(--tw-bg-opacity)); } @@ -3148,6 +3160,11 @@ header#main-header { text-decoration-color: #245EF2 !important; } +.entry-content--acoustique-coproprietes .homegrade-blocks-aside, body.acoustique-coproprietes .homegrade-blocks-aside, .post-conseil-page--acoustique-coproprietes .homegrade-blocks-aside, .post-question-page--acoustique-coproprietes .homegrade-blocks-aside { + --tw-border-opacity: 1; + border-color: rgb(36 94 242 / var(--tw-border-opacity)); +} + .entry-content--energies-urbanisme h2, .entry-content--energies-urbanisme h3, .entry-content--energies-urbanisme h4, @@ -3196,7 +3213,26 @@ header#main-header { background-color: rgb(227 255 240 / var(--tw-bg-opacity)); } -.entry-content--energies-urbanisme .chapter_index__position-indicator, body.energies-urbanisme .chapter_index__position-indicator, .post-conseil-page--energies-urbanisme .chapter_index__position-indicator, .post-question-page--energies-urbanisme .chapter_index__position-indicator { +.entry-content--energies-urbanisme .chapter_index__position-indicator, + .entry-content--energies-urbanisme .homegrade-blocks-focus-point-bullet, + .entry-content--energies-urbanisme .homegrade-blocks-focused-schema ol li:before, + .entry-content--energies-urbanisme ul li:before, + .entry-content--energies-urbanisme .wp-block-button__link, + body.energies-urbanisme .chapter_index__position-indicator, + body.energies-urbanisme .homegrade-blocks-focus-point-bullet, + body.energies-urbanisme .homegrade-blocks-focused-schema ol li:before, + body.energies-urbanisme ul li:before, + body.energies-urbanisme .wp-block-button__link, + .post-conseil-page--energies-urbanisme .chapter_index__position-indicator, + .post-conseil-page--energies-urbanisme .homegrade-blocks-focus-point-bullet, + .post-conseil-page--energies-urbanisme .homegrade-blocks-focused-schema ol li:before, + .post-conseil-page--energies-urbanisme ul li:before, + .post-conseil-page--energies-urbanisme .wp-block-button__link, + .post-question-page--energies-urbanisme .chapter_index__position-indicator, + .post-question-page--energies-urbanisme .homegrade-blocks-focus-point-bullet, + .post-question-page--energies-urbanisme .homegrade-blocks-focused-schema ol li:before, + .post-question-page--energies-urbanisme ul li:before, + .post-question-page--energies-urbanisme .wp-block-button__link { --tw-bg-opacity: 1; background-color: rgb(2 126 80 / var(--tw-bg-opacity)); } @@ -3206,6 +3242,11 @@ header#main-header { text-decoration-color: #027E50 !important; } +.entry-content--energies-urbanisme .homegrade-blocks-aside, body.energies-urbanisme .homegrade-blocks-aside, .post-conseil-page--energies-urbanisme .homegrade-blocks-aside, .post-question-page--energies-urbanisme .homegrade-blocks-aside { + --tw-border-opacity: 1; + border-color: rgb(2 126 80 / var(--tw-border-opacity)); +} + .entry-content--isolation-quotidien h2, .entry-content--isolation-quotidien h3, .entry-content--isolation-quotidien h4, @@ -3256,12 +3297,24 @@ header#main-header { .entry-content--isolation-quotidien .chapter_index__position-indicator, .entry-content--isolation-quotidien .homegrade-blocks-focus-point-bullet, + .entry-content--isolation-quotidien .homegrade-blocks-focused-schema ol li:before, + .entry-content--isolation-quotidien ul li:before, + .entry-content--isolation-quotidien .wp-block-button__link, body.isolation-quotidien .chapter_index__position-indicator, body.isolation-quotidien .homegrade-blocks-focus-point-bullet, + body.isolation-quotidien .homegrade-blocks-focused-schema ol li:before, + body.isolation-quotidien ul li:before, + body.isolation-quotidien .wp-block-button__link, .post-conseil-page--isolation-quotidien .chapter_index__position-indicator, .post-conseil-page--isolation-quotidien .homegrade-blocks-focus-point-bullet, + .post-conseil-page--isolation-quotidien .homegrade-blocks-focused-schema ol li:before, + .post-conseil-page--isolation-quotidien ul li:before, + .post-conseil-page--isolation-quotidien .wp-block-button__link, .post-question-page--isolation-quotidien .chapter_index__position-indicator, - .post-question-page--isolation-quotidien .homegrade-blocks-focus-point-bullet { + .post-question-page--isolation-quotidien .homegrade-blocks-focus-point-bullet, + .post-question-page--isolation-quotidien .homegrade-blocks-focused-schema ol li:before, + .post-question-page--isolation-quotidien ul li:before, + .post-question-page--isolation-quotidien .wp-block-button__link { --tw-bg-opacity: 1; background-color: rgb(194 69 3 / var(--tw-bg-opacity)); } @@ -3271,6 +3324,11 @@ header#main-header { text-decoration-color: #C24503 !important; } +.entry-content--isolation-quotidien .homegrade-blocks-aside, body.isolation-quotidien .homegrade-blocks-aside, .post-conseil-page--isolation-quotidien .homegrade-blocks-aside, .post-question-page--isolation-quotidien .homegrade-blocks-aside { + --tw-border-opacity: 1; + border-color: rgb(194 69 3 / var(--tw-border-opacity)); +} + .entry-content--patrimoine-renovation h2, .entry-content--patrimoine-renovation h3, .entry-content--patrimoine-renovation h4, @@ -3321,12 +3379,24 @@ header#main-header { .entry-content--patrimoine-renovation .chapter_index__position-indicator, .entry-content--patrimoine-renovation .homegrade-blocks-focus-point-bullet, + .entry-content--patrimoine-renovation .homegrade-blocks-focused-schema ol li:before, + .entry-content--patrimoine-renovation ul li:before, + .entry-content--patrimoine-renovation .wp-block-button__link, body.patrimoine-renovation .chapter_index__position-indicator, body.patrimoine-renovation .homegrade-blocks-focus-point-bullet, + body.patrimoine-renovation .homegrade-blocks-focused-schema ol li:before, + body.patrimoine-renovation ul li:before, + body.patrimoine-renovation .wp-block-button__link, .post-conseil-page--patrimoine-renovation .chapter_index__position-indicator, .post-conseil-page--patrimoine-renovation .homegrade-blocks-focus-point-bullet, + .post-conseil-page--patrimoine-renovation .homegrade-blocks-focused-schema ol li:before, + .post-conseil-page--patrimoine-renovation ul li:before, + .post-conseil-page--patrimoine-renovation .wp-block-button__link, .post-question-page--patrimoine-renovation .chapter_index__position-indicator, - .post-question-page--patrimoine-renovation .homegrade-blocks-focus-point-bullet { + .post-question-page--patrimoine-renovation .homegrade-blocks-focus-point-bullet, + .post-question-page--patrimoine-renovation .homegrade-blocks-focused-schema ol li:before, + .post-question-page--patrimoine-renovation ul li:before, + .post-question-page--patrimoine-renovation .wp-block-button__link { --tw-bg-opacity: 1; background-color: rgb(139 47 247 / var(--tw-bg-opacity)); } @@ -3336,6 +3406,11 @@ header#main-header { text-decoration-color: #8B2FF7 !important; } +.entry-content--patrimoine-renovation .homegrade-blocks-aside, body.patrimoine-renovation .homegrade-blocks-aside, .post-conseil-page--patrimoine-renovation .homegrade-blocks-aside, .post-question-page--patrimoine-renovation .homegrade-blocks-aside { + --tw-border-opacity: 1; + border-color: rgb(139 47 247 / var(--tw-border-opacity)); +} + .entry-content--location h2, .entry-content--location h3, .entry-content--location h4, @@ -3386,12 +3461,24 @@ header#main-header { .entry-content--location .chapter_index__position-indicator, .entry-content--location .homegrade-blocks-focus-point-bullet, + .entry-content--location .homegrade-blocks-focused-schema ol li:before, + .entry-content--location ul li:before, + .entry-content--location .wp-block-button__link, body.location .chapter_index__position-indicator, body.location .homegrade-blocks-focus-point-bullet, + body.location .homegrade-blocks-focused-schema ol li:before, + body.location ul li:before, + body.location .wp-block-button__link, .post-conseil-page--location .chapter_index__position-indicator, .post-conseil-page--location .homegrade-blocks-focus-point-bullet, + .post-conseil-page--location .homegrade-blocks-focused-schema ol li:before, + .post-conseil-page--location ul li:before, + .post-conseil-page--location .wp-block-button__link, .post-question-page--location .chapter_index__position-indicator, - .post-question-page--location .homegrade-blocks-focus-point-bullet { + .post-question-page--location .homegrade-blocks-focus-point-bullet, + .post-question-page--location .homegrade-blocks-focused-schema ol li:before, + .post-question-page--location ul li:before, + .post-question-page--location .wp-block-button__link { --tw-bg-opacity: 1; background-color: rgb(223 0 43 / var(--tw-bg-opacity)); } @@ -3401,6 +3488,11 @@ header#main-header { text-decoration-color: #DF002B !important; } +.entry-content--location .homegrade-blocks-aside, body.location .homegrade-blocks-aside, .post-conseil-page--location .homegrade-blocks-aside, .post-question-page--location .homegrade-blocks-aside { + --tw-border-opacity: 1; + border-color: rgb(223 0 43 / var(--tw-border-opacity)); +} + article > *:not(.entry-content, .chapter-header-block), .entry-content > * { margin-left: auto; @@ -3408,16 +3500,38 @@ article > *:not(.entry-content, .chapter-header-block), max-width: 960px; } +.entry-content { + margin-top: 1rem; +} + +@media (min-width: 960px) { + .entry-content { + margin-top: 0px; + } +} + +.entry-content { + max-width: 800px; +} + +.entry-content > :first-child { + margin-top: 0px; +} + .entry-content h1 { font-size: 1.5rem; line-height: 2rem; } .entry-content h2 { + margin-top: 4rem; + margin-bottom: 2rem; font-size: 1.25rem; } .entry-content h3 { + margin-top: 4rem; + margin-bottom: 1rem; font-size: 1.5rem; line-height: 2rem; font-weight: 700; @@ -3432,12 +3546,6 @@ article > *:not(.entry-content, .chapter-header-block), text-underline-offset: 4px; } -/* &:after { - @apply inline-block bg-red-500 h-3 w-3 ml-2; - content: ''; - background-image: url('/wp-content/themes/homegrade/dist/images/arrow.svg'); - } */ - .entry-content p a:hover, .entry-content ul a:hover, .entry-content ol a:hover { -webkit-text-decoration-line: none; text-decoration-line: none; @@ -3449,14 +3557,14 @@ article > *:not(.entry-content, .chapter-header-block), margin-bottom: 2rem; } -.entry-content ul:not(.block-editor-block-variation-picker__variations) li { - list-style-position: inside; - list-style-type: disc; -} - -.entry-content ol li { - list-style-position: inside; - list-style-type: decimal; +.entry-content ul li:before { + list-style-type: none; + content: ''; + display: inline-block; + height: 10px; + width: 10px; + border-radius: 50%; + margin-right: 14px; } .tooltip-word { @@ -3952,7 +4060,6 @@ article > *:not(.entry-content, .chapter-header-block), /* @import './blocks/chapter-header-block.css'; */ .questions-container-block { - padding-top: 3rem; padding-bottom: 3rem; } @@ -3990,6 +4097,8 @@ article > *:not(.entry-content, .chapter-header-block), } .homegrade-blocks-highlight { + margin-top: 2rem; + margin-bottom: 2rem; padding: 3rem; border-radius: 22px; } @@ -3998,6 +4107,10 @@ article > *:not(.entry-content, .chapter-header-block), padding-bottom: 1rem; } +.homegrade-blocks-highlight p { + margin-bottom: 10px; +} + .homegrade-blocks-highlight__block-title { padding-bottom: 0px !important; } @@ -4051,6 +4164,30 @@ article > *:not(.entry-content, .chapter-header-block), padding-top: 30px; } +.homegrade-blocks-aside { + border-left-width: 4px; +} + +.homegrade-blocks-focused-schema figcaption ol { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +@media (min-width: 1280px) { + .homegrade-blocks-focused-schema figcaption ol { + display: grid; + } +} + +.homegrade-blocks-focused-schema .focus-point-popup-container__title { + font-weight: 700; + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} + +.homegrade-blocks-focused-schema .focus-point-popup-container { + z-index: 9999; +} + /* ########### PAGE ############ */ .demo-components .title { @@ -4194,26 +4331,36 @@ article > *:not(.entry-content, .chapter-header-block), .conseils_wrapper { margin-left: auto; margin-right: auto; - display: flex; max-width: 1440px; -moz-column-gap: 2rem; column-gap: 2rem; } +@media (min-width: 960px) { + .conseils_wrapper { + display: flex; + } +} + .conseils_wrapper .chapter_index { - position: -webkit-sticky; - position: sticky; left: 0px; top: 1rem; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; - max-width: 32rem; border-radius: 1rem; background-color: rgb(239, 239, 239, 0.6); padding: 3rem; } +@media (min-width: 960px) { + .conseils_wrapper .chapter_index { + position: -webkit-sticky; + position: sticky; + max-width: 32rem; + } +} + .conseils_wrapper .chapter_index__title { margin-bottom: 0.75rem; font-size: 1.25rem; diff --git a/resources/css/app.css b/resources/css/app.css index 7f88004..3cb863c 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -58,6 +58,8 @@ @import './blocks/highlight.css'; @import './blocks/tooltip.css'; @import './blocks/vocabulaire-summary.css'; +@import './blocks/aside.css'; +@import './blocks/focused-schema.css'; /* ########### PAGE ############ */ @import './pages/demo-components.css'; diff --git a/resources/css/blocks/aside.css b/resources/css/blocks/aside.css new file mode 100644 index 0000000..0470721 --- /dev/null +++ b/resources/css/blocks/aside.css @@ -0,0 +1,3 @@ +.homegrade-blocks-aside { + @apply border-l-4; +} diff --git a/resources/css/blocks/chapter-header-block.css b/resources/css/blocks/chapter-header-block.css deleted file mode 100644 index bf2f65e..0000000 --- a/resources/css/blocks/chapter-header-block.css +++ /dev/null @@ -1,16 +0,0 @@ -/* .homegrade-blocks-chapter-header-block { - @apply p-8 md:px-16; - &__page-thematic-title { - @apply text-xl uppercase font-bold tracking-wider pb-4; - } - &__page-title { - @apply text-4xl font-bold; - } - &__infos { - @apply max-w-2xl; - - .cta { - @apply my-8; - } - } -} */ diff --git a/resources/css/blocks/focused-schema.css b/resources/css/blocks/focused-schema.css index e69de29..94072c2 100644 --- a/resources/css/blocks/focused-schema.css +++ b/resources/css/blocks/focused-schema.css @@ -0,0 +1,14 @@ +.homegrade-blocks-focused-schema { + figcaption { + ol { + @apply xl:grid grid-cols-2; + } + } + + .focus-point-popup-container__title { + @apply text-black font-bold; + } + .focus-point-popup-container { + z-index: 9999; + } +} diff --git a/resources/css/blocks/highlight.css b/resources/css/blocks/highlight.css index d558398..91c5f69 100644 --- a/resources/css/blocks/highlight.css +++ b/resources/css/blocks/highlight.css @@ -1,9 +1,12 @@ .homegrade-blocks-highlight { - @apply p-12 rounding-radius; + @apply p-12 rounding-radius my-8; h3 { @apply pb-4; } + p { + margin-bottom: 10px; + } &__block-title { @apply !pb-0; } diff --git a/resources/css/blocks/questions-container-block.css b/resources/css/blocks/questions-container-block.css index 45700d0..c0310cb 100644 --- a/resources/css/blocks/questions-container-block.css +++ b/resources/css/blocks/questions-container-block.css @@ -1,5 +1,5 @@ .questions-container-block { - @apply py-12; + @apply pb-12; &__title { @apply font-bold !text-black !text-4xl; } diff --git a/resources/css/editor-content/color-taxonomy-scheme.css b/resources/css/editor-content/color-taxonomy-scheme.css index 4a6d63f..fafa52c 100644 --- a/resources/css/editor-content/color-taxonomy-scheme.css +++ b/resources/css/editor-content/color-taxonomy-scheme.css @@ -18,14 +18,17 @@ body.acoustique-coproprietes, } .chapter_index__position-indicator, - homegrade-blocks-focus-point-bullet { - } - { + .homegrade-blocks-focus-point-bullet, + .homegrade-blocks-focused-schema ol li:before, + .wp-block-button__link { @apply bg-acoustique-coproprietes; } .tooltip-word { @apply !decoration-acoustique-coproprietes; } + .homegrade-blocks-aside { + @apply border-acoustique-coproprietes; + } } .entry-content--energies-urbanisme, body.energies-urbanisme, @@ -45,12 +48,19 @@ body.energies-urbanisme, .post-conseils-chapter-header { @apply bg-energies-urbanisme-light; } - .chapter_index__position-indicator { + .chapter_index__position-indicator, + .homegrade-blocks-focus-point-bullet, + .homegrade-blocks-focused-schema ol li:before, + ul li:before, + .wp-block-button__link { @apply bg-energies-urbanisme; } .tooltip-word { @apply !decoration-energies-urbanisme; } + .homegrade-blocks-aside { + @apply border-energies-urbanisme; + } } .entry-content--isolation-quotidien, body.isolation-quotidien, @@ -71,12 +81,18 @@ body.isolation-quotidien, @apply bg-isolation-quotidien-light; } .chapter_index__position-indicator, - .homegrade-blocks-focus-point-bullet { + .homegrade-blocks-focus-point-bullet, + .homegrade-blocks-focused-schema ol li:before, + ul li:before, + .wp-block-button__link { @apply bg-isolation-quotidien; } .tooltip-word { @apply !decoration-isolation-quotidien; } + .homegrade-blocks-aside { + @apply border-isolation-quotidien; + } } .entry-content--patrimoine-renovation, body.patrimoine-renovation, @@ -97,12 +113,18 @@ body.patrimoine-renovation, @apply bg-patrimoine-renovation-light; } .chapter_index__position-indicator, - .homegrade-blocks-focus-point-bullet { + .homegrade-blocks-focus-point-bullet, + .homegrade-blocks-focused-schema ol li:before, + ul li:before, + .wp-block-button__link { @apply bg-patrimoine-renovation; } .tooltip-word { @apply !decoration-patrimoine-renovation; } + .homegrade-blocks-aside { + @apply border-patrimoine-renovation; + } } .entry-content--location, body.location, @@ -123,10 +145,16 @@ body.location, @apply bg-location-light; } .chapter_index__position-indicator, - .homegrade-blocks-focus-point-bullet { + .homegrade-blocks-focus-point-bullet, + .homegrade-blocks-focused-schema ol li:before, + ul li:before, + .wp-block-button__link { @apply bg-location; } .tooltip-word { @apply !decoration-location; } + .homegrade-blocks-aside { + @apply border-location; + } } diff --git a/resources/css/editor-content/gutenberg.css b/resources/css/editor-content/gutenberg.css index 002717c..952ced2 100644 --- a/resources/css/editor-content/gutenberg.css +++ b/resources/css/editor-content/gutenberg.css @@ -2,18 +2,22 @@ article > *:not(.entry-content, .chapter-header-block), .entry-content > * { @apply mx-auto max-w-content; } - .entry-content { + @apply mt-4 lg:mt-0; + max-width: 800px; + & > :first-child { + @apply mt-0; + } h1 { @apply text-2xl; } h2 { - @apply text-xl; + @apply text-xl mt-16 mb-8; } h3 { - @apply font-bold text-2xl; + @apply font-bold text-2xl mt-16 mb-4; } p, @@ -21,12 +25,6 @@ article > *:not(.entry-content, .chapter-header-block), ol { a { @apply text-primary font-bold underline underline-offset-4; - /* &:after { - @apply inline-block bg-red-500 h-3 w-3 ml-2; - content: ''; - background-image: url('/wp-content/themes/homegrade/dist/images/arrow.svg'); - } */ - &:hover { @apply no-underline; } @@ -35,15 +33,13 @@ article > *:not(.entry-content, .chapter-header-block), @apply mb-8; } - ul:not(.block-editor-block-variation-picker__variations) { - li { - @apply list-disc list-inside; - } - } - - ol { - li { - @apply list-decimal list-inside; - } + ul li:before { + @apply list-none; + content: ''; + display: inline-block; + height: 10px; + width: 10px; + border-radius: 50%; + margin-right: 14px; } } diff --git a/resources/css/pages/single-conseils.css b/resources/css/pages/single-conseils.css index d5a5360..e4d3fde 100644 --- a/resources/css/pages/single-conseils.css +++ b/resources/css/pages/single-conseils.css @@ -3,13 +3,14 @@ } .conseils_wrapper { - @apply flex gap-x-8 max-w-screen-2xl mx-auto; + @apply lg:flex gap-x-8 max-w-screen-2xl mx-auto; .chapter_index { - @apply bg-gray max-w-lg + @apply bg-gray + lg:max-w-lg p-12 h-fit - sticky + lg:sticky left-0 top-4 rounded-2xl; diff --git a/single-conseils.php b/single-conseils.php index 2284222..45bb2fb 100644 --- a/single-conseils.php +++ b/single-conseils.php @@ -49,7 +49,7 @@ function build_chapter_index($blocks) -
"> +
">
diff --git a/template-components/post-conseils/chapter-header.css b/template-components/post-conseils/chapter-header.css index a727b61..4eba4f0 100644 --- a/template-components/post-conseils/chapter-header.css +++ b/template-components/post-conseils/chapter-header.css @@ -1,6 +1,8 @@ .post-conseils-chapter-header { @apply p-8 md:px-16 mt-8 max-w-screen-2xl flex + flex-col + lg:flex-row justify-center items-center mx-auto