Fix navbar colours on press and hover. Removed x50 colours

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

View File

@@ -11,7 +11,7 @@
</div>
<div class="text-left">
<div class="text-xl md:text-2xl font-bold">{name}</div>
<div class="text-sm md:text-base text-ecsess-150 mb-2 italic">{position}</div>
<div class="text-sm md:text-base text-ecsess-200 mb-2 italic">{position}</div>
<Button onclick={onViewProfile}>View Profile</Button>
</div>
</div>

View File

@@ -5,8 +5,8 @@
<Tabs.Control
{value}
classes="hover:border-b-ecsess-150 border-b-4 transition-all ease-in-out pb-2 text-lg active:border-b-ecsess-500 px-2"
stateActive="border-b-ecsess-350"
classes="hover:border-b-ecsess-200 border-b-4 transition-all ease-in-out pb-2 text-lg active:border-b-ecsess-500 px-2"
stateActive="border-b-ecsess-400"
>
{@render children()}
</Tabs.Control>

View File

@@ -44,7 +44,7 @@
controlClasses="
flex cursor-pointer justify-between
py-4 ease-in-out"
panelClasses=" border-t-ecsess-300 border-t-2 bg-transparent p-4 bg-ecsess-350/50"
panelClasses=" border-t-ecsess-300 border-t-2 bg-transparent p-4 bg-ecsess-400/50"
>
<!-- Control -->
{#snippet lead()}

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>

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="/">

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>

View File

@@ -4,7 +4,7 @@
let { title = '_Resource Title_', description = "Lorem ipsum", link = 'https://example.com' } = $props();
</script>
<div class="bg-ecsess-50 relative h-fit max-w-xl min-w-12 rounded-md px-4 py-2 md:py-0 hover:shadow-md transition-shadow border border-ecsess-150">
<div class="bg-ecsess-50 relative h-fit max-w-xl min-w-12 rounded-md px-4 py-2 md:py-0 hover:shadow-md transition-shadow border border-ecsess-100">
<div class="grid grid-cols-1 md:grid-cols-[7fr_1fr]">
<div class="flex flex-col items-start p-4">
<p class="text-ecsess-900 my-1 pb-1 text-left text-xl font-extrabold">