Don't remember what this WIP was about

[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..89bc10c9735cfd856755f3b7115c2c3ad97d8535 100644 (file)
--- 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;
        }
 
        .☽ {