Cleaned up styles for printing

Added name and sub title fields
Tweaked some tasks

src/assets/base.css

@@ -6,7 +6,7 @@
   font-weight: normal;
 }
 
-body {
+html, body {
   min-height: 100vh;
   color: black;
   background: white;

src/assets/main.css

@@ -2,4 +2,6 @@
 
 #app {
   font-weight: normal;
+  margin: 0;
+  padding: 0;
 }

src/components/BingoBoard.vue

@@ -35,22 +35,23 @@ let outerTasks = [
   `Meet a Mingo manager. The Blue Mingo a truly memorable experience.`,
   `Find [Max's|Grace's] best childhood friend.`,
   `Find someone with a Clark Sports Center membership.`,
-  `Find someone from [Arizona|Massachusetts|California|Colorado].`,
+  `Find someone who lives in [Arizona|Massachusetts|California|Colorado].`,
   `Find someone who has actually enjoyed the baseball hall of fame.`,
   `Find someone who has stayed at Grace's parent's house`,
   `Learn an [outrageous|embarrassing] story about [Max|Grace].`,
-  `Check [someone|yourself] for ticks.`,
+  `Check yourself for ticks.`,
   `Make a new friend.`,
   `Count Grace's cousins.`,
   `Meet Max's cousins.`,
-  `High five a child (with consent).`,
+  `High five a child with consent.`,
-  `Do a [funny|serious] [covert handshake|elaborate handshake] with someone who [runs|works out|wore a tie|has cool hair].`,
+  `Do a [covert handshake|elaborate handshake] with someone who [runs|wore a tie|has cool hair].`,
   `Find someone with [pets|a baby] and look at their pictures.`,
   `Find the wedding crasher.`,
   `Catch up with someone you haven't seen in awhile`,
   `Learn Max's latest nerdy hobby.`,
   `Find someone who has never been to Cooperstown before.`,
   `Find someone who is a [teacher|nurse].`,
+  `Take a joyful selfie with [a friend|someone you just met] & send it to Max.`
 ]
 
 const hardnessMap = {
@@ -154,6 +155,29 @@ function getTitle(){
   return text
 }
 
+function getSubtitle(boardNumber){
+
+  let text = 'Error'
+
+  switch(boardNumber % 4){
+    case 0:
+      text = 'Small talk boring, bingo is fun! Use this bingo board to be social. Fill 5 in a row for a chance to win a prize.'
+      break;
+    case 1:
+      text = 'Mingle and play bingo! Chat with other guests. Fill 5 boxes in a row. Submit for a chance to win a prize!'
+      break;
+    case 2:
+      text = 'Fill in 5 in a row for a chance to win a prize. Get the answers from other guests. Surely someone here can be of assistance.'
+      break;
+    case 3:
+      text = 'Talking to other people is hard. Perhaps this bingo board can motivate you. Get some answers. Fill in 5 in a row for a chance to win!'
+      break;
+  }
+
+  return text
+}
+
+
 function fillOutTaskOptions(array){
   // fill out array options
   for (var i = array.length - 1; i >= 0; i--) {
@@ -204,10 +228,10 @@ onBeforeMount(() => {
   innerTasks = fillOutTaskOptions(innerTasks)
   outerTasks = fillOutTaskOptions(outerTasks)
 
-  console.log('Inner Tasks ' + innerTasks.length)
+  console.log('Inner Tasks: ' + innerTasks.length)
-  console.log('Outer Tasks ' + outerTasks.length)
+  console.log('Outer Tasks: ' + outerTasks.length)
 
-  const totalBoards = 3
+  const totalBoards = 50
 
   for (var i = totalBoards - 1; i >= 0; i--) {
     boards.push(getBoardArray(i))
@@ -220,9 +244,14 @@ onBeforeMount(() => {
 
   <div class="board" v-for="(board,boardNumber) in boards">
     <h2 class="board-title">
-      Mingle {{ getTitle() }}
+      Wedding Mingle {{ getTitle() }}
-      #{{ boardNumber+1 }}
+      <span class="float-right grey">Board #{{ boardNumber+1 }}</span>
+      <p class="sub-title grey">
+        {{ getSubtitle(boardNumber) }}
+        <span class="name-field float-right">Name _________________________</span>
+      </p>
     </h2>
+    
     <div class="tile" v-for="task in board">
       <span>{{ task }}</span>
     </div>
@@ -234,7 +263,7 @@ onBeforeMount(() => {
 
 <style scoped>
   .board {
-    width: 100vw;
+    width: calc(100vw - 15px);
     height: 100vh;
     flex-direction: row;
     display: flex;
@@ -270,11 +299,28 @@ onBeforeMount(() => {
     bottom: 15px;
     margin: 0 10px;
   }
+
   .board-title {
     width: 100%;
-    text-align: center;
+    text-align: left;
-    padding: 20px;
+    padding: 20px 0;
     font-size: 2em;
+    line-height: 30px;
+  }
+  .sub-title {
+    width: 100%;
+    display: inline-block;
+    font-size: 12px;
+  }
+  .float-right {
+    float: right;
+  }
+  .name-field {
+    display: inline-block;
+    color: black;
+  }
+  .grey {
+    color: #6b6b6b !important;
   }
   .page-break {
     page-break-after:always;