diff --git a/docker/wp-init.sh b/docker/wp-init.sh index db81a4b..6729abb 100644 --- a/docker/wp-init.sh +++ b/docker/wp-init.sh @@ -38,3 +38,12 @@ fi echo "[wpcli] Activating Query Monitor plugin..." wp plugin activate query-monitor --path=/var/www/html + +echo "[wpcli] Activating Gustavo Portfolio Core dependencies..." +wp plugin activate fluentform fluent-crm fluent-smtp --path=/var/www/html + +echo "[wpcli] Activating Gustavo Portfolio Core plugin..." +wp plugin activate gustavoo-portfolio-core --path=/var/www/html + +echo "[wpcli] Activating Gustavo Portfolio theme..." +wp theme activate gustavoo-portfolio --path=/var/www/html diff --git a/wp-content/themes/gustavoo-portfolio/assets/css/main.css b/wp-content/themes/gustavoo-portfolio/assets/css/main.css index 15ec04b..4180565 100644 --- a/wp-content/themes/gustavoo-portfolio/assets/css/main.css +++ b/wp-content/themes/gustavoo-portfolio/assets/css/main.css @@ -2684,6 +2684,79 @@ p:last-child { .menu-drawer-close { display: none; } +.header-search { + position: relative; + flex: 0 0 auto; +} + +.header-search__toggle { + display: flex; + width: 42px; + height: 42px; + align-items: center; + justify-content: center; + color: var(--color-text); + background: rgba(255, 255, 255, 0.035); + border: 1px solid var(--color-line-soft); + border-radius: 12px; +} + +.header-search__toggle:hover, +.header-search__toggle[aria-expanded="true"] { + color: var(--color-brand-strong); + border-color: var(--color-brand); +} + +.header-search__panel { + position: absolute; + top: calc(100% + 10px); + right: 0; + z-index: 60; + display: flex; + width: 400px; + align-items: center; + gap: 8px; + padding: 12px; + background: var(--color-bg-alt); + border: 1px solid var(--color-line-soft); + border-radius: 12px; + box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); +} + +.header-search__panel[hidden] { display: none; } +.header-search__panel .search-form { flex: 1; } + +.header-search__close { + display: none; + width: 34px; + height: 34px; + flex: 0 0 auto; + align-items: center; + justify-content: center; + color: var(--color-text-soft); + background: transparent; + border: none; +} + +@media (max-width: 920px) { + .header-search__panel { + position: fixed; + top: var(--header-height); + right: 0; + left: 0; + z-index: 1002; + width: auto; + padding: 14px var(--gutter); + border-radius: 0; + border-width: 0 0 1px; + } + + .header-search__close { display: flex; } + + .header-search__panel .search-form__submit span:not([aria-hidden]) { display: none; } + .header-search__panel .search-form__submit { min-width: 44px; padding: 10px; } +} + /* * WordPress inserts its native Customizer shortcut just outside the left edge * of a partial by default. The preview iframe clips that area behind the @@ -3863,7 +3936,7 @@ a.entry-category-badge:hover { color: #052b28; background: var(--color-brand-str .latest-news-card__excerpt { color: var(--color-text-soft); } .latest-news-list { - width: min(100%, 720px); + width: min(100%, 1080px); margin-top: clamp(64px, 8vw, 100px); } @@ -3884,14 +3957,14 @@ a.entry-category-badge:hover { color: #052b28; background: var(--color-brand-str border-radius: 4px; } -.latest-news-list__items { display: grid; gap: 28px; } +.latest-news-list__items { display: grid; gap: 40px; } .latest-news-list__item { display: grid; min-width: 0; align-items: center; - gap: 17px; - grid-template-columns: 120px minmax(0, 1fr); + gap: 28px; + grid-template-columns: 340px minmax(0, 1fr); } .latest-news-list__image { @@ -3910,23 +3983,24 @@ a.entry-category-badge:hover { color: #052b28; background: var(--color-brand-str } .latest-news-list__item:hover .latest-news-list__image img { transform: scale(1.05); } -.latest-news-list__body .latest-news-card__category { margin-bottom: 8px; } +.latest-news-list__body .latest-news-card__category { margin-bottom: 14px; font-size: 0.95rem; } .latest-news-list__body h3 { - margin: 0 0 7px; + margin: 0 0 14px; color: var(--color-text); - font-size: clamp(0.94rem, 1.4vw, 1.08rem); - line-height: 1.28; + font-size: clamp(1.5rem, 2.6vw, 2.1rem); + line-height: 1.24; } .latest-news-list__body h3 a { color: inherit; text-decoration: none; } .latest-news-list__body h3 a:hover { color: var(--color-brand-strong); } -.latest-news-list__body time { color: var(--color-text-muted); font-size: 0.76rem; } +.latest-news-list__body time { color: var(--color-text-muted); font-size: 1rem; } -@media (max-width: 560px) { +@media (max-width: 760px) { .latest-news-list { margin-top: 58px; } .latest-news-list__heading { margin-bottom: 28px; } - .latest-news-list__item { gap: 13px; grid-template-columns: 92px minmax(0, 1fr); } + .latest-news-list__item { gap: 16px; grid-template-columns: 1fr; } + .latest-news-list__body h3 { font-size: clamp(1.2rem, 5vw, 1.5rem); } } /* Editorial page header order: site header, categories, then page heading. */ diff --git a/wp-content/themes/gustavoo-portfolio/assets/js/navigation.js b/wp-content/themes/gustavoo-portfolio/assets/js/navigation.js index da56876..369295b 100644 --- a/wp-content/themes/gustavoo-portfolio/assets/js/navigation.js +++ b/wp-content/themes/gustavoo-portfolio/assets/js/navigation.js @@ -177,6 +177,62 @@ desktopQuery.addEventListener("change", handleDesktop); } + const searchToggle = document.querySelector(".header-search__toggle"); + const searchPanel = document.querySelector(".header-search__panel"); + + if (searchToggle && searchPanel) { + const searchClose = searchPanel.querySelector(".header-search__close"); + const searchField = searchPanel.querySelector(".search-form__field, .search-field"); + + const closeSearch = (restoreFocus) => { + searchToggle.setAttribute("aria-expanded", "false"); + searchPanel.hidden = true; + + if (restoreFocus) { + searchToggle.focus(); + } + }; + + const openSearch = () => { + searchToggle.setAttribute("aria-expanded", "true"); + searchPanel.hidden = false; + + if (searchField) { + window.requestAnimationFrame(() => searchField.focus()); + } + }; + + searchToggle.addEventListener("click", function () { + if (searchToggle.getAttribute("aria-expanded") === "true") { + closeSearch(false); + } else { + openSearch(); + } + }); + + if (searchClose) { + searchClose.addEventListener("click", function () { + closeSearch(true); + }); + } + + document.addEventListener("click", function (event) { + if (searchToggle.getAttribute("aria-expanded") !== "true") { + return; + } + + if (!event.target.closest(".header-search")) { + closeSearch(false); + } + }); + + document.addEventListener("keydown", function (event) { + if (event.key === "Escape" && searchToggle.getAttribute("aria-expanded") === "true") { + closeSearch(true); + } + }); + } + if (window.location.hash.length > 1) { const hashId = decodeURIComponent(window.location.hash.slice(1)); const hashTarget = document.getElementById(hashId); diff --git a/wp-content/themes/gustavoo-portfolio/header.php b/wp-content/themes/gustavoo-portfolio/header.php index db8b3c2..2cfdfb4 100644 --- a/wp-content/themes/gustavoo-portfolio/header.php +++ b/wp-content/themes/gustavoo-portfolio/header.php @@ -61,6 +61,20 @@ $gustavoo_primary_shortcut_attr = is_customize_preview() ? ' data-customize-part + +