Add Engschrift woff, fix card sizes, add more presets, replace button group with grid, add print button

src/App.vue

@@ -5,7 +5,6 @@ import { useCards } from '@/stores/cards.ts'
 import { ref } from 'vue'
 import {
   VaButton,
-  VaButtonGroup,
   VaCard,
   VaCardContent,
   VaColorInput,
@@ -24,11 +23,15 @@ function presetChange(card: CardT, preset: keyof typeof presets | 'none') {
   Object.keys(values).forEach((key) => (card[key as keyof Preset] = values[key as keyof Preset]))
 }
 const active = ref(-1)
+
+const print = () => window.print()
 </script>
 
 <template>
-  <div class="grid grid-cols-3">
+  <div class="grid grid-cols-1 md:grid-cols-3">
-    <div class="noPrint flex flex-col gap-3 border-r-4 bg-gray-100 mr-4 h-screen overflow-y-auto">
+    <div
+      class="noPrint flex flex-col gap-3 md:border-r-4 bg-gray-100 md:mr-4 pb-8 md:pb-0 h-screen overflow-y-auto"
+    >
       <VaCard
         v-for="(card, i) in cardStore.cards"
         :key="i"
@@ -39,14 +42,14 @@ const active = ref(-1)
         :stripe-color="active === i ? 'success' : card.bgColor"
       >
         <VaCardContent class="flex flex-col gap-4">
-          <VaInput v-model="card.title" label="Title" clearable />
+          <VaInput v-model="card.title" :label="`Title Card ${i + 1}`" clearable />
           <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
             <VaInput v-model="card.name" label="Name" class="col-span-2" clearable />
             <VaCounter
               v-model="card.textSize"
               type="number"
               min="1"
-              max="10"
+              max="15"
               label="Name Text Size"
             />
           </div>
@@ -59,7 +62,7 @@ const active = ref(-1)
           </div>
           <VaDivider />
           <h3 class="text-lg font-bold uppercase text-center">Apply a preset:</h3>
-          <VaButtonGroup class="mx-auto">
+          <div class="mx-auto grid grid-cols-3 content-center gap-1">
             <VaButton
               v-for="(preset, key) in presets"
               :key="key"
@@ -69,11 +72,22 @@ const active = ref(-1)
             >
               {{ preset.title }}
             </VaButton>
-          </VaButtonGroup>
+          </div>
         </VaCardContent>
       </VaCard>
+      <VaButton
+        class="bottom-0 m-2 w-32 md:right-0 md:mr-8"
+        style="position: fixed"
+        title="print"
+        round
+        icon="print"
+        @click="print"
+        >Print</VaButton
+      >
     </div>
-    <div class="col-span-2 grid grid-cols-2 page gap-2 h-screen overflow-y-auto">
+    <div
+      class="hidden col-span-2 md:grid print:grid grid-cols-2 page gap-2 h-screen overflow-y-auto"
+    >
       <card
         v-for="(_, i) in cardStore.cards"
         :key="i"

src/assets/main.css

@@ -1,16 +1,34 @@
-/*@import 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;1,700&display=swap';*/
+@import 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;1,700&display=swap';
 @import 'https://fonts.googleapis.com/icon?family=Material+Icons';
 @import 'tailwindcss';
-.card {
+
-  width: 9cm;
+@font-face {
-  height: 6.5cm;
+  font-family: 'Engschrift';
+  font-style: normal;
+  font-weight: normal;
+  src:
+    local('DIN 1451 Std Engschrift'),
+    url('@/assets/DINEngschriftStd.woff') format('woff'),
+    url('@/assets/DINEngschriftStd.otf') format('opentype');
 }
 
 @font-face {
-  font-family: 'DINEngschrift';
+  font-family: 'Mittelschrift';
-  src: url('@/assets/fonts/DINEngschriftStd.otf') format('opentype');
+  font-style: normal;
+  font-weight: normal;
+  src:
+    local('DIN 1451 Std Mittelschrift'),
+    url('@/assets/DINMittelschriftStd.woff') format('woff');
 }
 
+.eng {
+  font-family: 'Engschrift', 'sans-serif';
+}
+
+.card {
+  height: 185pt;
+  width: 255pt;
+}
 @media print {
   .noPrint {
     display: none;
@@ -38,6 +56,6 @@
     gap: 0;
   }
   .card {
-    border-color: var(--color-gray-200) !important;
+    border-width: 0;
   }
 }

src/colors.ts

@@ -7,8 +7,15 @@ export const presets = {
     nameColor: '#000000',
     title: 'Fachschaft 4',
   },
+  inverted: {
+    bgColor: '#ffffff',
+    color: '#000000',
+    textColor: '#000000',
+    nameColor: '#ffffff',
+    title: 'Fachschaft 4',
+  },
   helping: {
-    bgColor: '#383838',
+    bgColor: '#000000',
     color: '#ffffff',
     textColor: '#ffffff',
     nameColor: '#000000',
@@ -21,6 +28,13 @@ export const presets = {
     nameColor: '#ffffff',
     title: 'Awareness',
   },
+  security: {
+    bgColor: '#8d851c',
+    color: '#e8db0b',
+    textColor: '#000000',
+    nameColor: '#000000',
+    title: 'Security',
+  },
   // TODO: add new types
 } satisfies Record<string, Preset>
 

src/components/card.vue

@@ -15,25 +15,24 @@ const props = defineProps<{
     :style="{ backgroundColor: card.color }"
   >
     <div
-      class="h-16 bg-gray-600 flex flex-row space-between align-center relative"
+      class="h-14 bg-gray-600 flex flex-row space-between align-center relative"
       :style="{ backgroundColor: card.bgColor }"
     >
       <logo class="absolute top-0 left-0" :color="card.textColor" />
       <p
-        class="text-center w-full mx-16 align-center h-fit my-auto text-white text-5xl"
+        class="text-center w-full mx-16 align-center h-fit my-auto text-white text-5xl font-bold eng font-medium pt-3"
-        :style="{ color: card.textColor, fontFamily: 'DINEngschrift' }"
+        :style="{ color: card.textColor }"
       >
         {{ card.title }}
       </p>
     </div>
     <p
-      class="my-auto text-center max-w-full overflow-hidden name overflow-ellipsis"
+      class="my-auto text-center max-w-full overflow-hidden font-bold name overflow-ellipsis eng font-medium pt-5"
       style="font-size: var(--normalSize); @media print {font-size: var(--printSize)}"
       :style="{
         color: card.nameColor,
-        '--normalSize': `${card.textSize * 0.18}cm`,
+        '--normalSize': `${card.textSize * 0.3}cm`,
         '--printSize': `${card.textSize}vw`,
-        fontFamily: 'DINEngschrift',
       }"
     >
       {{ card.name }}

src/components/logo.vue

@@ -10,7 +10,7 @@ const { color } = defineProps<{ color: string }>()
     height="1000"
     viewBox="0 0 1000 999.99996"
     xmlns="http://www.w3.org/2000/svg"
-    class="w-16 h-16"
+    class="w-14 h-14 ml-4"
     :style="`--color: ${color || 'white'}`"
   >
     <g id="layer-MC1" transform="translate(-57.60569,-0.68580814)" style="display: inline">