art-dag/common
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle _base.html to match coop light theme

Browse Source 
Sky-blue header bar, light body (bg-stone-50), Font Awesome,
hyperscript. Block-based layout: cart_mini, brand, nav_tree,
auth_menu, sub_nav, content. Keeps dark-* custom colors for
content panels.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
giles
2026-02-24 23:00:12 +00:00
parent 98080b10c5
commit ff185b42f0
1 changed files with 67 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
artdag_common/templates/_base.html
View File

@@ -1,71 +1,91 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="dark"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Art-DAG{% endblock %}</title> <title>{% block title %}Art-DAG{% endblock %}</title>
<!-- Tailwind CSS --> <!-- Tailwind CSS (same CDN as coop) -->
<script src="{{ TAILWIND_CDN }}"></script> <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
{{ TAILWIND_CONFIG | safe }} <script>
tailwind.config = {
theme: {
extend: {
colors: {
dark: {
600: '#374151',
700: '#1f2937',
800: '#111827',
900: '#030712',
}
}
}
}
}
</script>
<!-- HTMX --> <!-- HTMX -->
<script src="{{ HTMX_CDN }}"></script> <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 %} {% block head %}{% endblock %}
<style> <style>
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #1f2937;
}
::-webkit-scrollbar-thumb {
background: #4b5563;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #6b7280;
}
/* HTMX loading indicator */ /* HTMX loading indicator */
.htmx-request .htmx-indicator { .htmx-indicator { display: none; }
opacity: 1; .htmx-request .htmx-indicator { display: inline-flex; }
} img { max-width: 100%; height: auto; }
.htmx-indicator { .no-scrollbar::-webkit-scrollbar { display: none; }
opacity: 0; .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
transition: opacity 200ms ease-in; .scrollbar-hide::-webkit-scrollbar { display: none; }
} .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
</style> </style>
<script>
if (matchMedia('(hover: hover) and (pointer: fine)').matches) {
document.documentElement.classList.add('hover-capable');
}
</script>
</head> </head>
<body class="bg-dark-800 text-gray-100 min-h-screen"> <body class="bg-stone-50 text-stone-900 min-h-screen">
{% block nav %} {% block header %}
<nav class="bg-dark-700 border-b border-dark-600"> {# Coop-style header: sky banner with title, nav-tree, auth-menu, cart-mini #}
<div class="container mx-auto px-4"> <div class="w-full">
<div class="flex items-center justify-between h-16"> <div class="flex flex-col items-center md:flex-row justify-center md:justify-between w-full p-1 bg-sky-500">
<div class="flex items-center space-x-8"> <div class="w-full flex flex-row items-top">
<a href="/" class="text-xl font-bold text-white"> {# Cart mini #}
{% block brand %}Art-DAG{% endblock %} {% block cart_mini %}{% endblock %}
</a>
{% block nav_items %}{% endblock %} {# Site title #}
</div> <div class="font-bold text-5xl flex-1">
<div class="flex items-center space-x-4"> <a href="/" class="flex justify-center md:justify-start">
{% block nav_right %}{% endblock %} <h1>{% block brand %}Art-DAG{% endblock %}</h1>
</div> </a>
</div> </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>
</nav> </div>
{# Mobile auth #}
<div class="block md:hidden text-md font-bold">
{% block auth_menu_mobile %}{% endblock %}
</div>
</div>
{% endblock %} {% endblock %}
<main class="container mx-auto px-4 py-8"> {# App-specific sub-nav (Runs, Recipes, Effects, etc.) #}
{% block sub_nav %}{% endblock %}
<main class="max-w-screen-2xl mx-auto px-4 py-4">
{% block content %}{% endblock %} {% block content %}{% endblock %}
</main> </main>
{% block footer %}{% endblock %} {% block footer %}{% endblock %}
{% block scripts %}{% endblock %} {% block scripts %}{% endblock %}
</body> </body>
</html> </html>