Design improvements.

This commit is contained in:
pheralb 2023-03-22 09:21:15 +00:00
parent f38595d21c
commit 88e7be2747
3 changed files with 15 additions and 5 deletions

View File

@ -57,7 +57,7 @@
on:click={() => {
copyToClipboard(svgInfo.route);
}}
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-300 dark:hover:bg-neutral-700/40"
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
>
<Copy size={17} />
</button>
@ -66,7 +66,7 @@
on:click={() => {
downloadSvg(svgInfo.route);
}}
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-300 dark:hover:bg-neutral-700/40"
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
>
<DownloadSimple size={17} />
</button>
@ -74,7 +74,7 @@
href={svgInfo.url}
title="Website"
target="_blank"
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-300 dark:hover:bg-neutral-700/40"
class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
>
<ArrowUpRight size={17} />
</a>

View File

@ -53,7 +53,11 @@
</script>
</svelte:head>
<button on:click={toggle} class="focus:outline-none" class:hidden>
<button
on:click={toggle}
class="duration-100 hover:-translate-y-0.5 focus:outline-none"
aria-label="Toggle dark mode"
>
<!-- moon icon -->
{#if dark}
<Sun size={18} />

View File

@ -47,6 +47,12 @@
<div
class="flex items-center space-x-1 overflow-y-auto border-b border-neutral-300 pb-3 dark:border-neutral-700/40 md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible"
>
<a
href="/"
class={`flex w-full items-center rounded-md p-2 transition-none duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40
${data.pathname === `/` ? 'bg-neutral-200 dark:bg-neutral-700/30' : ''}`}
data-sveltekit-preload-data>All</a
>
{#each categories as category}
<a
href={`/directory/${category.toLowerCase()}`}
@ -98,7 +104,7 @@
<Container>
<a href="/">
<div
class="flex items-center space-x-2 duration-100 dark:text-neutral-400 dark:hover:text-white"
class="flex items-center space-x-2 duration-100 hover:text-neutral-500 dark:text-neutral-400 dark:hover:text-white"
>
<ArrowLeft size={20} />
<span>Back to home</span>