✨ new labels are legit

fumeapp · Oct 27, 2024 · bbce6dc · bbce6dc
1 parent e2addcf
commit bbce6dc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/app/components/logo/LogoText.vue b/app/components/logo/LogoText.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
-defineProps<{ large?: boolean }>()
+defineProps<{ large?: boolean, medium?: boolean }>()
 </script>
 
 <template>
   <div class="flex items-end">
     <div class="font-extrabold text-primary-900 dark:text-primary-200">fume</div>
     <u-icon v-if="large" name="i-mdi-circle" class="w-2 h-2 lg:w-12 lg:h-12 text-primary-900 dark:text-primary-100 mb-2" />
+    <u-icon v-else-if="medium" name="i-mdi-circle" class="w-2 h-2 lg:w-6 lg:h-6 text-primary-900 dark:text-primary-100 mb-2" />
     <div v-else class="text-primary-900 dark:text-primary-100">.</div>
     <div class="font-extrabold text-primary-600 dark:text-primary-300">bio</div>
   </div>

diff --git a/app/pages/label/[type]/[mg].vue b/app/pages/label/[type]/[mg].vue
@@ -1,27 +1,30 @@
 <script setup lang="ts">
 definePageMeta({ layout: 'bare' })
-const dims = { width: 45, height: 20 }
+const dims = { width: 45, height: 14 }
 const route = useRoute()
 const { type, mg } = route.params
 </script>
 
 <template>
   <div class="w-screen h-screen flex items-center justify-center">
     <div
-      class="flex flex-col justify-center items-center space-y-3"
+      class="cut-here flex flex-col justify-center items-center space-y-2"
       :style="`width: ${dims.width * 5}mm; height: ${dims.height * 5}mm;`"
     >
-      <div class="flex items-center space-x-3">
+      <div class="flex items-center space-x-3 h-52 w-full">
         <logo-bio class="w-52 h-52" />
-        <div class="flex flex-col space-y-3">
+        <div class="flex flex-col w-full flex-1">
           <logo-text class="text-9xl" large />
-          <div class="flex text-5xl font-extrabold">
-            <span class="text-sky-900 flex-1 text-center bg-sky-200 py-2 px-6"> {{ type }} </span>
-            <span v-if="mg !== 'none'" class="text-sky-200 bg-sky-900 py-2 px-6"> {{ mg }}mg </span>
+          <div class="flex font-extrabold w-full flex-1">
+            <span class="uppercase w-full flex-1 text-7xl text-sky-900 text-center bg-sky-200 py-1 px-6"> {{ type }} </span>
+            <div v-if="mg !== 'none'" class="text-sky-200 bg-sky-900 py-1 px-6 flex items-end">
+              <div class="text-7xl"> {{ mg }}</div>
+              <div>mg </div>
+            </div>
           </div>
         </div>
       </div>
-      <div class="uppercase font-semibold tracking-wider text-xs">
+      <div class="uppercase font-extrabold tracking-tighter">
         IN-VITRO LABORATORY RESEARCH USE ONLY.  NOT FOR HUMAN OR ANIMAL USE OR CONSUMPTION OF ANY KIND.
       </div>
     </div>