adding aside, refactoring blocks

This commit is contained in:
Antoine M 2023-09-05 14:27:32 +02:00
parent 9b3e37dc55
commit df13b97ba3
12 changed files with 262 additions and 82 deletions

View File

@ -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;

View File

@ -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';

View File

@ -0,0 +1,3 @@
.homegrade-blocks-aside {
@apply border-l-4;
}

View File

@ -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;
}
}
} */

View File

@ -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;
}
}

View File

@ -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;
}

View File

@ -1,5 +1,5 @@
.questions-container-block {
@apply py-12;
@apply pb-12;
&__title {
@apply font-bold !text-black !text-4xl;
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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;

View File

@ -49,7 +49,7 @@ function build_chapter_index($blocks)
<article class="container my-8 mx-auto entry-content single-editor-content <?php echo $thematiqueColorSlug ? "entry-content--" . $thematiqueColorSlug : "" ?>">
<article class="entry-content single-editor-content <?php echo $thematiqueColorSlug ? "entry-content--" . $thematiqueColorSlug : "" ?>">
<?php the_content() ?>
</article>
<!-- VOCABULAIRE -->

View File

@ -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