Rewrite page in Svelte 5 #49
2 changed files with 16 additions and 20 deletions
|
@ -89,7 +89,7 @@
|
||||||
{:else}{/if}
|
{:else}{/if}
|
||||||
<a
|
<a
|
||||||
href={service.href}
|
href={service.href}
|
||||||
class="font-bold text-accent {hover.title ? 'text-primary' : 'text-secondary'}"
|
class="font-bold {!hover.title || 'text-secondary'}"
|
||||||
>{service.name}</a
|
>{service.name}</a
|
||||||
>
|
>
|
||||||
{#if hover.title}
|
{#if hover.title}
|
||||||
|
@ -98,7 +98,7 @@
|
||||||
class="grid items-center"
|
class="grid items-center"
|
||||||
>
|
>
|
||||||
<OpenInNewWindow
|
<OpenInNewWindow
|
||||||
color={hover.title ? 'hsl(var(--primary))' : 'hsl(var(--secondary)'}
|
color={hover.title ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
|
||||||
class="self-center"
|
class="self-center"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -138,11 +138,11 @@
|
||||||
: 'Loading'}
|
: 'Loading'}
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
<p class="text-wrap text-center text-sm text-accent">{service.desc}</p>
|
<p class="text-wrap text-center text-sm">{service.desc}</p>
|
||||||
<p class="text-center text-sm font-bold text-destructive">{service.warn}</p>
|
<p class="text-center text-sm font-bold text-destructive">{service.warn}</p>
|
||||||
<div class="grid {service.extLink ? 'grid-cols-2' : 'grid-cols-1'} mt-auto justify-items-center">
|
<div class="grid {service.extLink ? 'grid-cols-2' : 'grid-cols-1'} mt-auto justify-items-center">
|
||||||
<a
|
<a
|
||||||
class="flex flex-row rounded-md border-x-2 px-2 text-sm text-accent hover:border-primary hover:text-primary"
|
class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
|
||||||
href={service.href}
|
href={service.href}
|
||||||
on:mouseover={() => (hover.link = true)}
|
on:mouseover={() => (hover.link = true)}
|
||||||
on:mouseleave={() => (hover.link = false)}
|
on:mouseleave={() => (hover.link = false)}
|
||||||
|
@ -154,7 +154,7 @@
|
||||||
class="grid items-center pl-1 pr-0"
|
class="grid items-center pl-1 pr-0"
|
||||||
>
|
>
|
||||||
<OpenInNewWindow
|
<OpenInNewWindow
|
||||||
color={hover.link ? 'hsl(var(--primary))' : 'hsl(var(--secondary)'}
|
color={hover.link ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
|
||||||
class="self-center"
|
class="self-center"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -162,7 +162,7 @@
|
||||||
</a>
|
</a>
|
||||||
{#if service.extLink}
|
{#if service.extLink}
|
||||||
<a
|
<a
|
||||||
class="flex flex-row rounded-md border-x-2 px-2 text-sm text-accent hover:border-primary hover:text-primary"
|
class="flex flex-row rounded-md border-x-2 px-2 text-sm hover:border-secondary hover:text-secondary"
|
||||||
href={service.extLink}
|
href={service.extLink}
|
||||||
on:mouseover={() => (hover.ext = true)}
|
on:mouseover={() => (hover.ext = true)}
|
||||||
on:mouseleave={() => (hover.ext = false)}
|
on:mouseleave={() => (hover.ext = false)}
|
||||||
|
@ -174,7 +174,7 @@
|
||||||
class="grid items-center pl-1 pr-0"
|
class="grid items-center pl-1 pr-0"
|
||||||
>
|
>
|
||||||
<OpenInNewWindow
|
<OpenInNewWindow
|
||||||
color={hover.ext ? 'hsl(var(--primary))' : 'hsl(var(--secondary)'}
|
color={hover.ext ? 'hsl(var(--secondary))' : 'hsl(var(--primary)'}
|
||||||
class="self-center"
|
class="self-center"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import { Button } from '$lib/components/ui/button';
|
import { Button } from '$lib/components/ui/button';
|
||||||
|
|
||||||
const button = 'border-t-2 bg-black/55 hover:bg-black/70 hover:border-primary w-28';
|
const button = 'border-t-2 bg-black/55 hover:bg-black/70 hover:border-secondary w-28';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ul
|
<ul
|
||||||
|
@ -12,9 +12,8 @@
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
href="/"
|
href="/"
|
||||||
class="{button} + {$page.url.pathname === '/'
|
class="{button} + {!($page.url.pathname === '/')
|
||||||
? 'border-primary text-primary'
|
|| 'border-secondary text-secondary'}"
|
||||||
: 'text-accent'}"
|
|
||||||
>
|
>
|
||||||
Home
|
Home
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -23,9 +22,8 @@
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
href="/servers"
|
href="/servers"
|
||||||
class="{button} + {$page.url.pathname.startsWith('/servers')
|
class="{button} + {!$page.url.pathname.startsWith('/servers')
|
||||||
? 'border-primary text-primary'
|
|| 'border-secondary text-secondary'}"
|
||||||
: 'text-accent'}"
|
|
||||||
>
|
>
|
||||||
Servers
|
Servers
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -34,9 +32,8 @@
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
href="/services"
|
href="/services"
|
||||||
class="{button} + {$page.url.pathname.startsWith('/services')
|
class="{button} + {!$page.url.pathname.startsWith('/services')
|
||||||
? 'border-primary text-primary'
|
|| 'border-secondary text-secondary'}"
|
||||||
: 'text-accent'}"
|
|
||||||
>
|
>
|
||||||
Services
|
Services
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -45,9 +42,8 @@
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
href="/about"
|
href="/about"
|
||||||
class="{button} + {$page.url.pathname.startsWith('/about')
|
class="{button} + {!$page.url.pathname.startsWith('/about')
|
||||||
? 'border-primary text-primary'
|
|| 'border-secondary text-secondary'}"
|
||||||
: 'text-accent'}"
|
|
||||||
>
|
>
|
||||||
About
|
About
|
||||||
</Button>
|
</Button>
|
||||||
|
|
Loading…
Reference in a new issue