mahdahar/5panda.11ty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
5panda.11ty/src/_layouts/base.njk
mahdahar ec37ccc9bb refactor: remove DaisyUI and implement custom theme system 
- Remove DaisyUI dependency from package.json
- Implement custom CSS components (btn, badge, navbar, menu, card, footer)
- Add dark/light theme toggle with localStorage persistence
- Update color scheme to dark blue palette (primary: blue, secondary: cyan, accent: electric blue)
- Make blog pages full-width by removing max-width constraints
- Restore sidebar navigation for clqms posts with full-width layout
- Fix navbar menu alignment issues with flexbox

BREAKING CHANGE: DaisyUI classes replaced with custom implementations
2026-01-07 11:21:35 +07:00

158 lines
8.3 KiB
Plaintext
Raw Blame History

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{{ description | default('5Panda - Portfolio & Documentation') }}">
<meta
name="author" content="5Panda"> <!-- Open Graph -->
<meta property="og:title" content="{{ title | default('5Panda') }}">
<meta property="og:description" content="{{ description | default('Portfolio & Documentation') }}">
<meta property="og:type" content="{{ ogType | default('website') }}">
<title>{{ title | default("5Panda") }}</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
rel="stylesheet"> <!-- Styles -->
<link
rel="stylesheet" href="/css/style.css">
<!-- Theme initialization script (must be in head to prevent FOUC) -->
<script>
(function () {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.documentElement.setAttribute('data-theme', savedTheme);
} else if (window.matchMedia('(prefers-color-scheme: light)').matches) {
document.documentElement.setAttribute('data-theme', 'light');
}
})();
</script>
</head>
<body
class="min-h-screen bg-base-100 text-base-content">
<!-- Navbar -->
<div class="navbar min-h-12 bg-base-100/80 backdrop-blur-xl border-b border-white/5 sticky top-0 z-50">
<div class="navbar-start">
<a href="/" class="text-xl font-bold gradient-text hover:opacity-80 transition-opacity px-2">5Panda</a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-sm menu-horizontal px-1 gap-1">
<li>
<a
href="/"
class="rounded-lg {% if page.url == '/' %}bg-primary/10 text-primary{% endif %} hover:bg-primary/10 hover:text-primary
transition-colors">
Home
</a>
</li>
<li>
<a
href="/blog/"
class="rounded-lg {% if '/blog/' in page.url %}bg-primary/10 text-primary{% endif %} hover:bg-primary/10
hover:text-primary transition-colors">
Blog
</a>
</li>
<li>
<a
href="/team/"
class="rounded-lg {% if '/team/' in page.url %}bg-primary/10 text-primary{% endif %} hover:bg-primary/10
hover:text-primary transition-colors">
Team
</a>
</li>
<li>
<details class="group">
<summary class="rounded-lg hover:bg-primary/10 hover:text-primary transition-colors">
Project
</summary>
<ul class="p-2 bg-base-100 rounded-t-none bg-base-100/95 backdrop-blur-xl border border-white/5 shadow-xl w-60 z-[100]">
{% for post in collections.posts %}
{% if post.data.tags and 'clqms' not in post.data.tags %}
<li>
<a href="{{ post.url }}" class="{% if page.url == post.url %}text-primary bg-primary/10{% endif %} hover:text-primary hover:bg-primary/10">
{{ post.data.title }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</details>
</li>
</ul>
</div>
<div
class="navbar-end">
<!-- Theme toggle -->
<button id="theme-toggle" class="btn btn-ghost btn-circle btn-sm theme-toggle" aria-label="Toggle theme">
<svg class="icon-sun h-5 w-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/>
</svg>
<svg class="icon-moon h-5 w-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24">
<path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/>
</svg>
</button>
<!-- GitHub link -->
<a href="https://github.com" target="_blank" class="btn btn-ghost btn-circle btn-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewbox="0 0 24 24">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207
11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729
1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304
3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381
1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138
3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807
5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386
0-6.627-5.373-12-12-12z"/>
</svg>
</a>
</div>
</div>
<!-- Main content -->
<main class="animate-fade-in">
{{ content | safe }}
</main>
<!-- Footer -->
<footer class="footer footer-center bg-base-200 text-base-content p-10 border-t border-white/5">
<aside>
<p class="font-bold text-xl gradient-text mb-2">5Panda</p>
<p class="text-base-content/60">Portfolio & Documentation</p>
</aside>
<nav>
<div class="grid grid-flow-col gap-4">
<a
href="https://github.com"
target="_blank"
class="btn btn-ghost btn-sm btn-circle hover:text-primary transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewbox="0 0 24 24">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207
11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729
1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304
3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381
1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138
3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807
5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386
0-6.627-5.373-12-12-12z"/>
</svg>
</a>
</div>
</nav>
<aside>
<p class="text-sm text-base-content/40">&copy; {% year %} 5Panda. Built with 11ty & Tailwind CSS.</p>
</aside>
</footer>
<!-- Theme toggle script -->
<script>
document.getElementById('theme-toggle').addEventListener('click', function () {
const html = document.documentElement;
const currentTheme = html.getAttribute('data-theme');
const newTheme = currentTheme === 'light'
? 'dark'
: 'light';
html.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink