From fece623fa9717ee1134df655f26174be04cb7e66 Mon Sep 17 00:00:00 2001 From: Antoine M Date: Fri, 12 May 2023 12:12:13 +0200 Subject: [PATCH] taxonomies working --- css/app.css | 456 +++++++++++++++++- css/editor-style.css | 235 +++++++++ functions.php | 2 +- includes/blocks.php | 1 + includes/utilities.php | 29 ++ resources/css/app.css | 2 + resources/css/base/thematiques-colors.css | 20 + resources/css/layout/header.css | 19 +- resources/svg/arrow-down-white.svg | 11 + resources/svg/arrow-right-circle.svg | 12 + tailwind.config.js | 123 +++-- .../home/home-header/home-header.css | 31 ++ .../home/home-header/home-header.php | 8 +- .../home/show-thematiques/block.json | 17 + .../show-thematiques/show-thematiques.css | 85 ++++ .../show-thematiques/show-thematiques.php | 44 ++ 16 files changed, 1031 insertions(+), 64 deletions(-) create mode 100644 includes/utilities.php create mode 100644 resources/css/base/thematiques-colors.css create mode 100644 resources/svg/arrow-down-white.svg create mode 100644 resources/svg/arrow-right-circle.svg create mode 100644 template-blocks/home/show-thematiques/block.json create mode 100755 template-blocks/home/show-thematiques/show-thematiques.css create mode 100755 template-blocks/home/show-thematiques/show-thematiques.php diff --git a/css/app.css b/css/app.css index 34f0508..f28b410 100644 --- a/css/app.css +++ b/css/app.css @@ -715,6 +715,61 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.bg-secondary { + --tw-bg-opacity: 1; + background-color: rgb(223 30 30 / var(--tw-bg-opacity)); +} + +.bg-acoustique-coproprietes { + --tw-bg-opacity: 1; + background-color: rgb(36 94 242 / var(--tw-bg-opacity)); +} + +.bg-acoustique-coproprietes-light { + --tw-bg-opacity: 1; + background-color: rgb(223 241 255 / var(--tw-bg-opacity)); +} + +.bg-energies-urbanisme { + --tw-bg-opacity: 1; + background-color: rgb(2 126 80 / var(--tw-bg-opacity)); +} + +.bg-energies-urbanisme-light { + --tw-bg-opacity: 1; + background-color: rgb(227 255 240 / var(--tw-bg-opacity)); +} + +.bg-isolation-quotidien { + --tw-bg-opacity: 1; + background-color: rgb(194 69 3 / var(--tw-bg-opacity)); +} + +.bg-isolation-quotidien-light { + --tw-bg-opacity: 1; + background-color: rgb(255 251 236 / var(--tw-bg-opacity)); +} + +.bg-patrimoine-renovation { + --tw-bg-opacity: 1; + background-color: rgb(139 47 247 / var(--tw-bg-opacity)); +} + +.bg-patrimoine-renovation-light { + --tw-bg-opacity: 1; + background-color: rgb(255 229 253 / var(--tw-bg-opacity)); +} + +.bg-location { + --tw-bg-opacity: 1; + background-color: rgb(223 0 43 / var(--tw-bg-opacity)); +} + +.bg-location-light { + --tw-bg-opacity: 1; + background-color: rgb(254 226 231 / var(--tw-bg-opacity)); +} + .px-4 { padding-left: 1rem; padding-right: 1rem; @@ -784,6 +839,66 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } +.text-primary { + --tw-text-opacity: 1; + color: rgb(47 1 84 / var(--tw-text-opacity)); +} + +.text-secondary { + --tw-text-opacity: 1; + color: rgb(223 30 30 / var(--tw-text-opacity)); +} + +.text-acoustique-coproprietes { + --tw-text-opacity: 1; + color: rgb(36 94 242 / var(--tw-text-opacity)); +} + +.text-acoustique-coproprietes-light { + --tw-text-opacity: 1; + color: rgb(223 241 255 / var(--tw-text-opacity)); +} + +.text-energies-urbanisme { + --tw-text-opacity: 1; + color: rgb(2 126 80 / var(--tw-text-opacity)); +} + +.text-energies-urbanisme-light { + --tw-text-opacity: 1; + color: rgb(227 255 240 / var(--tw-text-opacity)); +} + +.text-isolation-quotidien { + --tw-text-opacity: 1; + color: rgb(194 69 3 / var(--tw-text-opacity)); +} + +.text-isolation-quotidien-light { + --tw-text-opacity: 1; + color: rgb(255 251 236 / var(--tw-text-opacity)); +} + +.text-patrimoine-renovation { + --tw-text-opacity: 1; + color: rgb(139 47 247 / var(--tw-text-opacity)); +} + +.text-patrimoine-renovation-light { + --tw-text-opacity: 1; + color: rgb(255 229 253 / var(--tw-text-opacity)); +} + +.text-location { + --tw-text-opacity: 1; + color: rgb(223 0 43 / var(--tw-text-opacity)); +} + +.text-location-light { + --tw-text-opacity: 1; + color: rgb(254 226 231 / var(--tw-text-opacity)); +} + .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -855,6 +970,31 @@ body:not(.wp-admin) { font-weight: 400; } +.filter-acoustique-coproprietes { + filter: invert(27%) sepia(88%) saturate(1302%) + hue-rotate(206deg) brightness(105%) contrast(114%); +} + +.filter-energies-urbanisme { + filter: invert(28%) sepia(89%) saturate(1188%) + hue-rotate(131deg) brightness(95%) contrast(98%); +} + +.filter-isolation-quotidien { + filter: invert(21%) sepia(94%) saturate(3059%) + hue-rotate(26deg) brightness(98%) contrast(98%); +} + +.filter-patrimoine { + filter: invert(25%) sepia(79%) saturate(6075%) + hue-rotate(263deg) brightness(99%) contrast(96%); +} + +.filter-location { + filter: invert(13%) sepia(71%) saturate(4425%) + hue-rotate(338deg) brightness(109%) contrast(117%); +} + /* ########### COMPONENTS ############ */ .post-card { @@ -990,23 +1130,12 @@ body:not(.wp-admin) { } .primary-menu-container #primary-menu ul { - -moz-column-gap: 0.5rem; - column-gap: 0.5rem; padding-right: 0px; } @media (min-width: 960px) { .primary-menu-container #primary-menu ul { display: flex; - -moz-column-gap: 1rem; - column-gap: 1rem; - } -} - -@media (min-width: 1280px) { - .primary-menu-container #primary-menu ul { - -moz-column-gap: 2rem; - column-gap: 2rem; } } @@ -1025,20 +1154,19 @@ body:not(.wp-admin) { } .primary-menu-container #primary-menu li.menu-item { + border-radius: 0.75rem; + padding-left: 1rem; + padding-right: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; text-align: center; - font-size: 0.875rem; - line-height: 1.25rem; font-weight: 500; } -.primary-menu-container #primary-menu li.menu-item:hover > a, +.primary-menu-container #primary-menu li.menu-item:hover, .primary-menu-container #primary-menu li.menu-item a:focus { cursor: pointer; - --tw-text-opacity: 1; - color: rgb(223 30 30 / var(--tw-text-opacity)); - -webkit-text-decoration-line: underline; - text-decoration-line: underline; - text-underline-offset: 8px; + background-color: rgba(255, 255, 255, 0.1); } .primary-menu-container #primary-menu li.menu-item a:focus { @@ -1393,6 +1521,69 @@ article > *:not(.entry-content), /* Home */ +.home-header { + margin-left: auto; + margin-right: auto; + max-width: 1440px; + padding-left: 4rem; + padding-right: 4rem; + padding-top: 8rem; + padding-bottom: 8rem; +} + +.home-header__titling { + max-width: 580px; +} + +.home-header__title { + padding-bottom: 1.5rem; + font-size: 2.25rem; + line-height: 2.5rem; + font-weight: 500; + line-height: 1.2; +} + +.home-header__scroll-down-indicator { + margin-top: 1.5rem; + display: flex; + align-items: center; + justify-content: center; + border-radius: 9999px; + --tw-bg-opacity: 1; + background-color: rgb(47 1 84 / var(--tw-bg-opacity)); + width: 80px; + height: 80px; +} + +.home-header__scroll-down-indicator__arrow { + -webkit-animation: bouncingArrow 1s infinite alternate + cubic-bezier(0.01, 0.61, 0.67, 0.99); + animation: bouncingArrow 1s infinite alternate + cubic-bezier(0.01, 0.61, 0.67, 0.99); + /* cubic-bezier(0.01, 0.61, 0.39, 1); */ + /* cubic-bezier(0.18, 0.89, 0.3, 1); */ +} + +@-webkit-keyframes bouncingArrow { + 0% { + transform: translateY(4px); + } + + 100% { + transform: translateY(-6px); + } +} + +@keyframes bouncingArrow { + 0% { + transform: translateY(4px); + } + + 100% { + transform: translateY(-6px); + } +} + .section_latest_news .section_titling { margin-left: auto; margin-right: auto; @@ -1412,6 +1603,233 @@ article > *:not(.entry-content), padding-bottom: 4rem; } +.section-show-thematiques .thematiques-container { + margin-left: auto; + margin-right: auto; + display: grid; + max-width: 1280px; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 2rem; + row-gap: 8rem; + padding-top: 4rem; +} + +.section-show-thematiques .card-thematique { + position: relative; + display: flex; + flex-direction: column; + border-radius: 1.5rem; + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + padding: 2rem; + transition: all 0.3s ease-in-out; + box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); +} + +.section-show-thematiques .card-thematique__thumbnail { + width: 100%; + align-self: flex-end; + max-height: 250px; + width: auto; + margin-top: -110px; + margin-right: 0px; +} + +.section-show-thematiques .card-thematique__title { + padding-bottom: 1rem; + font-size: 1.125rem; + line-height: 1.75rem; + font-weight: 700; +} + +.section-show-thematiques .card-thematique__descritpion { +} + +.section-show-thematiques .card-thematique__cta { + display: flex; + align-items: center; + justify-content: space-between; + padding-top: 2rem; + font-weight: 700; +} + +.section-show-thematiques .card-thematique__cta::after { + position: absolute; + content: var(--tw-content); + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; +} + +.section-show-thematiques .card-thematique__cta:hover { + opacity: 1; +} + +.section-show-thematiques .card-thematique__cta { + transition: font-weight 0.3s ease-in-out; +} + +.section-show-thematiques .card-thematique__cta .cta_arrow_button { + display: block; + width: 50px; + height: 50px; +} + +.section-show-thematiques .card-thematique:hover { + transform: scale(1.02) translateY(-10px); + box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15); +} + +.section-show-thematiques .card-thematique:hover .cta_arrow_button { + opacity: 1; +} + +.section-show-thematiques .card-thematique.card-acoustique:hover .cta_arrow_button, .section-show-thematiques .card-thematique.card-petites-coproprietes:hover .cta_arrow_button { + filter: invert(27%) sepia(88%) saturate(1302%) + hue-rotate(206deg) brightness(105%) contrast(114%); +} + +.section-show-thematiques .card-thematique.card-au-quotidien:hover .cta_arrow_button, .section-show-thematiques .card-thematique.card-isolation:hover .cta_arrow_button { + filter: invert(21%) sepia(94%) saturate(3059%) + hue-rotate(26deg) brightness(98%) contrast(98%); +} + +.section-show-thematiques .card-thematique.card-energies:hover .cta_arrow_button, .section-show-thematiques .card-thematique.card-urbanisme:hover .cta_arrow_button { + filter: invert(28%) sepia(89%) saturate(1188%) + hue-rotate(131deg) brightness(95%) contrast(98%); +} + +.section-show-thematiques .card-thematique.card-location:hover .cta_arrow_button { + filter: invert(13%) sepia(71%) saturate(4425%) + hue-rotate(338deg) brightness(109%) contrast(117%); +} + +.section-show-thematiques .card-thematique.card-patrimoine:hover .cta_arrow_button { + filter: invert(25%) sepia(79%) saturate(6075%) + hue-rotate(263deg) brightness(99%) contrast(96%); +} + +.hover\:bg-primary:hover { + --tw-bg-opacity: 1; + background-color: rgb(47 1 84 / var(--tw-bg-opacity)); +} + +.hover\:bg-secondary:hover { + --tw-bg-opacity: 1; + background-color: rgb(223 30 30 / var(--tw-bg-opacity)); +} + +.hover\:bg-acoustique-coproprietes:hover { + --tw-bg-opacity: 1; + background-color: rgb(36 94 242 / var(--tw-bg-opacity)); +} + +.hover\:bg-acoustique-coproprietes-light:hover { + --tw-bg-opacity: 1; + background-color: rgb(223 241 255 / var(--tw-bg-opacity)); +} + +.hover\:bg-energies-urbanisme:hover { + --tw-bg-opacity: 1; + background-color: rgb(2 126 80 / var(--tw-bg-opacity)); +} + +.hover\:bg-energies-urbanisme-light:hover { + --tw-bg-opacity: 1; + background-color: rgb(227 255 240 / var(--tw-bg-opacity)); +} + +.hover\:bg-isolation-quotidien:hover { + --tw-bg-opacity: 1; + background-color: rgb(194 69 3 / var(--tw-bg-opacity)); +} + +.hover\:bg-isolation-quotidien-light:hover { + --tw-bg-opacity: 1; + background-color: rgb(255 251 236 / var(--tw-bg-opacity)); +} + +.hover\:bg-patrimoine-renovation:hover { + --tw-bg-opacity: 1; + background-color: rgb(139 47 247 / var(--tw-bg-opacity)); +} + +.hover\:bg-patrimoine-renovation-light:hover { + --tw-bg-opacity: 1; + background-color: rgb(255 229 253 / var(--tw-bg-opacity)); +} + +.hover\:bg-location:hover { + --tw-bg-opacity: 1; + background-color: rgb(223 0 43 / var(--tw-bg-opacity)); +} + +.hover\:bg-location-light:hover { + --tw-bg-opacity: 1; + background-color: rgb(254 226 231 / var(--tw-bg-opacity)); +} + +.hover\:text-primary:hover { + --tw-text-opacity: 1; + color: rgb(47 1 84 / var(--tw-text-opacity)); +} + +.hover\:text-secondary:hover { + --tw-text-opacity: 1; + color: rgb(223 30 30 / var(--tw-text-opacity)); +} + +.hover\:text-acoustique-coproprietes:hover { + --tw-text-opacity: 1; + color: rgb(36 94 242 / var(--tw-text-opacity)); +} + +.hover\:text-acoustique-coproprietes-light:hover { + --tw-text-opacity: 1; + color: rgb(223 241 255 / var(--tw-text-opacity)); +} + +.hover\:text-energies-urbanisme:hover { + --tw-text-opacity: 1; + color: rgb(2 126 80 / var(--tw-text-opacity)); +} + +.hover\:text-energies-urbanisme-light:hover { + --tw-text-opacity: 1; + color: rgb(227 255 240 / var(--tw-text-opacity)); +} + +.hover\:text-isolation-quotidien:hover { + --tw-text-opacity: 1; + color: rgb(194 69 3 / var(--tw-text-opacity)); +} + +.hover\:text-isolation-quotidien-light:hover { + --tw-text-opacity: 1; + color: rgb(255 251 236 / var(--tw-text-opacity)); +} + +.hover\:text-patrimoine-renovation:hover { + --tw-text-opacity: 1; + color: rgb(139 47 247 / var(--tw-text-opacity)); +} + +.hover\:text-patrimoine-renovation-light:hover { + --tw-text-opacity: 1; + color: rgb(255 229 253 / var(--tw-text-opacity)); +} + +.hover\:text-location:hover { + --tw-text-opacity: 1; + color: rgb(223 0 43 / var(--tw-text-opacity)); +} + +.hover\:text-location-light:hover { + --tw-text-opacity: 1; + color: rgb(254 226 231 / var(--tw-text-opacity)); +} + @media (min-width: 782px) { .md\:my-6 { margin-top: 1.5rem; diff --git a/css/editor-style.css b/css/editor-style.css index 2d040bb..ea87ad3 100644 --- a/css/editor-style.css +++ b/css/editor-style.css @@ -162,6 +162,61 @@ background-color: rgb(255 255 255 / var(--tw-bg-opacity)) } +.bg-secondary { + --tw-bg-opacity: 1; + background-color: rgb(223 30 30 / var(--tw-bg-opacity)) +} + +.bg-acoustique-coproprietes { + --tw-bg-opacity: 1; + background-color: rgb(36 94 242 / var(--tw-bg-opacity)) +} + +.bg-acoustique-coproprietes-light { + --tw-bg-opacity: 1; + background-color: rgb(223 241 255 / var(--tw-bg-opacity)) +} + +.bg-energies-urbanisme { + --tw-bg-opacity: 1; + background-color: rgb(2 126 80 / var(--tw-bg-opacity)) +} + +.bg-energies-urbanisme-light { + --tw-bg-opacity: 1; + background-color: rgb(227 255 240 / var(--tw-bg-opacity)) +} + +.bg-isolation-quotidien { + --tw-bg-opacity: 1; + background-color: rgb(194 69 3 / var(--tw-bg-opacity)) +} + +.bg-isolation-quotidien-light { + --tw-bg-opacity: 1; + background-color: rgb(255 251 236 / var(--tw-bg-opacity)) +} + +.bg-patrimoine-renovation { + --tw-bg-opacity: 1; + background-color: rgb(139 47 247 / var(--tw-bg-opacity)) +} + +.bg-patrimoine-renovation-light { + --tw-bg-opacity: 1; + background-color: rgb(255 229 253 / var(--tw-bg-opacity)) +} + +.bg-location { + --tw-bg-opacity: 1; + background-color: rgb(223 0 43 / var(--tw-bg-opacity)) +} + +.bg-location-light { + --tw-bg-opacity: 1; + background-color: rgb(254 226 231 / var(--tw-bg-opacity)) +} + .px-4 { padding-left: 1rem; padding-right: 1rem @@ -231,6 +286,66 @@ color: rgb(255 255 255 / var(--tw-text-opacity)) } +.text-isolation-quotidien { + --tw-text-opacity: 1; + color: rgb(194 69 3 / var(--tw-text-opacity)) +} + +.text-primary { + --tw-text-opacity: 1; + color: rgb(47 1 84 / var(--tw-text-opacity)) +} + +.text-secondary { + --tw-text-opacity: 1; + color: rgb(223 30 30 / var(--tw-text-opacity)) +} + +.text-acoustique-coproprietes { + --tw-text-opacity: 1; + color: rgb(36 94 242 / var(--tw-text-opacity)) +} + +.text-acoustique-coproprietes-light { + --tw-text-opacity: 1; + color: rgb(223 241 255 / var(--tw-text-opacity)) +} + +.text-energies-urbanisme { + --tw-text-opacity: 1; + color: rgb(2 126 80 / var(--tw-text-opacity)) +} + +.text-energies-urbanisme-light { + --tw-text-opacity: 1; + color: rgb(227 255 240 / var(--tw-text-opacity)) +} + +.text-isolation-quotidien-light { + --tw-text-opacity: 1; + color: rgb(255 251 236 / var(--tw-text-opacity)) +} + +.text-patrimoine-renovation { + --tw-text-opacity: 1; + color: rgb(139 47 247 / var(--tw-text-opacity)) +} + +.text-patrimoine-renovation-light { + --tw-text-opacity: 1; + color: rgb(255 229 253 / var(--tw-text-opacity)) +} + +.text-location { + --tw-text-opacity: 1; + color: rgb(223 0 43 / var(--tw-text-opacity)) +} + +.text-location-light { + --tw-text-opacity: 1; + color: rgb(254 226 231 / var(--tw-text-opacity)) +} + .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale @@ -325,6 +440,126 @@ body { max-width: 782px } +.hover\:bg-primary:hover { + --tw-bg-opacity: 1; + background-color: rgb(47 1 84 / var(--tw-bg-opacity)) +} + +.hover\:bg-secondary:hover { + --tw-bg-opacity: 1; + background-color: rgb(223 30 30 / var(--tw-bg-opacity)) +} + +.hover\:bg-acoustique-coproprietes:hover { + --tw-bg-opacity: 1; + background-color: rgb(36 94 242 / var(--tw-bg-opacity)) +} + +.hover\:bg-acoustique-coproprietes-light:hover { + --tw-bg-opacity: 1; + background-color: rgb(223 241 255 / var(--tw-bg-opacity)) +} + +.hover\:bg-energies-urbanisme:hover { + --tw-bg-opacity: 1; + background-color: rgb(2 126 80 / var(--tw-bg-opacity)) +} + +.hover\:bg-energies-urbanisme-light:hover { + --tw-bg-opacity: 1; + background-color: rgb(227 255 240 / var(--tw-bg-opacity)) +} + +.hover\:bg-isolation-quotidien:hover { + --tw-bg-opacity: 1; + background-color: rgb(194 69 3 / var(--tw-bg-opacity)) +} + +.hover\:bg-isolation-quotidien-light:hover { + --tw-bg-opacity: 1; + background-color: rgb(255 251 236 / var(--tw-bg-opacity)) +} + +.hover\:bg-patrimoine-renovation:hover { + --tw-bg-opacity: 1; + background-color: rgb(139 47 247 / var(--tw-bg-opacity)) +} + +.hover\:bg-patrimoine-renovation-light:hover { + --tw-bg-opacity: 1; + background-color: rgb(255 229 253 / var(--tw-bg-opacity)) +} + +.hover\:bg-location:hover { + --tw-bg-opacity: 1; + background-color: rgb(223 0 43 / var(--tw-bg-opacity)) +} + +.hover\:bg-location-light:hover { + --tw-bg-opacity: 1; + background-color: rgb(254 226 231 / var(--tw-bg-opacity)) +} + +.hover\:text-primary:hover { + --tw-text-opacity: 1; + color: rgb(47 1 84 / var(--tw-text-opacity)) +} + +.hover\:text-secondary:hover { + --tw-text-opacity: 1; + color: rgb(223 30 30 / var(--tw-text-opacity)) +} + +.hover\:text-acoustique-coproprietes:hover { + --tw-text-opacity: 1; + color: rgb(36 94 242 / var(--tw-text-opacity)) +} + +.hover\:text-acoustique-coproprietes-light:hover { + --tw-text-opacity: 1; + color: rgb(223 241 255 / var(--tw-text-opacity)) +} + +.hover\:text-energies-urbanisme:hover { + --tw-text-opacity: 1; + color: rgb(2 126 80 / var(--tw-text-opacity)) +} + +.hover\:text-energies-urbanisme-light:hover { + --tw-text-opacity: 1; + color: rgb(227 255 240 / var(--tw-text-opacity)) +} + +.hover\:text-isolation-quotidien:hover { + --tw-text-opacity: 1; + color: rgb(194 69 3 / var(--tw-text-opacity)) +} + +.hover\:text-isolation-quotidien-light:hover { + --tw-text-opacity: 1; + color: rgb(255 251 236 / var(--tw-text-opacity)) +} + +.hover\:text-patrimoine-renovation:hover { + --tw-text-opacity: 1; + color: rgb(139 47 247 / var(--tw-text-opacity)) +} + +.hover\:text-patrimoine-renovation-light:hover { + --tw-text-opacity: 1; + color: rgb(255 229 253 / var(--tw-text-opacity)) +} + +.hover\:text-location:hover { + --tw-text-opacity: 1; + color: rgb(223 0 43 / var(--tw-text-opacity)) +} + +.hover\:text-location-light:hover { + --tw-text-opacity: 1; + color: rgb(254 226 231 / var(--tw-text-opacity)) +} + @media (min-width: 782px) { .md\:my-6 { margin-top: 1.5rem; diff --git a/functions.php b/functions.php index 023075d..ce6e5be 100644 --- a/functions.php +++ b/functions.php @@ -7,7 +7,7 @@ require_once(__DIR__ . '/includes/post_types.php'); require_once(__DIR__ . '/includes/admin.php'); require_once(__DIR__ . '/includes/logos.php'); require_once(__DIR__ . '/includes/taxonomy.php'); +require_once(__DIR__ . '/includes/utilities.php'); // require_once(__DIR__ . '/includes/widget.php'); -// require_once( __DIR__ . '/includes/errorlog.php'); // require_once( __DIR__ . '/includes/logos.php'); \ No newline at end of file diff --git a/includes/blocks.php b/includes/blocks.php index 3b771d6..a7d556a 100755 --- a/includes/blocks.php +++ b/includes/blocks.php @@ -34,6 +34,7 @@ function mywp_register_acf_blocks() } register_block_type(get_template_directory() . '/template-blocks/home/home-header'); register_block_type(get_template_directory() . '/template-blocks/home/latest-news'); + register_block_type(get_template_directory() . '/template-blocks/home/show-thematiques'); } add_action('init', 'mywp_register_acf_blocks'); diff --git a/includes/utilities.php b/includes/utilities.php new file mode 100644 index 0000000..ecd9ea5 --- /dev/null +++ b/includes/utilities.php @@ -0,0 +1,29 @@ + a, + &:hover, a:focus { - @apply cursor-pointer - underline - underline-offset-8 - text-secondary; + @apply cursor-pointer; + background-color: rgba(255, 255, 255, 0.1); } a:focus { text-decoration: none; diff --git a/resources/svg/arrow-down-white.svg b/resources/svg/arrow-down-white.svg new file mode 100644 index 0000000..591f745 --- /dev/null +++ b/resources/svg/arrow-down-white.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/resources/svg/arrow-right-circle.svg b/resources/svg/arrow-right-circle.svg new file mode 100644 index 0000000..3c793de --- /dev/null +++ b/resources/svg/arrow-right-circle.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/tailwind.config.js b/tailwind.config.js index 5d316ea..9d00474 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,36 +1,97 @@ const theme = require('./theme.json'); -const tailpress = require("@jeffreyvr/tailwindcss-tailpress"); +const tailpress = require('@jeffreyvr/tailwindcss-tailpress'); module.exports = { - content: [ - './*.php', - './**/*.php', - './resources/css/*.css', - './resources/js/*.js', - './safelist.txt' - ], - theme: { - container: { - padding: { - DEFAULT: '1rem', - sm: '2rem', - lg: '0rem' - }, - }, - extend: { - colors: tailpress.colorMapper(tailpress.theme('settings.color.palette', theme)), - fontSize: tailpress.fontSizeMapper(tailpress.theme('settings.typography.fontSizes', theme)) - }, - screens: { - 'xs': '480px', - 'sm': '600px', - 'md': '782px', - 'lg': tailpress.theme('settings.layout.contentSize', theme), - 'xl': tailpress.theme('settings.layout.wideSize', theme), - '2xl': '1440px' - } + content: [ + './*.php', + './**/*.php', + './resources/css/*.css', + './resources/js/*.js', + './safelist.txt', + ], + safelist: [ + 'bg-primary', + 'text-primary', + 'bg-secondary', + 'text-secondary', + 'bg-acoustique-coproprietes', + 'text-acoustique-coproprietes', + 'bg-acoustique-coproprietes-light', + 'text-acoustique-coproprietes-light', + 'bg-energies-urbanisme', + 'text-energies-urbanisme', + 'bg-energies-urbanisme-light', + 'text-energies-urbanisme-light', + 'bg-isolation-quotidien', + 'text-isolation-quotidien', + 'bg-isolation-quotidien-light', + 'text-isolation-quotidien-light', + 'bg-patrimoine-renovation', + 'text-patrimoine-renovation', + 'bg-patrimoine-renovation-light', + 'text-patrimoine-renovation-light', + 'bg-location', + 'text-location', + 'bg-location-light', + 'text-location-light', + 'hover:bg-primary', + 'hover:text-primary', + 'hover:bg-secondary', + 'hover:text-secondary', + 'hover:bg-acoustique-coproprietes', + 'hover:text-acoustique-coproprietes', + 'hover:bg-acoustique-coproprietes-light', + 'hover:text-acoustique-coproprietes-light', + 'hover:bg-energies-urbanisme', + 'hover:text-energies-urbanisme', + 'hover:bg-energies-urbanisme-light', + 'hover:text-energies-urbanisme-light', + 'hover:bg-isolation-quotidien', + 'hover:text-isolation-quotidien', + 'hover:bg-isolation-quotidien-light', + 'hover:text-isolation-quotidien-light', + 'hover:bg-patrimoine-renovation', + 'hover:text-patrimoine-renovation', + 'hover:bg-patrimoine-renovation-light', + 'hover:text-patrimoine-renovation-light', + 'hover:bg-location', + 'hover:text-location', + 'hover:bg-location-light', + 'hover:text-location-light', + ], + theme: { + container: { + padding: { + DEFAULT: '1rem', + sm: '2rem', + lg: '0rem', + }, }, - plugins: [ - tailpress.tailwind - ] + extend: { + colors: tailpress.colorMapper( + tailpress.theme('settings.color.palette', theme) + ), + fontSize: tailpress.fontSizeMapper( + tailpress.theme( + 'settings.typography.fontSizes', + theme + ) + ), + }, + screens: { + xs: '480px', + sm: '600px', + md: '782px', + lg: tailpress.theme( + 'settings.layout.contentSize', + theme + ), + xl: tailpress.theme( + 'settings.layout.wideSize', + theme + ), + '2xl': '1440px', + }, + }, + plugins: [tailpress.tailwind], }; diff --git a/template-blocks/home/home-header/home-header.css b/template-blocks/home/home-header/home-header.css index e69de29..bb4f30f 100755 --- a/template-blocks/home/home-header/home-header.css +++ b/template-blocks/home/home-header/home-header.css @@ -0,0 +1,31 @@ +.home-header { + @apply max-w-screen-2xl mx-auto px-16 py-32; + + &__titling { + @apply max-w-[580px]; + } + &__title { + @apply text-4xl font-medium pb-6; + line-height: 1.2; + } + + &__scroll-down-indicator { + @apply bg-primary rounded-full flex justify-center items-center mt-6; + width: 80px; + height: 80px; + &__arrow { + animation: bouncingArrow 1s infinite alternate + cubic-bezier(0.01, 0.61, 0.67, 0.99); + /* cubic-bezier(0.01, 0.61, 0.39, 1); */ + /* cubic-bezier(0.18, 0.89, 0.3, 1); */ + } + } +} +@keyframes bouncingArrow { + 0% { + transform: translateY(4px); + } + 100% { + transform: translateY(-6px); + } +} diff --git a/template-blocks/home/home-header/home-header.php b/template-blocks/home/home-header/home-header.php index d8127e0..9567d00 100755 --- a/template-blocks/home/home-header/home-header.php +++ b/template-blocks/home/home-header/home-header.php @@ -5,12 +5,14 @@ $home_header = get_field('home_header_datas');
-

qsdqsdd

-
+

- +

+
+ +
\ No newline at end of file diff --git a/template-blocks/home/show-thematiques/block.json b/template-blocks/home/show-thematiques/block.json new file mode 100644 index 0000000..b4b2106 --- /dev/null +++ b/template-blocks/home/show-thematiques/block.json @@ -0,0 +1,17 @@ +{ + "name": "acf/show-thematiques", + "title": "Home | Thématiques", + "category": "homegrade-pages", + "multiple": false, + "icon": { + "foreground": "#DF1E1E", + "src": "schedule" + }, + "keywords": [ + "Thématiques" + ], + "acf": { + "mode": "auto", + "renderTemplate": "show-thematiques.php" + } +} \ No newline at end of file diff --git a/template-blocks/home/show-thematiques/show-thematiques.css b/template-blocks/home/show-thematiques/show-thematiques.css new file mode 100755 index 0000000..56714ff --- /dev/null +++ b/template-blocks/home/show-thematiques/show-thematiques.css @@ -0,0 +1,85 @@ +.section-show-thematiques { + .thematiques-container { + @apply grid + grid-cols-3 + gap-8 + gap-y-32 + max-w-screen-xl + mx-auto + pt-16; + } + + .card-thematique { + @apply bg-white flex flex-col p-8 rounded-3xl relative; + transition: all 0.3s ease-in-out; + box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); + + &__thumbnail { + @apply w-full self-end; + max-height: 250px; + width: auto; + margin-top: -110px; + margin-right: 0px; + } + &__title { + @apply text-lg font-bold pb-4; + } + &__descritpion { + } + + &__cta { + @apply after:absolute + after:inset-0 + font-bold + hover:opacity-100 + pt-8 + flex + items-center + justify-between; + transition: font-weight 0.3s ease-in-out; + .cta_arrow_button { + @apply block; + width: 50px; + height: 50px; + } + } + + &:hover { + transform: scale(1.02) translateY(-10px); + box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.15); + + .cta_arrow_button { + opacity: 1; + } + } + + &.card-acoustique:hover, + &.card-petites-coproprietes:hover { + .cta_arrow_button { + @apply filter-acoustique-coproprietes; + } + } + &.card-au-quotidien:hover, + &.card-isolation:hover { + .cta_arrow_button { + @apply filter-isolation-quotidien; + } + } + &.card-energies:hover, + &.card-urbanisme:hover { + .cta_arrow_button { + @apply filter-energies-urbanisme; + } + } + &.card-location:hover { + .cta_arrow_button { + @apply filter-location; + } + } + &.card-patrimoine:hover { + .cta_arrow_button { + @apply filter-patrimoine; + } + } + } +} diff --git a/template-blocks/home/show-thematiques/show-thematiques.php b/template-blocks/home/show-thematiques/show-thematiques.php new file mode 100755 index 0000000..fda54ad --- /dev/null +++ b/template-blocks/home/show-thematiques/show-thematiques.php @@ -0,0 +1,44 @@ + 'thematiques', + 'parent' => 0, + 'hide_empty' => false, +)); + + +?> + +
+
+

+

+
+ +
+ + slug); + ?> +
+ +

name ?>

+

description ?>

+ + + En savoir plus +
+ +
+ +
+ + + +
+ +
\ No newline at end of file