steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-11-04 05:21:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve layout shift and accessibility

Browse Source
This commit is contained in:
vcoppe
2024-09-21 19:15:19 +02:00
parent 1483460ec6
commit d4460f95dd
11 changed files with 29 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/src/app.html
View File

@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
%sveltekit.head%
</head>

4
website/src/app.pcss
View File

@@ -32,6 +32,8 @@
--destructive-foreground: 210 40% 98%;
--support: 220 15 130;
--link: 0 110 180;
--ring: 222.2 84% 4.9%;
@@ -67,6 +69,8 @@
--destructive-foreground: 210 40% 98%;
--support: 255 110 190;
--link: 80 190 255;
--ring: hsl(212.7,26.8%,83.9);
}

10
website/src/lib/components/Help.svelte
View File

@@ -5,16 +5,14 @@
export let link: string | undefined = undefined;
</script>
<div class="text-sm bg-muted rounded border flex flex-row items-center p-2 {$$props.class || ''}">
<div
class="text-sm bg-secondary rounded border flex flex-row items-center p-2 {$$props.class || ''}"
>
<CircleHelp size="16" class="w-4 mr-2 shrink-0 grow-0" />
<div>
<slot />
{#if link}
<a
href={link}
target="_blank"
class="text-sm text-blue-500 dark:text-blue-300 hover:underline"
>
<a href={link} target="_blank" class="text-sm text-link hover:underline">
{$_('menu.more')}
</a>
{/if}

6
website/src/lib/components/docs/DocsContainer.svelte
View File

@@ -41,17 +41,17 @@
}
:global(.markdown > a) {
@apply text-blue-500;
@apply text-link;
@apply hover:underline;
}
:global(.markdown p > a) {
@apply text-blue-500;
@apply text-link;
@apply hover:underline;
}
:global(.markdown li > a) {
@apply text-blue-500;
@apply text-link;
@apply hover:underline;
}

6
website/src/lib/components/docs/DocsNote.svelte
View File

@@ -3,8 +3,8 @@
</script>
<div
class="bg-accent border-l-8 {type === 'note'
? 'border-blue-500'
class="bg-secondary border-l-8 {type === 'note'
? 'border-link'
: 'border-destructive'} p-2 text-sm rounded-md"
>
<slot />
@@ -12,7 +12,7 @@
<style lang="postcss">
div :global(a) {
@apply text-blue-500;
@apply text-link;
@apply hover:underline;
}
</style>

2
website/src/lib/components/gpx-layer/WaypointPopup.svelte
View File

@@ -99,7 +99,7 @@
<style lang="postcss">
div :global(a) {
@apply text-blue-500 dark:text-blue-300;
@apply text-link;
@apply hover:underline;
}

6
website/src/lib/components/layer-control/OverpassPopup.svelte
View File

@@ -62,11 +62,11 @@
{#if key !== 'name' && !key.includes('image')}
<span class="font-mono">{key}</span>
{#if key === 'website' || key === 'contact:website' || key === 'contact:facebook' || key === 'contact:instagram' || key === 'contact:twitter'}
<a href={value} target="_blank" class="text-blue-500 underline">{value}</a>
<a href={value} target="_blank" class="text-link underline">{value}</a>
{:else if key === 'phone' || key === 'contact:phone'}
<a href={'tel:' + value} class="text-blue-500 underline">{value}</a>
<a href={'tel:' + value} class="text-link underline">{value}</a>
{:else if key === 'email' || key === 'contact:email'}
<a href={'mailto:' + value} class="text-blue-500 underline">{value}</a>
<a href={'mailto:' + value} class="text-link underline">{value}</a>
{:else}
<span>{value}</span>
{/if}

4
website/src/routes/[[language]]/help/+layout.svelte
View File

@@ -16,7 +16,7 @@
<Button
variant="link"
href={getURLForLanguage($locale, `/help/${guide}`)}
class="h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal {$page
class="min-h-5 h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal {$page
.params.guide === guide
? 'font-semibold text-foreground'
: ''}"
@@ -29,7 +29,7 @@
<Button
variant="link"
href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
class="h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal ml-3 {$page
class="min-h-5 h-fit p-0 w-fit text-muted-foreground hover:text-foreground hover:no-underline font-normal hover:font-semibold items-start whitespace-normal ml-3 {$page
.params.guide ===
guide + '/' + subGuide
? 'font-semibold text-foreground'

8
website/src/routes/[[language]]/help/+page.svelte
View File

@@ -14,13 +14,13 @@
<Button
variant="outline"
href={getURLForLanguage($locale, `/help/${guide}`)}
class="h-full pt-6 pb-3 px-0"
class="min-h-36 h-full pt-6 pb-3 px-0"
>
<div class="flex flex-col w-full">
<div class="text-center text-5xl">
<div class="h-12 text-center text-5xl">
{guideIcons[guide]}
</div>
<div class="text-2xl text-center my-3 w-full whitespace-normal px-6">
<div class="min-h-8 text-2xl text-center my-3 w-full whitespace-normal px-6">
{#await data.guideModules[guide] then guideModule}
{guideModule.metadata.title}
{/await}
@@ -30,7 +30,7 @@
<Button
variant="link"
href={getURLForLanguage($locale, `/help/${guide}/${subGuide}`)}
class="h-fit px-0 py-1 text-muted-foreground text-base text-center whitespace-normal"
class="min-h-8 h-fit min-w-24 px-0 py-1 text-muted-foreground text-base text-center whitespace-normal"
>
<svelte:component this={guideIcons[subGuide]} size="16" class="mr-1 shrink-0" />
{#await data.guideModules[`${guide}/${subGuide}`] then guideModule}

6
website/src/routes/[[language]]/help/[...guide]/+page.svelte
View File

@@ -53,7 +53,7 @@
variant="link"
href="https://www.reddit.com/r/gpxstudio/"
target="_blank"
class="p-0 h-6 text-blue-500"
class="p-0 h-6 text-link"
>
<CornerDownRight size="16" class="mr-1" />
{$_('docs.ask_on_reddit')}
@@ -65,7 +65,7 @@
href="https://github.com/gpxstudio/gpx.studio/edit/dev/website/src/lib/docs/en/{$page.params
.guide}.mdx"
target="_blank"
class="p-0 h-6 ml-auto text-blue-500"
class="p-0 h-6 ml-auto text-link"
>
<PenLine size="16" class="mr-1" />
Edit this page on GitHub
@@ -75,7 +75,7 @@
variant="link"
href="https://crowdin.com/project/gpxstudio/{$locale}"
target="_blank"
class="p-0 h-6 ml-auto text-blue-500"
class="p-0 h-6 ml-auto text-link"
>
<PenLine size="16" class="mr-1" />
{$_('docs.translate')}

1
website/tailwind.config.js
View File

@@ -42,6 +42,7 @@ const config = {
foreground: "hsl(var(--card-foreground) / <alpha-value>)"
},
support: "rgb(var(--support))",
link: "rgb(var(--link))"
},
borderRadius: {
lg: "var(--radius)",