qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-02-06 06:58:04 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

🎨 Add new badges & accessibility improvements

Browse Source
This commit is contained in:
pheralb 2024-01-24 11:41:03 +00:00
parent 44b6201b75
commit dba9378833
3 changed files with 11 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/navbar.svelte
View File

@ -53,7 +53,7 @@
<!-- Se le puso un aria-label al href="/" --> <!-- Se le puso un aria-label al href="/" -->
<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.0 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 hover:opacity-80 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>

26
src/components/svgCard.svelte
View File

@ -28,6 +28,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { copyToClipboard as figmaCopyToClipboard } from '@/figma/copy-to-clipboard'; import { copyToClipboard as figmaCopyToClipboard } from '@/figma/copy-to-clipboard';
import { insertSVG as figmaInsertSVG } from '@/figma/insert-svg'; import { insertSVG as figmaInsertSVG } from '@/figma/insert-svg';
import { badgeStyles } from '@/ui/styles';
// Props: // Props:
export let svgInfo: iSVG; export let svgInfo: iSVG;
@ -186,34 +187,21 @@
/> />
{/if} {/if}
<!-- Title --> <!-- Title -->
<!-- Aqui se modifico el text-neutral a 400 --> <div class="mb-3 flex flex-col space-y-1 items-center justify-center">
<div class="mb-3 flex flex-col items-center justify-center">
<p class="truncate text-[15px] font-medium text-balance text-center select-all"> <p class="truncate text-[15px] font-medium text-balance text-center select-all">
{svgInfo.title} {svgInfo.title}
</p> </p>
<div class="flex flex-wrap justify-center"> <div class="flex items-center space-x-1 justify-center">
{#if Array.isArray(svgInfo.category)} {#if Array.isArray(svgInfo.category)}
{#each svgInfo.category.sort() as c, index} {#each svgInfo.category.sort() as c, index}
<a <a href={`/directory/${c.toLowerCase()}`} class={badgeStyles}>{c} </a>
href={`/directory/${c.toLowerCase()}`}
class="text-sm lowercase text-neutral-500 hover:underline font-mono">{c}</a
>
{#if index < svgInfo.category.length - 1}
<span class="text-neutral-500">.</span>
{/if}
{/each} {/each}
{:else} {:else}
<a <a href={`/directory/${svgInfo.category.toLowerCase()}`} class={badgeStyles}>
href={`/directory/${svgInfo.category.toLowerCase()}`} {svgInfo.category}
class="text-sm lowercase text-neutral-500 hover:underline font-mono" </a>
>{svgInfo.category}</a
>
{/if} {/if}
</div> </div>
<a
href={`/directory/${svgInfo.category.toLowerCase()}`}
class="text-sm lowercase text-neutral-400 hover:underline font-mono">{svgInfo.category}</a
>
</div> </div>
<!-- Actions --> <!-- Actions -->
<div class="flex items-center space-x-1"> <div class="flex items-center space-x-1">

3
src/ui/styles.ts
View File

@ -3,3 +3,6 @@ export const buttonStyles =
export const inputStyles = export const inputStyles =
'w-full border-b border-neutral-300 bg-white p-3 px-11 placeholder-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-300 dark:border-neutral-800 dark:bg-neutral-900 dark:focus:ring-neutral-700'; 'w-full border-b border-neutral-300 bg-white p-3 px-11 placeholder-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-300 dark:border-neutral-800 dark:bg-neutral-900 dark:focus:ring-neutral-700';
export const badgeStyles =
'inline-flex items-center px-2.5 py-0.5 rounded-full font-medium bg-neutral-100 dark:bg-neutral-800/50 text-neutral-500 dark:text-neutral-400 text-xs font-mono hover:underline';