Initial import of Brookhaven site
This commit is contained in:
153
templates/base.html
Normal file
153
templates/base.html
Normal file
@@ -0,0 +1,153 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="h-full scroll-smooth">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>{% block title %}{{ brand }}{% endblock %}</title>
|
||||
<meta name="theme-color" content="#0f172a" />
|
||||
<link rel="icon" href="/static/favicon.ico" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
bh: {
|
||||
bg: "#0b1220", card: "#0f1a2b", ring: "#1f2b40",
|
||||
primary: "#0ea5e9", accent: "#34d399", glow: "#22d3ee",
|
||||
}
|
||||
},
|
||||
boxShadow: { glow: "0 0 0 3px rgba(52, 211, 153, .25), 0 0 40px rgba(14,165,233,.15)" }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
html, body { height: 100%; }
|
||||
body { display:flex; flex-direction:column; }
|
||||
main { flex:1; }
|
||||
.bg-grid {
|
||||
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0);
|
||||
background-size: 22px 22px;
|
||||
}
|
||||
.mask-fade {
|
||||
-webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
|
||||
mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
|
||||
}
|
||||
</style>
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body class="min-h-full bg-bh-bg text-white selection:bg-bh-accent/30">
|
||||
|
||||
<!-- Header -->
|
||||
<header class="sticky top-0 z-50 backdrop-blur bg-bh-bg/70 border-b border-bh-ring">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
||||
<!-- Brand -->
|
||||
<a href="{{ url_for('home') }}" class="flex items-center gap-3 group">
|
||||
<svg width="28" height="28" viewBox="0 0 32 32" class="shrink-0">
|
||||
<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#34d399"/><stop offset="100%" stop-color="#0ea5e9"/></linearGradient></defs>
|
||||
<rect x="2" y="2" width="28" height="28" rx="6" fill="url(#g)"/>
|
||||
<path d="M10 21V9h4.5a4 4 0 1 1 0 8H10zm4.2-6.5H13.6v3h.6a1.5 1.5 0 0 0 0-3Z" fill="#0b1220"/>
|
||||
</svg>
|
||||
<span class="font-semibold tracking-wide">BrookHaven <span class="text-bh-accent">by Benny's House</span></span>
|
||||
</a>
|
||||
|
||||
<!-- Desktop nav -->
|
||||
<nav class="hidden md:flex items-center gap-6 text-sm">
|
||||
<a href="{{ url_for('services') }}" class="hover:text-bh-accent">Services</a>
|
||||
<a href="{{ url_for('work') }}" class="hover:text-bh-accent">Work</a>
|
||||
<a href="{{ url_for('about') }}" class="hover:text-bh-accent">About</a>
|
||||
<a href="{{ url_for('contact') }}" class="hover:text-bh-accent">Contact</a>
|
||||
<a href="{{ url_for('contact') }}" class="ml-2 inline-flex items-center rounded-lg bg-bh-accent/90 hover:bg-bh-accent text-black px-4 py-2 font-semibold shadow-glow">Start a project</a>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile toggle -->
|
||||
<button
|
||||
id="menuBtn"
|
||||
class="md:hidden p-2 rounded hover:bg-white/5 focus:outline-none focus:ring-2 focus:ring-bh-accent/60"
|
||||
aria-controls="mobileNav"
|
||||
aria-label="Toggle menu"
|
||||
aria-expanded="false">
|
||||
<!-- hamburger -->
|
||||
<svg id="iconOpen" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" class=""><path d="M3 6h16M3 11h16M3 16h16"/></svg>
|
||||
<!-- close (hidden by default) -->
|
||||
<svg id="iconClose" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" class="hidden"><path d="M4 4l14 14M18 4L4 18"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile overlay (hidden by default) -->
|
||||
<div id="mobileOverlay" class="hidden md:hidden fixed inset-0 bg-black/40"></div>
|
||||
|
||||
<!-- Mobile panel (hidden by default) -->
|
||||
<div
|
||||
id="mobileNav"
|
||||
class="hidden md:hidden border-t border-bh-ring bg-bh-bg/95 backdrop-blur fixed inset-x-0 top-16 z-50 will-change-transform">
|
||||
<nav class="px-4 py-4 grid gap-2 text-sm">
|
||||
<a class="py-2 hover:text-bh-accent" href="{{ url_for('services') }}">Services</a>
|
||||
<a class="py-2 hover:text-bh-accent" href="{{ url_for('work') }}">Work</a>
|
||||
<a class="py-2 hover:text-bh-accent" href="{{ url_for('about') }}">About</a>
|
||||
<a class="py-2 hover:text-bh-accent" href="{{ url_for('contact') }}">Contact</a>
|
||||
<a class="mt-2 inline-flex items-center justify-center rounded-lg bg-bh-accent/90 hover:bg-bh-accent text-black px-4 py-2 font-semibold" href="{{ url_for('contact') }}">Start a project</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>{% block content %}{% endblock %}</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="border-t border-bh-ring">
|
||||
<div class="max-w-7xl mx-auto px-6 py-8 text-sm text-white/60 flex flex-col sm:flex-row gap-2 sm:items-center sm:justify-between">
|
||||
<div>© <span id="year"></span> BrookHaven Technologies — Benny’s House</div>
|
||||
<div class="opacity-80">Canyon · Amarillo · Borger · Remote</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-7xl mx-auto px-6 pb-8 text-sm flex flex-wrap gap-4 items-center justify-between">
|
||||
<div class="opacity-80">{{ CONTACT.name }} — {{ CONTACT.title }}</div>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<a href="mailto:{{ CONTACT.email }}" class="underline">{{ CONTACT.email }}</a>
|
||||
<span class="opacity-60">·</span>
|
||||
<a href="tel:{{ CONTACT.phone|replace(' ', '') }}" class="underline">{{ CONTACT.phone }}</a>
|
||||
{% if CONTACT.cal %}<span class="opacity-60">·</span><a class="underline" href="{{ CONTACT.cal }}" target="_blank" rel="noopener">Book a call</a>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Year
|
||||
document.getElementById('year').textContent = new Date().getFullYear();
|
||||
|
||||
// Mobile menu logic (no Alpine)
|
||||
const btn = document.getElementById('menuBtn');
|
||||
const nav = document.getElementById('mobileNav');
|
||||
const overlay = document.getElementById('mobileOverlay');
|
||||
const iconOpen = document.getElementById('iconOpen');
|
||||
const iconClose = document.getElementById('iconClose');
|
||||
|
||||
let isOpen = false;
|
||||
|
||||
function setOpen(open) {
|
||||
isOpen = open;
|
||||
[nav, overlay].forEach(el => el.classList.toggle('hidden', !open));
|
||||
iconOpen.classList.toggle('hidden', open);
|
||||
iconClose.classList.toggle('hidden', !open);
|
||||
btn.setAttribute('aria-expanded', String(open));
|
||||
// Prevent background scroll when open
|
||||
document.documentElement.classList.toggle('overflow-hidden', open);
|
||||
}
|
||||
|
||||
btn?.addEventListener('click', () => setOpen(!isOpen));
|
||||
overlay?.addEventListener('click', () => setOpen(false));
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && isOpen) setOpen(false);
|
||||
});
|
||||
// Close menu if resized to desktop
|
||||
window.addEventListener('resize', () => {
|
||||
if (window.matchMedia('(min-width: 768px)').matches && isOpen) setOpen(false);
|
||||
});
|
||||
</script>
|
||||
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user