78 lines
3.2 KiB
HTML
78 lines
3.2 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="ru">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|||
|
|
<title>{% block title %}{{ config.title }}{% endblock %}</title>
|
|||
|
|
<meta name="description" content="{{ config.description }}">
|
|||
|
|
<link rel="stylesheet" href="{{ get_url(path='style.css') }}">
|
|||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|||
|
|
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
|
|||
|
|
{% if config.extra.colors %}
|
|||
|
|
<style>
|
|||
|
|
:root {
|
|||
|
|
--color-primary: {{ config.extra.colors.primary }};
|
|||
|
|
--color-primary-light: {{ config.extra.colors.primary_light }};
|
|||
|
|
--color-accent: {{ config.extra.colors.accent }};
|
|||
|
|
--color-text: {{ config.extra.colors.text }};
|
|||
|
|
--color-text-light: {{ config.extra.colors.text_light }};
|
|||
|
|
--color-bg: {{ config.extra.colors.background }};
|
|||
|
|
--color-bg-alt: {{ config.extra.colors.background_alt }};
|
|||
|
|
--color-white: {{ config.extra.colors.white }};
|
|||
|
|
--color-border: {{ config.extra.colors.border }};
|
|||
|
|
--hero-gradient: {{ config.extra.colors.hero_gradient }};
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
{% endif %}
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<nav class="nav" id="nav">
|
|||
|
|
<div class="nav__inner">
|
|||
|
|
<a href="{{ get_url(path='@/_index.md') }}" class="nav__logo">{{ config.extra.bride }} & {{ config.extra.groom }}</a>
|
|||
|
|
<button class="nav__toggle" aria-label="Меню" onclick="document.getElementById('nav').classList.toggle('nav--open')">
|
|||
|
|
<span></span><span></span><span></span>
|
|||
|
|
</button>
|
|||
|
|
<ul class="nav__links">
|
|||
|
|
<li><a href="#about">О нас</a></li>
|
|||
|
|
<li><a href="#schedule">Программа</a></li>
|
|||
|
|
<li><a href="#location">Место</a></li>
|
|||
|
|
<li><a href="#details">Детали</a></li>
|
|||
|
|
<li><a href="#rsvp">RSVP</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
{% block content %}{% endblock %}
|
|||
|
|
|
|||
|
|
<footer class="footer">
|
|||
|
|
<div class="container">
|
|||
|
|
<p class="footer__names">{{ config.extra.bride }} & {{ config.extra.groom }}</p>
|
|||
|
|
<p class="footer__date">{{ config.extra.wedding_date }}</p>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|||
|
|
anchor.addEventListener('click', function (e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|||
|
|
if (target) {
|
|||
|
|
target.scrollIntoView({ behavior: 'smooth' });
|
|||
|
|
document.getElementById('nav').classList.remove('nav--open');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
window.addEventListener('scroll', () => {
|
|||
|
|
const nav = document.getElementById('nav');
|
|||
|
|
if (window.scrollY > 50) {
|
|||
|
|
nav.classList.add('nav--scrolled');
|
|||
|
|
} else {
|
|||
|
|
nav.classList.remove('nav--scrolled');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|