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: ui changes again

Browse Source
This commit is contained in:
coolnsx
2025-05-19 15:42:13 +05:30
parent 5f3aa5d20c
commit 91d644500a
4 changed files with 88 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
tailwind.config.js
View File

@@ -1,9 +0,0 @@
module.exports = {
purge: ["./templates/**/*.html", "./theme/**/*.html"],
darkMode: "class",
theme: {},
variants: {},
plugins: [
require('@tailwindcss/typography'),
],
};

151
templates/base.html
View File

@@ -12,24 +12,34 @@
rel="stylesheet" rel="stylesheet"
href="{{ get_url(path='main.css') | safe }}?v={{ get_hash(path='main.css') }}" href="{{ get_url(path='main.css') | safe }}?v={{ get_hash(path='main.css') }}"
/> />
<script defer> <script>
// Mobile menu toggle
function toggleMobileMenu() { function toggleMobileMenu() {
const menu = document.getElementById("mobile-menu"); const toggleButton = document.getElementById("toggle-menu-button");
menu.classList.toggle("hidden"); const mobileMenu = document.getElementById("mobile-menu");
const svg = toggleButton.querySelector("svg");
mobileMenu.classList.toggle("hidden");
const isMenuOpen = !mobileMenu.classList.contains("hidden");
svg.querySelector("path").setAttribute(
"d",
isMenuOpen
? "M6 18L18 6M6 6l12 12" // X icon
: "M4 6h16M4 12h16M4 18h16" // Hamburger icon
);
} }
document.addEventListener("click", function (event) { // Hide menu on outside click
const menu = document.getElementById("mobile-menu"); document.addEventListener("click", function(event) {
const button = event.target.closest("button[aria-label='Toggle menu']"); const toggleButton = document.getElementById("toggle-menu-button");
const mobileMenu = document.getElementById("mobile-menu");
const isClickInsideMenu = mobileMenu.contains(event.target);
const isClickInsideButton = toggleButton.contains(event.target);
// If menu is open, and click is outside menu and button — close it if (!isClickInsideMenu && !isClickInsideButton) {
if ( mobileMenu.classList.add("hidden");
!menu.classList.contains("hidden") && const svg = toggleButton.querySelector("svg");
!menu.contains(event.target) && svg.querySelector("path").setAttribute(
!button "d","M4 6h16M4 12h16M4 18h16"
) { );
menu.classList.add("hidden");
} }
}); });
@@ -52,6 +62,21 @@
overlay.appendChild(fullscreenImage); overlay.appendChild(fullscreenImage);
document.body.appendChild(overlay); document.body.appendChild(overlay);
} }
let lastScroll = 0;
window.addEventListener("scroll", () => {
const nav = document.getElementById("top-header");
const currentScroll = window.pageYOffset;
if (currentScroll > lastScroll) {
nav.style.transform = "translateY(-100%)";
} else {
nav.style.transform = "translateY(0)";
}
lastScroll = currentScroll;
});
</script> </script>
<link rel="preload" as="image" href="/assets/background.webp" type="image/webp"/> <link rel="preload" as="image" href="/assets/background.webp" type="image/webp"/>
<style> <style>
@@ -69,63 +94,55 @@
<div class="fixed inset-0 bg-black/70 -z-5"></div> <div class="fixed inset-0 bg-black/70 -z-5"></div>
<!-- Top Navigation --> <!-- Top Navigation -->
<nav class="sticky top-0 z-50 bg-transparent backdrop-blur py-4"> <header id="top-header" class="sticky top-0 z-50 bg-transparent pt-2 transition-all duration-300 ease-in-out">
<div <div class="container mx-auto px-4 flex justify-center">
class="container mx-auto px-4 flex justify-between items-center" <!-- Entire Header Island -->
> <div class="w-full max-w-screen-2xl flex justify-between items-center px-6 py-3">
<!-- 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 --> <!-- Logo -->
<button <a href="/" class="text-xl font-bold text-white rounded-2xl px-6 py-2.5 bg-gray-900/70 border border-gray-800 shadow-xl backdrop-blur-md">
class="sm:hidden px-3 py-3 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" Coolans
aria-label="Toggle menu" </a>
onclick="toggleMobileMenu()"
> <!-- Mobile Menu Button -->
<svg <button id="toggle-menu-button"
class="w-6 h-6" class="sm:hidden px-3 py-3 rounded-lg text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-400 bg-gray-900/70 border border-gray-800 shadow-xl backdrop-blur-md"
fill="none" aria-label="Toggle menu"
stroke="currentColor" onclick="toggleMobileMenu()"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
viewBox="0 0 24 24"
> >
<path d="M4 6h16M4 12h16M4 18h16" /> <svg
</svg> class="w-6 h-6"
</button> 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 --> <!-- Nav Links -->
<ul <ul
id="mobile-menu" id="mobile-menu"
class="hidden sm:flex sm:static absolute right-4 top-full mt-2 sm:mt-0 px-6 py-3 rounded-2xl bg-gray-900/70 border border-gray-800 shadow-xl backdrop-blur-md space-x-6 sm:space-x-6 flex-col sm:flex-row text-gray-300 sm:items-center" class="hidden sm:flex sm:static absolute right-10 top-full px-6 py-3 rounded-2xl bg-gray-900/70 border border-gray-800 shadow-xl backdrop-blur-md space-x-6 sm:space-x-6 flex-col sm:flex-row max-w-screen text-gray-300 sm:items-center"
> >
<li> <li>
<a <a href="/" class="hover:text-blue-400 block py-2 sm:py-0">Home</a>
href="/" </li>
class="hover:text-blue-400 block py-2 sm:py-0" <li>
>Home</a <a href="/blog" class="hover:text-blue-400 block py-2 sm:py-0">Blogs</a>
> </li>
</li> </ul>
<li> </div>
<a
href="/blog"
class="hover:text-blue-400 block py-2 sm:py-0"
>Blogs</a
>
</li>
</ul>
</div> </div>
</nav> </header>
<!-- Main Content Section --> <!-- Main Content Section -->
<main class="flex-grow section py-10 relative z-10 rounded-2xl"> <main class="flex-grow section py-10 relative z-10 rounded-2xl">
<div <div
class="container mx-auto px-4" class="container mx-auto px-6"
> >
<div <div
class="p-8 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md text-center text-sm" class="p-8 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md text-center text-sm"
@@ -136,12 +153,12 @@
</main> </main>
<!-- Footer --> <!-- Footer -->
<footer class="w-full py-10 relative z-10"> <footer class="w-full py-4 relative z-10">
<div class="container mx-auto px-4"> <div class="container mx-auto px-10">
<div <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" class="px-6 py-2 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. Exhausted Presevance. No Rights Reserved. {{ now() | date(format="%Y") }} Coolans. Exhausted Presevance. No Rights Reserved.
</div> </div>
</div> </div>
</footer> </footer>

