добавлен хедер и футер

This commit is contained in:
2026-05-03 14:05:09 +03:00
parent 1b33bae871
commit f62eece199
6 changed files with 613 additions and 2 deletions

View File

@@ -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;
}
}

View File

@@ -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;
}
}

View File

@@ -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 });
})();

View File

@@ -59,6 +59,42 @@ if ( ! function_exists( 'twentytwentyfive_enqueue_styles' ) ) :
endif; endif;
add_action( 'wp_enqueue_scripts', 'twentytwentyfive_enqueue_styles' ); 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. // Registers custom block styles.
if ( ! function_exists( 'twentytwentyfive_block_styles' ) ) : if ( ! function_exists( 'twentytwentyfive_block_styles' ) ) :
/** /**

View File

@@ -1 +1,50 @@
<!-- wp:pattern {"slug":"twentytwentyfive/footer"} /--> <!-- wp:html -->
<footer class="site-footer">
<div class="site-footer__container">
<div class="site-footer__grid">
<div class="site-footer__col">
<h3 class="site-footer__title">Sevastopol Tort</h3>
<p class="site-footer__text">Авторские торты на заказ в Севастополе с доставкой по городу.</p>
</div>
<div class="site-footer__col">
<h3 class="site-footer__title">Навигация</h3>
<ul class="site-footer__list">
<li class="site-footer__item"><a class="site-footer__link" href="/">Главная</a></li>
<li class="site-footer__item"><a class="site-footer__link" href="/torty-na-zakaz/">Торты на заказ</a></li>
<li class="site-footer__item"><a class="site-footer__link" href="/portfolio/">Портфолио</a></li>
<li class="site-footer__item"><a class="site-footer__link" href="/faq/">FAQ</a></li>
<li class="site-footer__item"><a class="site-footer__link" href="/kontakty/">Контакты</a></li>
</ul>
</div>
<div class="site-footer__col">
<h3 class="site-footer__title">Категории тортов</h3>
<ul class="site-footer__list">
<li class="site-footer__item"><a class="site-footer__link" href="/bento/">Бенто</a></li>
<li class="site-footer__item"><a class="site-footer__link" href="/detskie/">Детские</a></li>
<li class="site-footer__item"><a class="site-footer__link" href="/svadebnye/">Свадебные</a></li>
<li class="site-footer__item"><a class="site-footer__link" href="/korporativnye/">Корпоративные</a></li>
<li class="site-footer__item"><a class="site-footer__link" href="/na-den-rozhdeniya/">На день рождения</a></li>
</ul>
</div>
<div class="site-footer__col">
<h3 class="site-footer__title">Контакты</h3>
<ul class="site-footer__list">
<li class="site-footer__item"><a class="site-footer__link" href="tel:+79780000000">+7 (978) 000-00-00</a></li>
<li class="site-footer__item"><a class="site-footer__link" href="https://wa.me/79780000000" target="_blank" rel="noopener noreferrer">WhatsApp</a></li>
<li class="site-footer__item"><a class="site-footer__link" href="https://t.me/sevastopol_tort" target="_blank" rel="noopener noreferrer">Telegram</a></li>
<li class="site-footer__item">г. Севастополь, ул. Примерная, 10</li>
<li class="site-footer__item">Ежедневно: 09:00 - 20:00</li>
</ul>
</div>
</div>
<div class="site-footer__bottom">
<p class="site-footer__copy">© 2026 Sevastopol Tort. Все права защищены.</p>
<a class="site-footer__policy" href="/politika-konfidencialnosti/">Политика конфиденциальности</a>
</div>
</div>
</footer>
<!-- /wp:html -->

View File

@@ -1 +1,76 @@
<!-- wp:pattern {"slug":"twentytwentyfive/header"} /--> <!-- wp:html -->
<header class="site-header" data-site-header>
<div class="site-header__top">
<div class="site-header__container site-header__container--top">
<p class="site-header__tagline">Торт на заказ в Севастополе - доставка и самовывоз</p>
<a class="site-header__phone" href="tel:+79780000000">+7 (978) 000-00-00</a>
</div>
</div>
<div class="site-header__main">
<div class="site-header__container site-header__container--main">
<a class="site-header__logo" href="/" aria-label="На главную">
<span class="site-header__logo-mark">ST</span>
<span class="site-header__logo-text">Sevastopol Tort</span>
</a>
<nav class="site-header__nav" aria-label="Основная навигация">
<ul class="site-header__menu">
<li class="site-header__menu-item"><a class="site-header__menu-link" href="/">Главная</a></li>
<li class="site-header__menu-item"><a class="site-header__menu-link" href="/torty-na-zakaz/">Торты на заказ</a></li>
<li class="site-header__menu-item"><a class="site-header__menu-link" href="/bento/">Бенто</a></li>
<li class="site-header__menu-item"><a class="site-header__menu-link" href="/detskie/">Детские</a></li>
<li class="site-header__menu-item"><a class="site-header__menu-link" href="/svadebnye/">Свадебные</a></li>
<li class="site-header__menu-item"><a class="site-header__menu-link" href="/nachinki/">Начинки</a></li>
<li class="site-header__menu-item"><a class="site-header__menu-link" href="/ceny/">Цены</a></li>
<li class="site-header__menu-item"><a class="site-header__menu-link" href="/dostavka-i-oplata/">Доставка и оплата</a></li>
<li class="site-header__menu-item"><a class="site-header__menu-link" href="/otzyvy/">Отзывы</a></li>
<li class="site-header__menu-item"><a class="site-header__menu-link" href="/kontakty/">Контакты</a></li>
</ul>
</nav>
<div class="site-header__actions">
<a class="site-header__messenger" href="https://wa.me/79780000000" target="_blank" rel="noopener noreferrer">WhatsApp</a>
<a class="site-header__cta" href="/torty-na-zakaz/">Заказать торт</a>
</div>
<button class="site-header__burger" type="button" aria-label="Открыть меню" aria-expanded="false" data-menu-toggle>
<span class="site-header__burger-line"></span>
<span class="site-header__burger-line"></span>
<span class="site-header__burger-line"></span>
</button>
</div>
</div>
<div class="mobile-menu" data-mobile-menu aria-hidden="true">
<div class="mobile-menu__overlay" data-menu-close></div>
<div class="mobile-menu__panel" role="dialog" aria-modal="true" aria-label="Мобильное меню">
<div class="mobile-menu__header">
<p class="mobile-menu__title">Меню</p>
<button class="mobile-menu__close" type="button" aria-label="Закрыть меню" data-menu-close>&times;</button>
</div>
<nav class="mobile-menu__nav" aria-label="Мобильная навигация">
<a class="mobile-menu__link" href="/">Главная</a>
<a class="mobile-menu__link" href="/torty-na-zakaz/">Торты на заказ</a>
<a class="mobile-menu__link" href="/bento/">Бенто</a>
<a class="mobile-menu__link" href="/detskie/">Детские</a>
<a class="mobile-menu__link" href="/svadebnye/">Свадебные</a>
<a class="mobile-menu__link" href="/korporativnye/">Корпоративные</a>
<a class="mobile-menu__link" href="/na-den-rozhdeniya/">На день рождения</a>
<a class="mobile-menu__link" href="/nachinki/">Начинки</a>
<a class="mobile-menu__link" href="/ceny/">Цены</a>
<a class="mobile-menu__link" href="/dostavka-i-oplata/">Доставка и оплата</a>
<a class="mobile-menu__link" href="/portfolio/">Портфолио</a>
<a class="mobile-menu__link" href="/otzyvy/">Отзывы</a>
<a class="mobile-menu__link" href="/faq/">FAQ</a>
<a class="mobile-menu__link" href="/kontakty/">Контакты</a>
</nav>
<div class="mobile-menu__contacts">
<a class="mobile-menu__contact" href="tel:+79780000000">+7 (978) 000-00-00</a>
<a class="mobile-menu__contact" href="https://wa.me/79780000000" target="_blank" rel="noopener noreferrer">WhatsApp</a>
<a class="mobile-menu__contact" href="https://t.me/sevastopol_tort" target="_blank" rel="noopener noreferrer">Telegram</a>
</div>
</div>
</div>
</header>
<!-- /wp:html -->