100 lines
2.9 KiB
HTML
100 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}Zola with Tailwind CSS{% endblock %}</title>
|
|
<link rel="stylesheet" href="{{ get_url(path='css/main.css') }}">
|
|
<link rel="stylesheet" href="{{ get_url(path='css/dropdown.css') }}">
|
|
<style>
|
|
/* Light mode (default) */
|
|
body {
|
|
background-color: #f3f4f6;
|
|
color: #1f2937;
|
|
}
|
|
header nav {
|
|
background-color: #1f2937;
|
|
color: #f9fafb;
|
|
}
|
|
footer {
|
|
background-color: #ffffff;
|
|
}
|
|
footer p {
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* Dark mode */
|
|
html.dark body {
|
|
background-color: #111827 !important;
|
|
color: #f9fafb !important;
|
|
}
|
|
html.dark header nav {
|
|
background-color: #1f2937 !important;
|
|
}
|
|
html.dark footer {
|
|
background-color: #1f2937 !important;
|
|
}
|
|
html.dark footer p {
|
|
color: #9ca3af !important;
|
|
}
|
|
html.dark a {
|
|
color: #60a5fa !important;
|
|
}
|
|
html.dark a:hover {
|
|
color: #93c5fd !important;
|
|
}
|
|
html.dark .bg-gray-100 {
|
|
background-color: #111827 !important;
|
|
}
|
|
html.dark .bg-white {
|
|
background-color: #1f2937 !important;
|
|
}
|
|
html.dark .text-gray-900 {
|
|
color: #f9fafb !important;
|
|
}
|
|
html.dark .text-gray-500 {
|
|
color: #9ca3af !important;
|
|
}
|
|
html.dark .border-gray-200 {
|
|
border-color: #374151 !important;
|
|
}
|
|
html.dark button.bg-gray-800 {
|
|
background-color: #111827 !important;
|
|
}
|
|
html.dark button.hover\:bg-gray-700:hover {
|
|
background-color: #374151 !important;
|
|
}
|
|
|
|
/* Transition effects */
|
|
html.transition,
|
|
html.transition *,
|
|
html.transition *:before,
|
|
html.transition *:after {
|
|
transition: all 0.3s ease-in-out !important;
|
|
transition-delay: 0 !important;
|
|
}
|
|
</style>
|
|
<script src="{{ get_url(path='js/main.js') }}" defer></script>
|
|
{% block head %}{% endblock %}
|
|
</head>
|
|
<body class="bg-gray-100 min-h-screen flex flex-col">
|
|
<header>
|
|
{% include "partials/navigation.html" %}
|
|
</header>
|
|
<main>
|
|
<div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
|
<div class="px-4 py-6 sm:px-0">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<footer class="bg-white shadow mt-auto">
|
|
<div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
|
|
<p class="text-center text-gray-500">
|
|
© {{ now() | date(format="%Y") }} {{ config.title }}
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|