refining script with maintenance mode
This commit is contained in:
parent
2099113303
commit
9df008e310
6
.prettierrc
Normal file
6
.prettierrc
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"tabWidth": 2,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"printWidth": 60
|
||||
}
|
||||
|
|
@ -1 +1,3 @@
|
|||
A custom Startter Theme made by Deligraph based on Tailpress
|
||||
A custom Theme made by Deligraph using Tailwind and Laravel Mix
|
||||
|
||||
https://deligraph.com/
|
||||
616
css/app.css
616
css/app.css
|
|
@ -644,10 +644,6 @@ video {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.h-1 {
|
||||
height: 0.25rem;
|
||||
}
|
||||
|
|
@ -676,6 +672,10 @@ video {
|
|||
max-width: 24rem;
|
||||
}
|
||||
|
||||
.max-w-screen-md {
|
||||
max-width: 782px;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
@ -684,14 +684,6 @@ video {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.list-disc {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
.list-decimal {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -712,18 +704,22 @@ video {
|
|||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.border-b {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.border-primary {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(14 165 233 / var(--tw-border-opacity));
|
||||
border-color: rgb(64 79 142 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(14 165 233 / var(--tw-bg-opacity));
|
||||
background-color: rgb(64 79 142 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-gray-200 {
|
||||
|
|
@ -741,6 +737,11 @@ video {
|
|||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-red-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(239 68 68 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
|
@ -844,16 +845,6 @@ video {
|
|||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-blue-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(59 130 246 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.underline {
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.antialiased {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
|
@ -918,8 +909,377 @@ video {
|
|||
color: #4b5563;
|
||||
}
|
||||
|
||||
article>*:not(.entry-content),
|
||||
.entry-content>* {
|
||||
/* ########### BASE ############ */
|
||||
|
||||
/* ########### COMPONENTS ############ */
|
||||
|
||||
/* ########### 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(64 79 142 / var(--tw-bg-opacity));
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
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 .logo {
|
||||
margin-right: 3rem;
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.primary-menu-container .logo {
|
||||
width: 222px;
|
||||
}
|
||||
}
|
||||
|
||||
.primary-menu-container #primary-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.primary-menu-container #primary-menu {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.primary-menu-container #primary-menu ul {
|
||||
-moz-column-gap: 2rem;
|
||||
column-gap: 2rem;
|
||||
padding-right: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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: #14B8A6;
|
||||
text-decoration-color: #14B8A6;
|
||||
text-underline-offset: 8px;
|
||||
}
|
||||
|
||||
.primary-menu-container #primary-menu li.menu-item {
|
||||
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 a:focus {
|
||||
cursor: pointer;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(20 184 166 / var(--tw-text-opacity));
|
||||
-webkit-text-decoration-line: underline;
|
||||
text-decoration-line: underline;
|
||||
text-underline-offset: 8px;
|
||||
}
|
||||
|
||||
.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(20 184 166 / 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);
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.primary-menu-container #primary-menu li.menu-item.menu-item-has-children:hover .menu-item-submenu-toggle:after {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.primary-menu-container #primary-menu li.menu-item.menu-item-has-children:hover .sub-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* submenus */
|
||||
|
||||
.primary-menu-container #primary-menu li .sub-menu {
|
||||
position: static;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(64 79 142 / 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;
|
||||
}
|
||||
|
||||
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(20 184 166 / 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: #14B8A6;
|
||||
}
|
||||
|
||||
/* 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(64 79 142 / 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;
|
||||
}
|
||||
}
|
||||
|
||||
article > *:not(.entry-content),
|
||||
.entry-content > * {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 960px;
|
||||
|
|
@ -952,11 +1312,11 @@ article>*:not(.entry-content),
|
|||
}
|
||||
|
||||
.entry-content p,
|
||||
.entry-content ul,
|
||||
.entry-content ol,
|
||||
.block-editor-block-list__layout p,
|
||||
.block-editor-block-list__layout ul,
|
||||
.block-editor-block-list__layout ol {
|
||||
.entry-content ul,
|
||||
.entry-content ol,
|
||||
.block-editor-block-list__layout p,
|
||||
.block-editor-block-list__layout ul,
|
||||
.block-editor-block-list__layout ol {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
|
|
@ -970,200 +1330,6 @@ article>*:not(.entry-content),
|
|||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
/* ########### GENERAL ############ */
|
||||
|
||||
/* ########### COMPONENTS ############ */
|
||||
|
||||
.primary-menu-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1280px;
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
/* li.current-page-parent,
|
||||
li.current-page-ancestor */
|
||||
|
||||
.primary-menu-container li.current-page-parent > a,
|
||||
.primary-menu-container li.current_page_item > a {
|
||||
font-weight: 700;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(20 184 166 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.primary-menu-container li.current-page-parent > a,
|
||||
.primary-menu-container li.current_page_item > a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 165 233 / var(--tw-text-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
/* Highlight using list element */
|
||||
|
||||
.primary-menu-container li.menu-item {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.primary-menu-container li.menu-item:hover > a {
|
||||
cursor: pointer;
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(20 184 166 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.primary-menu-container li.menu-item:hover > a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(14 165 233 / var(--tw-text-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
/* submenus */
|
||||
|
||||
.primary-menu-container li:has(.sub-menu) .sub-menu {
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.primary-menu-container li:has(.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 li:has(.sub-menu):hover > a::after, .primary-menu-container li:has(.sub-menu):focus > a::after {
|
||||
transform: translateY(-2px) rotate(0deg);
|
||||
}
|
||||
|
||||
.primary-menu-container li:has(.sub-menu):hover .sub-menu, .primary-menu-container li:has(.sub-menu):focus .sub-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.close_btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.primary-menu-container {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.primary-menu-container li:has(.sub-menu) .sub-menu {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
/* position: static !important; */
|
||||
position: static;
|
||||
}
|
||||
|
||||
#primary-menu {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
margin-top: 0px;
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(14 165 233 / var(--tw-bg-opacity));
|
||||
transition: all 0.3s ease-out;
|
||||
transform: translateY(-110vh);
|
||||
z-index: 800;
|
||||
height: -webkit-fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#primary-menu > ul {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 20rem;
|
||||
min-height: 96vh;
|
||||
padding-top: 5vh;
|
||||
}
|
||||
|
||||
#primary-menu li.menu-item {
|
||||
margin-top: 0px;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
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));
|
||||
display: block !important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* BURGER MENU */
|
||||
|
||||
#primary-menu body:has(header.burger_menu_active) {
|
||||
max-height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#primary-menu header.burger_menu_active {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
height: 100vh;
|
||||
overflow: scroll;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.burger_menu_active .close_btn {
|
||||
cursor: pointer;
|
||||
z-index: 999;
|
||||
width: 20px;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
display: block;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.burger_menu_active #primary-menu {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) and (hover: none) {
|
||||
body {
|
||||
background-color: red !important;
|
||||
}
|
||||
|
||||
/* ul {
|
||||
@apply w-max mx-auto;
|
||||
} */
|
||||
|
||||
.primary-menu-container li.menu-item {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.primary-menu-container li:has(.sub-menu) > a::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.primary-menu-container li:has(.sub-menu) .sub-menu {
|
||||
padding-left: 3rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
/* ########### BLOCKS ############ */
|
||||
|
||||
/* Home */
|
||||
|
|
|
|||
|
|
@ -91,10 +91,6 @@
|
|||
display: flex
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none
|
||||
}
|
||||
|
||||
.h-1 {
|
||||
height: 0.25rem
|
||||
}
|
||||
|
|
@ -123,6 +119,10 @@
|
|||
max-width: 24rem
|
||||
}
|
||||
|
||||
.max-w-screen-md {
|
||||
max-width: 782px
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1
|
||||
}
|
||||
|
|
@ -159,18 +159,22 @@
|
|||
border-radius: 0.25rem
|
||||
}
|
||||
|
||||
.border {
|
||||
border-width: 1px
|
||||
}
|
||||
|
||||
.border-b {
|
||||
border-bottom-width: 1px
|
||||
}
|
||||
|
||||
.border-primary {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(14 165 233 / var(--tw-border-opacity))
|
||||
border-color: rgb(64 79 142 / var(--tw-border-opacity))
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(14 165 233 / var(--tw-bg-opacity))
|
||||
background-color: rgb(64 79 142 / var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.bg-gray-200 {
|
||||
|
|
@ -188,6 +192,11 @@
|
|||
background-color: rgb(255 255 255 / var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.bg-red-500 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(239 68 68 / var(--tw-bg-opacity))
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem
|
||||
}
|
||||
|
|
@ -381,7 +390,18 @@ body {
|
|||
max-width: 100%
|
||||
}
|
||||
|
||||
.wp-block.alignfull {
|
||||
max-width: 100%
|
||||
}
|
||||
|
||||
.acf-block-component {
|
||||
/* @apply bg-red-500; */
|
||||
}
|
||||
|
||||
.acf-block-fields {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 782px
|
||||
}
|
||||
|
||||
@media (min-width: 782px) {
|
||||
|
|
|
|||
37
css/login-style.css
Normal file
37
css/login-style.css
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
body {
|
||||
/* @apply bg-primary; */
|
||||
}
|
||||
|
||||
#login h1 a,
|
||||
.login h1 a {
|
||||
background-image: url("../resources/img/logo_client.svg");
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
background-size: 300px 100px;
|
||||
background-repeat: no-repeat;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
#wp-submit {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(64 79 142 / var(--tw-border-opacity));
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(64 79 142 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
#nav a,
|
||||
#backtoblog a {
|
||||
/* color: var(--red) !important; */
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(64 79 142 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
#loginform {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.wp-pwd span {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(64 79 142 / var(--tw-text-opacity));
|
||||
/* color: var(--red) !important; */
|
||||
}
|
||||
|
|
@ -1,9 +1,7 @@
|
|||
|
||||
</main>
|
||||
|
||||
<?php do_action( 'tailpress_content_end' ); ?>
|
||||
|
||||
</div>
|
||||
|
||||
<?php do_action( 'tailpress_content_after' ); ?>
|
||||
|
||||
|
|
@ -20,4 +18,5 @@
|
|||
<?php wp_footer(); ?>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
133
functions.php
133
functions.php
|
|
@ -1,138 +1,13 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Theme setup.
|
||||
*/
|
||||
function tailpress_setup()
|
||||
{
|
||||
|
||||
// ##### Setup 🡒 Navigation
|
||||
|
||||
register_nav_menus(
|
||||
array(
|
||||
'primary' => __('Primary Menu', 'tailpress'),
|
||||
)
|
||||
);
|
||||
|
||||
// ##### Setup 🡒 Ajout des themes supports
|
||||
|
||||
add_theme_support(
|
||||
'html5',
|
||||
array(
|
||||
'search-form',
|
||||
'comment-form',
|
||||
'comment-list',
|
||||
'gallery',
|
||||
'caption',
|
||||
)
|
||||
);
|
||||
add_theme_support('title-tag');
|
||||
add_theme_support('custom-logo');
|
||||
add_theme_support('post-thumbnails');
|
||||
|
||||
add_theme_support('align-wide');
|
||||
add_theme_support('wp-block-styles');
|
||||
|
||||
add_theme_support('editor-styles');
|
||||
add_editor_style('css/editor-style.css');
|
||||
|
||||
// add_post_type_support( 'page', 'excerpt' );
|
||||
}
|
||||
|
||||
add_action('after_setup_theme', 'tailpress_setup');
|
||||
|
||||
|
||||
// ##### Enqueue Theme assets 🡒 Front
|
||||
|
||||
function tailpress_enqueue_scripts()
|
||||
{
|
||||
$theme = wp_get_theme();
|
||||
|
||||
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'));
|
||||
}
|
||||
|
||||
|
||||
// ##### Enqueue Theme assets 🡒 Back
|
||||
|
||||
function enqueue_gutenberg_back_styles()
|
||||
{
|
||||
wp_enqueue_style('tailpress_back', tailpress_asset('css/app.css'), array());
|
||||
}
|
||||
add_action('enqueue_block_editor_assets', 'enqueue_gutenberg_back_styles');
|
||||
|
||||
|
||||
add_action('wp_enqueue_scripts', 'tailpress_enqueue_scripts');
|
||||
|
||||
/**
|
||||
* Get asset path.
|
||||
*
|
||||
* @param string $path Path to asset.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
function tailpress_asset($path)
|
||||
{
|
||||
if (wp_get_environment_type() === 'production') {
|
||||
return get_stylesheet_directory_uri() . '/' . $path;
|
||||
}
|
||||
|
||||
return add_query_arg('time', time(), get_stylesheet_directory_uri() . '/' . $path);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds option 'li_class' to 'wp_nav_menu'.
|
||||
*
|
||||
* @param string $classes String of classes.
|
||||
* @param mixed $item The curren item.
|
||||
* @param WP_Term $args Holds the nav menu arguments.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
function tailpress_nav_menu_add_li_class($classes, $item, $args, $depth)
|
||||
{
|
||||
if (isset($args->li_class)) {
|
||||
$classes[] = $args->li_class;
|
||||
}
|
||||
|
||||
if (isset($args->{"li_class_$depth"})) {
|
||||
$classes[] = $args->{"li_class_$depth"};
|
||||
}
|
||||
|
||||
return $classes;
|
||||
}
|
||||
|
||||
add_filter('nav_menu_css_class', 'tailpress_nav_menu_add_li_class', 10, 4);
|
||||
|
||||
/**
|
||||
* Adds option 'submenu_class' to 'wp_nav_menu'.
|
||||
*
|
||||
* @param string $classes String of classes.
|
||||
* @param mixed $item The curren item.
|
||||
* @param WP_Term $args Holds the nav menu arguments.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
function tailpress_nav_menu_add_submenu_class($classes, $args, $depth)
|
||||
{
|
||||
if (isset($args->submenu_class)) {
|
||||
$classes[] = $args->submenu_class;
|
||||
}
|
||||
|
||||
if (isset($args->{"submenu_class_$depth"})) {
|
||||
$classes[] = $args->{"submenu_class_$depth"};
|
||||
}
|
||||
|
||||
return $classes;
|
||||
}
|
||||
|
||||
add_filter('nav_menu_submenu_css_class', 'tailpress_nav_menu_add_submenu_class', 10, 3);
|
||||
|
||||
|
||||
require_once(__DIR__ . '/includes/errorlog.php');
|
||||
require_once(__DIR__ . '/includes/init.php');
|
||||
require_once(__DIR__ . '/includes/blocks.php');
|
||||
require_once(__DIR__ . '/includes/post_types.php');
|
||||
require_once(__DIR__ . '/includes/admin.php');
|
||||
require_once(__DIR__ . '/includes/logos.php');
|
||||
|
||||
// require_once(__DIR__ . '/includes/widget.php');
|
||||
// require_once( __DIR__ . '/includes/taxonomy.php');
|
||||
// require_once( __DIR__ . '/includes/errorlog.php');
|
||||
// require_once( __DIR__ . '/includes/logos.php');
|
||||
111
header.php
111
header.php
|
|
@ -10,30 +10,31 @@
|
|||
<?php wp_head(); ?>
|
||||
</head>
|
||||
|
||||
<body <?php body_class('bg-white text-gray-900 antialiased'); ?>>
|
||||
<body>
|
||||
<?php
|
||||
do_action('tailpress_site_before');
|
||||
global $post;
|
||||
?>
|
||||
|
||||
<?php do_action('tailpress_site_before'); ?>
|
||||
|
||||
<div id="page" class="min-h-screen flex flex-col">
|
||||
<div id="page-<?php echo $post->post_name ?>" class="min-h-screen flex flex-col">
|
||||
|
||||
<?php do_action('tailpress_header'); ?>
|
||||
|
||||
<header id="primary-header">
|
||||
<!-- <span>陠</span> -->
|
||||
<!-- <header id="primary-header">
|
||||
<div class="primary-menu-container">
|
||||
<div class="lg:flex lg:justify-between lg:items-center py-6">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<?php if (has_custom_logo()) { ?>
|
||||
<?php the_custom_logo(); ?>
|
||||
<?php the_custom_logo(); ?>
|
||||
<?php } else { ?>
|
||||
<a href="<?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
|
||||
<?php echo get_bloginfo('name'); ?>
|
||||
</a>
|
||||
<a href="<?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
|
||||
<?php echo get_bloginfo('name'); ?>
|
||||
</a>
|
||||
|
||||
<p class="text-sm font-light text-gray-600">
|
||||
<?php echo get_bloginfo('description'); ?>
|
||||
</p>
|
||||
<p class="text-sm font-light text-gray-600">
|
||||
<?php echo get_bloginfo('description'); ?>
|
||||
</p>
|
||||
|
||||
<?php } ?>
|
||||
</div>
|
||||
|
|
@ -66,14 +67,88 @@
|
|||
<img class="close_btn" src="<?php echo get_template_directory_uri() . '/resources/img/close_menu_icon.svg' ?>" />
|
||||
</div>
|
||||
</div>
|
||||
</header> -->
|
||||
|
||||
<header id="primary-header">
|
||||
<!-- <div class="primary-menu-container bg-red-500">
|
||||
</div> -->
|
||||
<div class="primary-menu-container lg:flex lg:justify-between lg:items-center">
|
||||
<nav id="primary-menu-nav" class="flex justify-between items-center">
|
||||
<!-- <div class="website_logo">
|
||||
<?php if ($logo_gba) { ?>
|
||||
<a href="<?php echo home_url() ?>">
|
||||
<img class="logo" src=<?php echo $logo_gba ?> alt="">
|
||||
</a>
|
||||
<?php } else { ?>
|
||||
<a href="<?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
|
||||
<?php echo get_bloginfo('name'); ?>
|
||||
</a>
|
||||
|
||||
<p class="text-sm font-light text-gray-600">
|
||||
<?php echo get_bloginfo('description'); ?>
|
||||
</p>
|
||||
|
||||
<?php } ?>
|
||||
</div> -->
|
||||
<div class="website_logo">
|
||||
<?php if (has_custom_logo()) { ?>
|
||||
<?php the_custom_logo(); ?>
|
||||
<?php } else { ?>
|
||||
<a href=" <?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
|
||||
<?php echo get_bloginfo('name'); ?>
|
||||
</a>
|
||||
|
||||
<p class="text-sm font-light text-gray-600">
|
||||
<?php echo get_bloginfo('description'); ?>
|
||||
</p>
|
||||
|
||||
<?php } ?>
|
||||
</div>
|
||||
|
||||
<button id="burger-menu-toggle" aria-label="<?php echo esc_html_e("Ouvrir le menu", 'deligraph-theme') ?>">
|
||||
<div class="menu-toggle-bar menu-toggle-bar--top"></div>
|
||||
<div class="menu-toggle-bar menu-toggle-bar--middle"></div>
|
||||
<div class="menu-toggle-bar menu-toggle-bar--bottom"></div>
|
||||
<!-- <?php echo get_template_part('resources/svg/burger-menu-icon.svg'); ?> -->
|
||||
</button>
|
||||
<div id="primary-menu">
|
||||
<!-- <button id="close-menu-btn" aria-label="<?php echo esc_html_e("Fermer le menu", 'deligraph-theme') ?>">
|
||||
<?php echo get_template_part('resources/svg/close-menu-icon.svg'); ?>
|
||||
</button> -->
|
||||
<?php
|
||||
wp_nav_menu(
|
||||
array(
|
||||
'container' => 'false',
|
||||
// 'container_id' => 'primary-menu',
|
||||
// 'container_class' => '',
|
||||
'theme_location' => 'primary',
|
||||
'li_class' => 'menu-navlink',
|
||||
'fallback_cb' => false,
|
||||
)
|
||||
); ?>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</nav>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<!-- qsdqds -->
|
||||
</header>
|
||||
|
||||
<div id="content" class="site-content flex-grow">
|
||||
|
||||
<?php if (is_front_page()) { ?>
|
||||
|
||||
<?php } ?>
|
||||
<?php if (is_front_page()) { ?>
|
||||
|
||||
<?php do_action('tailpress_content_start'); ?>
|
||||
<?php } ?>
|
||||
|
||||
<main>
|
||||
<?php do_action('tailpress_content_start'); ?>
|
||||
|
||||
<main id="content" class="site-content flex-grow">
|
||||
|
|
@ -17,8 +17,6 @@ function custom_menu_page_removing()
|
|||
add_action('admin_menu', 'custom_menu_page_removing');
|
||||
|
||||
|
||||
|
||||
|
||||
// ##### Removes from admin bar
|
||||
function mytheme_admin_bar_render()
|
||||
{
|
||||
|
|
@ -26,3 +24,18 @@ function mytheme_admin_bar_render()
|
|||
$wp_admin_bar->remove_menu('comments');
|
||||
}
|
||||
add_action('wp_before_admin_bar_render', 'mytheme_admin_bar_render');
|
||||
|
||||
|
||||
// ##### MODIFIER LE LIEN DU LOGO SUR LA BLADE DE CONNEXION À L'INTERFACE ADMIN
|
||||
function change_login_logo_url($url)
|
||||
{
|
||||
return site_url();
|
||||
}
|
||||
add_filter('login_headerurl', 'change_login_logo_url');
|
||||
|
||||
// ##### ENQUEUE DU CSS BLADE LOGIN ADMIN
|
||||
function enqueue_custom_login_stylesheet()
|
||||
{
|
||||
wp_enqueue_style('custom-login', get_stylesheet_directory_uri() . '/style-login.css');
|
||||
}
|
||||
add_action('login_enqueue_scripts', 'enqueue_custom_login_stylesheet');
|
||||
|
|
|
|||
|
|
@ -8,10 +8,15 @@ function client_add_block_categories($categories)
|
|||
|
||||
[
|
||||
[
|
||||
'slug' => 'client_blocks',
|
||||
'title' => __('Mon titre ', 'client-blocks'),
|
||||
'slug' => 'client-blocks',
|
||||
'title' => 'Client Generic Blocks ',
|
||||
'icon' => 'heart',
|
||||
],
|
||||
[
|
||||
'slug' => 'client-pages',
|
||||
'title' => 'Client Specific Page Blocks ',
|
||||
'icon' => 'admin-page',
|
||||
],
|
||||
],
|
||||
$categories
|
||||
);
|
||||
|
|
@ -25,29 +30,29 @@ function acf_custom_client_blocks_init()
|
|||
{
|
||||
if (function_exists('acf_register_block_type')) {
|
||||
|
||||
// ##### Home 🡒 Hero Section
|
||||
acf_register_block_type(array(
|
||||
'name' => 'home_header',
|
||||
'title' => __("Home — Section d'accueil"),
|
||||
'description' => __("Brique pour la section d'acccueil"),
|
||||
'render_template' => 'template-blocks/home/home_header/home_header.php',
|
||||
'category' => 'client_blocks',
|
||||
'multiple' => false,
|
||||
'mode' => 'auto',
|
||||
'align' => 'full',
|
||||
'icon' => 'schedule',
|
||||
'supports' => array(
|
||||
'multiple' => false,
|
||||
'align' => ['full'],
|
||||
'jsx' => true
|
||||
),
|
||||
// 'enqueue_style' => get_template_directory_uri() . '/template-parts/blocks/testimonial/testimonial.css',
|
||||
// 'enqueue_script' => get_template_directory_uri() . '/template-parts/blocks/testimonial/testimonial.js',
|
||||
// 'enqueue_assets' => function(){
|
||||
// wp_enqueue_script( 'latest_articles_js', get_stylesheet_directory_uri() . '/template-parts/blocks/home/latest_articles/latest_articles.js');
|
||||
// },
|
||||
// // ##### Home 🡒 Hero Section
|
||||
// acf_register_block_type(array(
|
||||
// 'name' => 'home_header',
|
||||
// 'title' => __("Home — Section d'accueil"),
|
||||
// 'description' => __("Brique pour la section d'acccueil"),
|
||||
// 'render_template' => 'template-blocks/home/home_header/home_header.php',
|
||||
// 'category' => 'client-blocks',
|
||||
// 'multiple' => false,
|
||||
// 'mode' => 'auto',
|
||||
// 'align' => 'full',
|
||||
// 'icon' => 'schedule',
|
||||
// 'supports' => array(
|
||||
// 'multiple' => false,
|
||||
// 'align' => ['full'],
|
||||
// 'jsx' => true
|
||||
// ),
|
||||
// // 'enqueue_style' => get_template_directory_uri() . '/template-parts/blocks/testimonial/testimonial.css',
|
||||
// // 'enqueue_script' => get_template_directory_uri() . '/template-parts/blocks/testimonial/testimonial.js',
|
||||
// // 'enqueue_assets' => function(){
|
||||
// // wp_enqueue_script( 'latest_articles_js', get_stylesheet_directory_uri() . '/template-parts/blocks/home/latest_articles/latest_articles.js');
|
||||
// // },
|
||||
|
||||
));
|
||||
// ));
|
||||
|
||||
// ##### Home 🡒 Latest Articles
|
||||
acf_register_block_type(array(
|
||||
|
|
@ -55,7 +60,7 @@ function acf_custom_client_blocks_init()
|
|||
'title' => __("Derniers Articles"),
|
||||
'description' => __("Brique pour afficher les derniers articles publiés sur le site"),
|
||||
'render_template' => 'template-blocks/generics/latest-post-query.php',
|
||||
'category' => 'client_blocks',
|
||||
'category' => 'client-blocks',
|
||||
'multiple' => false,
|
||||
'mode' => 'auto',
|
||||
'align' => 'wide',
|
||||
|
|
@ -72,6 +77,21 @@ function acf_custom_client_blocks_init()
|
|||
add_action('acf/init', 'acf_custom_client_blocks_init');
|
||||
|
||||
|
||||
function mywp_register_acf_blocks()
|
||||
{
|
||||
// Check availability of block editor
|
||||
if (!function_exists('register_block_type')) {
|
||||
return;
|
||||
}
|
||||
register_block_type(get_template_directory() . '/template-blocks/home/home-header');
|
||||
}
|
||||
add_action('init', 'mywp_register_acf_blocks');
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// ##### Blocks style 🡒 Re-enqueue d'un style dans l'éditeur
|
||||
|
||||
|
||||
|
|
|
|||
159
includes/init.php
Normal file
159
includes/init.php
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Theme setup.
|
||||
*/
|
||||
function tailpress_setup()
|
||||
{
|
||||
|
||||
// ##### Setup 🡒 Navigation
|
||||
|
||||
register_nav_menus(
|
||||
array(
|
||||
'primary' => __('Primary Menu', 'tailpress'),
|
||||
)
|
||||
);
|
||||
|
||||
// ##### Setup 🡒 Ajout des themes supports
|
||||
|
||||
add_theme_support(
|
||||
'html5',
|
||||
array(
|
||||
'search-form',
|
||||
'comment-form',
|
||||
'comment-list',
|
||||
'gallery',
|
||||
'caption',
|
||||
)
|
||||
);
|
||||
add_theme_support('title-tag');
|
||||
add_theme_support('custom-logo');
|
||||
add_theme_support('post-thumbnails');
|
||||
|
||||
add_theme_support('align-wide');
|
||||
add_theme_support('wp-block-styles');
|
||||
|
||||
add_theme_support('editor-styles');
|
||||
add_editor_style('css/editor-style.css');
|
||||
add_theme_support('widgets');
|
||||
// add_post_type_support( 'page', 'excerpt' );
|
||||
}
|
||||
|
||||
add_action('after_setup_theme', 'tailpress_setup');
|
||||
|
||||
|
||||
|
||||
// ##### Menu Walker
|
||||
// if (!function_exists('register_navwalker')) :
|
||||
// function register_navwalker() {
|
||||
// require('includes/navwalker.php');
|
||||
// }
|
||||
// endif;
|
||||
// add_action('after_setup_theme', 'register_navwalker');
|
||||
|
||||
|
||||
|
||||
|
||||
// ##### Walker to ReWrap li submenu parent with button instead of <a>
|
||||
function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
|
||||
{
|
||||
|
||||
if ($args->theme_location === "primary" && in_array('menu-item-has-children', $item->classes, true)) {
|
||||
$output = '<button type="button" class="menu-item-submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
|
||||
}
|
||||
if ($args->theme_location === "footer" && in_array('menu-item-has-children', $item->classes, true)) {
|
||||
$output = $item->title;
|
||||
}
|
||||
return $output;
|
||||
}
|
||||
add_filter('walker_nav_menu_start_el', 'wrap_parent_menu_item_buttons', 10, 4);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// ##### Enqueue Theme assets 🡒 Front
|
||||
|
||||
function tailpress_enqueue_scripts()
|
||||
{
|
||||
$theme = wp_get_theme();
|
||||
|
||||
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'));
|
||||
}
|
||||
|
||||
|
||||
// ##### Enqueue Theme assets 🡒 Back
|
||||
|
||||
function enqueue_gutenberg_back_styles()
|
||||
{
|
||||
wp_enqueue_style('tailpress_back', tailpress_asset('css/app.css'), array());
|
||||
}
|
||||
add_action('enqueue_block_editor_assets', 'enqueue_gutenberg_back_styles');
|
||||
|
||||
|
||||
add_action('wp_enqueue_scripts', 'tailpress_enqueue_scripts');
|
||||
|
||||
/**
|
||||
* Get asset path.
|
||||
*
|
||||
* @param string $path Path to asset.
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
function tailpress_asset($path)
|
||||
{
|
||||
if (wp_get_environment_type() === 'production') {
|
||||
return get_stylesheet_directory_uri() . '/' . $path;
|
||||
}
|
||||
|
||||
return add_query_arg('time', time(), get_stylesheet_directory_uri() . '/' . $path);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds option 'li_class' to 'wp_nav_menu'.
|
||||
*
|
||||
* @param string $classes String of classes.
|
||||
* @param mixed $item The curren item.
|
||||
* @param WP_Term $args Holds the nav menu arguments.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
function tailpress_nav_menu_add_li_class($classes, $item, $args, $depth)
|
||||
{
|
||||
if (isset($args->li_class)) {
|
||||
$classes[] = $args->li_class;
|
||||
}
|
||||
|
||||
if (isset($args->{"li_class_$depth"})) {
|
||||
$classes[] = $args->{"li_class_$depth"};
|
||||
}
|
||||
|
||||
return $classes;
|
||||
}
|
||||
|
||||
add_filter('nav_menu_css_class', 'tailpress_nav_menu_add_li_class', 10, 4);
|
||||
|
||||
/**
|
||||
* Adds option 'submenu_class' to 'wp_nav_menu'.
|
||||
*
|
||||
* @param string $classes String of classes.
|
||||
* @param mixed $item The curren item.
|
||||
* @param WP_Term $args Holds the nav menu arguments.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
function tailpress_nav_menu_add_submenu_class($classes, $args, $depth)
|
||||
{
|
||||
if (isset($args->submenu_class)) {
|
||||
$classes[] = $args->submenu_class;
|
||||
}
|
||||
|
||||
if (isset($args->{"submenu_class_$depth"})) {
|
||||
$classes[] = $args->{"submenu_class_$depth"};
|
||||
}
|
||||
|
||||
return $classes;
|
||||
}
|
||||
|
||||
add_filter('nav_menu_submenu_css_class', 'tailpress_nav_menu_add_submenu_class', 10, 3);
|
||||
28
includes/navwalker.php
Normal file
28
includes/navwalker.php
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<?php
|
||||
|
||||
class wp_nav_menu_walker extends Walker_Nav_menu
|
||||
{
|
||||
|
||||
function start_lvl(&$output, $depth = 0, $args = null)
|
||||
{
|
||||
|
||||
$tmp_class = "child-" . $depth;
|
||||
|
||||
$output .= "<ul class='" . $tmp_class . "'>";
|
||||
|
||||
}
|
||||
|
||||
function start_el(&$output, $item, $depth = 0, $args = null, $id = 0)
|
||||
{
|
||||
|
||||
$output .= "<li>I like pie" . $item->title;
|
||||
|
||||
// var_dump($args);
|
||||
}
|
||||
|
||||
function end_el(&$output, $item, $depth = 0, $args = null)
|
||||
{
|
||||
$output .= "...</li>";
|
||||
}
|
||||
|
||||
}
|
||||
106
includes/nawalker_fction.php
Normal file
106
includes/nawalker_fction.php
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
<?php
|
||||
|
||||
/* -----------------------------------------------------------
|
||||
Walker to ReWrap li submenu parent with button instead of
|
||||
-----------------------------------------------------------*/
|
||||
|
||||
function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
|
||||
{
|
||||
// write_log($item);
|
||||
|
||||
// $item->classes = array_merge($item->classes, array('menu-item-' . $item->ID));
|
||||
|
||||
// #### MENU HOMEGRADE HEADER
|
||||
if ($args->theme_location === "homegrade" && $args->menu_id === "menu-homegrade-navlist" && in_array('menu-item-has-children', $item->classes, true)) {
|
||||
$output = '<button type="button" class="menu-item-submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
|
||||
}
|
||||
|
||||
// #### MENU HOMEGRADE FOOTER
|
||||
if ($args->theme_location === "homegrade" && $args->menu_class === "menu-homegrade-footer" && in_array('menu-item-has-children', $item->classes, true)) {
|
||||
$output = '<h6 class="page-group-title">' . $item->title . '</h6>';
|
||||
}
|
||||
|
||||
|
||||
|
||||
if ($args->theme_location === "renovateur") {
|
||||
$page_icon = get_field('page_icon', $item->object_id);
|
||||
|
||||
if (in_array('menu-item-has-children', $item->classes, true)) {
|
||||
$output = '<button type="button" class="menu-item-submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
|
||||
}
|
||||
|
||||
// #### ICONE DE PAGE FOR TOP LEVEL MENU ITEMS
|
||||
if (isset($page_icon)) {
|
||||
$icon = '<img class="page_icon" src="' . $page_icon['url'] . '" alt=""/>';
|
||||
$link = $output;
|
||||
$output = $icon . $link;
|
||||
}
|
||||
|
||||
write_log($output);
|
||||
|
||||
// #### TAXONOMY : GET ICON & INFOS ABOUT TAX
|
||||
|
||||
if ($item->type === "taxonomy") {
|
||||
$term = get_term_by('id', $item->object_id, 'thematiques');
|
||||
$cover = get_field('taxonomy_pictures', "thematiques_" . $item->object_id);
|
||||
|
||||
$output = '<a class="lol" href="' . $item->url . '">';
|
||||
$output .= '<img class="thematique-icon" src="' . $cover['icon']['url'] . '"/>';
|
||||
$output .= '<h6>' . $item->title . "</h6>";
|
||||
$output .= '<p>' . $term->description . "</p>";
|
||||
$output .= "</a>";
|
||||
}
|
||||
}
|
||||
|
||||
if ($args->theme_location === "footer" && in_array('menu-item-has-children', $item->classes, true)) {
|
||||
$output = $item->title;
|
||||
}
|
||||
return $output;
|
||||
}
|
||||
add_filter('walker_nav_menu_start_el', 'wrap_parent_menu_item_buttons', 10, 4);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* -----------------------------------------------------------
|
||||
Pass Specific submenus-classnames for menu renovateur
|
||||
-----------------------------------------------------------*/
|
||||
|
||||
|
||||
|
||||
function customize_submenu_classnames($classes, $args, $depth)
|
||||
{
|
||||
// Here we can additionally use menu arguments.
|
||||
// if ($args->theme_location === "renovateur") {
|
||||
// $default_class_name_key = array_search('sub-menu', $classes);
|
||||
|
||||
// if (false !== $default_class_name_key) {
|
||||
// unset($classes[$default_class_name_key]);
|
||||
// }
|
||||
// $classes[] = 'header-submenu';
|
||||
// $classes[] = "depth-{$depth}";
|
||||
// $classes[] = 'sub-menu';
|
||||
// $classes[] = 'test';
|
||||
// }
|
||||
// write_log($classes);
|
||||
// write_log($classes);
|
||||
|
||||
return $classes;
|
||||
}
|
||||
// add_filter('nav_menu_submenu_css_class', 'customize_submenu_classnames', 10, 3);
|
||||
|
||||
|
||||
/* -----------------------------------------------------------
|
||||
FILTER MENU OBJECTS TO BE DISPLAYED
|
||||
-----------------------------------------------------------*/
|
||||
|
||||
|
||||
function wpdocs_unset_menu_items($menu_objects, $args)
|
||||
{
|
||||
if ($args->theme_location === "renovateur") {
|
||||
}
|
||||
return $menu_objects;
|
||||
}
|
||||
// add_filter('wp_nav_menu_objects', 'wpdocs_unset_menu_items', 10, 2);
|
||||
13
includes/widget.php
Normal file
13
includes/widget.php
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<?php
|
||||
|
||||
register_sidebar(
|
||||
array(
|
||||
'name' => 'Experts',
|
||||
'id' => 'widget_nos_experts',
|
||||
'description' => 'Add widgets here.',
|
||||
// 'before_widget' => '<section id="%1$s" class="widget %2$s">',
|
||||
// 'after_widget' => '</section>',
|
||||
// 'before_title' => '<h2 class="widget-title">',
|
||||
// 'after_title' => '</h2>',
|
||||
),
|
||||
);
|
||||
34
js/app.js
34
js/app.js
|
|
@ -3,15 +3,35 @@
|
|||
function menuInit() {
|
||||
let main_navigation = document.querySelector("#primary-menu");
|
||||
const header = document.querySelector("#primary-header");
|
||||
const close = header.querySelector(".close_btn");
|
||||
console.log(close);
|
||||
document.querySelector("#primary-menu-toggle").addEventListener("click", function(e) {
|
||||
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("burger_menu_active");
|
||||
header.classList.toggle("nav-open");
|
||||
burgerMenuToggle.toggleAttribute("aria-expanded");
|
||||
gsap.from(primary_menu, {
|
||||
opacity: 20,
|
||||
y: "-100vh",
|
||||
duration: 0.5,
|
||||
ease: Power4.easeOut
|
||||
});
|
||||
});
|
||||
close.addEventListener("click", function(e) {
|
||||
e.preventDefault();
|
||||
header.classList.toggle("burger_menu_active");
|
||||
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();
|
||||
}
|
||||
}, true);
|
||||
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");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,18 +15,21 @@
|
|||
"production:css-app": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/app.css -o ./css/app.css --postcss --minify",
|
||||
"production:css-editor": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/editor-style.css -o ./css/editor-style.css --postcss --minify",
|
||||
"production:css-admin": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/admin-style.css -o ./css/admin-style.css --postcss --minify",
|
||||
"production:css-login": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/login-style.css -o ./css/login-style.css --postcss --minify",
|
||||
"production:js": "cross-env NODE_ENV=development ./node_modules/.bin/esbuild ./resources/js/app.js --bundle --outfile=./js/app.js --minify",
|
||||
"dev:css-app": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/app.css -o ./css/app.css --postcss",
|
||||
"dev:css-editor": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/editor-style.css -o ./css/editor-style.css --postcss",
|
||||
"dev:css-admin": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/admin-style.css -o ./css/admin-style.css --postcss",
|
||||
"dev:css-login": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/login-style.css -o ./css/login-style.css --postcss",
|
||||
"dev:js": "cross-env NODE_ENV=development ./node_modules/.bin/esbuild ./resources/js/app.js --bundle --outfile=./js/app.js",
|
||||
"watch:css-app": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/app.css -o ./css/app.css --postcss --watch",
|
||||
"watch:css-editor": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/editor-style.css -o ./css/editor-style.css --postcss --watch",
|
||||
"watch:css-admin": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/admin-style.css -o ./css/admin-style.css --postcss --watch",
|
||||
"watch:css-login": "cross-env NODE_ENV=development tailwindcss -i ./resources/css/login-style.css -o ./css/login-style.css --postcss --watch",
|
||||
"watch:js": "cross-env NODE_ENV=development ./node_modules/.bin/esbuild ./resources/js/app.js --bundle --outfile=./js/app.js --watch",
|
||||
"production": "cross-env NODE_ENV=production concurrently \"npm run production:css-app\" \"npm run production:css-editor\" \"npm run production:css-admin\" \"npm run production:js\"",
|
||||
"dev": "cross-env NODE_ENV=development concurrently \"npm run dev:css-app\" \"npm run dev:css-admin\" \"npm run dev:css-editor\" \"npm run dev:js\"",
|
||||
"watch": "cross-env NODE_ENV=development concurrently \"npm run watch:css-app\" \"npm run watch:css-editor\" \"npm run watch:css-admin\" \"npm run watch:js\"",
|
||||
"production": "cross-env NODE_ENV=production concurrently \"npm run production:css-app\" \"npm run production:css-editor\" \"npm run production:css-admin\" \"npm run production:css-login\" \"npm run production:js\"",
|
||||
"dev": "cross-env NODE_ENV=development concurrently \"npm run dev:css-app\" \"npm run dev:css-admin\" \"npm run dev:css-editor\" \"npm run dev:css-login\" \"npm run dev:js\"",
|
||||
"watch": "cross-env NODE_ENV=development concurrently \"npm run watch:css-app\" \"npm run watch:css-editor\" \"npm run watch:css-admin\" \"npm run watch:css-login\" \"npm run watch:js\"",
|
||||
"browser-sync": "cross-env NODE_ENV=development browser-sync start --proxy \"tailpress.test\" --host=\"tailpress.test\" --no-inject-changes --files=\"./\"",
|
||||
"watch-sync": "cross-env NODE_ENV=development concurrently \"npm run browser-sync\" \"npm run watch\""
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,21 +1,22 @@
|
|||
@import "tailwindcss/base";
|
||||
@import "tailwindcss/components";
|
||||
@import "tailwindcss/utilities";
|
||||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
||||
|
||||
@import "custom.css";
|
||||
@import 'custom.css';
|
||||
|
||||
/* ########### GENERAL ############ */
|
||||
@import "typography.css";
|
||||
/* ########### BASE ############ */
|
||||
@import './base/typography.css';
|
||||
|
||||
/* ########### COMPONENTS ############ */
|
||||
@import "components/header.css";
|
||||
@import "components/cta.css";
|
||||
@import "components/section.css";
|
||||
@import "components/footer.css";
|
||||
|
||||
@import './components/cta.css';
|
||||
|
||||
/* ########### LAYOUT ############ */
|
||||
@import './layout/nav.css';
|
||||
@import './layout/footer.css';
|
||||
@import './layout/section.css';
|
||||
@import './layout/gutenberg.css';
|
||||
|
||||
/* ########### BLOCKS ############ */
|
||||
|
||||
/* Home */
|
||||
@import "../../template-blocks/home/home_header.css";
|
||||
/* Home */
|
||||
@import '../../template-blocks/home/home-header/home-header.css';
|
||||
|
|
|
|||
|
|
@ -1,146 +0,0 @@
|
|||
.primary-menu-container {
|
||||
@apply mx-auto max-w-screen-xl px-8;
|
||||
/* Highlight using list element */
|
||||
/* li.current-page-parent,
|
||||
li.current-page-ancestor */
|
||||
li.current-page-parent > a,
|
||||
li.current_page_item > a {
|
||||
@apply font-bold
|
||||
text-secondary
|
||||
lg:text-primary;
|
||||
}
|
||||
|
||||
li.menu-item {
|
||||
@apply font-medium text-sm uppercase;
|
||||
&:hover > a {
|
||||
@apply cursor-pointer
|
||||
text-secondary
|
||||
lg:text-primary;
|
||||
}
|
||||
}
|
||||
/* submenus */
|
||||
li:has(.sub-menu) {
|
||||
.sub-menu {
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
> 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;
|
||||
}
|
||||
}
|
||||
li:has(.sub-menu):hover,
|
||||
li:has(.sub-menu):focus {
|
||||
> a::after {
|
||||
transform: translateY(-2px) rotate(0deg);
|
||||
}
|
||||
.sub-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.close_btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* RESPONSIVE */
|
||||
@media (max-width: 960px) {
|
||||
.primary-menu-container {
|
||||
@apply my-0 max-h-screen;
|
||||
li:has(.sub-menu) {
|
||||
.sub-menu {
|
||||
@apply mx-auto;
|
||||
/* position: static !important; */
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#primary-menu {
|
||||
@apply bg-primary
|
||||
mt-0
|
||||
left-0
|
||||
absolute;
|
||||
transition: all 0.3s ease-out;
|
||||
transform: translateY(-110vh);
|
||||
z-index: 800;
|
||||
height: fit-content;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
|
||||
> 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;
|
||||
display: block !important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
/* BURGER MENU */
|
||||
body:has(header.burger_menu_active) {
|
||||
@apply max-h-screen;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
header.burger_menu_active {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
height: 100vh;
|
||||
overflow: scroll;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.burger_menu_active {
|
||||
.close_btn {
|
||||
cursor: pointer;
|
||||
z-index: 999;
|
||||
width: 20px;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
display: block;
|
||||
position: fixed;
|
||||
}
|
||||
#primary-menu {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (max-width: 960px) and (hover: none) {
|
||||
body {
|
||||
background-color: red !important;
|
||||
}
|
||||
/* ul {
|
||||
@apply w-max mx-auto;
|
||||
} */
|
||||
.primary-menu-container {
|
||||
li.menu-item {
|
||||
@apply mx-auto !text-left;
|
||||
}
|
||||
li:has(.sub-menu) {
|
||||
> a::after {
|
||||
display: none;
|
||||
}
|
||||
.sub-menu {
|
||||
@apply block pl-12;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
article>*:not(.entry-content),
|
||||
.entry-content>* {
|
||||
@apply mx-auto max-w-content;
|
||||
}
|
||||
|
||||
.entry-content,
|
||||
.block-editor-block-list__layout {
|
||||
h1 {
|
||||
@apply text-2xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-xl;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-lg;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
a {
|
||||
@apply text-blue-500 underline;
|
||||
|
||||
&:hover {
|
||||
@apply no-underline;
|
||||
}
|
||||
}
|
||||
|
||||
@apply mb-8;
|
||||
}
|
||||
|
||||
ul:not(.block-editor-block-variation-picker__variations) {
|
||||
li {
|
||||
@apply list-disc list-inside;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
li {
|
||||
@apply list-decimal list-inside;
|
||||
}
|
||||
}
|
||||
}
|
||||
45
resources/css/layout/gutenberg.css
Normal file
45
resources/css/layout/gutenberg.css
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
article > *:not(.entry-content),
|
||||
.entry-content > * {
|
||||
@apply mx-auto max-w-content;
|
||||
}
|
||||
|
||||
.entry-content,
|
||||
.block-editor-block-list__layout {
|
||||
h1 {
|
||||
@apply text-2xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-xl;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-lg;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
a {
|
||||
@apply text-blue-500 underline;
|
||||
|
||||
&:hover {
|
||||
@apply no-underline;
|
||||
}
|
||||
}
|
||||
|
||||
@apply mb-8;
|
||||
}
|
||||
|
||||
ul:not(.block-editor-block-variation-picker__variations) {
|
||||
li {
|
||||
@apply list-disc list-inside;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
li {
|
||||
@apply list-decimal list-inside;
|
||||
}
|
||||
}
|
||||
}
|
||||
265
resources/css/layout/nav.css
Normal file
265
resources/css/layout/nav.css
Normal file
|
|
@ -0,0 +1,265 @@
|
|||
.primary-menu-container {
|
||||
@apply mx-auto
|
||||
bg-primary
|
||||
text-white
|
||||
relative
|
||||
h-fit
|
||||
py-8
|
||||
px-8
|
||||
2xl:px-32
|
||||
my-0;
|
||||
|
||||
nav#primary-menu-nav {
|
||||
@apply max-w-screen-2xl w-full mx-auto;
|
||||
}
|
||||
.logo {
|
||||
@apply mr-12
|
||||
w-[190px]
|
||||
xl:w-[222px];
|
||||
}
|
||||
#primary-menu {
|
||||
@apply flex
|
||||
flex-col
|
||||
lg:flex-row
|
||||
items-center
|
||||
justify-around
|
||||
lg:justify-between;
|
||||
|
||||
ul {
|
||||
@apply lg:flex
|
||||
gap-x-2
|
||||
lg:gap-x-4
|
||||
xl:gap-x-8
|
||||
pr-0
|
||||
lg:pr-4
|
||||
xl:pr-24;
|
||||
}
|
||||
|
||||
/* 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-sm
|
||||
text-center;
|
||||
|
||||
&:hover > a,
|
||||
a:focus {
|
||||
@apply cursor-pointer
|
||||
underline
|
||||
underline-offset-8
|
||||
text-secondary;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 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 */;
|
||||
}
|
||||
}
|
||||
}
|
||||
30
resources/css/login-style.css
Normal file
30
resources/css/login-style.css
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
body {
|
||||
/* @apply bg-primary; */
|
||||
}
|
||||
|
||||
#login h1 a,
|
||||
.login h1 a {
|
||||
background-image: url("../resources/img/logo_client.svg");
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
background-size: 300px 100px;
|
||||
background-repeat: no-repeat;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
#wp-submit {
|
||||
@apply bg-primary border-primary;
|
||||
}
|
||||
#nav a,
|
||||
#backtoblog a {
|
||||
/* color: var(--red) !important; */
|
||||
@apply text-primary;
|
||||
}
|
||||
|
||||
#loginform {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.wp-pwd span {
|
||||
@apply text-primary;
|
||||
/* color: var(--red) !important; */
|
||||
}
|
||||
|
|
@ -1,18 +1,62 @@
|
|||
export default function menuInit() {
|
||||
let main_navigation = document.querySelector('#primary-menu');
|
||||
const header = document.querySelector('#primary-header');
|
||||
const close = header.querySelector('.close_btn');
|
||||
console.log(close)
|
||||
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'
|
||||
);
|
||||
|
||||
document.querySelector('#primary-menu-toggle').addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
// main_navigation.classList.toggle('hidden');
|
||||
header.classList.toggle('burger_menu_active');
|
||||
});
|
||||
// #### 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,
|
||||
});
|
||||
});
|
||||
|
||||
close.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
// main_navigation.classList.toggle('hidden');
|
||||
header.classList.toggle('burger_menu_active');
|
||||
});
|
||||
// #### 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
|
||||
);
|
||||
|
||||
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');
|
||||
});
|
||||
});
|
||||
}
|
||||
BIN
screenshot.png
BIN
screenshot.png
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 682 KiB |
21
template-blocks/home/home-header/block.json
Normal file
21
template-blocks/home/home-header/block.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"name": "acf/home-header",
|
||||
"title": "Home — Section d'accueil",
|
||||
"category": "client-blocks",
|
||||
"multiple": false,
|
||||
"icon": {
|
||||
"foreground": "#ffbb00",
|
||||
"src": "admin-site-alt"
|
||||
},
|
||||
"keywords": [
|
||||
"Couverture",
|
||||
"home",
|
||||
"Accueil",
|
||||
"Section d'accueil",
|
||||
"Header"
|
||||
],
|
||||
"acf": {
|
||||
"mode": "auto",
|
||||
"renderTemplate": "home-header.php"
|
||||
}
|
||||
}
|
||||
18
template-blocks/home/home-header/home-header.php
Executable file
18
template-blocks/home/home-header/home-header.php
Executable file
|
|
@ -0,0 +1,18 @@
|
|||
<?php
|
||||
$home_header = get_field('home_header_datas');
|
||||
|
||||
?>
|
||||
|
||||
|
||||
<section class="home-header header_top">
|
||||
<div class="home-header__content">
|
||||
<h1 class="home-header__title">
|
||||
<?php echo $home_header['title'] ?>
|
||||
</h1>
|
||||
<a class="cta" href="<?php echo $home_header['cta']['url'] ?>">
|
||||
<?php echo $home_header['cta']['title'] ?>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<img class="home-header__cover" src='<?php echo $home_header['cover_illustration']['url'] ?>' alt=''>
|
||||
</section>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<?php
|
||||
$home_header = get_field('home_header');
|
||||
?>
|
||||
|
||||
|
||||
|
||||
<h1 class="text-center"><?php echo $home_header['title'] ?></h1>
|
||||
|
||||
|
||||
<section class="home_header header_top">
|
||||
<div class="hero_content">
|
||||
|
||||
<h1 class="text-center "><?php echo $home_header['title'] ?></h1>
|
||||
<p class="text-center" ><?php echo $home_header['introduction_text'] ?></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -6,11 +6,13 @@
|
|||
"wideSize": "1280px"
|
||||
},
|
||||
"color": {
|
||||
"defaultPalette": false,
|
||||
"custom": false,
|
||||
"palette": [
|
||||
{
|
||||
"name": "Primary",
|
||||
"slug": "primary",
|
||||
"color": "#0EA5E9"
|
||||
"color": "#404F8E"
|
||||
},
|
||||
{
|
||||
"name": "Secondary",
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user