4
templates/blog-page.html
View File

@@ -15,7 +15,7 @@
{{ page.title }} {{ page.title }}
</h1> </h1>
<p class="subtitle text-blue-400"><strong>{{ page.date | date(format="%B %d, %Y") }}</strong></p> <p class="subtitle text-sky-400"><strong>{{ page.date | date(format="%B %d, %Y") }}</strong></p>
{% if page.extra.image %} {% if page.extra.image %}
{% set image = page.extra.image %} {% set image = page.extra.image %}
@@ -37,9 +37,7 @@
</div> </div>
{% endif %} {% endif %}
<div class="mt-6 text-xl text-gray-300"> <div class="mt-6 text-xl text-gray-300">
{{ page.content | safe }} {{ page.content | safe }}
</div> </div>
{% endblock content %} {% endblock content %}

6
templates/blog.html
View File

@@ -12,8 +12,8 @@
<input <input
id="search-input" id="search-input"
type="text" type="text"
placeholder="Search blogs..." placeholder="Search blog..."
class="w-full max-w-2xl px-4 py-2 rounded-md bg-gray-800 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-600" class="w-full max-w-2xl px-4 py-2 rounded-md bg-gray-800 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-sky-600"
/> />
</div> </div>
@@ -56,7 +56,7 @@
<!-- Spacer pushes below content to the bottom --> <!-- Spacer pushes below content to the bottom -->
<div class="mt-auto"> <div class="mt-auto">
<!-- Date --> <!-- Date -->
<p class="subtitle text-blue-400 mt-2"> <p class="subtitle text-sky-400 mt-2">
{{ page.date | date(format="%B %d, %Y") }} {{ page.date | date(format="%B %d, %Y") }}
</p> </p>