Phillip Tarrant
f5098c05f5
Phase 1 brand palette reused --c-sky for both the header background and
the word "Babies" inside the logo art, erasing it visually. Same class
of problem hit the contact page mailto callout.
- Split logo into chick mark + HTML site title so the wordmark colors
no longer need to coexist with the header surface. Generator gains
build_logo_mark_{png,webp} with a widest-gap column scan to crop.
- Header moves to --c-wheat; nav active state flips to ink pill with
cream text; muted Shop link reads as coming-soon (italic + dim +
not-allowed).
- Contact page mailto callout reskinned to ink/cream (strong CTA) and
form note shifts from pale sky-deep to ink at 70% opacity.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
125 lines
5.2 KiB
HTML
125 lines
5.2 KiB
HTML
{#
|
|
Base layout for every public page.
|
|
|
|
Child templates override the following blocks:
|
|
- title : the contents of <title>
|
|
- meta_description : contents of <meta name="description">
|
|
- content : the page body inside <main>
|
|
|
|
Design notes:
|
|
- Semantic landmarks (<header>, <nav>, <main>, <footer>) for a11y.
|
|
- Skip-link is the first focusable element so keyboard users can jump
|
|
past the header.
|
|
- aria-current="page" is applied to the active nav link by comparing
|
|
the `active_nav` context variable the route passed us.
|
|
- The mobile nav toggle uses addEventListener only — no inline event
|
|
handlers — so we stay CSP-nonce-compatible when Phase 6 adds the
|
|
strict CSP middleware.
|
|
#}<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{% block title %}Chicken Babies R Us{% endblock %}</title>
|
|
<meta name="description" content="{% block meta_description %}Small-farm fresh eggs and happy birds, raised in Morrison, Tennessee.{% endblock %}">
|
|
{# Self-hosted favicon + apple touch icon — no third-party CDNs. #}
|
|
<link rel="icon" href="{{ url_for('static', path='img/favicon.ico') }}" sizes="any">
|
|
<link rel="apple-touch-icon" href="{{ url_for('static', path='img/apple-touch-icon.png') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', path='css/site.css') }}">
|
|
</head>
|
|
<body>
|
|
{# Skip link: hidden until focused. First focusable element on the page. #}
|
|
<a class="skip-link" href="#main-content">Skip to main content</a>
|
|
|
|
<header class="site-header">
|
|
<div class="wrap site-header__wrap">
|
|
<a class="site-header__brand" href="/" aria-label="Chicken Babies R Us home">
|
|
{# Chick-only mark paired with the site title as styled text.
|
|
Decoupling the mark from the wordmark lets the header colors
|
|
change freely without the multi-colored logo text clashing. #}
|
|
<picture>
|
|
<source srcset="{{ url_for('static', path='img/logo-mark.webp') }}" type="image/webp">
|
|
<img src="{{ url_for('static', path='img/logo-mark.png') }}"
|
|
alt=""
|
|
height="56"
|
|
class="site-header__mark">
|
|
</picture>
|
|
<span class="site-header__title">Chicken Babies R Us</span>
|
|
</a>
|
|
|
|
{# The mobile toggle button — script below attaches a click handler
|
|
that flips aria-expanded and toggles .is-open on the nav. #}
|
|
<button type="button"
|
|
class="site-nav__toggle"
|
|
id="nav-toggle"
|
|
aria-controls="primary-nav"
|
|
aria-expanded="false">
|
|
<span class="visually-hidden">Toggle navigation</span>
|
|
<span class="site-nav__toggle-bar" aria-hidden="true"></span>
|
|
<span class="site-nav__toggle-bar" aria-hidden="true"></span>
|
|
<span class="site-nav__toggle-bar" aria-hidden="true"></span>
|
|
</button>
|
|
|
|
<nav class="site-nav" id="primary-nav" aria-label="Primary">
|
|
<ul class="site-nav__list">
|
|
<li class="site-nav__item">
|
|
<a href="/"
|
|
class="site-nav__link{% if active_nav == 'home' %} is-active{% endif %}"
|
|
{% if active_nav == 'home' %}aria-current="page"{% endif %}>Home</a>
|
|
</li>
|
|
<li class="site-nav__item">
|
|
<a href="/about"
|
|
class="site-nav__link{% if active_nav == 'about' %} is-active{% endif %}"
|
|
{% if active_nav == 'about' %}aria-current="page"{% endif %}>About</a>
|
|
</li>
|
|
<li class="site-nav__item">
|
|
<a href="/contact"
|
|
class="site-nav__link{% if active_nav == 'contact' %} is-active{% endif %}"
|
|
{% if active_nav == 'contact' %}aria-current="page"{% endif %}>Contact</a>
|
|
</li>
|
|
<li class="site-nav__item">
|
|
<a href="/shop"
|
|
class="site-nav__link nav--muted{% if active_nav == 'shop' %} is-active{% endif %}"
|
|
{% if active_nav == 'shop' %}aria-current="page"{% endif %}>Shop</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main-content" class="site-main" tabindex="-1">
|
|
<div class="wrap">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="wrap site-footer__wrap">
|
|
<p class="site-footer__tag">
|
|
Chicken Babies R Us · Morrison, Tennessee
|
|
</p>
|
|
<p class="site-footer__legal">
|
|
© {{ now_year or 2026 }} Chicken Babies R Us. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
{# Mobile nav toggle. Tiny and CSP-friendly: no inline handlers, no JS
|
|
framework. Phase 6's CSP will be compatible with moving this into an
|
|
external file + nonce if we grow; for now the inline block stays. #}
|
|
<script>
|
|
(function () {
|
|
"use strict";
|
|
var toggle = document.getElementById("nav-toggle");
|
|
var nav = document.getElementById("primary-nav");
|
|
if (!toggle || !nav) { return; }
|
|
toggle.addEventListener("click", function () {
|
|
var expanded = toggle.getAttribute("aria-expanded") === "true";
|
|
toggle.setAttribute("aria-expanded", expanded ? "false" : "true");
|
|
nav.classList.toggle("is-open");
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|