Emojis auf Kassen-Tiles in maximaler Größe

Made-with: Cursor

templates/index.html

@@ -60,6 +60,16 @@
             white-space: normal;
             font-size: clamp(0.9rem, 4vw, 1.5rem);
             padding: 0.5rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .article-tile .btn .article-icon {
+            font-size: min(18vw, 22vh);
+            line-height: 1;
+            margin-bottom: 0.25rem;
         }
 
         .kasse-sum-row {
@@ -127,8 +137,8 @@
             <div class="article-tile">
                 <button type="submit" name="position" value="{{ pos }}" title="{{ prod['name'] }}"
                     class="btn {{ prod['color_class'] }}">
-                    {{ prod['icon'] }}<br>
-                    {{ '{:,.2f}'.format(prod['price']).replace('.', ',') }}€<br>
+                    <span class="article-icon">{{ prod['icon'] }}</span>
+                    {{ '{:,.2f}'.format(prod['price']).replace('.', ',') }}€
                     ({{ items.get(pos, 0) }})
                 </button>
             </div>