ab
a69da34e3c
Zola-based single-page wedding site with all content (schedule, details, colors, images, RSVP link) managed via config.toml. Multi-day schedule layout, Blue & Green color palette, CSS custom properties for theming. Co-Authored-By: Claude <noreply@anthropic.com>
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>
|