mkrieger/asn-qr-code-label-generator
1
0
Fork 0
mirror of https://github.com/tmaier/asn-qr-code-label-generator.git synced 2026-03-14 08:33:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Set text size more dynamically

Browse source 
I am happy to learn of a CSS/TailwindCSS approach to make it even more dynamic
This commit is contained in:
Tobias Ludwig Maier 2023-12-28 23:37:04 +01:00
parent a55fd71ec4
commit eb1d4fb197
1 changed files with 9 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

12
index.html
View file

@ -208,12 +208,18 @@
alt=""
width="100"
height="100"
class="mr-[2mm] aspect-square h-[8mm] w-[8mm] flex-none"
class="mr-[1mm] aspect-square h-[8mm] w-[8mm] flex-none"
referrerpolicy="no-referrer"
/>
<div
class="flex-grow text-sm"
style="font-size: 2mm"
class="flex-grow"
:class="{
'text-[3.9mm]': label.text.length <= 6,
'text-[3.2mm]': label.text.length == 7,
'text-[2.7mm]': label.text.length == 8,
'text-[2.4mm]': label.text.length == 9,
'text-[2.1mm]': label.text.length >= 10,
}"
x-text="label.text"
></div>
</li>