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={() => { on:click={() => {
copyToClipboard(svgInfo.route); 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} /> <Copy size={17} />
</button> </button>
@ -66,7 +66,7 @@
on:click={() => { on:click={() => {
downloadSvg(svgInfo.route); 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} /> <DownloadSimple size={17} />
</button> </button>
@ -74,7 +74,7 @@
href={svgInfo.url} href={svgInfo.url}
title="Website" title="Website"
target="_blank" 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} /> <ArrowUpRight size={17} />
</a> </a>

View File

@ -53,7 +53,11 @@
</script> </script>
</svelte:head> </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 --> <!-- moon icon -->
{#if dark} {#if dark}
<Sun size={18} /> <Sun size={18} />

View File

@ -46,6 +46,12 @@
</div> </div>
<div <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" 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} {#each categories as category}
<a <a
@ -98,7 +104,7 @@
<Container> <Container>
<a href="/"> <a href="/">
<div <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} /> <ArrowLeft size={20} />
<span>Back to home</span> <span>Back to home</span>