d8206c7b3b
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 2m17s
The max-w-screen-2xl wrapper now only constrains the header/nav, matching blog layout. Dark content area goes full-width with its own inner max-w constraint. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
97 lines
3.3 KiB
HTML
97 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}Art-DAG{% endblock %}</title>
|
|
|
|
<!-- Tailwind CSS (same CDN as coop) -->
|
|
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
dark: {
|
|
600: '#374151',
|
|
700: '#1f2937',
|
|
800: '#111827',
|
|
900: '#030712',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!-- HTMX -->
|
|
<script src="https://unpkg.com/htmx.org@2.0.8"></script>
|
|
<!-- Hyperscript (for nav-tree scrolling arrows) -->
|
|
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
|
|
<!-- Font Awesome (for auth-menu + nav icons) -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
|
|
{% block head %}{% endblock %}
|
|
|
|
<style>
|
|
/* HTMX loading indicator */
|
|
.htmx-indicator { display: none; }
|
|
.htmx-request .htmx-indicator { display: inline-flex; }
|
|
img { max-width: 100%; height: auto; }
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
.scrollbar-hide::-webkit-scrollbar { display: none; }
|
|
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
|
|
</style>
|
|
<script>
|
|
if (matchMedia('(hover: hover) and (pointer: fine)').matches) {
|
|
document.documentElement.classList.add('hover-capable');
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-stone-50 text-stone-900 min-h-screen">
|
|
<div class="max-w-screen-2xl mx-auto py-1 px-1">
|
|
{% block header %}
|
|
{# Coop-style header: sky banner with title, nav-tree, auth-menu, cart-mini #}
|
|
<div class="w-full">
|
|
<div class="flex flex-col items-center md:flex-row justify-center md:justify-between w-full p-1 bg-sky-500">
|
|
<div class="w-full flex flex-row items-top">
|
|
{# Cart mini #}
|
|
{% block cart_mini %}{% endblock %}
|
|
|
|
{# Site title #}
|
|
<div class="font-bold text-5xl flex-1">
|
|
<a href="/" class="flex justify-center md:justify-start">
|
|
<h1>{% block brand %}Art-DAG{% endblock %}</h1>
|
|
</a>
|
|
</div>
|
|
|
|
{# Desktop nav: nav-tree + auth-menu #}
|
|
<nav class="hidden md:flex gap-4 text-sm ml-2 justify-end items-center flex-0">
|
|
{% block nav_tree %}{% endblock %}
|
|
{% block auth_menu %}{% endblock %}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
{# Mobile auth #}
|
|
<div class="block md:hidden text-md font-bold">
|
|
{% block auth_menu_mobile %}{% endblock %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{# App-specific sub-nav (Runs, Recipes, Effects, etc.) #}
|
|
{% block sub_nav %}{% endblock %}
|
|
|
|
</div>{# close max-w-screen-2xl wrapper #}
|
|
|
|
<main class="bg-dark-800 text-gray-100 min-h-screen">
|
|
<div class="max-w-screen-2xl mx-auto px-4 py-4">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
</main>
|
|
|
|
{% block footer %}{% endblock %}
|
|
{% block scripts %}{% endblock %}
|
|
</body>
|
|
</html>
|