Minified stats (#30)

Author: d0rich

components/d/Stats.vue

@@ -71,7 +71,7 @@ const fifthStat = computed(() => statFromIndex(4))
 
 <template>
   <figure class="max-w-full">
-    <div class="hidden print:block">
+    <div class="stats__print-value">
       <div class="text-lg font-bold">{{ groupTitle }}</div>
       <div>
         <div
@@ -91,6 +91,21 @@ const fifthStat = computed(() => statFromIndex(4))
         </div>
       </div>
     </div>
+    <div class="stats__print-value--small">
+      <span
+        v-for="(skill, index) in titles"
+        :key="skill"
+        class="rounded text-white p-[.3em]"
+        :class="{
+          'hidden': values[index] < 3,
+          'bg-blue-500 text-xs': values[index] === 3,
+          'bg-blue-600 text-sm': values[index] === 4,
+          'bg-blue-700 text-base': values[index] === 5
+        }"
+      >
+      {{ skill }}
+      </span>
+    </div>
     <div class="relative print:hidden">
       <svg viewBox="-500 -500 2000 2000" xmlns="http://www.w3.org/2000/svg">
         <polygon
@@ -416,3 +431,20 @@ const fifthStat = computed(() => statFromIndex(4))
   stroke-linejoin: round;
 }
 </style>
+
+<style>
+.stats__print-value {
+  @apply hidden print:block;
+}
+.stats__print-value--small {
+  @apply hidden flex-wrap gap-2 items-center;
+}
+
+.small-print-stats .stats__print-value {
+  @apply print:hidden;
+}
+
+.small-print-stats .stats__print-value--small {
+  @apply print:flex;
+}
+</style>