X-Git-Url: https://git.r.bdr.sh/rbdr/forum/blobdiff_plain/a7cf03c192470cbab13edeb1aec99e0c66dede10..HEAD:/src/lib/components/glyph/glyph.svelte

diff --git a/src/lib/components/glyph/glyph.svelte b/src/lib/components/glyph/glyph.svelte
index 0559b98..89bc10c 100644
--- a/src/lib/components/glyph/glyph.svelte
+++ b/src/lib/components/glyph/glyph.svelte
@@ -5,9 +5,17 @@
 	export let uuid: string;
 </script>
 
-<div class="glyphicon" role="img" aria-label={$_('glyph.title')} title={$_('glyph.title')}>
+<div
+	class="inline-block w-12 h-12 mt-1 bg-white border border-black border-solid p-0.5 box-content glyphicon"
+	role="img"
+	aria-label={$_('glyph.title')}
+	title={$_('glyph.title')}
+>
 	{#each getGlyphHash(uuid) as fragment}
-		<span class={fragment.glyph} style="color: {fragment.color} ">
+		<span
+			class="block text-2xl float-left w-6 h-6 text-center leading-6 {fragment.glyph}"
+			style="color: {fragment.color} "
+		>
 			{fragment.glyph}
 		</span>
 	{/each}
@@ -16,22 +24,6 @@
 <style>
 	.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;
 	}
 
 	.☽ {