Fix navbar colours on press and hover. Removed x50 colours
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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()}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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="/">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user