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