feat: add simple layout and fix header positioning

This commit is contained in:
Chaoming Li 2024-11-20 16:27:43 +11:00
parent 467f927f3f
commit 4b5d472677
3 changed files with 25 additions and 9 deletions

View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode | default "en" }}">
<html lang="{{ .Site.LanguageCode | default "en" }}" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -67,23 +67,31 @@
{{ end }}
{{ end }}
</head>
<body class="flex flex-col min-h-screen">
<body class="min-h-screen flex flex-col">
<!-- Header -->
<div class="fixed top-0 left-0 right-0 z-50">
{{ partial "header" . }}
</div>
<!-- Main Content -->
<main class="flex-grow pt-20">
<div class="pt-20">
{{ block "main" . }}{{ end }}
</main>
</div>
<!-- Footer -->
{{ partial "footer" . }}
<!-- Mobile Menu Script -->
<script>
document.getElementById('mobile-menu-button').addEventListener('click', function() {
document.getElementById('mobile-menu').classList.toggle('hidden');
const mobileMenuButton = document.getElementById('mobile-menu-button');
if (mobileMenuButton) {
mobileMenuButton.addEventListener('click', function() {
const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenu) {
mobileMenu.classList.toggle('hidden');
}
});
}
</script>
</body>
</html>

View file

@ -0,0 +1,8 @@
{{ define "main" }}
<div class="container mx-auto px-4 py-8 flex-1">
<h1 class="text-4xl font-bold text-center mb-12">{{ .Title }}</h1>
<div class="prose prose-lg !max-w-none">
{{ .Content }}
</div>
</div>
{{ end }}

View file

@ -1,4 +1,4 @@
<footer class="bg-white py-12">
<footer class="bg-gray-50 py-12 border-t border-gray-200">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
<div class="flex flex-col md:flex-row justify-between space-y-4 md:space-y-0">
<!-- Logo and Social Media -->