bartvdbraak/hellob.art
1
0
Fork 0
mirror of https://github.com/bartvdbraak/hellob.art.git synced 2025-04-26 17:11:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: reformat and add screenreader label

Browse source
This commit is contained in:
Bart van der Braak 2023-07-31 13:03:30 +02:00
parent 1a74e1236d
commit 4b1259bc6f
1 changed files with 24 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/lib/components/Header.svelte
View file

@ -13,29 +13,47 @@
<AppBar>
<svelte:fragment slot="lead">
<button aria-label="Toggle navigation menu" class="md:hidden btn btn-sm mr-4" on:click={drawerOpen}>
<button
aria-label="Toggle navigation menu"
class="md:hidden btn btn-sm mr-4"
on:click={drawerOpen}
>
<span>
<Hamburger />
</span>
</button>
<img src="./icon.svg" alt="Logo" srcset="" class="pr-2" />
<h2 class="code">hellob.art</h2>
<img width="32" height="24" src="./icon.svg" alt="Logo" srcset="" class="" />
<h1 class="h6">
<span
class="bg-gradient-to-br logo-text-gradient bg-clip-text text-transparent box-decoration-clone font-mono pl-3"
>hellob.art</span
>
</h1>
</svelte:fragment>
<svelte:fragment slot="trail">
<a
href="https://linkedin.com/in/bartvdbraak"
target="_blank"
rel="noopener noreferrer"
class="btn-icon btn-icon-sm hover:variant-soft-primary"><LinkedIn /><span class="sr-only">LinkedIn Profile of Bart van der Braak</span></a
class="btn-icon btn-icon-sm hover:variant-soft-primary"
><LinkedIn /><span class="sr-only">LinkedIn Profile of Bart van der Braak</span></a
>
<a
href="https://github.com/bartvdbraak"
target="_blank"
rel="noopener noreferrer"
class="btn-icon btn-icon-sm hover:variant-soft-primary"><GitHub /><span class="sr-only">GitHub Profile of Bart van der Braak</span></a
class="btn-icon btn-icon-sm hover:variant-soft-primary"
><GitHub /><span class="sr-only">GitHub Profile of Bart van der Braak</span></a
>
<LightSwitch />
</svelte:fragment>
</AppBar>
<ProgressBar label="Progress Bar" value={progress} max={100} rounded="" />
<span id="progress-bar-label" class="sr-only">Loading Progress</span>
<ProgressBar
label="Progress Bar"
labelledby="progress-bar-label"
value={progress}
max={100}
rounded=""
/>