102 lines
4.0 KiB
HTML
102 lines
4.0 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>{% block title %}Benjamin Mosley{% endblock %}</title>
|
|
<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=Archivo:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
|
|
|
<link rel="icon" href="{{ url_for('static', filename='BM.png') }}">
|
|
<!-- Tailwind (compiled) -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
|
|
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
|
|
|
|
{% block head %}{% endblock %}
|
|
</head>
|
|
|
|
<body class="min-h-screen bg-[rgb(var(--bg))] text-[rgb(var(--fg))] font-sans flex flex-col">
|
|
<!-- Header -->
|
|
<header class="border-b border-[rgb(var(--border))]">
|
|
<div class="container-page h-16 flex items-center justify-between">
|
|
<a href="/" class="flex items-center gap-3">
|
|
<div class="h-8 w-8 rounded-xl bg-accent shadow-glass"></div>
|
|
<span class="font-archivo font-semibold text-2xl tracking-wide">Benjamin Mosley</span>
|
|
</a>
|
|
|
|
<!-- Desktop nav -->
|
|
<nav class="hidden sm:flex items-center gap-6">
|
|
<a class="nav-link" href="/blog">Blog</a>
|
|
<a class="nav-link" href="/resume">Resume</a>
|
|
<a class="nav-link" href="/projects">Projects</a>
|
|
<a class="nav-link" href="/contact">Contact</a>
|
|
</nav>
|
|
|
|
<!-- Mobile menu button -->
|
|
<button id="menuBtn" class="sm:hidden btn btn-ghost" aria-controls="mobileNav" aria-expanded="false">
|
|
Menu
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mobile nav -->
|
|
<nav id="mobileNav" class="hidden sm:hidden border-t border-[rgb(var(--border))]">
|
|
<div class="container-page py-3 flex flex-col gap-2">
|
|
<a class="nav-link" href="/blog">Blog</a>
|
|
<a class="nav-link" href="/resume">Resume</a>
|
|
<a class="nav-link" href="/projects">Projects</a>
|
|
<a class="nav-link" href="/contact">Contact</a>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Main -->
|
|
<main class="flex-1">
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="border-t border-[rgb(var(--border))]">
|
|
<div class="container-page py-8 text-sm text-[rgb(var(--muted))]">
|
|
<div class="flex flex-col sm:flex-row items-center justify-between gap-3">
|
|
<p>© {{ now().year }} Benjamin Mosley.</p>
|
|
<div class="flex items-center gap-4">
|
|
<a class="nav-link" href="https://github.com/Benny-ui-ux" target="_blank" rel="noopener">GitHub</a>
|
|
<a class="nav-link" href="https://bennyshouse.net">Business Site</a>
|
|
<a class="nav-link" href="mailto:ben@bennyshouse.net">Email</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Tiny JS: mobile menu + theme toggle hook -->
|
|
<script>
|
|
(function () {
|
|
const btn = document.getElementById('menuBtn');
|
|
const nav = document.getElementById('mobileNav');
|
|
if (btn && nav) {
|
|
btn.addEventListener('click', () => {
|
|
const isOpen = !nav.classList.contains('hidden');
|
|
nav.classList.toggle('hidden');
|
|
btn.setAttribute('aria-expanded', String(!isOpen));
|
|
});
|
|
}
|
|
// Optional theme persistence
|
|
const key = 'bm-theme';
|
|
const root = document.documentElement;
|
|
const saved = localStorage.getItem(key);
|
|
if (saved) root.setAttribute('data-theme', saved);
|
|
window.toggleTheme = function () {
|
|
const next = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
|
|
root.setAttribute('data-theme', next);
|
|
localStorage.setItem(key, next);
|
|
}
|
|
})();
|
|
</script>
|
|
{% block scripts %}{% endblock %}
|
|
</body>
|
|
</html>
|
|
|