notkaramel/ECSESS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix navbar colours on press and hover. Removed x50 colours

Browse Source
This commit is contained in:
Antoine Phan
2025-12-10 00:53:06 -05:00
parent acf7eff96f
commit cb8a67e008
9 changed files with 18 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/layout/Footer.svelte
View File

@@ -77,7 +77,7 @@
<!-- Center: Connect With Us -->
<div class="border-ecsess-800 border-b-1 pb-8 text-center md:border-0">
<h3 class="text-ecsess-150 mb-3 text-lg font-semibold">Connect With Us</h3>
<h3 class="text-ecsess-200 mb-3 text-lg font-semibold">Connect With Us</h3>
<div class="flex flex-wrap items-center justify-center gap-3">
{#each socialLinks as link}
<a
@@ -185,7 +185,7 @@
<!-- Copyright -->
<div>
<p class="text-ecsess-150 text-center text-sm">
<p class="text-ecsess-200 text-center text-sm">
🄯 ECSESS {year} under GNU General Public License v3.0. <br />
Designed with love {'<3'}.
</p>

2
src/components/layout/NavBar.svelte
View File

@@ -8,6 +8,7 @@
</script>
<nav class="bg-ecsess-black text-ecsess-100 sticky w-full py-1">
<!-- Small screens -->
<div class="block md:hidden">
<div class="mx-4 flex items-center-safe justify-between">
<a href="/">
@@ -41,6 +42,7 @@
{/if}
</div>
<!-- Medium and larger screens -->
<div class="hidden md:block">
<div class="flex place-content-center items-end">
<a href="/">

17
src/components/layout/NavButton.svelte
View File

@@ -1,21 +1,18 @@
<script>
import { page } from '$app/stores';
import { page } from '$app/state';
let { href, children } = $props();
// Check if this button's href matches the current page
const isActive = $derived($page.url.pathname === href);
const isActive = $derived(page.url.pathname === href);
</script>
<!-- border-ecsess-black hover:border-ecsess-150 active:border-ecsess-300 border-b-4 px-6 py-2
font-semibold transition-all hover:text-ecsess-100 -->
<a {href} class="w-full md:w-auto">
<a {href} class="w-auto mx-1">
<button
class="hover:text-ecsess-100 w-full rounded-md px-6 py-2 font-semibold transition-all md:mx-0.5 md:w-auto md:rounded-none
{isActive
? 'border-ecsess-300 bg-ecsess-800 md:border-b-4 md:bg-transparent'
: 'border-ecsess-black hover:border-ecsess-150 active:border-ecsess-300 hover:bg-ecsess-800 active:bg-ecsess-700 md:border-b-4 md:hover:bg-transparent md:active:bg-transparent'}"
class="hover:text-ecsess-100 hover:border-ecsess-100 text-ecsess-200 text-shadow-xl active:border-ecsess-500
active:text-ecsess-500 mx-0.5 w-full rounded-none border-b-4 px-6 py-2
font-semibold transition-all hover:cursor-pointer active:scale-99
{isActive ? 'border-ecsess-300' : 'border-transparent'}"
>
{@render children()}
</button>