coolans/my-website
1
0
Fork 0
mirror of https://github.com/CoolnsX/my-website.git synced 2025-12-20 07:15:19 +05:30
Code Issues Packages Projects Releases Wiki Activity

feat:rewrite using zola

Browse Source
This commit is contained in:
coolnsx
2025-05-16 00:19:58 +05:30
parent 7b57b1e222
commit 3819f62620
17 changed files with 2353 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
templates/base.html Normal file
View File

@@ -0,0 +1,109 @@
<!doctype html>
<html lang="en" class="dark scroll-smooth">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{% block title %}{% endblock title %} - Coolans</title>
<link
rel="stylesheet"
href="{{ get_url(path='styles/main.css') | safe }}"
/>
<script>
// Mobile menu toggle
function toggleMobileMenu() {
const menu = document.getElementById("mobile-menu");
menu.classList.toggle("hidden");
}
</script>
</head>
<body
class="min-h-screen flex flex-col bg-black text-white relative transition-colors duration-300"
>
<!-- Blurred Background Image -->
<div
class="fixed inset-0 -z-10 bg-[url('/assets/background.webp')] bg-cover bg-center blur-md"
></div>
<div class="fixed inset-0 bg-black/70 -z-5"></div>
<!-- Top Navigation -->
<nav class="sticky top-0 z-50 bg-transparent backdrop-blur-none py-4">
<div
class="container mx-auto px-4 flex justify-between items-center"
>
<!-- Logo Island -->
<div
class="px-6 py-3 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md"
>
<a href="/" class="text-xl font-bold text-white">Coolans</a>
</div>
<!-- Mobile menu button -->
<button
class="md:hidden px-3 py-2 rounded-lg text-gray-300 bg-gray-900/80 border border-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
aria-label="Toggle menu"
onclick="toggleMobileMenu()"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
viewBox="0 0 24 24"
>
<path d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<!-- Nav Links Island -->
<ul
id="mobile-menu"
class="hidden md:flex md:static absolute right-4 top-full mt-2 md:mt-0 px-6 py-3 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md space-x-6 md:space-x-6 flex-col md:flex-row text-gray-300 md:items-center"
>
<li>
<a
href="/"
class="hover:text-blue-400 block py-2 md:py-0"
>Home</a
>
</li>
<li>
<a
href="/blog"
class="hover:text-blue-400 block py-2 md:py-0"
>Blogs</a
>
</li>
</ul>
</div>
</nav>
<!-- Main Content Section -->
<main class="flex-grow section py-10 relative z-10 rounded-2xl">
<div
class="container mx-auto px-4"
>
<div
class="px-6 py-4 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md text-center text-sm"
>
{% block content %}{% endblock content %}
</div>
</div>
</main>
<!-- Footer -->
<footer class="w-full py-10 relative z-10">
<div class="container mx-auto px-4">
<div
class="px-6 py-4 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md text-center text-sm text-gray-400"
>
&copy; {{ now() | date(format="%Y") }} Coolans. All rights
reserved.
</div>
</div>
</footer>
</body>
</html>