fix: address code review issues and rebuild CSS
- nav: add functional mobile menu panel with JS toggle - nav: hamburger now shows/hides mobile-menu with aria-expanded state - about_page: full styled layout (header, prose body, author aside) - legal_page: full styled layout (header with last-updated, max-w-3xl prose) - article: fix aside newsletter label to 'Subscribe' for E2E test - CSS: rebuild after all template changes (4.8KB → 24.3KB) Committed CSS must match CI build — rebuilt after ALL template edits Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
codex_a
@@ -1,14 +1,40 @@
|
||||
{% extends 'base.html' %}
|
||||
{% load wagtailimages_tags wagtailcore_tags %}
|
||||
{% block title %}{{ page.title }} | No Hype AI{% endblock %}
|
||||
{% block content %}
|
||||
<h1>{{ page.title }}</h1>
|
||||
<p>{{ page.mission_statement }}</p>
|
||||
{{ page.body|richtext }}
|
||||
{% if page.featured_author %}
|
||||
<h2>{{ page.featured_author.name }}</h2>
|
||||
<p>{{ page.featured_author.bio }}</p>
|
||||
{% if page.featured_author.avatar %}
|
||||
{% image page.featured_author.avatar fill-200x200 %}
|
||||
|
||||
<!-- Page Header -->
|
||||
<div class="py-8 md:py-12 border-b border-zinc-200 dark:border-zinc-800 mb-12">
|
||||
<h1 class="font-display font-black text-4xl md:text-6xl mb-4">{{ page.title }}</h1>
|
||||
{% if page.mission_statement %}
|
||||
<p class="text-xl md:text-2xl text-zinc-600 dark:text-zinc-400 font-medium max-w-2xl">{{ page.mission_statement }}</p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
|
||||
<div class="lg:col-span-8 prose prose-lg dark:prose-invert max-w-none
|
||||
prose-headings:font-display prose-headings:font-bold
|
||||
prose-a:text-brand-cyan hover:prose-a:text-brand-pink prose-a:transition-colors prose-a:no-underline hover:prose-a:underline">
|
||||
{{ page.body|richtext }}
|
||||
</div>
|
||||
|
||||
{% if page.featured_author %}
|
||||
<aside class="lg:col-span-4">
|
||||
<div class="bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 p-6 relative overflow-hidden">
|
||||
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-brand-cyan to-brand-pink"></div>
|
||||
{% if page.featured_author.avatar %}
|
||||
<div class="w-20 h-20 mb-4 overflow-hidden border border-zinc-200 dark:border-zinc-800">
|
||||
{% image page.featured_author.avatar fill-80x80 class="w-full h-full object-cover" %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="w-20 h-20 mb-4 bg-gradient-to-tr from-brand-cyan to-brand-pink"></div>
|
||||
{% endif %}
|
||||
<h2 class="font-display font-bold text-xl mb-1">{{ page.featured_author.name }}</h2>
|
||||
{% if page.featured_author.role %}<p class="font-mono text-xs text-zinc-500 mb-3">{{ page.featured_author.role }}</p>{% endif %}
|
||||
{% if page.featured_author.bio %}<p class="text-sm text-zinc-600 dark:text-zinc-400">{{ page.featured_author.bio }}</p>{% endif %}
|
||||
</div>
|
||||
</aside>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -91,7 +91,7 @@
|
||||
<div class="bg-brand-dark text-brand-light dark:bg-brand-light dark:text-brand-dark p-6 border border-transparent dark:border-zinc-700 shadow-solid-dark dark:shadow-solid-light">
|
||||
<h3 class="font-display font-bold text-xl mb-2">Subscribe for Updates</h3>
|
||||
<p class="text-sm opacity-80 mb-4">Get our latest articles and coding benchmarks delivered to your inbox every week.</p>
|
||||
{% include 'components/newsletter_form.html' with source='article' label='Never miss a post' %}
|
||||
{% include 'components/newsletter_form.html' with source='article' label='Subscribe' %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -25,15 +25,46 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Theme Toggle -->
|
||||
<!-- Theme Toggle + Hamburger -->
|
||||
<div class="flex items-center gap-4">
|
||||
<button type="button" data-theme-toggle class="p-2 rounded-full hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors" aria-label="Toggle theme">
|
||||
<svg class="w-5 h-5 hidden dark:block text-yellow-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" /></svg>
|
||||
<svg class="w-5 h-5 block dark:hidden text-zinc-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" /></svg>
|
||||
</button>
|
||||
<button class="md:hidden p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded transition-colors" aria-label="Open menu">
|
||||
<button type="button" data-mobile-menu-toggle class="md:hidden p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded transition-colors" aria-label="Open menu" aria-expanded="false" aria-controls="mobile-menu">
|
||||
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<div id="mobile-menu" class="md:hidden hidden border-t border-zinc-200 dark:border-zinc-800 bg-brand-light/95 dark:bg-brand-dark/95 backdrop-blur-md">
|
||||
<div class="max-w-7xl mx-auto px-6 py-4 flex flex-col gap-4">
|
||||
<a href="/" class="font-medium py-2 hover:text-brand-cyan transition-colors">Home</a>
|
||||
<a href="/articles/" class="font-medium py-2 hover:text-brand-cyan transition-colors">Articles</a>
|
||||
<a href="/about/" class="font-medium py-2 hover:text-brand-pink transition-colors">About</a>
|
||||
<form method="post" action="/newsletter/subscribe/" data-newsletter-form class="space-y-2 pt-2 border-t border-zinc-200 dark:border-zinc-800" id="mobile-newsletter">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="source" value="nav-mobile" />
|
||||
<input type="email" name="email" required placeholder="dev@example.com"
|
||||
class="w-full bg-transparent border border-zinc-300 dark:border-zinc-700 px-3 py-2 text-brand-dark dark:text-brand-light font-mono text-sm focus:outline-none focus:border-brand-pink transition-colors" />
|
||||
<input type="text" name="honeypot" style="display:none" />
|
||||
<button type="submit" class="w-full px-4 py-2.5 bg-brand-dark dark:bg-brand-light text-brand-light dark:text-brand-dark font-display font-bold transition-colors">Subscribe</button>
|
||||
<p data-newsletter-message aria-live="polite" class="font-mono text-xs text-brand-cyan min-h-[1rem]"></p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<script nonce="{{ request.csp_nonce|default:'' }}">
|
||||
(function(){
|
||||
var btn = document.querySelector('[data-mobile-menu-toggle]');
|
||||
var menu = document.getElementById('mobile-menu');
|
||||
if (btn && menu) {
|
||||
btn.addEventListener('click', function(){
|
||||
var open = menu.classList.toggle('hidden');
|
||||
btn.setAttribute('aria-expanded', String(!open));
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
|
||||
@@ -1,7 +1,18 @@
|
||||
{% extends 'base.html' %}
|
||||
{% load wagtailcore_tags %}
|
||||
{% block title %}{{ page.title }} | No Hype AI{% endblock %}
|
||||
{% block content %}
|
||||
<h1>{{ page.title }}</h1>
|
||||
<p>Last updated: {{ page.last_updated|date:'F Y' }}</p>
|
||||
{{ page.body|richtext }}
|
||||
|
||||
<!-- Page Header -->
|
||||
<div class="py-8 md:py-12 border-b border-zinc-200 dark:border-zinc-800 mb-12">
|
||||
<h1 class="font-display font-black text-4xl md:text-5xl mb-3">{{ page.title }}</h1>
|
||||
<p class="font-mono text-sm text-zinc-500">Last updated: {{ page.last_updated|date:'F Y' }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="max-w-3xl prose prose-lg dark:prose-invert
|
||||
prose-headings:font-display prose-headings:font-bold
|
||||
prose-a:text-brand-cyan hover:prose-a:text-brand-pink prose-a:transition-colors prose-a:no-underline hover:prose-a:underline">
|
||||
{{ page.body|richtext }}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user