diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..cfa5269 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,6 @@ +{ + "tabWidth": 2, + "semi": true, + "singleQuote": true, + "printWidth": 60 +} \ No newline at end of file diff --git a/README.MD b/README.MD index 7ed287b..478fe3f 100644 --- a/README.MD +++ b/README.MD @@ -1 +1,3 @@ -A custom Startter Theme made by Deligraph based on Tailpress \ No newline at end of file +A custom Theme made by Deligraph using Tailwind and Laravel Mix + +https://deligraph.com/ \ No newline at end of file diff --git a/css/app.css b/css/app.css index 0d08452..c66488a 100644 --- a/css/app.css +++ b/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; @@ -951,12 +1311,12 @@ article>*:not(.entry-content), text-decoration-line: none; } -.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 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 { 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 */ diff --git a/css/editor-style.css b/css/editor-style.css index ff70fcb..e3c6102 100644 --- a/css/editor-style.css +++ b/css/editor-style.css @@ -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) { diff --git a/css/login-style.css b/css/login-style.css new file mode 100644 index 0000000..b8ac9a5 --- /dev/null +++ b/css/login-style.css @@ -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; */ +} diff --git a/footer.php b/footer.php index ec72b58..2a59a43 100644 --- a/footer.php +++ b/footer.php @@ -1,9 +1,7 @@ - - @@ -20,4 +18,5 @@ - + + \ No newline at end of file diff --git a/functions.php b/functions.php index 261f48b..f3b9089 100644 --- a/functions.php +++ b/functions.php @@ -1,138 +1,13 @@ __('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'); \ No newline at end of file diff --git a/header.php b/header.php index 398ae8b..dfc81aa 100644 --- a/header.php +++ b/header.php @@ -10,30 +10,31 @@ -> + + - - -
+
-
- + + +
+ +
+ + + + + + +
+
-
- - + - + -
\ No newline at end of file + + +
\ No newline at end of file diff --git a/includes/admin.php b/includes/admin.php index b2a9538..969ded5 100644 --- a/includes/admin.php +++ b/includes/admin.php @@ -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'); diff --git a/includes/blocks.php b/includes/blocks.php index 0016999..8935dd9 100755 --- a/includes/blocks.php +++ b/includes/blocks.php @@ -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 diff --git a/includes/init.php b/includes/init.php new file mode 100644 index 0000000..2537ba6 --- /dev/null +++ b/includes/init.php @@ -0,0 +1,159 @@ + __('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 +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 = ''; + } + 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); diff --git a/includes/navwalker.php b/includes/navwalker.php new file mode 100644 index 0000000..7b9bdb0 --- /dev/null +++ b/includes/navwalker.php @@ -0,0 +1,28 @@ +"; + + } + + function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) + { + + $output .= "
  • I like pie" . $item->title; + + // var_dump($args); + } + + function end_el(&$output, $item, $depth = 0, $args = null) + { + $output .= "...
    • "; + } + +} \ No newline at end of file diff --git a/includes/nawalker_fction.php b/includes/nawalker_fction.php new file mode 100644 index 0000000..bc81875 --- /dev/null +++ b/includes/nawalker_fction.php @@ -0,0 +1,106 @@ +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 = ''; + } + + // #### MENU HOMEGRADE FOOTER + if ($args->theme_location === "homegrade" && $args->menu_class === "menu-homegrade-footer" && in_array('menu-item-has-children', $item->classes, true)) { + $output = '
    ' . $item->title . '
    '; + } + + + + 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 = ''; + } + + // #### ICONE DE PAGE FOR TOP LEVEL MENU ITEMS + if (isset($page_icon)) { + $icon = ''; + $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 = '    '; + $output .= ''; + $output .= '
    ' . $item->title . "
    "; + $output .= '

    ' . $term->description . "

    "; + $output .= "    "; + } + } + + 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); \ No newline at end of file diff --git a/includes/widget.php b/includes/widget.php new file mode 100644 index 0000000..986ff3f --- /dev/null +++ b/includes/widget.php @@ -0,0 +1,13 @@ + 'Experts', + 'id' => 'widget_nos_experts', + 'description' => 'Add widgets here.', + // 'before_widget' => '
    ', + // 'after_widget' => '
    ', + // 'before_title' => '

    ', + // 'after_title' => '

    ', + ), +); diff --git a/js/app.js b/js/app.js index 20cf191..2a126a9 100644 --- a/js/app.js +++ b/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"); + }); }); } diff --git a/package.json b/package.json index 6c59290..26b9388 100644 --- a/package.json +++ b/package.json @@ -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\"" }, diff --git a/resources/css/app.css b/resources/css/app.css index 07d9657..518d0f0 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -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'; diff --git a/resources/css/typography.css b/resources/css/base/typography.css similarity index 100% rename from resources/css/typography.css rename to resources/css/base/typography.css diff --git a/resources/css/components/header.css b/resources/css/components/header.css deleted file mode 100644 index 76a37aa..0000000 --- a/resources/css/components/header.css +++ /dev/null @@ -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; - } - } - } -} diff --git a/resources/css/custom.css b/resources/css/custom.css index 87420f5..e69de29 100644 --- a/resources/css/custom.css +++ b/resources/css/custom.css @@ -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; - } - } -} \ No newline at end of file diff --git a/resources/css/components/footer.css b/resources/css/layout/footer.css similarity index 100% rename from resources/css/components/footer.css rename to resources/css/layout/footer.css diff --git a/resources/css/layout/gutenberg.css b/resources/css/layout/gutenberg.css new file mode 100644 index 0000000..7fbba36 --- /dev/null +++ b/resources/css/layout/gutenberg.css @@ -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; + } + } +} diff --git a/resources/css/layout/nav.css b/resources/css/layout/nav.css new file mode 100644 index 0000000..60e4fd3 --- /dev/null +++ b/resources/css/layout/nav.css @@ -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 */; + } + } +} diff --git a/resources/css/components/section.css b/resources/css/layout/section.css similarity index 100% rename from resources/css/components/section.css rename to resources/css/layout/section.css diff --git a/resources/css/login-style.css b/resources/css/login-style.css new file mode 100644 index 0000000..37c524a --- /dev/null +++ b/resources/css/login-style.css @@ -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; */ +} diff --git a/resources/js/header.js b/resources/js/header.js index f430848..a4ecc72 100644 --- a/resources/js/header.js +++ b/resources/js/header.js @@ -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'); - }); -} \ No newline at end of file + // #### 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'); + }); + }); +} diff --git a/screenshot.png b/screenshot.png index e97b68e..9a8954a 100644 Binary files a/screenshot.png and b/screenshot.png differ diff --git a/template-blocks/home/home-header/block.json b/template-blocks/home/home-header/block.json new file mode 100644 index 0000000..264a205 --- /dev/null +++ b/template-blocks/home/home-header/block.json @@ -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" + } +} \ No newline at end of file diff --git a/template-blocks/home/home_header.css b/template-blocks/home/home-header/home-header.css similarity index 100% rename from template-blocks/home/home_header.css rename to template-blocks/home/home-header/home-header.css diff --git a/template-blocks/home/home-header/home-header.php b/template-blocks/home/home-header/home-header.php new file mode 100755 index 0000000..a5eb089 --- /dev/null +++ b/template-blocks/home/home-header/home-header.php @@ -0,0 +1,18 @@ + + + +
    +
    +

    + +

    + + + + +
    + ' alt=''> +
    \ No newline at end of file diff --git a/template-blocks/home/home_header.php b/template-blocks/home/home_header.php deleted file mode 100755 index 3b225e8..0000000 --- a/template-blocks/home/home_header.php +++ /dev/null @@ -1,17 +0,0 @@ - - - - -

    - - -
    -
    - -

    -

    -
    -
    - diff --git a/theme.json b/theme.json index 0159146..75ffee6 100644 --- a/theme.json +++ b/theme.json @@ -6,11 +6,13 @@ "wideSize": "1280px" }, "color": { + "defaultPalette": false, + "custom": false, "palette": [ { "name": "Primary", "slug": "primary", - "color": "#0EA5E9" + "color": "#404F8E" }, { "name": "Secondary", @@ -64,4 +66,4 @@ ] } } -} +} \ No newline at end of file