qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-02-14 11:10:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🚀 Invert the opacity state in navbar items

Browse Source
This commit is contained in:
Mehdi Dara 2024-01-26 15:10:16 +03:30
parent 9d8f86f414
commit bb2d70cc7a
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/navbar.svelte
View File

@ -54,7 +54,7 @@
<div class="flex items-center justify-between mx-auto"> <div class="flex items-center justify-between mx-auto">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<a href="/" aria-label="Go to the SVGL v4.1 home page"> <a href="/" aria-label="Go to the SVGL v4.1 home page">
<div class="flex items-center space-x-2 hover:opacity-80 transition-opacity"> <div class="flex items-center space-x-2 opacity-80 hover:opacity-100 transition-opacity">
<svelte:component this={Logo} /> <svelte:component this={Logo} />
<span class="text-[19px] font-medium tracking-wide hidden md:block">svgl</span> <span class="text-[19px] font-medium tracking-wide hidden md:block">svgl</span>
<p class="text-neutral-400 hidden md:block font-mono">v4.1</p> <p class="text-neutral-400 hidden md:block font-mono">v4.1</p>
@ -71,7 +71,7 @@
target={link.external ? '_blank' : ''} target={link.external ? '_blank' : ''}
aria-label={link.label ?? link.name} aria-label={link.label ?? link.name}
class={cn( class={cn(
'flex items-center hover:opacity-80 transition-opacity text-[15px] pl-2 md:pl-3 group', 'flex items-center opacity-80 hover:opacity-100 transition-opacity text-[15px] pl-2 md:pl-3 group',
currentPath === link.url && currentPath === link.url &&
'underline underline-offset-8 decoration-dotted decoration-neutral-500' 'underline underline-offset-8 decoration-dotted decoration-neutral-500'
)} )}
@ -102,7 +102,7 @@
<a <a
href="https://twitter.com/pheralb_" href="https://twitter.com/pheralb_"
target="_blank" target="_blank"
class="flex items-center space-x-1 hover:opacity-80 transition-opacity" class="flex items-center space-x-1 opacity-80 hover:opacity-100 transition-opacity"
title="Twitter" title="Twitter"
> >
<XIcon iconSize={16} /> <XIcon iconSize={16} />
@ -111,7 +111,7 @@
<a <a
href={social.url} href={social.url}
target="_blank" target="_blank"
class="flex items-center space-x-1 hover:opacity-80 transition-opacity" class="flex items-center space-x-1 opacity-80 hover:opacity-100 transition-opacity"
title={social.name} title={social.name}
> >
<svelte:component this={social.icon} size={20} strokeWidth={1.5} name={social.name} /> <svelte:component this={social.icon} size={20} strokeWidth={1.5} name={social.name} />

2
src/components/theme.svelte
View File

@ -51,7 +51,7 @@
</script> </script>
</svelte:head> </svelte:head>
<button on:click={toggle} aria-label="Toggle dark mode" class="hover:opacity-80"> <button on:click={toggle} aria-label="Toggle dark mode" class="opacity-80 hover:opacity-100">
<!-- moon icon --> <!-- moon icon -->
{#if dark} {#if dark}
<SunIcon size={20} strokeWidth={1.5} /> <SunIcon size={20} strokeWidth={1.5} />