- Increase card padding and gaps for better visual hierarchy - Add hover lift effect to cards with smooth transitions - Improve typography with larger headings and better line-height - Darken meta text colors for better readability - Add checkbox styling with accent color - Make tags interactive with hover effects - Add mobile responsive styles for forms and footer - Replace Unicode arrows with SVG icons - Improve focus styles for accessibility - Increase badge padding and font-weight - Add subtle shadow to cards by default
36 lines
2.0 KiB
HTML
36 lines
2.0 KiB
HTML
<header class="site-header" data-testid="site-header">
|
|
<div class="container" data-testid="header-container">
|
|
<a href="/" class="site-logo" data-testid="nav-logo">
|
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="logo-icon">
|
|
<rect width="32" height="32" rx="6" fill="var(--color-primary)"/>
|
|
<path d="M8 12h16M8 16h12M8 20h8" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
|
</svg>
|
|
<span data-testid="logo-text">Blog</span>
|
|
</a>
|
|
|
|
{% include "partials/nav.html" %}
|
|
|
|
<div class="header-actions" data-testid="header-actions">
|
|
<button
|
|
type="button"
|
|
class="theme-toggle"
|
|
data-testid="theme-toggle"
|
|
aria-label="Toggle dark mode"
|
|
title="Toggle dark mode"
|
|
>
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="theme-light-icon" style="display: none;">
|
|
<path d="M10 2v2M10 16v2M4.22 4.22l1.42 1.42M14.36 14.36l1.42 1.42M2 10h2M16 10h2M4.22 15.78l1.42-1.42M14.36 5.64l1.42-1.42" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
<circle cx="10" cy="10" r="3" stroke="currentColor" stroke-width="2"/>
|
|
</svg>
|
|
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="theme-dark-icon" style="display: none;">
|
|
<path d="M17.293 13.293A8 8 0 116.707 2.707a8.003 8.003 0 0010.586 10.586z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<a href="/posts/new" class="btn btn-primary btn-sm" data-testid="btn-create-post">
|
|
New Post
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|