X-Git-Url: https://git.r.bdr.sh/rbdr/forum/blobdiff_plain/bd8e98d7e24c4dbaee7db6ec7955f7c2f6d396a6..879fa389c2592760def75177eefbd3193e1845c9:/src/components/glyph/glyph.svelte?ds=sidebyside

diff --git a/src/components/glyph/glyph.svelte b/src/components/glyph/glyph.svelte
index e4b9166..60f99eb 100644
--- a/src/components/glyph/glyph.svelte
+++ b/src/components/glyph/glyph.svelte
@@ -1,39 +1,41 @@
 <script>
-  import { _ } from 'svelte-i18n';
-  import { getGlyphHash } from '../../utils/glyph_hash';
+	import { _ } from 'svelte-i18n';
+	import { getGlyphHash } from '$/utils/glyph_hash';
 
-  export let uuid;
+	export let uuid;
 </script>
 
-<div class="glyphicon" aria-hidden="true" title="{$_('glyph.title')}">
-  {#each getGlyphHash(uuid) as fragment}
-    <span class="{fragment.glyph}" style="color: {fragment.color} ">
-      {fragment.glyph}
-    </span>
-  {/each}
+<div class="glyphicon" role="img" aria-label={$_('glyph.title')} title={$_('glyph.title')}>
+	{#each getGlyphHash(uuid) as fragment}
+		<span class={fragment.glyph} style="color: {fragment.color} ">
+			{fragment.glyph}
+		</span>
+	{/each}
 </div>
 
 <style>
-  .glyphicon {
-    border: 1px solid black;
-    display: inline-block;
-    font-size: 1.4rem;
-    height: 48px;
-    margin-top: 5px;
-    width: 48px;
-  }
+	.glyphicon {
+		border: 1px solid black;
+		display: inline-block;
+		font-size: 1.4rem;
+		height: 48px;
+		margin-top: 5px;
+		width: 48px;
+		background-color: white;
+		padding: 2px;
+	}
 
-  span {
-    display: block;
-    float: left;
-    width: 24px;
-    height: 24px;
-    text-align: center;
-    line-height: 24px;
-  }
+	span {
+		display: block;
+		float: left;
+		width: 24px;
+		height: 24px;
+		text-align: center;
+		line-height: 24px;
+	}
 
-  .☽ {
-    font-size: 2rem;
-    line-height: 19px;
-  }
+	.☽ {
+		font-size: 2rem;
+		line-height: 19px;
+	}
 </style>