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/
|
||||||
618
css/app.css
618
css/app.css
|
|
@ -644,10 +644,6 @@ video {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-1 {
|
.h-1 {
|
||||||
height: 0.25rem;
|
height: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
@ -676,6 +672,10 @@ video {
|
||||||
max-width: 24rem;
|
max-width: 24rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.max-w-screen-md {
|
||||||
|
max-width: 782px;
|
||||||
|
}
|
||||||
|
|
||||||
.flex-grow {
|
.flex-grow {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
@ -684,14 +684,6 @@ video {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-disc {
|
|
||||||
list-style-type: disc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-decimal {
|
|
||||||
list-style-type: decimal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-col {
|
.flex-col {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
@ -712,18 +704,22 @@ video {
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
.border-b {
|
.border-b {
|
||||||
border-bottom-width: 1px;
|
border-bottom-width: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-primary {
|
.border-primary {
|
||||||
--tw-border-opacity: 1;
|
--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 {
|
.bg-primary {
|
||||||
--tw-bg-opacity: 1;
|
--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 {
|
.bg-gray-200 {
|
||||||
|
|
@ -741,6 +737,11 @@ video {
|
||||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
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 {
|
.p-4 {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
@ -844,16 +845,6 @@ video {
|
||||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
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 {
|
.antialiased {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
@ -918,8 +909,377 @@ video {
|
||||||
color: #4b5563;
|
color: #4b5563;
|
||||||
}
|
}
|
||||||
|
|
||||||
article>*:not(.entry-content),
|
/* ########### BASE ############ */
|
||||||
.entry-content>* {
|
|
||||||
|
/* ########### 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-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
max-width: 960px;
|
max-width: 960px;
|
||||||
|
|
@ -951,12 +1311,12 @@ article>*:not(.entry-content),
|
||||||
text-decoration-line: none;
|
text-decoration-line: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.entry-content p,
|
.entry-content p,
|
||||||
.entry-content ul,
|
.entry-content ul,
|
||||||
.entry-content ol,
|
.entry-content ol,
|
||||||
.block-editor-block-list__layout p,
|
.block-editor-block-list__layout p,
|
||||||
.block-editor-block-list__layout ul,
|
.block-editor-block-list__layout ul,
|
||||||
.block-editor-block-list__layout ol {
|
.block-editor-block-list__layout ol {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -970,200 +1330,6 @@ article>*:not(.entry-content),
|
||||||
list-style-type: decimal;
|
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 ############ */
|
/* ########### BLOCKS ############ */
|
||||||
|
|
||||||
/* Home */
|
/* Home */
|
||||||
|
|
|
||||||
|
|
@ -91,10 +91,6 @@
|
||||||
display: flex
|
display: flex
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none
|
|
||||||
}
|
|
||||||
|
|
||||||
.h-1 {
|
.h-1 {
|
||||||
height: 0.25rem
|
height: 0.25rem
|
||||||
}
|
}
|
||||||
|
|
@ -123,6 +119,10 @@
|
||||||
max-width: 24rem
|
max-width: 24rem
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.max-w-screen-md {
|
||||||
|
max-width: 782px
|
||||||
|
}
|
||||||
|
|
||||||
.flex-grow {
|
.flex-grow {
|
||||||
flex-grow: 1
|
flex-grow: 1
|
||||||
}
|
}
|
||||||
|
|
@ -159,18 +159,22 @@
|
||||||
border-radius: 0.25rem
|
border-radius: 0.25rem
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border-width: 1px
|
||||||
|
}
|
||||||
|
|
||||||
.border-b {
|
.border-b {
|
||||||
border-bottom-width: 1px
|
border-bottom-width: 1px
|
||||||
}
|
}
|
||||||
|
|
||||||
.border-primary {
|
.border-primary {
|
||||||
--tw-border-opacity: 1;
|
--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 {
|
.bg-primary {
|
||||||
--tw-bg-opacity: 1;
|
--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 {
|
.bg-gray-200 {
|
||||||
|
|
@ -188,6 +192,11 @@
|
||||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity))
|
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 {
|
.p-4 {
|
||||||
padding: 1rem
|
padding: 1rem
|
||||||
}
|
}
|
||||||
|
|
@ -381,7 +390,18 @@ body {
|
||||||
max-width: 100%
|
max-width: 100%
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wp-block.alignfull {
|
||||||
|
max-width: 100%
|
||||||
|
}
|
||||||
|
|
||||||
.acf-block-component {
|
.acf-block-component {
|
||||||
|
/* @apply bg-red-500; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.acf-block-fields {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
max-width: 782px
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-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>
|
</main>
|
||||||
|
|
||||||
<?php do_action( 'tailpress_content_end' ); ?>
|
<?php do_action( 'tailpress_content_end' ); ?>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<?php do_action( 'tailpress_content_after' ); ?>
|
<?php do_action( 'tailpress_content_after' ); ?>
|
||||||
|
|
||||||
|
|
@ -20,4 +18,5 @@
|
||||||
<?php wp_footer(); ?>
|
<?php wp_footer(); ?>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
|
</html>
|
||||||
133
functions.php
133
functions.php
|
|
@ -1,138 +1,13 @@
|
||||||
<?php
|
<?php
|
||||||
|
|
||||||
/**
|
require_once(__DIR__ . '/includes/errorlog.php');
|
||||||
* Theme setup.
|
require_once(__DIR__ . '/includes/init.php');
|
||||||
*/
|
|
||||||
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/blocks.php');
|
require_once(__DIR__ . '/includes/blocks.php');
|
||||||
require_once(__DIR__ . '/includes/post_types.php');
|
require_once(__DIR__ . '/includes/post_types.php');
|
||||||
require_once(__DIR__ . '/includes/admin.php');
|
require_once(__DIR__ . '/includes/admin.php');
|
||||||
require_once(__DIR__ . '/includes/logos.php');
|
require_once(__DIR__ . '/includes/logos.php');
|
||||||
|
|
||||||
|
// require_once(__DIR__ . '/includes/widget.php');
|
||||||
// require_once( __DIR__ . '/includes/taxonomy.php');
|
// require_once( __DIR__ . '/includes/taxonomy.php');
|
||||||
// require_once( __DIR__ . '/includes/errorlog.php');
|
// require_once( __DIR__ . '/includes/errorlog.php');
|
||||||
// require_once( __DIR__ . '/includes/logos.php');
|
// require_once( __DIR__ . '/includes/logos.php');
|
||||||
111
header.php
111
header.php
|
|
@ -10,30 +10,31 @@
|
||||||
<?php wp_head(); ?>
|
<?php wp_head(); ?>
|
||||||
</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-<?php echo $post->post_name ?>" class="min-h-screen flex flex-col">
|
||||||
|
|
||||||
<div id="page" class="min-h-screen flex flex-col">
|
|
||||||
|
|
||||||
<?php do_action('tailpress_header'); ?>
|
<?php do_action('tailpress_header'); ?>
|
||||||
|
|
||||||
<header id="primary-header">
|
<!-- <header id="primary-header">
|
||||||
<!-- <span>陠</span> -->
|
|
||||||
<div class="primary-menu-container">
|
<div class="primary-menu-container">
|
||||||
<div class="lg:flex lg:justify-between lg:items-center py-6">
|
<div class="lg:flex lg:justify-between lg:items-center py-6">
|
||||||
<div class="flex justify-between items-center">
|
<div class="flex justify-between items-center">
|
||||||
<div>
|
<div>
|
||||||
<?php if (has_custom_logo()) { ?>
|
<?php if (has_custom_logo()) { ?>
|
||||||
<?php the_custom_logo(); ?>
|
<?php the_custom_logo(); ?>
|
||||||
<?php } else { ?>
|
<?php } else { ?>
|
||||||
<a href="<?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
|
<a href="<?php echo get_bloginfo('url'); ?>" class="font-extrabold text-lg uppercase">
|
||||||
<?php echo get_bloginfo('name'); ?>
|
<?php echo get_bloginfo('name'); ?>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<p class="text-sm font-light text-gray-600">
|
<p class="text-sm font-light text-gray-600">
|
||||||
<?php echo get_bloginfo('description'); ?>
|
<?php echo get_bloginfo('description'); ?>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -66,14 +67,88 @@
|
||||||
<img class="close_btn" src="<?php echo get_template_directory_uri() . '/resources/img/close_menu_icon.svg' ?>" />
|
<img class="close_btn" src="<?php echo get_template_directory_uri() . '/resources/img/close_menu_icon.svg' ?>" />
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</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');
|
add_action('admin_menu', 'custom_menu_page_removing');
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// ##### Removes from admin bar
|
// ##### Removes from admin bar
|
||||||
function mytheme_admin_bar_render()
|
function mytheme_admin_bar_render()
|
||||||
{
|
{
|
||||||
|
|
@ -26,3 +24,18 @@ function mytheme_admin_bar_render()
|
||||||
$wp_admin_bar->remove_menu('comments');
|
$wp_admin_bar->remove_menu('comments');
|
||||||
}
|
}
|
||||||
add_action('wp_before_admin_bar_render', 'mytheme_admin_bar_render');
|
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',
|
'slug' => 'client-blocks',
|
||||||
'title' => __('Mon titre ', 'client-blocks'),
|
'title' => 'Client Generic Blocks ',
|
||||||
'icon' => 'heart',
|
'icon' => 'heart',
|
||||||
],
|
],
|
||||||
|
[
|
||||||
|
'slug' => 'client-pages',
|
||||||
|
'title' => 'Client Specific Page Blocks ',
|
||||||
|
'icon' => 'admin-page',
|
||||||
|
],
|
||||||
],
|
],
|
||||||
$categories
|
$categories
|
||||||
);
|
);
|
||||||
|
|
@ -25,29 +30,29 @@ function acf_custom_client_blocks_init()
|
||||||
{
|
{
|
||||||
if (function_exists('acf_register_block_type')) {
|
if (function_exists('acf_register_block_type')) {
|
||||||
|
|
||||||
// ##### Home 🡒 Hero Section
|
// // ##### Home 🡒 Hero Section
|
||||||
acf_register_block_type(array(
|
// acf_register_block_type(array(
|
||||||
'name' => 'home_header',
|
// 'name' => 'home_header',
|
||||||
'title' => __("Home — Section d'accueil"),
|
// 'title' => __("Home — Section d'accueil"),
|
||||||
'description' => __("Brique pour la section d'acccueil"),
|
// 'description' => __("Brique pour la section d'acccueil"),
|
||||||
'render_template' => 'template-blocks/home/home_header/home_header.php',
|
// 'render_template' => 'template-blocks/home/home_header/home_header.php',
|
||||||
'category' => 'client_blocks',
|
// 'category' => 'client-blocks',
|
||||||
'multiple' => false,
|
// 'multiple' => false,
|
||||||
'mode' => 'auto',
|
// 'mode' => 'auto',
|
||||||
'align' => 'full',
|
// 'align' => 'full',
|
||||||
'icon' => 'schedule',
|
// 'icon' => 'schedule',
|
||||||
'supports' => array(
|
// 'supports' => array(
|
||||||
'multiple' => false,
|
// 'multiple' => false,
|
||||||
'align' => ['full'],
|
// 'align' => ['full'],
|
||||||
'jsx' => true
|
// 'jsx' => true
|
||||||
),
|
// ),
|
||||||
// 'enqueue_style' => get_template_directory_uri() . '/template-parts/blocks/testimonial/testimonial.css',
|
// // '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_script' => get_template_directory_uri() . '/template-parts/blocks/testimonial/testimonial.js',
|
||||||
// 'enqueue_assets' => function(){
|
// // 'enqueue_assets' => function(){
|
||||||
// wp_enqueue_script( 'latest_articles_js', get_stylesheet_directory_uri() . '/template-parts/blocks/home/latest_articles/latest_articles.js');
|
// // wp_enqueue_script( 'latest_articles_js', get_stylesheet_directory_uri() . '/template-parts/blocks/home/latest_articles/latest_articles.js');
|
||||||
// },
|
// // },
|
||||||
|
|
||||||
));
|
// ));
|
||||||
|
|
||||||
// ##### Home 🡒 Latest Articles
|
// ##### Home 🡒 Latest Articles
|
||||||
acf_register_block_type(array(
|
acf_register_block_type(array(
|
||||||
|
|
@ -55,7 +60,7 @@ function acf_custom_client_blocks_init()
|
||||||
'title' => __("Derniers Articles"),
|
'title' => __("Derniers Articles"),
|
||||||
'description' => __("Brique pour afficher les derniers articles publiés sur le site"),
|
'description' => __("Brique pour afficher les derniers articles publiés sur le site"),
|
||||||
'render_template' => 'template-blocks/generics/latest-post-query.php',
|
'render_template' => 'template-blocks/generics/latest-post-query.php',
|
||||||
'category' => 'client_blocks',
|
'category' => 'client-blocks',
|
||||||
'multiple' => false,
|
'multiple' => false,
|
||||||
'mode' => 'auto',
|
'mode' => 'auto',
|
||||||
'align' => 'wide',
|
'align' => 'wide',
|
||||||
|
|
@ -72,6 +77,21 @@ function acf_custom_client_blocks_init()
|
||||||
add_action('acf/init', '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
|
// ##### 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() {
|
function menuInit() {
|
||||||
let main_navigation = document.querySelector("#primary-menu");
|
let main_navigation = document.querySelector("#primary-menu");
|
||||||
const header = document.querySelector("#primary-header");
|
const header = document.querySelector("#primary-header");
|
||||||
const close = header.querySelector(".close_btn");
|
const primary_menu = header.querySelector("#primary-menu");
|
||||||
console.log(close);
|
const burgerMenuToggle = header.querySelector("#burger-menu-toggle");
|
||||||
document.querySelector("#primary-menu-toggle").addEventListener("click", function(e) {
|
const submenuToggles = primary_menu.querySelectorAll(".menu-item-submenu-toggle");
|
||||||
|
burgerMenuToggle.addEventListener("click", function(e) {
|
||||||
e.preventDefault();
|
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) {
|
document.addEventListener("focusin", (e) => {
|
||||||
e.preventDefault();
|
const header2 = document.querySelector("#primary-header");
|
||||||
header.classList.toggle("burger_menu_active");
|
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-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-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-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",
|
"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-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-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-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",
|
"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-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-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-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",
|
"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\"",
|
"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: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: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=\"./\"",
|
"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\""
|
"watch-sync": "cross-env NODE_ENV=development concurrently \"npm run browser-sync\" \"npm run watch\""
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,22 @@
|
||||||
@import "tailwindcss/base";
|
@import 'tailwindcss/base';
|
||||||
@import "tailwindcss/components";
|
@import 'tailwindcss/components';
|
||||||
@import "tailwindcss/utilities";
|
@import 'tailwindcss/utilities';
|
||||||
|
|
||||||
@import "custom.css";
|
@import 'custom.css';
|
||||||
|
|
||||||
/* ########### GENERAL ############ */
|
/* ########### BASE ############ */
|
||||||
@import "typography.css";
|
@import './base/typography.css';
|
||||||
|
|
||||||
/* ########### COMPONENTS ############ */
|
/* ########### COMPONENTS ############ */
|
||||||
@import "components/header.css";
|
@import './components/cta.css';
|
||||||
@import "components/cta.css";
|
|
||||||
@import "components/section.css";
|
|
||||||
@import "components/footer.css";
|
|
||||||
|
|
||||||
|
|
||||||
|
/* ########### LAYOUT ############ */
|
||||||
|
@import './layout/nav.css';
|
||||||
|
@import './layout/footer.css';
|
||||||
|
@import './layout/section.css';
|
||||||
|
@import './layout/gutenberg.css';
|
||||||
|
|
||||||
/* ########### BLOCKS ############ */
|
/* ########### BLOCKS ############ */
|
||||||
|
|
||||||
/* Home */
|
/* Home */
|
||||||
@import "../../template-blocks/home/home_header.css";
|
@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() {
|
export default function menuInit() {
|
||||||
let main_navigation = document.querySelector('#primary-menu');
|
let main_navigation =
|
||||||
const header = document.querySelector('#primary-header');
|
document.querySelector('#primary-menu');
|
||||||
const close = header.querySelector('.close_btn');
|
const header = document.querySelector('#primary-header');
|
||||||
console.log(close)
|
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) {
|
// #### Open/close burger nav
|
||||||
e.preventDefault();
|
burgerMenuToggle.addEventListener('click', function (e) {
|
||||||
// main_navigation.classList.toggle('hidden');
|
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) {
|
// #### Close nav when reaching the end of the menu with tab
|
||||||
e.preventDefault();
|
document.addEventListener(
|
||||||
// main_navigation.classList.toggle('hidden');
|
'focusin',
|
||||||
header.classList.toggle('burger_menu_active');
|
(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"
|
"wideSize": "1280px"
|
||||||
},
|
},
|
||||||
"color": {
|
"color": {
|
||||||
|
"defaultPalette": false,
|
||||||
|
"custom": false,
|
||||||
"palette": [
|
"palette": [
|
||||||
{
|
{
|
||||||
"name": "Primary",
|
"name": "Primary",
|
||||||
"slug": "primary",
|
"slug": "primary",
|
||||||
"color": "#0EA5E9"
|
"color": "#404F8E"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Secondary",
|
"name": "Secondary",
|
||||||
|
|
@ -64,4 +66,4 @@
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user