Use supabase

[rbdr/forum] / src / lib / components / glyph / glyph.svelte

diff --git a/src/lib/components/glyph/glyph.svelte b/src/lib/components/glyph/glyph.svelte
index 0559b986389c19a802ea6811741f62da84608adc..0726752aa87857ac8a6fe240725ad84459f46a2b 100644 (file)
--- a/src/lib/components/glyph/glyph.svelte
+++ b/src/lib/components/glyph/glyph.svelte
@@ -5,9 +5,9 @@
        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 +16,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;
        }
 
        .☽ {