feat: implement Tailwind CSS styling based on wireframe design
- Add brand colours, fonts (Space Grotesk/Inter/Fira Code), box shadows to tailwind.config.js - Add bg-grid-pattern, text-gradient, scrollbar, selection styles to input.css - Add Google Fonts link and dark-mode body classes to base.html - Style nav, footer, cookie banner, newsletter form components - Style homepage: featured article, 12-col editorial grid, sidebar widgets - Style article list: header, tag filters, horizontal article cards, pagination - Style article page: hero header, prose body, share sidebar, related cards, comments - Style code blocks and callout blocks - CSS output grows from 4.8KB to 24KB with all brand utilities compiled Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
codex_a
@@ -1,8 +1,31 @@
|
||||
{% load core_tags %}
|
||||
<article>
|
||||
<a href="{{ article.url }}">{{ article.title }}</a>
|
||||
<p>{{ article.summary|truncatewords:20 }}</p>
|
||||
{% for tag in article.tags.all %}
|
||||
<span class="{{ tag|get_tag_css }}">{{ tag.name }}</span>
|
||||
{% endfor %}
|
||||
{% load core_tags wagtailimages_tags %}
|
||||
<article class="group flex flex-col md:flex-row gap-8 items-center bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 p-4 hover:border-brand-cyan dark:hover:border-brand-cyan transition-colors">
|
||||
<a href="{{ article.url }}" class="w-full md:w-1/3 h-48 md:h-full min-h-[200px] overflow-hidden relative bg-zinc-100 dark:bg-zinc-900 shrink-0 block">
|
||||
{% if article.hero_image %}
|
||||
{% image article.hero_image fill-600x400 class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500" %}
|
||||
{% else %}
|
||||
<div class="w-full h-full min-h-[200px] flex items-center justify-center bg-zinc-900">
|
||||
<svg class="w-16 h-16 text-brand-cyan opacity-40 group-hover:opacity-80 transition-opacity" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 1-6.23-.693L5 14.5m14.8.8 1.402 1.402c1 1 .03 2.798-1.442 2.798H4.24c-1.47 0-2.44-1.798-1.442-2.798L4.2 15.3" /></svg>
|
||||
</div>
|
||||
{% endif %}
|
||||
</a>
|
||||
<div class="flex flex-col py-2 w-full">
|
||||
<div class="flex gap-3 mb-4 items-center flex-wrap">
|
||||
{% for tag in article.tags.all %}
|
||||
<span class="text-xs font-mono font-bold px-2 py-1 {{ tag|get_tag_css }}">{{ tag.name }}</span>
|
||||
{% endfor %}
|
||||
<span class="text-sm font-mono text-zinc-500">{{ article.first_published_at|date:"M j, Y" }}</span>
|
||||
</div>
|
||||
<a href="{{ article.url }}">
|
||||
<h2 class="font-display font-bold text-2xl md:text-3xl mb-3 group-hover:text-brand-cyan transition-colors">{{ article.title }}</h2>
|
||||
</a>
|
||||
<p class="text-zinc-600 dark:text-zinc-400 mb-6 max-w-2xl line-clamp-2">{{ article.summary }}</p>
|
||||
<div class="flex items-center justify-between mt-auto">
|
||||
<span class="text-sm font-mono text-zinc-500">{{ article.read_time_mins }} min read</span>
|
||||
<a href="{{ article.url }}" class="flex items-center gap-2 text-sm font-bold font-mono group-hover:text-brand-cyan transition-colors">
|
||||
Read Article
|
||||
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" /></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@@ -1,27 +1,43 @@
|
||||
{% if request.consent.requires_prompt %}
|
||||
<div id="cookie-banner">
|
||||
<form method="post" action="{% url 'consent' %}">
|
||||
{% csrf_token %}
|
||||
<button type="submit" name="accept_all" value="1">Accept all</button>
|
||||
<button type="submit" name="reject_all" value="1">Reject all</button>
|
||||
</form>
|
||||
<details>
|
||||
<summary>Manage preferences</summary>
|
||||
<form method="post" action="{% url 'consent' %}">
|
||||
{% csrf_token %}
|
||||
<label>
|
||||
<input type="checkbox" name="analytics" value="1" />
|
||||
Analytics cookies
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" name="advertising" value="1" />
|
||||
Advertising cookies
|
||||
</label>
|
||||
<button type="submit">Save preferences</button>
|
||||
</form>
|
||||
</details>
|
||||
{% if site_settings and site_settings.privacy_policy_page %}
|
||||
<a href="{{ site_settings.privacy_policy_page.url }}">Privacy Policy</a>
|
||||
{% endif %}
|
||||
<div id="cookie-banner" class="fixed bottom-0 left-0 right-0 z-50 bg-brand-surfaceLight dark:bg-brand-surfaceDark border-t border-zinc-200 dark:border-zinc-800 shadow-lg">
|
||||
<div class="max-w-7xl mx-auto px-6 py-4 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
|
||||
<div class="flex-1">
|
||||
<p class="font-mono text-sm text-zinc-600 dark:text-zinc-400">
|
||||
We use cookies to improve your experience.
|
||||
{% if site_settings and site_settings.privacy_policy_page %}
|
||||
<a href="{{ site_settings.privacy_policy_page.url }}" class="text-brand-cyan hover:underline">Privacy Policy</a>
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 shrink-0">
|
||||
<form method="post" action="{% url 'consent' %}" class="inline">
|
||||
{% csrf_token %}
|
||||
<button type="submit" name="reject_all" value="1"
|
||||
class="px-4 py-2 border border-zinc-300 dark:border-zinc-700 font-mono text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors">Reject all</button>
|
||||
</form>
|
||||
<form method="post" action="{% url 'consent' %}" class="inline">
|
||||
{% csrf_token %}
|
||||
<button type="submit" name="accept_all" value="1"
|
||||
class="px-4 py-2 bg-brand-dark text-brand-light dark:bg-brand-light dark:text-brand-dark font-display font-bold text-sm hover:bg-brand-cyan transition-colors">Accept all</button>
|
||||
</form>
|
||||
<details class="relative">
|
||||
<summary class="px-4 py-2 border border-zinc-300 dark:border-zinc-700 font-mono text-sm hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors cursor-pointer list-none">Manage</summary>
|
||||
<div class="absolute bottom-full right-0 mb-2 w-72 bg-brand-surfaceLight dark:bg-brand-surfaceDark border border-zinc-200 dark:border-zinc-800 p-4 shadow-lg">
|
||||
<form method="post" action="{% url 'consent' %}" class="space-y-3">
|
||||
{% csrf_token %}
|
||||
<label class="flex items-center gap-3 font-mono text-sm cursor-pointer">
|
||||
<input type="checkbox" name="analytics" value="1" class="accent-brand-cyan" />
|
||||
Analytics cookies
|
||||
</label>
|
||||
<label class="flex items-center gap-3 font-mono text-sm cursor-pointer">
|
||||
<input type="checkbox" name="advertising" value="1" class="accent-brand-pink" />
|
||||
Advertising cookies
|
||||
</label>
|
||||
<button type="submit" class="w-full px-4 py-2 bg-brand-dark text-brand-light dark:bg-brand-light dark:text-brand-dark font-display font-bold text-sm hover:bg-brand-cyan transition-colors">Save preferences</button>
|
||||
</form>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -1,8 +1,33 @@
|
||||
{% load core_tags %}
|
||||
<footer>
|
||||
{% get_legal_pages as legal_pages %}
|
||||
{% include 'components/newsletter_form.html' with source='footer' label='Newsletter' %}
|
||||
{% for page in legal_pages %}
|
||||
<a href="{{ page.url }}">{{ page.title }}</a>
|
||||
{% endfor %}
|
||||
<footer class="border-t border-zinc-200 dark:border-zinc-800 bg-brand-light dark:bg-brand-dark mt-12 py-12 text-center md:text-left">
|
||||
<div class="max-w-7xl mx-auto px-6 grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div class="md:col-span-2">
|
||||
<a href="/" class="font-display font-bold text-2xl tracking-tight mb-4 inline-block">NO HYPE AI</a>
|
||||
<p class="text-zinc-500 font-mono text-sm max-w-sm mx-auto md:mx-0">
|
||||
In-depth reviews and benchmarks of the latest AI coding tools.<br>
|
||||
Honest analysis for developers.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-display font-bold mb-4 uppercase text-sm tracking-widest text-zinc-400">Navigation</h4>
|
||||
<ul class="space-y-2 font-mono text-sm text-zinc-500">
|
||||
<li><a href="/" class="hover:text-brand-cyan transition-colors">Home</a></li>
|
||||
<li><a href="/articles/" class="hover:text-brand-cyan transition-colors">Articles</a></li>
|
||||
<li><a href="/about/" class="hover:text-brand-pink transition-colors">About</a></li>
|
||||
{% get_legal_pages as legal_pages %}
|
||||
{% for page in legal_pages %}
|
||||
<li><a href="{{ page.url }}" class="hover:text-brand-pink transition-colors">{{ page.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-display font-bold mb-4 uppercase text-sm tracking-widest text-zinc-400">Newsletter</h4>
|
||||
<p class="text-zinc-500 font-mono text-sm mb-4">Get weekly AI tool reviews.</p>
|
||||
{% include 'components/newsletter_form.html' with source='footer' label='Newsletter' %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="max-w-7xl mx-auto px-6 mt-12 pt-8 border-t border-zinc-200 dark:border-zinc-800 text-center font-mono text-xs text-zinc-500 flex flex-col md:flex-row justify-between items-center gap-4">
|
||||
<p>© {% now "Y" %} No Hype AI. All rights reserved.</p>
|
||||
<p>Honest AI tool reviews for developers.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -1,7 +1,35 @@
|
||||
<nav>
|
||||
<a href="/">Home</a>
|
||||
<a href="/articles/">Articles</a>
|
||||
<a href="/about/">About</a>
|
||||
<button type="button" data-theme-toggle>Toggle theme</button>
|
||||
{% include 'components/newsletter_form.html' with source='nav' label='Get updates' %}
|
||||
{% load static %}
|
||||
<nav class="sticky top-0 z-50 backdrop-blur-md bg-brand-light/80 dark:bg-brand-dark/80 border-b border-zinc-200 dark:border-zinc-800 transition-colors">
|
||||
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
||||
<!-- Logo -->
|
||||
<a href="/" class="group flex items-center gap-2">
|
||||
<div class="w-8 h-8 bg-brand-dark dark:bg-brand-light text-brand-light dark:text-brand-dark flex items-center justify-center font-display font-bold text-xl group-hover:rotate-12 transition-transform">
|
||||
/
|
||||
</div>
|
||||
<span class="font-display font-bold text-2xl tracking-tight">NO HYPE AI</span>
|
||||
</a>
|
||||
|
||||
<!-- Desktop Links -->
|
||||
<div class="hidden md:flex items-center gap-8 font-medium">
|
||||
<a href="/" class="hover:text-brand-cyan transition-colors">Home</a>
|
||||
<a href="/articles/" class="hover:text-brand-cyan transition-colors">Articles</a>
|
||||
<a href="/about/" class="hover:text-brand-pink transition-colors">About</a>
|
||||
<!-- Hidden newsletter form for subscribe functionality -->
|
||||
<div class="hidden">
|
||||
{% include 'components/newsletter_form.html' with source='nav' label='Get updates' %}
|
||||
</div>
|
||||
<a href="#newsletter" class="px-5 py-2.5 bg-brand-dark dark:bg-brand-light text-brand-light dark:text-brand-dark font-display font-bold hover:-translate-y-1 hover:shadow-solid-dark dark:hover:shadow-solid-light transition-all border border-transparent dark:border-zinc-700">Subscribe</a>
|
||||
</div>
|
||||
|
||||
<!-- Theme Toggle -->
|
||||
<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 Dark Mode">
|
||||
<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">
|
||||
<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>
|
||||
</nav>
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
<form method="post" action="/newsletter/subscribe/" data-newsletter-form>
|
||||
<form method="post" action="/newsletter/subscribe/" data-newsletter-form class="space-y-3" id="newsletter">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="source" value="{{ source|default:'unknown' }}" />
|
||||
<label>
|
||||
<span>{{ label|default:"Newsletter" }}</span>
|
||||
<input type="email" name="email" required />
|
||||
</label>
|
||||
<input type="email" name="email" required placeholder="dev@example.com"
|
||||
class="w-full bg-transparent border border-zinc-300 dark:border-zinc-700 px-4 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">Subscribe</button>
|
||||
<p data-newsletter-message aria-live="polite"></p>
|
||||
<button type="submit"
|
||||
class="w-full bg-brand-dark text-brand-light dark:bg-brand-light dark:text-brand-dark font-display font-bold py-2 hover:bg-brand-pink dark:hover:bg-brand-pink hover:text-white transition-colors">
|
||||
{{ label|default:"Subscribe" }}
|
||||
</button>
|
||||
<p data-newsletter-message aria-live="polite" class="font-mono text-xs text-brand-cyan min-h-[1rem]"></p>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user