diff --git a/.prettierrc b/.prettierrc
index cfa5269..fc9c668 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,5 +2,5 @@
"tabWidth": 2,
"semi": true,
"singleQuote": true,
- "printWidth": 60
+ "printWidth": 100
}
\ No newline at end of file
diff --git a/css/app.css b/css/app.css
index c872fad..63465fd 100644
--- a/css/app.css
+++ b/css/app.css
@@ -684,10 +684,6 @@ video {
justify-content: center;
}
-.justify-between {
- justify-content: space-between;
-}
-
.rounded {
border-radius: 0.25rem;
}
@@ -696,6 +692,10 @@ video {
border-width: 1px;
}
+.\!border {
+ border-width: 1px !important;
+}
+
.border-b {
border-bottom-width: 1px;
}
@@ -705,6 +705,11 @@ video {
border-color: rgb(47 1 84 / var(--tw-border-opacity));
}
+.border-secondary {
+ --tw-border-opacity: 1;
+ border-color: rgb(223 30 30 / var(--tw-border-opacity));
+}
+
.bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(47 1 84 / var(--tw-bg-opacity));
@@ -804,16 +809,16 @@ video {
line-height: 2rem;
}
-.text-lg {
- font-size: 1.125rem;
- line-height: 1.75rem;
-}
-
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
+.text-lg {
+ font-size: 1.125rem;
+ line-height: 1.75rem;
+}
+
.font-light {
font-weight: 300;
}
@@ -1049,6 +1054,14 @@ button:focus {
border-radius: 9999px;
}
+.cta--circular:focus {
+ border-radius: 9999px;
+}
+
+.cta--circular {
+ outline-offset: 5px !important;
+}
+
.cta--primary {
--tw-bg-opacity: 1;
background-color: rgb(47 1 84 / var(--tw-bg-opacity));
@@ -1082,6 +1095,10 @@ button:focus {
background-color: rgb(239, 239, 239, 0.6);
}
+/* &--outline-secondary {
+ @apply border-secondary border;
+ } */
+
.cta--shadowed {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
@@ -1129,8 +1146,8 @@ button:focus {
}
.cta--with-arrow-button:hover .cta_arrow_button {
- filter: invert(27%) sepia(69%) saturate(6074%)
- hue-rotate(348deg) brightness(87%) contrast(100%);
+ filter: invert(27%) sepia(69%) saturate(6074%) hue-rotate(348deg) brightness(87%)
+ contrast(100%);
transform: translateX(3px);
}
@@ -1346,6 +1363,138 @@ button:focus {
color: rgb(223 30 30 / var(--tw-text-opacity));
}
+.search-module {
+ position: absolute;
+ left: 0px;
+ bottom: 0px;
+ width: 100%;
+ --tw-translate-y: 100%;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+ padding-left: 4rem;
+ padding-right: 4rem;
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
+}
+
+.search-module__wrapper-container {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 1280px;
+}
+
+.search-module__search-form {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.search-module__search-form__title {
+ display: block;
+ width: 100%;
+ font-size: 1.125rem;
+ line-height: 1.75rem;
+ font-weight: 700;
+}
+
+.search-module__search-form__separator {
+ margin-top: 0.5rem;
+ margin-bottom: 2rem;
+ width: 100%;
+ border-style: none;
+ --tw-bg-opacity: 1;
+ background-color: rgb(118 117 117 / var(--tw-bg-opacity));
+ opacity: 0.5;
+ height: 1px;
+}
+
+.search-module__search-form__input {
+ display: block;
+ max-width: 100%;
+ flex-grow: 1;
+ border-top-left-radius: 1.5rem;
+ border-bottom-left-radius: 1.5rem;
+ border-width: 1px;
+ --tw-border-opacity: 1;
+ border-color: rgb(0 0 0 / var(--tw-border-opacity));
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+
+.search-module__search-form button[type='submit'] {
+ display: flex;
+ width: 16.666667%;
+ align-items: center;
+ justify-content: center;
+ gap: 0.75rem;
+ border-top-right-radius: 1.5rem;
+ border-bottom-right-radius: 1.5rem;
+ --tw-bg-opacity: 1;
+ background-color: rgb(223 30 30 / var(--tw-bg-opacity));
+ padding-left: 1rem;
+ padding-right: 1rem;
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem;
+ --tw-text-opacity: 1;
+ color: rgb(255 255 255 / var(--tw-text-opacity));
+ max-width: 300px;
+}
+
+.search-module__search-form button[type='submit'] .search_icon {
+ --tw-invert: invert(100%);
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+.search-module__suggestions {
+ display: flex;
+ flex-wrap: wrap;
+ -moz-column-gap: 0.75rem;
+ column-gap: 0.75rem;
+ padding-top: 1rem;
+}
+
+.search-module__suggestions__navlist {
+ display: flex;
+ flex-wrap: wrap;
+ -moz-column-gap: 0.75rem;
+ column-gap: 0.75rem;
+}
+
+.search-module__suggestions__navlist .suggestion-item {
+ font-weight: 700;
+ -webkit-text-decoration-line: underline;
+ text-decoration-line: underline;
+ text-underline-offset: 4px;
+}
+
+.search-module {
+ display: block;
+ transition: all 0.5s;
+ transition-timing-function: cubic-bezier(0, 0.51, 0.23, 0.99);
+}
+
+.search-module[aria-hidden='true'] {
+ display: none;
+}
+
+.search-module-closed {
+ /* transition: all 0.3s ease-in-out; */
+ pointer-events: none;
+ --tw-translate-y: 50%;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ opacity: 0;
+ z-index: -1;
+}
+
+.search-module-open {
+ /* transition: all 0.3s ease-in-out; */
+ --tw-translate-y: 100%;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ z-index: 20;
+}
+
.card-frequent-question {
position: relative;
border-radius: 1.5rem;
@@ -1509,351 +1658,14 @@ button:focus {
/* ########### LAYOUT ############ */
-.primary-menu-container {
- position: relative;
- margin-left: auto;
- margin-right: auto;
- margin-top: 0px;
- margin-bottom: 0px;
- height: -webkit-fit-content;
- height: -moz-fit-content;
- height: fit-content;
- --tw-bg-opacity: 1;
- background-color: rgb(47 1 84 / var(--tw-bg-opacity));
- padding-top: 1rem;
- padding-bottom: 1rem;
- padding-left: 2rem;
- padding-right: 2rem;
- --tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
-@media (min-width: 1440px) {
- .primary-menu-container {
- padding-left: 8rem;
- padding-right: 8rem;
- }
-}
-
-.primary-menu-container nav#primary-menu-nav {
- margin-left: auto;
- margin-right: auto;
- width: 100%;
- max-width: 1440px;
-}
-
-.primary-menu-container #primary-menu {
+header#main-header {
display: flex;
- width: 100%;
- flex-direction: column;
- align-items: center;
- justify-content: space-around;
+ flex-direction: column-reverse;
}
-@media (min-width: 960px) {
- .primary-menu-container #primary-menu {
- flex-direction: row;
- justify-content: flex-end;
- }
-}
-
-.primary-menu-container #primary-menu {
- /* li.menu-item.menu-item-has-children:hover {
- @screen lg {
- .menu-item-submenu-toggle:after {
- transform: rotate(180deg);
- }
- .sub-menu {
- display: block;
- }
- }
- } */
-}
-
-.primary-menu-container #primary-menu ul {
- padding-right: 0px;
-}
-
-@media (min-width: 960px) {
- .primary-menu-container #primary-menu ul {
- display: flex;
- }
-}
-
-/* Highlight using list element */
-
-.primary-menu-container #primary-menu li.current-page-parent > a,
- .primary-menu-container #primary-menu li.current_page_item > a {
- font-weight: 500;
- --tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity));
- -webkit-text-decoration-line: underline;
- text-decoration-line: underline;
- -webkit-text-decoration-color: #DF1E1E;
- text-decoration-color: #DF1E1E;
- text-underline-offset: 8px;
-}
-
-.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-weight: 500;
-}
-
-.primary-menu-container #primary-menu li.menu-item:hover,
- .primary-menu-container #primary-menu li.menu-item a:focus {
- cursor: pointer;
- background-color: rgba(255, 255, 255, 0.1);
-}
-
-.primary-menu-container #primary-menu li.menu-item a:focus {
- text-decoration: none;
-}
-
-/* IF SUBMENU CHILD */
-
-.primary-menu-container #primary-menu li.menu-item .menu-item-submenu-toggle:hover,
- .primary-menu-container #primary-menu li.menu-item .menu-item-submenu-toggle:focus {
- --tw-text-opacity: 1;
- color: rgb(223 30 30 / var(--tw-text-opacity));
-}
-
-.primary-menu-container #primary-menu li.menu-item .menu-item-submenu-toggle {
- position: relative;
- padding-right: 1rem;
-}
-
-.primary-menu-container #primary-menu li.menu-item .menu-item-submenu-toggle:after {
- right: 0px;
- content: '▼';
- position: absolute;
- display: inline-block;
- line-height: 0.5;
- height: 10px;
- top: calc(50% - 4px);
- width: 10px;
- margin-left: 20px;
- transform-origin: center;
- background-repeat: no-repeat;
- background-size: contain;
- transition: all 0.3s ease-out;
-}
-
-.primary-menu-container #primary-menu li.menu-item .menu-item-submenu-toggle[aria-expanded='false']:after {
- transform: rotate(0deg);
-}
-
-.primary-menu-container #primary-menu li.menu-item .menu-item-submenu-toggle[aria-expanded='true']:after {
- transform: rotate(180deg);
-}
-
-/* submenus */
-
-.primary-menu-container #primary-menu li .sub-menu {
- position: static;
- margin-left: auto;
- margin-right: auto;
- --tw-bg-opacity: 1;
- background-color: rgb(47 1 84 / var(--tw-bg-opacity));
- padding: 1.5rem;
-}
-
-@media (min-width: 960px) {
- .primary-menu-container #primary-menu li .sub-menu {
- position: absolute;
- margin-left: 0px;
- margin-right: 0px;
- }
-}
-
-.primary-menu-container #primary-menu li .sub-menu {
- z-index: 999;
- display: none;
-}
-
-.primary-menu-container #primary-menu li .sub-menu.sub-menu-open {
- display: block;
-}
-
-.primary-menu-container #primary-menu li .sub-menu li {
- padding-top: 0.5rem;
- padding-bottom: 0.5rem;
-}
-
-@media (min-width: 960px) {
- .primary-menu-container #primary-menu li .sub-menu li {
- text-align: left;
- }
-}
-
-.primary-menu-container #primary-menu li .sub-menu > a::after {
- transform: translateY(-2px) rotate(-90deg);
- content: '';
- display: inline-block;
- height: 10px;
- width: 10px;
- margin-left: 20px;
- background-image: url('../resources/img/arrow_down_white.svg');
- background-repeat: no-repeat;
- background-size: contain;
- transition: all 0.3s ease-out;
-}
-
-.primary-menu-container #secondary-menu {
- display: flex;
- --tw-bg-opacity: 1;
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-button#burger-menu-toggle {
- position: absolute;
- right: 2.5rem;
- top: 50%;
- z-index: 50;
- --tw-translate-y: -50%;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-@media (min-width: 960px) {
- button#burger-menu-toggle {
- display: none;
- }
-}
-
-button#burger-menu-toggle {
- width: 26px;
- height: 26px;
-}
-
-button#burger-menu-toggle .menu-toggle-bar {
- position: absolute;
- top: 50%;
- right: 0px;
- display: block;
- height: 2px;
- width: 100%;
- --tw-bg-opacity: 1;
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
- margin-top: -1px;
- transition: all 0.3s ease;
-}
-
-button#burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--top {
- transform: translate(0, -7px);
-}
-
-button#burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--middle {
-}
-
-button#burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--bottom {
- transform: translate(0, 7px);
-}
-
-.nav-open button#burger-menu-toggle .menu-toggle-bar {
- --tw-bg-opacity: 1;
- background-color: rgb(223 30 30 / var(--tw-bg-opacity));
-}
-
-.nav-open button#burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--top {
- transform: translate(0, 0) rotate(45deg);
-}
-
-.nav-open button#burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--middle {
- opacity: 0;
-}
-
-.nav-open button#burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--bottom {
- transform: translate(0, 0) rotate(-45deg);
-}
-
-button#burger-menu-toggle:hover path {
- fill: #DF1E1E;
-}
-
-/* RESPONSIVE */
-
-@media (max-width: 960px) {
- .primary-menu-container #primary-menu {
- position: absolute;
- left: 0px;
- z-index: 40;
- margin-top: 0px;
- display: none;
- --tw-bg-opacity: 1;
- background-color: rgb(47 1 84 / var(--tw-bg-opacity));
- /* transition: all 0.3s ease-out;
- transform: translateY(-120vh); */
- min-height: 100vh;
- height: -webkit-fit-content;
- height: -moz-fit-content;
- height: fit-content;
- top: 0;
- width: 100vw;
- }
-
- /* Rendu conditionnel de l'élément si contenu dans une classe de parent (nesting inversé) */
-
- .nav-open .primary-menu-container #primary-menu {
- display: flex;
- }
-
- .primary-menu-container #primary-menu > ul {
- margin-left: auto;
- margin-right: auto;
- max-width: 20rem;
- /* min-height: 96vh; */
- padding-top: 5vh;
- }
-
- .primary-menu-container #primary-menu li.menu-item {
- margin-top: 0px;
- display: block !important;
- padding-top: 2rem;
- padding-bottom: 2rem;
- padding-bottom: 0px;
- text-align: center;
- font-size: 1.125rem;
- line-height: 1.75rem;
- font-weight: 500;
- --tw-text-opacity: 1;
- color: rgb(255 255 255 / var(--tw-text-opacity));
- }
-
- .primary-menu-container #primary-menu li.menu-item .sub-menu li {
- font-size: 0.875rem;
- line-height: 1.25rem;
- }
-
- /* BURGER MENU */
-
- body:has(.nav-open) {
- max-height: 100vh;
- overflow: hidden;
- /* #content,
- footer,
- .wpml-ls-statics-footer {
- @apply !hidden;
- } */
- }
-
- .cta_plain_secondary,
- .switch_language {
- /* @apply self-end; */
- }
-}
-
-@media (max-width: 960px) and (hover: none) {
- /* ul {
- @apply w-max mx-auto;
- } */
-
- .primary-menu-container li.menu-item {
- margin-left: auto;
- margin-right: auto;
+@media (min-width: 782px) {
+ header#main-header {
+ flex-direction: column;
}
}
@@ -1999,8 +1811,12 @@ article > *:not(.entry-content),
}
.menu-renovateur {
+ position: relative;
display: flex;
+ flex-wrap: wrap;
justify-content: space-between;
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 252 232 / var(--tw-bg-opacity));
padding-top: 2rem;
padding-bottom: 2rem;
padding-left: 4rem;
@@ -2021,42 +1837,40 @@ article > *:not(.entry-content),
}
}
-.menu-renovateur ul {
- display: flex;
- justify-content: center;
- gap: 2rem;
-}
-
-.menu-renovateur ul li .page_icon {
- height: 50px;
- width: 50px;
-}
-
-.menu-renovateur ul li {
+.menu-renovateur__main-elements {
display: flex;
+ width: 100%;
align-items: center;
- justify-content: center;
- font-weight: 700;
- --tw-text-opacity: 1;
- color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
-.menu-renovateur ul li .sub-menu {
- display: none;
-}
-
-.menu-renovateur-footer {
- display: flex;
justify-content: space-between;
- gap: 2rem;
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 202 202 / var(--tw-bg-opacity));
}
-.menu-renovateur-footer li .page_icon {
+.menu-renovateur__navlist {
+ left: 50%;
+ top: 50%;
+ --tw-translate-x: -50%;
+ --tw-translate-y: -50%;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+ justify-content: center;
+ gap: 2rem;
+ --tw-bg-opacity: 1;
+ background-color: rgb(187 247 208 / var(--tw-bg-opacity));
+}
+
+@media (min-width: 782px) {
+ .menu-renovateur__navlist {
+ position: absolute;
+ display: flex;
+ }
+}
+
+.menu-renovateur__navlist li .page_icon {
height: 50px;
width: 50px;
}
-.menu-renovateur-footer li {
+.menu-renovateur__navlist li {
display: flex;
align-items: center;
justify-content: center;
@@ -2065,49 +1879,400 @@ article > *:not(.entry-content),
color: rgb(0 0 0 / var(--tw-text-opacity));
}
-.menu-renovateur-footer li .sub-menu {
+.menu-renovateur__navlist li .sub-menu {
display: none;
}
-.menu-homegrade-footer {
+@media (min-width: 782px) {
+ .menu-renovateur__mobile-menu-toggle {
+ display: none;
+ }
+}
+
+.menu-renovateur__search-module-toggle {
+ z-index: 50;
+ height: -webkit-fit-content;
+ height: -moz-fit-content;
+ height: fit-content;
+}
+
+.menu-renovateur--footer {
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.menu-renovateur--footer li .page_icon {
+ height: 50px;
+ width: 50px;
+}
+
+.menu-renovateur--footer li {
+ display: flex;
+ align-items: center;
+ justify-content: flex-start;
+ font-weight: 700;
+ --tw-text-opacity: 1;
+ color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
+.menu-renovateur--footer li .sub-menu {
+ display: none;
+}
+
+/* .primary-menu-container { */
+
+.menu-homegrade {
+ position: relative;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 0px;
+ margin-bottom: 0px;
+ height: -webkit-fit-content;
+ height: -moz-fit-content;
+ height: fit-content;
+ --tw-bg-opacity: 1;
+ background-color: rgb(47 1 84 / var(--tw-bg-opacity));
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ padding-left: 2rem;
+ padding-right: 2rem;
+ --tw-text-opacity: 1;
+ color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+@media (min-width: 1440px) {
+ .menu-homegrade {
+ padding-left: 8rem;
+ padding-right: 8rem;
+ }
+}
+
+.menu-homegrade {
+ /*##### RESPONSIVE */
+ /* @media (max-width: 960px) {
+ &__wrapper-container {
+ @apply mt-0
+ left-0
+ z-40
+ absolute
+ hidden;
+
+ min-height: 100vh;
+ height: fit-content;
+ top: 0;
+ width: 100vw;
+
+ // Rendu conditionnel de l'élément si contenu dans une classe de parent (nesting inversé)
+
+ .nav-open & {
+ @apply flex;
+ }
+
+ > ul {
+ @apply max-w-xs
+ mx-auto;
+ padding-top: 5vh;
+ }
+ li.menu-item {
+ @apply mt-0
+ text-center
+ text-white
+ font-medium
+ py-8
+ text-lg
+ !block
+ pb-0;
+
+ .sub-menu li {
+ @apply text-sm;
+ }
+ }
+ }
+
+ // BURGER MENU
+ body:has(.nav-open) {
+ @apply max-h-screen
+ overflow-hidden;
+ }
+ } */
+ /* @media (max-width: 960px) and (hover: none) {
+ li.menu-item {
+ @apply mx-auto
+ }
+ } */
+}
+
+.menu-homegrade__wrapper-container {
+ margin-left: auto;
+ margin-right: auto;
+ display: flex;
+ width: 100%;
+ max-width: 1440px;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+}
+
+@media (min-width: 960px) {
+ .menu-homegrade__wrapper-container {
+ flex-direction: row;
+ justify-content: flex-end;
+ }
+}
+
+.menu-homegrade__wrapper-container {
+ /* li.menu-item.menu-item-has-children:hover {
+ @screen lg {
+ .menu-item-submenu-toggle:after {
+ transform: rotate(180deg);
+ }
+ .sub-menu {
+ display: block;
+ }
+ }
+ } */
+}
+
+/* submenus */
+
+.menu-homegrade__wrapper-container li .sub-menu {
+ position: static;
+ margin-left: auto;
+ margin-right: auto;
+ --tw-bg-opacity: 1;
+ background-color: rgb(47 1 84 / var(--tw-bg-opacity));
+ padding: 1.5rem;
+}
+
+@media (min-width: 960px) {
+ .menu-homegrade__wrapper-container li .sub-menu {
+ position: absolute;
+ margin-left: 0px;
+ margin-right: 0px;
+ }
+}
+
+.menu-homegrade__wrapper-container li .sub-menu {
+ z-index: 999;
+ display: none;
+}
+
+.menu-homegrade__wrapper-container li .sub-menu.sub-menu-open {
+ display: block;
+}
+
+.menu-homegrade__wrapper-container li .sub-menu li {
+ padding-top: 0.5rem;
+ padding-bottom: 0.5rem;
+}
+
+@media (min-width: 960px) {
+ .menu-homegrade__wrapper-container li .sub-menu li {
+ text-align: left;
+ }
+}
+
+.menu-homegrade__wrapper-container li .sub-menu > a::after {
+ transform: translateY(-2px) rotate(-90deg);
+ content: '';
+ display: inline-block;
+ height: 10px;
+ width: 10px;
+ margin-left: 20px;
+ background-image: url('../resources/img/arrow_down_white.svg');
+ background-repeat: no-repeat;
+ background-size: contain;
+ transition: all 0.3s ease-out;
+}
+
+.menu-homegrade__navlist {
+ padding-right: 0px;
+}
+
+@media (min-width: 960px) {
+ .menu-homegrade__navlist {
+ display: flex;
+ }
+}
+
+/* Highlight using list element */
+
+.menu-homegrade__navlist li.current-page-parent > a,
+ .menu-homegrade__navlist li.current_page_item > a {
+ font-weight: 500;
+ --tw-text-opacity: 1;
+ color: rgb(255 255 255 / var(--tw-text-opacity));
+ -webkit-text-decoration-line: underline;
+ text-decoration-line: underline;
+ -webkit-text-decoration-color: #DF1E1E;
+ text-decoration-color: #DF1E1E;
+ text-underline-offset: 8px;
+}
+
+.menu-homegrade__navlist 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-weight: 500;
+}
+
+.menu-homegrade__navlist li.menu-item:hover,
+ .menu-homegrade__navlist li.menu-item a:focus {
+ cursor: pointer;
+ background-color: rgba(255, 255, 255, 0.1);
+}
+
+.menu-homegrade__navlist li.menu-item a:focus {
+ text-decoration: none;
+}
+
+/* IF SUBMENU CHILD */
+
+.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle:hover,
+ .menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle:focus {
+ --tw-text-opacity: 1;
+ color: rgb(223 30 30 / var(--tw-text-opacity));
+}
+
+.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle {
+ position: relative;
+ padding-right: 1rem;
+}
+
+.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle:after {
+ right: 0px;
+ content: '▼';
+ position: absolute;
+ display: inline-block;
+ line-height: 0.5;
+ height: 10px;
+ top: calc(50% - 4px);
+ width: 10px;
+ margin-left: 20px;
+ transform-origin: center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ transition: all 0.3s ease-out;
+}
+
+.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle[aria-expanded='false']:after {
+ transform: rotate(0deg);
+}
+
+.menu-homegrade__navlist li.menu-item .menu-item-submenu-toggle[aria-expanded='true']:after {
+ transform: rotate(180deg);
+}
+
+.menu-homegrade__burger-menu-toggle {
+ position: absolute;
+ right: 2.5rem;
+ top: 50%;
+ z-index: 50;
+ --tw-translate-y: -50%;
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+@media (min-width: 960px) {
+ .menu-homegrade__burger-menu-toggle {
+ display: none;
+ }
+}
+
+.menu-homegrade__burger-menu-toggle {
+ width: 26px;
+ height: 26px;
+}
+
+.menu-homegrade__burger-menu-toggle .menu-toggle-bar {
+ position: absolute;
+ top: 50%;
+ right: 0px;
+ display: block;
+ height: 2px;
+ width: 100%;
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+ margin-top: -1px;
+ transition: all 0.3s ease;
+}
+
+.menu-homegrade__burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--top {
+ transform: translate(0, -7px);
+}
+
+.menu-homegrade__burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--middle {
+}
+
+.menu-homegrade__burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--bottom {
+ transform: translate(0, 7px);
+}
+
+.nav-open .menu-homegrade__burger-menu-toggle .menu-toggle-bar {
+ --tw-bg-opacity: 1;
+ background-color: rgb(223 30 30 / var(--tw-bg-opacity));
+}
+
+.nav-open .menu-homegrade__burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--top {
+ transform: translate(0, 0) rotate(45deg);
+}
+
+.nav-open .menu-homegrade__burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--middle {
+ opacity: 0;
+}
+
+.nav-open .menu-homegrade__burger-menu-toggle .menu-toggle-bar.menu-toggle-bar--bottom {
+ transform: translate(0, 0) rotate(-45deg);
+}
+
+.menu-homegrade__burger-menu-toggle:hover path {
+ fill: #DF1E1E;
+}
+
+.menu-homegrade--header {
+}
+
+.menu-homegrade--footer {
margin-top: 2rem;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
row-gap: 2rem;
}
-.menu-homegrade-footer li.menu-item a:hover {
+.menu-homegrade--footer li.menu-item a:hover {
--tw-text-opacity: 1;
color: rgb(223 30 30 / var(--tw-text-opacity));
}
-.menu-homegrade-footer > li.menu-item {
+.menu-homegrade--footer > li.menu-item {
order: 5;
}
-.menu-homegrade-footer > li.menu-item-has-children {
+.menu-homegrade--footer > li.menu-item-has-children {
order: 1;
}
-.menu-homegrade-footer > li.menu-item > a,
- .menu-homegrade-footer h6.page-group-title {
+.menu-homegrade--footer > li.menu-item > a,
+ .menu-homegrade--footer h6.page-group-title {
margin-bottom: 0.5rem;
display: block;
font-weight: 700;
}
-.menu-homegrade-footer h6.page-group-title {
+.menu-homegrade--footer h6.page-group-title {
cursor: not-allowed;
/* order: 1; */
}
-.menu-homegrade-footer .sub-menu li {
+.menu-homegrade--footer .sub-menu li {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
display: block;
}
-.menu-homegrade-footer .wpml-ls-menu-item {
+.menu-homegrade--footer .wpml-ls-menu-item {
display: none;
}
@@ -2359,9 +2524,12 @@ article > *:not(.entry-content),
.swiper-content {
position: relative;
+ margin-left: auto;
+ margin-right: auto;
max-width: 1440px;
padding-left: 6rem;
padding-right: 6rem;
+ /* @apply bg-fuchsia-100; */
}
.swiper-container {
@@ -2378,6 +2546,10 @@ article > *:not(.entry-content),
padding-bottom: 4rem;
}
+.swiper-slide .card-thematique {
+ height: 100%;
+}
+
.thematique-button-next,
.thematique-button-prev {
position: absolute;
@@ -2665,18 +2837,6 @@ article > *:not(.entry-content),
}
@media (min-width: 960px) {
- .lg\:flex {
- display: flex;
- }
-
- .lg\:items-center {
- align-items: center;
- }
-
- .lg\:justify-between {
- justify-content: space-between;
- }
-
.lg\:text-5xl {
font-size: 3rem;
line-height: 1;
diff --git a/css/editor-style.css b/css/editor-style.css
index 581d6ab..96e4f5c 100644
--- a/css/editor-style.css
+++ b/css/editor-style.css
@@ -131,10 +131,6 @@
justify-content: center
}
-.justify-between {
- justify-content: space-between
-}
-
.rounded {
border-radius: 0.25rem
}
@@ -143,6 +139,10 @@
border-width: 1px
}
+.\!border {
+ border-width: 1px !important
+}
+
.border-b {
border-bottom-width: 1px
}
@@ -152,6 +152,11 @@
border-color: rgb(47 1 84 / var(--tw-border-opacity))
}
+.border-secondary {
+ --tw-border-opacity: 1;
+ border-color: rgb(223 30 30 / var(--tw-border-opacity))
+}
+
.bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(47 1 84 / var(--tw-bg-opacity))
@@ -251,16 +256,16 @@
line-height: 2rem
}
-.text-lg {
- font-size: 1.125rem;
- line-height: 1.75rem
-}
-
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}
+.text-lg {
+ font-size: 1.125rem;
+ line-height: 1.75rem
+}
+
.font-light {
font-weight: 300
}
@@ -581,18 +586,6 @@ body {
}
@media (min-width: 960px) {
- .lg\:flex {
- display: flex
- }
-
- .lg\:items-center {
- align-items: center
- }
-
- .lg\:justify-between {
- justify-content: space-between
- }
-
.lg\:text-5xl {
font-size: 3rem;
line-height: 1
diff --git a/footer.php b/footer.php
index 7db086f..a1dbfcb 100644
--- a/footer.php
+++ b/footer.php
@@ -44,7 +44,7 @@
'theme_location' => 'renovateur',
'li_class' => 'menu-navlink',
'fallback_cb' => false,
- 'menu_class' => 'menu-renovateur-footer',
+ 'menu_class' => 'menu-renovateur--footer',
)
);
@@ -56,7 +56,7 @@
'theme_location' => 'homegrade',
'li_class' => 'menu-navlink',
'fallback_cb' => false,
- 'menu_class' => 'menu-homegrade-footer',
+ 'menu_class' => 'menu-homegrade--footer',
)
);
@@ -85,11 +85,11 @@
diff --git a/header.php b/header.php
index e0df72f..829ecca 100644
--- a/header.php
+++ b/header.php
@@ -20,60 +20,17 @@
-
-
diff --git a/includes/init.php b/includes/init.php
index 4603111..5ed7bc8 100644
--- a/includes/init.php
+++ b/includes/init.php
@@ -53,9 +53,10 @@ function tailpress_enqueue_scripts()
{
$theme = wp_get_theme();
+ wp_enqueue_script('gsap', get_template_directory_uri() . '/assets/gsap/gsap.min.js', array(), $theme->get('Version'));
wp_enqueue_style('swipercss', get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.css', array(), $theme->get('Version'));
wp_enqueue_style('tailpress', tailpress_asset('css/app.css'), array(), $theme->get('Version'));
- wp_enqueue_script('tailpress', tailpress_asset('js/app.js'), array(), $theme->get('Version'));
+ wp_enqueue_script('tailpress', tailpress_asset('js/app.js'), array('gsap'), $theme->get('Version'));
// wp_register_script('showthematiquejs', get_template_directory_uri() . '/template-blocks/home/show-thematiques/show-thematiques.js', array('swiperjs', 'swipercss'), $theme->get('Version'));
wp_enqueue_script('showthematiquejs', get_template_directory_uri() . '/template-blocks/home/show-thematiques/show-thematiques.js', array('swiperjs'), $theme->get('Version'));
diff --git a/includes/navwalker.php b/includes/navwalker.php
index 2d03e82..6ac58ef 100644
--- a/includes/navwalker.php
+++ b/includes/navwalker.php
@@ -8,7 +8,7 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
{
// #### MENU HOMEGRADE HEADER
- if ($args->theme_location === "homegrade" && $args->menu_class === "menu-homegrade-header" && in_array('menu-item-has-children', $item->classes, true)) {
+ if ($args->theme_location === "homegrade" && $args->menu_id === "menu-homegrade-navlist" && in_array('menu-item-has-children', $item->classes, true)) {
$output = '';
}
@@ -27,7 +27,7 @@ function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
$output = '';
}
- if ($page_icon['url']) {
+ if (isset($page_icon['url'])) {
write_log($page_icon['url']);
$icon = '
';
$link = $output;
diff --git a/includes/post_types.php b/includes/post_types.php
index 80cd0b2..141d578 100644
--- a/includes/post_types.php
+++ b/includes/post_types.php
@@ -64,15 +64,14 @@ function create_posttype()
)
);
register_post_type(
- 'fiche-conseils',
+ 'conseils',
array(
'labels' => array(
- 'name' => __('Fiches Conseil'),
- 'singular_name' => __('Fiche Conseil')
+ 'name' => __('Conseils'),
+ 'singular_name' => __('Conseil')
),
'public' => true,
'has_archive' => true,
- 'rewrite' => array('slug' => 'fiche-conseil'),
'show_in_rest' => true,
'menu_icon' => 'dashicons-pressthis',
'menu_position' => 4,
diff --git a/js/app.js b/js/app.js
index 2a126a9..bbde911 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,37 +1,58 @@
(() => {
// resources/js/header.js
function menuInit() {
- let main_navigation = document.querySelector("#primary-menu");
- const header = document.querySelector("#primary-header");
- const primary_menu = header.querySelector("#primary-menu");
- const burgerMenuToggle = header.querySelector("#burger-menu-toggle");
- const submenuToggles = primary_menu.querySelectorAll(".menu-item-submenu-toggle");
- burgerMenuToggle.addEventListener("click", function(e) {
- e.preventDefault();
- header.classList.toggle("nav-open");
- burgerMenuToggle.toggleAttribute("aria-expanded");
- gsap.from(primary_menu, {
- opacity: 20,
- y: "-100vh",
- duration: 0.5,
- ease: Power4.easeOut
+ const header = document.querySelector("#main-header");
+ searchModule = header.querySelector(".search-module");
+ const searchModuleToggle = header.querySelector("#search-module-toggle");
+ const submenuToggles = header.querySelectorAll(".menu-item-submenu-toggle");
+ const submenusItems = header.querySelectorAll(".sub-menu");
+ function isSubmenuOpen() {
+ return header.querySelector("sub-menu-open") !== null;
+ }
+ function openSubmenu(buttonToggle) {
+ closeSubmenus();
+ let isExpanded = buttonToggle.getAttribute("aria-expanded") === "true";
+ buttonToggle.setAttribute("aria-expanded", !isExpanded);
+ buttonToggle.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu-open");
+ }
+ function closeSubmenus() {
+ const openSubmenus = header.querySelectorAll(".sub-menu-open");
+ openSubmenus.forEach((submenu) => {
+ submenu.classList.remove("sub-menu-open");
+ submenu.parentElement.querySelector(".menu-item-submenu-toggle").setAttribute("aria-expanded", "false");
+ console.log(submenu.parentElement);
});
- });
- document.addEventListener("focusin", (e) => {
- const header2 = document.querySelector("#primary-header");
- console.log(header2.contains(document.activeElement));
- if (header2.classList.contains("nav-open") && !header2.contains(document.activeElement)) {
- header2.classList.remove("nav-open");
- burgerMenuToggle.setAttribute("aria-expanded", false);
- burgerMenuToggle.focus();
+ }
+ function isSearchOpen() {
+ return searchModule.getAttribute("aria-hidden") === "true";
+ }
+ function openSearch() {
+ searchModule.classList.remove("search-module-open");
+ searchModule.classList.add("search-module-closed");
+ setTimeout(() => {
+ searchModule.setAttribute("aria-hidden", "true");
+ }, 400);
+ }
+ function closeSearch() {
+ searchModule.setAttribute("aria-hidden", "false");
+ setTimeout(() => {
+ searchModule.classList.remove("search-module-closed");
+ searchModule.classList.add("search-module-open");
+ }, 50);
+ searchModuleToggle.toggleAttribute("aria-expanded");
+ }
+ searchModuleToggle.addEventListener("click", function(e) {
+ closeSubmenus();
+ if (isSearchOpen()) {
+ closeSearch();
+ return;
}
- }, true);
+ if (!isSearchOpen()) {
+ openSearch();
+ }
+ });
submenuToggles.forEach((button) => {
- button.addEventListener("click", function(e) {
- let isExpanded = button.getAttribute("aria-expanded") === "true";
- button.setAttribute("aria-expanded", !isExpanded);
- button.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu-open");
- });
+ button.addEventListener("click", () => openSubmenu(button));
});
}
diff --git a/resources/css/app.css b/resources/css/app.css
index 52d8fdd..e7b307b 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -16,6 +16,7 @@
@import './components/card-post.css';
@import './components/card-large-content.css';
@import './components/section-titling.css';
+@import './components/search-module.css';
@import '../../template-components/card-frequent_question.css';
@import '../../template-components/card-thematique.css';
diff --git a/resources/css/components/cta.css b/resources/css/components/cta.css
index c196d5b..2fc4976 100644
--- a/resources/css/components/cta.css
+++ b/resources/css/components/cta.css
@@ -4,7 +4,8 @@
@apply rounded-full px-8 py-4 focus:rounded-full font-bold h-fit;
}
&--circular {
- @apply rounded-full aspect-square w-12 flex items-center justify-center;
+ @apply rounded-full focus:rounded-full aspect-square w-12 flex items-center justify-center;
+ outline-offset: 5px !important;
}
&--primary {
@apply bg-primary text-white
@@ -18,6 +19,9 @@
&--outline {
@apply border-2 bg-transparent hover:bg-gray;
}
+ /* &--outline-secondary {
+ @apply border-secondary border;
+ } */
&--shadowed {
@apply shadowed;
&:hover {
@@ -40,8 +44,8 @@
transition: transform 0.3s ease-in-out;
}
&:hover .cta_arrow_button {
- filter: invert(27%) sepia(69%) saturate(6074%)
- hue-rotate(348deg) brightness(87%) contrast(100%);
+ filter: invert(27%) sepia(69%) saturate(6074%) hue-rotate(348deg) brightness(87%)
+ contrast(100%);
transform: translateX(3px);
}
}
diff --git a/resources/css/components/search-module.css b/resources/css/components/search-module.css
new file mode 100644
index 0000000..e7e2142
--- /dev/null
+++ b/resources/css/components/search-module.css
@@ -0,0 +1,65 @@
+.search-module {
+ @apply w-full absolute
+ bg-white
+ left-0
+ bottom-0
+ px-16
+ py-6
+ transform translate-y-full;
+
+ &__wrapper-container {
+ @apply max-w-screen-xl mx-auto;
+ }
+ &__search-form {
+ @apply flex flex-wrap;
+
+ &__title {
+ @apply block font-bold text-lg w-full;
+ }
+ &__separator {
+ @apply mt-2 mb-8 bg-gray-dark border-none opacity-50 w-full;
+ height: 1px;
+ }
+ &__input {
+ @apply block max-w-full flex-grow py-3 border border-black rounded-tl-3xl rounded-bl-3xl px-4;
+ }
+ button[type='submit'] {
+ @apply bg-secondary text-white w-1/6 flex justify-center items-center gap-3 rounded-tr-3xl rounded-br-3xl px-4 py-3;
+ max-width: 300px;
+ .search_icon {
+ @apply invert;
+ }
+ }
+ }
+ &__suggestions {
+ @apply flex flex-wrap gap-x-3 pt-4;
+ &__navlist {
+ @apply flex flex-wrap gap-x-3;
+
+ .suggestion-item {
+ @apply font-bold underline underline-offset-4;
+ }
+ }
+ }
+}
+
+.search-module {
+ @apply block;
+ transition: all 0.5s;
+ transition-timing-function: cubic-bezier(0, 0.51, 0.23, 0.99);
+}
+.search-module[aria-hidden='true'] {
+ @apply hidden;
+}
+
+.search-module-closed {
+ /* transition: all 0.3s ease-in-out; */
+ @apply transform translate-y-1/2 opacity-0 pointer-events-none;
+ z-index: -1;
+}
+.search-module-open {
+ /* transition: all 0.3s ease-in-out; */
+
+ @apply transform translate-y-full;
+ z-index: 20;
+}
diff --git a/resources/css/layout/header.css b/resources/css/layout/header.css
index 747f99d..fb85718 100644
--- a/resources/css/layout/header.css
+++ b/resources/css/layout/header.css
@@ -1,263 +1,6 @@
-.primary-menu-container {
- @apply mx-auto
- bg-primary
- text-white
- relative
- h-fit
- py-4
- px-8
- 2xl:px-32
- my-0;
-
- nav#primary-menu-nav {
- @apply max-w-screen-2xl w-full mx-auto;
- }
-
- #primary-menu {
- @apply flex
- flex-col
- w-full
- lg:flex-row
- items-center
- justify-around
- lg:justify-end;
-
- ul {
- @apply lg:flex
-
- pr-0;
- }
-
- /* Highlight using list element */
- li.current-page-parent > a,
- li.current_page_item > a {
- @apply font-medium
- text-white
- decoration-secondary
- underline
- underline-offset-8;
- }
-
- li.menu-item {
- @apply font-medium
-
- text-center
- px-4
- py-2
- rounded-xl;
-
- &:hover,
- a:focus {
- @apply cursor-pointer;
- background-color: rgba(255, 255, 255, 0.1);
- }
- a:focus {
- text-decoration: none;
- }
-
- /* IF SUBMENU CHILD */
- .menu-item-submenu-toggle {
- &:hover,
- &:focus {
- @apply text-secondary;
- }
- @apply relative pr-4;
- &:after {
- @apply absolute right-0;
- content: '▼';
- position: absolute;
- display: inline-block;
- line-height: 0.5;
- height: 10px;
- top: calc(50% - 4px);
- width: 10px;
- margin-left: 20px;
- transform-origin: center;
- background-repeat: no-repeat;
- background-size: contain;
- transition: all 0.3s ease-out;
- }
- }
- .menu-item-submenu-toggle[aria-expanded='false']:after {
- transform: rotate(0deg);
- }
- .menu-item-submenu-toggle[aria-expanded='true']:after {
- transform: rotate(180deg);
- }
- }
- /* li.menu-item.menu-item-has-children:hover {
- @screen lg {
- .menu-item-submenu-toggle:after {
- transform: rotate(180deg);
- }
- .sub-menu {
- display: block;
- }
- }
- } */
- /* submenus */
- li .sub-menu {
- @apply bg-primary
- p-6
- mx-auto
- lg:mx-0
- static
- lg:absolute;
- z-index: 999;
- display: none;
-
- &.sub-menu-open {
- display: block;
- }
-
- li {
- @apply py-2 lg:text-left;
- }
-
- > a::after {
- transform: translateY(-2px) rotate(-90deg);
- content: '';
- display: inline-block;
- height: 10px;
- width: 10px;
- margin-left: 20px;
- background-image: url('../resources/img/arrow_down_white.svg');
- background-repeat: no-repeat;
- background-size: contain;
- transition: all 0.3s ease-out;
- }
- }
- }
-
- #secondary-menu {
- @apply flex bg-white;
- }
-}
-button#burger-menu-toggle {
- @apply lg:hidden
- absolute
- right-10
- -translate-y-1/2
- z-50
- top-1/2;
- width: 26px;
- height: 26px;
-
- .menu-toggle-bar {
- @apply top-1/2
- absolute
- block
- right-0
- w-full
- h-[2px]
- /* bg-red-400 */
- bg-white;
- margin-top: -1px;
- transition: all 0.3s ease;
-
- &.menu-toggle-bar--top {
- transform: translate(0, -7px);
- }
- &.menu-toggle-bar--middle {
- }
- &.menu-toggle-bar--bottom {
- transform: translate(0, 7px);
- }
- .nav-open & {
- @apply bg-secondary;
-
- &.menu-toggle-bar--top {
- transform: translate(0, 0) rotate(45deg);
- }
- &.menu-toggle-bar--middle {
- opacity: 0;
- }
- &.menu-toggle-bar--bottom {
- transform: translate(0, 0) rotate(-45deg);
- }
- }
- }
-
- &:hover {
- path {
- @apply fill-secondary;
- }
- }
+header#main-header {
+ @apply flex
+ flex-col-reverse
+ md:flex-col;
}
-/* RESPONSIVE */
-@media (max-width: 960px) {
- .primary-menu-container {
- #primary-menu {
- @apply bg-primary
- mt-0
- left-0
- z-40
- absolute
- hidden;
-
- /* transition: all 0.3s ease-out;
- transform: translateY(-120vh); */
- min-height: 100vh;
- height: fit-content;
- top: 0;
- width: 100vw;
-
- /* Rendu conditionnel de l'élément si contenu dans une classe de parent (nesting inversé) */
-
- .nav-open & {
- @apply flex;
- }
-
- > ul {
- @apply max-w-xs
- mx-auto;
- /* min-height: 96vh; */
- padding-top: 5vh;
- }
- li.menu-item {
- @apply mt-0
- text-center
- text-white
- font-medium
- py-8
- text-lg
- !block
- pb-0;
-
- .sub-menu li {
- @apply text-sm;
- }
- }
- }
- }
-
- /* BURGER MENU */
- body:has(.nav-open) {
- @apply max-h-screen
- overflow-hidden;
-
- /* #content,
- footer,
- .wpml-ls-statics-footer {
- @apply !hidden;
- } */
- }
-
- .cta_plain_secondary,
- .switch_language {
- /* @apply self-end; */
- }
-}
-
-@media (max-width: 960px) and (hover: none) {
- /* ul {
- @apply w-max mx-auto;
- } */
- .primary-menu-container {
- li.menu-item {
- @apply mx-auto
- /* !text-left */;
- }
- }
-}
diff --git a/resources/css/layout/menu-homegrade.css b/resources/css/layout/menu-homegrade.css
index 74f1f13..ed1b6ec 100644
--- a/resources/css/layout/menu-homegrade.css
+++ b/resources/css/layout/menu-homegrade.css
@@ -1,4 +1,242 @@
-.menu-homegrade-footer {
+/* .primary-menu-container { */
+
+.menu-homegrade {
+ @apply mx-auto
+ bg-primary
+ text-white
+ relative
+ h-fit
+ py-4
+ px-8
+ 2xl:px-32
+ my-0;
+
+ &__wrapper-container {
+ @apply max-w-screen-2xl
+ w-full
+ mx-auto
+ flex
+ flex-col
+ lg:flex-row
+ items-center
+ justify-around
+ lg:justify-end;
+
+ /* li.menu-item.menu-item-has-children:hover {
+ @screen lg {
+ .menu-item-submenu-toggle:after {
+ transform: rotate(180deg);
+ }
+ .sub-menu {
+ display: block;
+ }
+ }
+ } */
+ /* submenus */
+ li .sub-menu {
+ @apply bg-primary
+ p-6
+ mx-auto
+ lg:mx-0
+ static
+ lg:absolute;
+ z-index: 999;
+ display: none;
+
+ &.sub-menu-open {
+ display: block;
+ }
+
+ li {
+ @apply py-2 lg:text-left;
+ }
+
+ > a::after {
+ transform: translateY(-2px) rotate(-90deg);
+ content: '';
+ display: inline-block;
+ height: 10px;
+ width: 10px;
+ margin-left: 20px;
+ background-image: url('../resources/img/arrow_down_white.svg');
+ background-repeat: no-repeat;
+ background-size: contain;
+ transition: all 0.3s ease-out;
+ }
+ }
+ }
+
+ &__navlist {
+ @apply lg:flex pr-0;
+
+ /* Highlight using list element */
+ li.current-page-parent > a,
+ li.current_page_item > a {
+ @apply font-medium
+ text-white
+ decoration-secondary
+ underline underline-offset-8;
+ }
+
+ li.menu-item {
+ @apply font-medium
+ text-center
+ px-4
+ py-2
+ rounded-xl;
+
+ &:hover,
+ a:focus {
+ @apply cursor-pointer;
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ a:focus {
+ text-decoration: none;
+ }
+
+ /* IF SUBMENU CHILD */
+ .menu-item-submenu-toggle {
+ &:hover,
+ &:focus {
+ @apply text-secondary;
+ }
+ @apply relative pr-4;
+ &:after {
+ @apply absolute right-0;
+ content: '▼';
+ position: absolute;
+ display: inline-block;
+ line-height: 0.5;
+ height: 10px;
+ top: calc(50% - 4px);
+ width: 10px;
+ margin-left: 20px;
+ transform-origin: center;
+ background-repeat: no-repeat;
+ background-size: contain;
+ transition: all 0.3s ease-out;
+ }
+ }
+ .menu-item-submenu-toggle[aria-expanded='false']:after {
+ transform: rotate(0deg);
+ }
+ .menu-item-submenu-toggle[aria-expanded='true']:after {
+ transform: rotate(180deg);
+ }
+ }
+ }
+ &__burger-menu-toggle {
+ @apply lg:hidden
+ absolute
+ right-10
+ -translate-y-1/2
+ z-50
+ top-1/2;
+ width: 26px;
+ height: 26px;
+
+ .menu-toggle-bar {
+ @apply top-1/2
+ absolute
+ block
+ right-0
+ w-full
+ h-[2px]
+ /* bg-red-400 */
+ bg-white;
+ margin-top: -1px;
+ transition: all 0.3s ease;
+
+ &.menu-toggle-bar--top {
+ transform: translate(0, -7px);
+ }
+ &.menu-toggle-bar--middle {
+ }
+ &.menu-toggle-bar--bottom {
+ transform: translate(0, 7px);
+ }
+ .nav-open & {
+ @apply bg-secondary;
+
+ &.menu-toggle-bar--top {
+ transform: translate(0, 0) rotate(45deg);
+ }
+ &.menu-toggle-bar--middle {
+ opacity: 0;
+ }
+ &.menu-toggle-bar--bottom {
+ transform: translate(0, 0) rotate(-45deg);
+ }
+ }
+ }
+
+ &:hover {
+ path {
+ @apply fill-secondary;
+ }
+ }
+ }
+
+ /*##### RESPONSIVE */
+
+ /* @media (max-width: 960px) {
+ &__wrapper-container {
+ @apply mt-0
+ left-0
+ z-40
+ absolute
+ hidden;
+
+ min-height: 100vh;
+ height: fit-content;
+ top: 0;
+ width: 100vw;
+
+ // Rendu conditionnel de l'élément si contenu dans une classe de parent (nesting inversé)
+
+ .nav-open & {
+ @apply flex;
+ }
+
+ > ul {
+ @apply max-w-xs
+ mx-auto;
+ padding-top: 5vh;
+ }
+ li.menu-item {
+ @apply mt-0
+ text-center
+ text-white
+ font-medium
+ py-8
+ text-lg
+ !block
+ pb-0;
+
+ .sub-menu li {
+ @apply text-sm;
+ }
+ }
+ }
+
+ // BURGER MENU
+ body:has(.nav-open) {
+ @apply max-h-screen
+ overflow-hidden;
+ }
+ } */
+
+ /* @media (max-width: 960px) and (hover: none) {
+ li.menu-item {
+ @apply mx-auto
+ }
+ } */
+}
+
+.menu-homegrade--header {
+}
+
+.menu-homegrade--footer {
@apply grid grid-cols-4 gap-y-8 mt-8;
li.menu-item a {
diff --git a/resources/css/layout/menu-renovateur.css b/resources/css/layout/menu-renovateur.css
index 618e80b..fa095c5 100644
--- a/resources/css/layout/menu-renovateur.css
+++ b/resources/css/layout/menu-renovateur.css
@@ -1,8 +1,11 @@
.menu-renovateur {
@apply py-8
px-16
+ relative
+ bg-yellow-50
shadow-md
flex
+ flex-wrap
justify-between;
.logo {
@@ -10,9 +13,12 @@
w-[190px]
xl:w-[222px];
}
-
- ul {
- @apply flex justify-center gap-8;
+ &__main-elements {
+ @apply w-full bg-red-200 flex justify-between items-center;
+ }
+ &__navlist {
+ @apply md:absolute md:flex justify-center gap-8 bg-green-200
+ left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2;
li {
.page_icon {
@@ -29,10 +35,16 @@
}
}
}
+ &__mobile-menu-toggle {
+ @apply md:hidden;
+ }
+ &__search-module-toggle {
+ @apply z-50 h-fit;
+ }
}
-.menu-renovateur-footer {
- @apply flex justify-between gap-8;
+.menu-renovateur--footer {
+ @apply grid grid-cols-4;
li {
.page_icon {
@@ -40,7 +52,7 @@
}
@apply text-black
flex
- justify-center
+ justify-start
items-center
font-bold;
diff --git a/resources/img/graphic-assets/search-icon.svg b/resources/img/graphic-assets/search-icon.svg
new file mode 100644
index 0000000..2bad6d8
--- /dev/null
+++ b/resources/img/graphic-assets/search-icon.svg
@@ -0,0 +1,7 @@
+
diff --git a/resources/js/app.js b/resources/js/app.js
index 1839e1d..053ebd4 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -2,5 +2,5 @@ import menuInit from './header';
console.log('menuInit');
console.log('menuIniteeeee');
window.addEventListener('load', function () {
- menuInit();
-});
\ No newline at end of file
+ menuInit();
+});
diff --git a/resources/js/header.js b/resources/js/header.js
index a4ecc72..04307bd 100644
--- a/resources/js/header.js
+++ b/resources/js/header.js
@@ -1,62 +1,110 @@
export default function menuInit() {
- let main_navigation =
- document.querySelector('#primary-menu');
- const header = document.querySelector('#primary-header');
- const primary_menu =
- header.querySelector('#primary-menu');
- const burgerMenuToggle = header.querySelector(
- '#burger-menu-toggle'
- );
- const submenuToggles = primary_menu.querySelectorAll(
- '.menu-item-submenu-toggle'
- );
+ const header = document.querySelector('#main-header');
- // #### Open/close burger nav
- burgerMenuToggle.addEventListener('click', function (e) {
- e.preventDefault();
- header.classList.toggle('nav-open');
- burgerMenuToggle.toggleAttribute('aria-expanded');
- gsap.from(primary_menu, {
- opacity: 20,
- y: '-100vh',
- duration: 0.5,
- ease: Power4.easeOut,
+ // Search module
+ searchModule = header.querySelector('.search-module');
+ const searchModuleToggle = header.querySelector('#search-module-toggle');
+
+ // Submenus
+ const submenuToggles = header.querySelectorAll('.menu-item-submenu-toggle');
+ const submenusItems = header.querySelectorAll('.sub-menu');
+
+ function isSubmenuOpen() {
+ return header.querySelector('sub-menu-open') !== null;
+ }
+
+ function openSubmenu(buttonToggle) {
+ closeSubmenus();
+ let isExpanded = buttonToggle.getAttribute('aria-expanded') === 'true';
+ buttonToggle.setAttribute('aria-expanded', !isExpanded);
+ buttonToggle.parentElement.querySelector('.sub-menu').classList.toggle('sub-menu-open');
+ }
+ function closeSubmenus() {
+ const openSubmenus = header.querySelectorAll('.sub-menu-open');
+ openSubmenus.forEach((submenu) => {
+ submenu.classList.remove('sub-menu-open');
+ submenu.parentElement
+ .querySelector('.menu-item-submenu-toggle')
+ .setAttribute('aria-expanded', 'false');
+ console.log(submenu.parentElement);
});
+ }
+
+
+ function isSearchOpen() {
+ return searchModule.getAttribute('aria-hidden') === 'true';
+ }
+ function openSearch() {
+ searchModule.classList.remove('search-module-open');
+ searchModule.classList.add('search-module-closed');
+ setTimeout(() => {
+ searchModule.setAttribute('aria-hidden', 'true');
+ }, 400);
+ }
+ function closeSearch() {
+ searchModule.setAttribute('aria-hidden', 'false');
+
+ setTimeout(() => {
+ searchModule.classList.remove('search-module-closed');
+ searchModule.classList.add('search-module-open');
+ }, 50);
+
+ searchModuleToggle.toggleAttribute('aria-expanded');
+ }
+
+ // SEARCH TOGGLE open/close
+ searchModuleToggle.addEventListener('click', function (e) {
+ // const isSearchOpen = searchModule.getAttribute('aria-hidden') === 'true';
+ closeSubmenus();
+ // MENU IS OPEN --> CLOSE IT
+ if (isSearchOpen()) {
+ closeSearch();
+ return;
+ }
+ // MENU IS CLOSED --> OPEN IT
+ if (!isSearchOpen()) {
+ openSearch();
+ }
});
+ // SEARCH TOGGLE open/close
+ submenuToggles.forEach((button) => {
+ button.addEventListener('click', () => openSubmenu(button));
+ });
+
+ // #### BURGER TOGGLE open/close
+ // const burgerMenuToggle = header.querySelector('#burger-menu-toggle');
+ // burgerMenuToggle.addEventListener('click', function (e) {
+ // e.preventDefault();
+ // header.classList.toggle('nav-open');
+ // burgerMenuToggle.toggleAttribute('aria-expanded');
+ // gsap.from(primary_menu, {
+ // opacity: 20,
+ // y: '-100vh',
+ // duration: 0.5,
+ // ease: Power4.easeOut,
+ // });
+ // });
+
+ // #### SUBMENUS TOGGLE open/close
+ // const submenuToggles = primary_menu.querySelectorAll(
+ // '.menu-item-submenu-toggle'
+ // );
+
// #### Close nav when reaching the end of the menu with tab
- document.addEventListener(
- 'focusin',
- (e) => {
- const header = document.querySelector(
- '#primary-header'
- );
- console.log(header.contains(document.activeElement));
- if (
- header.classList.contains('nav-open') &&
- !header.contains(document.activeElement)
- ) {
- header.classList.remove('nav-open');
- burgerMenuToggle.setAttribute(
- 'aria-expanded',
- false
- );
- burgerMenuToggle.focus();
- }
- },
- true
- );
+ // document.addEventListener(
+ // 'focusin',
+ // (e) => {
+ // const header = document.querySelector('#primary-header');
+ // console.log(header.contains(document.activeElement));
+ // if (header.classList.contains('nav-open') && !header.contains(document.activeElement)) {
+ // header.classList.remove('nav-open');
+ // burgerMenuToggle.setAttribute('aria-expanded', false);
- submenuToggles.forEach((button) => {
- button.addEventListener('click', function (e) {
- let isExpanded =
- button.getAttribute('aria-expanded') === 'true';
- button.setAttribute('aria-expanded', !isExpanded);
-
- button.parentElement
- .querySelector('.sub-menu')
- .classList.toggle('sub-menu-open');
- });
- });
+ // burgerMenuToggle.focus();
+ // }
+ // },
+ // true
+ // );
}
diff --git a/search.php b/search.php
new file mode 100644
index 0000000..0214696
--- /dev/null
+++ b/search.php
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ 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
index ea35116..e9227dd 100755
--- a/template-blocks/home/show-thematiques/show-thematiques.css
+++ b/template-blocks/home/show-thematiques/show-thematiques.css
@@ -1,5 +1,6 @@
.swiper-content {
- @apply px-24 relative max-w-screen-2xl;
+ @apply px-24 relative max-w-screen-2xl mx-auto;
+ /* @apply bg-fuchsia-100; */
}
.swiper-container {
height: auto;
@@ -11,6 +12,10 @@
@apply pt-24 pb-16 w-full;
}
+.swiper-slide .card-thematique {
+ @apply h-full;
+}
+
.thematique-button-next,
.thematique-button-prev {
@apply absolute top-1/2 z-50 opacity-80;
diff --git a/template-blocks/home/show-thematiques/show-thematiques.php b/template-blocks/home/show-thematiques/show-thematiques.php
index bb23a09..a1bd7a2 100755
--- a/template-blocks/home/show-thematiques/show-thematiques.php
+++ b/template-blocks/home/show-thematiques/show-thematiques.php
@@ -73,27 +73,5 @@ $terms = get_terms(array(
-
\ No newline at end of file
diff --git a/template-components/header/menu-homegrade.php b/template-components/header/menu-homegrade.php
new file mode 100644
index 0000000..6c414ec
--- /dev/null
+++ b/template-components/header/menu-homegrade.php
@@ -0,0 +1,26 @@
+
+
+