365DevNet/Omoluabi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: increase light-mode nav text contrast (text-gray-900), adjust borders/shadow; mobile/desktop parity

Browse Source
This commit is contained in:
Richard Bergsma
2025-08-08 23:35:49 +02:00
parent 725a3e8e3a
commit 0f86f8f615
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/layouts/BaseLayout.astro
View File

@@ -31,7 +31,7 @@ const { title = "Omoluabi Association Netherlands", description = "Preserving Ni
Skip to main content Skip to main content
</a> </a>
<!-- Navigation Header --> <!-- Navigation Header -->
<header class="bg-white dark:bg-gray-900/95 backdrop-blur shadow-sm sticky top-0 z-50 border-b border-gray-100 dark:border-white/10"> <header class="bg-white dark:bg-gray-900/95 backdrop-blur shadow-md sticky top-0 z-50 border-b border-gray-200 dark:border-white/10">
<nav class="container mx-auto px-4 py-4"> <nav class="container mx-auto px-4 py-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<!-- Logo --> <!-- Logo -->
@@ -47,13 +47,13 @@ const { title = "Omoluabi Association Netherlands", description = "Preserving Ni
<!-- Desktop Navigation --> <!-- Desktop Navigation -->
<div class="hidden md:flex items-center space-x-8"> <div class="hidden md:flex items-center space-x-8">
<a href="/" class="text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400 transition-colors">Home</a> <a href="/" class="text-gray-900 dark:text-gray-200 hover:text-nigerian-green-700 dark:hover:text-kente-gold-400 transition-colors">Home</a>
<a href="/about" class="text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400 transition-colors">About</a> <a href="/about" class="text-gray-900 dark:text-gray-200 hover:text-nigerian-green-700 dark:hover:text-kente-gold-400 transition-colors">About</a>
<a href="/events" class="text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400 transition-colors">Events</a> <a href="/events" class="text-gray-900 dark:text-gray-200 hover:text-nigerian-green-700 dark:hover:text-kente-gold-400 transition-colors">Events</a>
<a href="/members" class="text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400 transition-colors">Members</a> <a href="/members" class="text-gray-900 dark:text-gray-200 hover:text-nigerian-green-700 dark:hover:text-kente-gold-400 transition-colors">Members</a>
<a href="/orphanage" class="text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400 transition-colors">Orphanage</a> <a href="/orphanage" class="text-gray-900 dark:text-gray-200 hover:text-nigerian-green-700 dark:hover:text-kente-gold-400 transition-colors">Orphanage</a>
<a href="/gallery" class="text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400 transition-colors">Gallery</a> <a href="/gallery" class="text-gray-900 dark:text-gray-200 hover:text-nigerian-green-700 dark:hover:text-kente-gold-400 transition-colors">Gallery</a>
<a href="/contact" class="text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400 transition-colors">Contact</a> <a href="/contact" class="text-gray-900 dark:text-gray-200 hover:text-nigerian-green-700 dark:hover:text-kente-gold-400 transition-colors">Contact</a>
</div> </div>
<!-- Right side controls --> <!-- Right side controls -->
@@ -70,7 +70,7 @@ const { title = "Omoluabi Association Netherlands", description = "Preserving Ni
</div> </div>
<!-- Mobile menu button --> <!-- Mobile menu button -->
<button class="md:hidden text-gray-700 dark:text-gray-200" id="mobile-menu-button" aria-controls="mobile-menu" aria-expanded="false"> <button class="md:hidden text-gray-900 dark:text-gray-200" id="mobile-menu-button" aria-controls="mobile-menu" aria-expanded="false">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg> </svg>
@@ -80,13 +80,13 @@ const { title = "Omoluabi Association Netherlands", description = "Preserving Ni
<!-- Mobile menu --> <!-- Mobile menu -->
<div class="md:hidden hidden" id="mobile-menu"> <div class="md:hidden hidden" id="mobile-menu">
<div class="mt-2 rounded-lg bg-white dark:bg-gray-800 shadow-lg ring-1 ring-gray-900/5 dark:ring-white/10 pt-4 pb-2 space-y-2"> <div class="mt-2 rounded-lg bg-white dark:bg-gray-800 shadow-lg ring-1 ring-gray-900/5 dark:ring-white/10 pt-4 pb-2 space-y-2">
<a href="/" class="block px-3 py-2 text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400">Home</a> <a href="/" class="block px-3 py-2 text-gray-900 dark:text-gray-200 hover:text-nigerian-green-700 dark:hover:text-kente-gold-400">Home</a>
<a href="/about" class="block px-3 py-2 text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400">About</a> <a href="/about" class="block px-3 py-2 text-gray-900 dark:text-gray-200 hover:text-nigerian-green-700 dark:hover:text-kente-gold-400">About</a>
<a href="/events" class="block px-3 py-2 text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400">Events</a> <a href="/events" class="block px-3 py-2 text-gray-900 dark:text-gray-200 hover:text-nigerian-green-700 dark:hover:text-kente-gold-400">Events</a>
<a href="/members" class="block px-3 py-2 text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400">Members</a> <a href="/members" class="block px-3 py-2 text-gray-900 dark:text-gray-200 hover:text-nigerian-green-700 dark:hover:text-kente-gold-400">Members</a>
<a href="/orphanage" class="block px-3 py-2 text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400">Orphanage</a> <a href="/orphanage" class="block px-3 py-2 text-gray-900 dark:text-gray-200 hover:text-nigerian-green-700 dark:hover:text-kente-gold-400">Orphanage</a>
<a href="/gallery" class="block px-3 py-2 text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400">Gallery</a> <a href="/gallery" class="block px-3 py-2 text-gray-900 dark:text-gray-200 hover:text-nigerian-green-700 dark:hover:text-kente-gold-400">Gallery</a>
<a href="/contact" class="block px-3 py-2 text-gray-700 dark:text-gray-200 hover:text-nigerian-green-600 dark:hover:text-kente-gold-400">Contact</a> <a href="/contact" class="block px-3 py-2 text-gray-900 dark:text-gray-200 hover:text-nigerian-green-700 dark:hover:text-kente-gold-400">Contact</a>
<div class="pt-4 space-y-2"> <div class="pt-4 space-y-2">
<a href="/donate" class="block btn bg-gradient-to-r from-ankara-red-500 to-kente-gold-500 text-white text-center">❤️ Donate</a> <a href="/donate" class="block btn bg-gradient-to-r from-ankara-red-500 to-kente-gold-500 text-white text-center">❤️ Donate</a>
<a href="/join" class="block btn bg-gradient-to-r from-nigerian-green-500 to-kente-gold-500 text-white text-center">⭐ Join Us</a> <a href="/join" class="block btn bg-gradient-to-r from-nigerian-green-500 to-kente-gold-500 text-white text-center">⭐ Join Us</a>