From b95b8a303ff15ef14ac77db87ae9ebc19456b7b8 Mon Sep 17 00:00:00 2001
From: Brian DeRocher <brian@derocher.org>
Date: Tue, 3 Dec 2024 23:18:26 -0500
Subject: [PATCH] Make the font scale to the container

While setting font-size: calc() works, using zoom will probably be better for printing.
---
 src/components/Sticker.vue | 2 ++
 src/views/StickerView.vue  | 6 ++++++
 2 files changed, 8 insertions(+)

diff --git a/src/components/Sticker.vue b/src/components/Sticker.vue
index 1a696f6..4bf896d 100644
--- a/src/components/Sticker.vue
+++ b/src/components/Sticker.vue
@@ -64,10 +64,12 @@ const layout4Class = computed(() => ({
   height: 100%;
 }
 .sticker {
+  width: 256px;
   aspect-ratio: 6 / 1;
   background-color: v-bind(color);
   display: flex;
   .content {
+    //font-size: calc(1.5vw + 1.5vh);
     padding: 5px;
     width: 100%;
     > div > div {
diff --git a/src/views/StickerView.vue b/src/views/StickerView.vue
index dfbd0db..e3ac590 100644
--- a/src/views/StickerView.vue
+++ b/src/views/StickerView.vue
@@ -55,6 +55,7 @@ function claimSticker() {
       <div class="flex flex-col gap-5">
         <div id="StickerWrapper">
           <Sticker
+            class="sticker"
             v-bind="stickerStore.sticker"
             v-if="stickerStore.sticker"
           />
@@ -77,5 +78,10 @@ function claimSticker() {
 #StickerWrapper {
   background-color: #DDD;
   padding: 12px;
+  @media (screen(sm)) {
+    .sticker {
+      zoom: 250%;
+    }
+  }
 }
 </style>