From f62eece199e9f85d5da96e83f20e1ddef7001645 Mon Sep 17 00:00:00 2001 From: "Anton.AE" Date: Sun, 3 May 2026 14:05:09 +0300 Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=20=D1=85=D0=B5=D0=B4=D0=B5=D1=80=20=D0=B8=20=D1=84=D1=83?= =?UTF-8?q?=D1=82=D0=B5=D1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../assets/css/components/footer.css | 88 +++++ .../assets/css/components/header.css | 305 ++++++++++++++++++ .../twentytwentyfive/assets/js/header.js | 58 ++++ .../themes/twentytwentyfive/functions.php | 36 +++ .../themes/twentytwentyfive/parts/footer.html | 51 ++- .../themes/twentytwentyfive/parts/header.html | 77 ++++- 6 files changed, 613 insertions(+), 2 deletions(-) create mode 100644 wp-content/themes/twentytwentyfive/assets/css/components/footer.css create mode 100644 wp-content/themes/twentytwentyfive/assets/css/components/header.css create mode 100644 wp-content/themes/twentytwentyfive/assets/js/header.js diff --git a/wp-content/themes/twentytwentyfive/assets/css/components/footer.css b/wp-content/themes/twentytwentyfive/assets/css/components/footer.css new file mode 100644 index 0000000..f380f36 --- /dev/null +++ b/wp-content/themes/twentytwentyfive/assets/css/components/footer.css @@ -0,0 +1,88 @@ +.site-footer { + border-top: 1px solid #e8d7c5; + background: linear-gradient(170deg, #fff8ef 0%, #f6ebe0 50%, #f1dfcf 100%); + margin-top: 56px; +} + +.site-footer__container { + width: min(1280px, calc(100% - 32px)); + margin-inline: auto; + padding: 54px 0 24px; +} + +.site-footer__grid { + display: flex; + flex-wrap: wrap; + gap: 30px 24px; +} + +.site-footer__col { + flex: 1 1 220px; +} + +.site-footer__title { + margin: 0 0 10px; + color: #2f2520; + font-size: 24px; + line-height: 1.1; + font-family: "Cormorant Garamond", Georgia, serif; +} + +.site-footer__text { + margin: 0; + color: #4f4038; + font-size: 14px; + line-height: 1.5; +} + +.site-footer__list { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 8px; + color: #4f4038; + font-size: 14px; +} + +.site-footer__link { + color: #4f4038; + text-decoration: none; + border-bottom: 1px solid transparent; +} + +.site-footer__link:hover, +.site-footer__link:focus-visible { + color: #8e311d; + border-color: #8e311d; +} + +.site-footer__bottom { + margin-top: 34px; + padding-top: 18px; + border-top: 1px dashed #cfb9a4; + display: flex; + flex-wrap: wrap; + gap: 8px 14px; + align-items: center; + justify-content: space-between; +} + +.site-footer__copy, +.site-footer__policy { + margin: 0; + color: #5f4c42; + font-size: 13px; + text-decoration: none; +} + +@media (max-width: 767px) { + .site-footer__container { + width: min(1280px, calc(100% - 20px)); + padding-top: 42px; + } + + .site-footer__grid { + gap: 24px; + } +} diff --git a/wp-content/themes/twentytwentyfive/assets/css/components/header.css b/wp-content/themes/twentytwentyfive/assets/css/components/header.css new file mode 100644 index 0000000..19c473d --- /dev/null +++ b/wp-content/themes/twentytwentyfive/assets/css/components/header.css @@ -0,0 +1,305 @@ +:root { + --st-bg: #f9f5ef; + --st-surface: #fffdf9; + --st-ink: #2f2520; + --st-accent: #b44b31; + --st-accent-strong: #8e311d; + --st-line: #e8d7c5; + --st-shadow: 0 18px 40px -24px rgba(47, 37, 32, 0.4); +} + +body { + background: radial-gradient(circle at 8% -16%, #f5ddc7 0%, var(--st-bg) 32%), var(--st-bg); + color: var(--st-ink); + font-family: "Manrope", "Segoe UI", sans-serif; +} + +.site-header { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 60; + backdrop-filter: blur(10px); + border-bottom: 1px solid transparent; + transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; +} + +.site-header--scrolled { + background: rgba(255, 253, 249, 0.94); + border-color: var(--st-line); + box-shadow: var(--st-shadow); +} + +.site-header__top { + border-bottom: 1px dashed var(--st-line); + background: rgba(255, 249, 242, 0.72); +} + +.site-header__container { + width: min(1280px, calc(100% - 32px)); + margin-inline: auto; + display: flex; + align-items: center; +} + +.site-header__container--top { + justify-content: space-between; + min-height: 42px; +} + +.site-header__container--main { + justify-content: space-between; + gap: 16px; + min-height: 82px; +} + +.site-header__tagline, +.site-header__phone { + margin: 0; + font-size: 13px; + line-height: 1.2; +} + +.site-header__phone { + color: var(--st-ink); + font-weight: 700; + text-decoration: none; +} + +.site-header__logo { + display: inline-flex; + align-items: center; + gap: 10px; + text-decoration: none; +} + +.site-header__logo-mark { + width: 44px; + height: 44px; + border-radius: 50%; + display: grid; + place-items: center; + background: linear-gradient(145deg, #e7b88c, #d98666); + color: #fff; + font-weight: 800; + letter-spacing: 0.08em; +} + +.site-header__logo-text { + color: var(--st-ink); + font-family: "Cormorant Garamond", Georgia, serif; + font-size: 29px; + line-height: 0.95; +} + +.site-header__nav { + flex: 1; +} + +.site-header__menu { + margin: 0; + padding: 0; + list-style: none; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 8px 14px; +} + +.site-header__menu-link { + display: inline-flex; + text-decoration: none; + color: var(--st-ink); + font-size: 14px; + font-weight: 600; + padding: 6px 2px; + border-bottom: 1px solid transparent; + transition: color 0.2s ease, border-color 0.2s ease; +} + +.site-header__menu-link:hover, +.site-header__menu-link:focus-visible { + color: var(--st-accent-strong); + border-color: var(--st-accent-strong); +} + +.site-header__actions { + display: inline-flex; + align-items: center; + gap: 10px; +} + +.site-header__messenger, +.site-header__cta { + text-decoration: none; + border-radius: 999px; + font-size: 13px; + font-weight: 700; + padding: 10px 14px; +} + +.site-header__messenger { + color: var(--st-ink); + border: 1px solid var(--st-line); + background: #fff; +} + +.site-header__cta { + color: #fff; + background: linear-gradient(135deg, var(--st-accent), var(--st-accent-strong)); + box-shadow: 0 10px 22px -14px rgba(180, 75, 49, 0.9); +} + +.site-header__burger { + display: none; + width: 42px; + height: 42px; + border: 0; + border-radius: 10px; + background: #fff; + padding: 0; + cursor: pointer; +} + +.site-header__burger-line { + display: block; + width: 20px; + height: 2px; + border-radius: 2px; + margin: 5px auto; + background: var(--st-ink); +} + +.mobile-menu { + position: fixed; + inset: 0; + opacity: 0; + visibility: hidden; + pointer-events: none; + transition: opacity 0.22s ease; +} + +.mobile-menu--open { + opacity: 1; + visibility: visible; + pointer-events: auto; +} + +.mobile-menu__overlay { + position: absolute; + inset: 0; + background: rgba(32, 21, 18, 0.56); +} + +.mobile-menu__panel { + position: relative; + z-index: 2; + height: 100%; + width: 100%; + background: linear-gradient(160deg, #fffdf9 0%, #f9efe4 100%); + padding: 26px 18px 30px; + display: flex; + flex-direction: column; +} + +.mobile-menu__header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 16px; +} + +.mobile-menu__title { + margin: 0; + font-size: 28px; + font-family: "Cormorant Garamond", Georgia, serif; +} + +.mobile-menu__close { + border: 0; + background: transparent; + font-size: 38px; + line-height: 1; + color: var(--st-ink); + padding: 0; +} + +.mobile-menu__nav { + display: flex; + flex-direction: column; + gap: 5px; +} + +.mobile-menu__link { + text-decoration: none; + color: var(--st-ink); + font-size: 22px; + font-family: "Cormorant Garamond", Georgia, serif; + border-bottom: 1px solid var(--st-line); + padding: 6px 0; +} + +.mobile-menu__contacts { + margin-top: auto; + padding-top: 16px; + border-top: 1px solid var(--st-line); + display: grid; + gap: 8px; +} + +.mobile-menu__contact { + color: var(--st-ink); + text-decoration: none; + font-size: 14px; + font-weight: 700; +} + +body.has-mobile-menu { + overflow: hidden; +} + +@media (max-width: 1180px) { + .site-header__nav, + .site-header__actions { + display: none; + } + + .site-header__burger { + display: block; + } +} + +@media (max-width: 767px) { + .site-header__top { + display: none; + } + + .site-header__container { + width: min(1280px, calc(100% - 20px)); + } + + .site-header__container--main { + min-height: 70px; + } + + .site-header__logo-mark { + width: 38px; + height: 38px; + } + + .site-header__logo-text { + font-size: 25px; + } +} + +.wp-site-blocks { + padding-top: 124px; +} + +@media (max-width: 767px) { + .wp-site-blocks { + padding-top: 70px; + } +} diff --git a/wp-content/themes/twentytwentyfive/assets/js/header.js b/wp-content/themes/twentytwentyfive/assets/js/header.js new file mode 100644 index 0000000..eb9c12f --- /dev/null +++ b/wp-content/themes/twentytwentyfive/assets/js/header.js @@ -0,0 +1,58 @@ +(function () { + var header = document.querySelector('[data-site-header]'); + var menu = document.querySelector('[data-mobile-menu]'); + var toggle = document.querySelector('[data-menu-toggle]'); + if (!header || !menu || !toggle) { + return; + } + + var closeNodes = menu.querySelectorAll('[data-menu-close]'); + var mobileLinks = menu.querySelectorAll('.mobile-menu__link'); + + function setScrollState() { + if (window.scrollY > 16) { + header.classList.add('site-header--scrolled'); + } else { + header.classList.remove('site-header--scrolled'); + } + } + + function openMenu() { + menu.classList.add('mobile-menu--open'); + menu.setAttribute('aria-hidden', 'false'); + toggle.setAttribute('aria-expanded', 'true'); + document.body.classList.add('has-mobile-menu'); + } + + function closeMenu() { + menu.classList.remove('mobile-menu--open'); + menu.setAttribute('aria-hidden', 'true'); + toggle.setAttribute('aria-expanded', 'false'); + document.body.classList.remove('has-mobile-menu'); + } + + toggle.addEventListener('click', function () { + if (menu.classList.contains('mobile-menu--open')) { + closeMenu(); + return; + } + openMenu(); + }); + + closeNodes.forEach(function (node) { + node.addEventListener('click', closeMenu); + }); + + mobileLinks.forEach(function (link) { + link.addEventListener('click', closeMenu); + }); + + document.addEventListener('keydown', function (event) { + if (event.key === 'Escape') { + closeMenu(); + } + }); + + setScrollState(); + window.addEventListener('scroll', setScrollState, { passive: true }); +})(); diff --git a/wp-content/themes/twentytwentyfive/functions.php b/wp-content/themes/twentytwentyfive/functions.php index 3805c48..f960108 100644 --- a/wp-content/themes/twentytwentyfive/functions.php +++ b/wp-content/themes/twentytwentyfive/functions.php @@ -59,6 +59,42 @@ if ( ! function_exists( 'twentytwentyfive_enqueue_styles' ) ) : endif; add_action( 'wp_enqueue_scripts', 'twentytwentyfive_enqueue_styles' ); +if ( ! function_exists( 'twentytwentyfive_enqueue_custom_layout_assets' ) ) : + /** + * Enqueues custom header/footer assets. + * + * @since Twenty Twenty-Five 1.0 + * + * @return void + */ + function twentytwentyfive_enqueue_custom_layout_assets() { + $version = wp_get_theme()->get( 'Version' ); + + wp_enqueue_style( + 'twentytwentyfive-custom-header', + get_parent_theme_file_uri( 'assets/css/components/header.css' ), + array( 'twentytwentyfive-style' ), + $version + ); + + wp_enqueue_style( + 'twentytwentyfive-custom-footer', + get_parent_theme_file_uri( 'assets/css/components/footer.css' ), + array( 'twentytwentyfive-style' ), + $version + ); + + wp_enqueue_script( + 'twentytwentyfive-custom-header', + get_parent_theme_file_uri( 'assets/js/header.js' ), + array(), + $version, + true + ); + } +endif; +add_action( 'wp_enqueue_scripts', 'twentytwentyfive_enqueue_custom_layout_assets' ); + // Registers custom block styles. if ( ! function_exists( 'twentytwentyfive_block_styles' ) ) : /** diff --git a/wp-content/themes/twentytwentyfive/parts/footer.html b/wp-content/themes/twentytwentyfive/parts/footer.html index c2ea07c..8bfe7e3 100644 --- a/wp-content/themes/twentytwentyfive/parts/footer.html +++ b/wp-content/themes/twentytwentyfive/parts/footer.html @@ -1 +1,50 @@ - + + + diff --git a/wp-content/themes/twentytwentyfive/parts/header.html b/wp-content/themes/twentytwentyfive/parts/header.html index 7e3e990..5779d09 100644 --- a/wp-content/themes/twentytwentyfive/parts/header.html +++ b/wp-content/themes/twentytwentyfive/parts/header.html @@ -1 +1,76 @@ - + +
+
+
+

Торт на заказ в Севастополе - доставка и самовывоз

+ +7 (978) 000-00-00 +
+
+ +
+
+ + + + +
+ WhatsApp + Заказать торт +
+ + +
+
+ + +
+