fix up styles for the pages,

fix up some code formatting to be more consistent

src/views/AdventurerView.vue

@@ -1,11 +1,11 @@
 <template>
-<div class="adventurer-section">
-  <section class="recruit">
-    <h1>Applying adventurers</h1>
-    <div class="adventurers">
-      <div v-if="currentlyForHire">
-        <adventurer-tile class="hire-tile" :adventurer="currentlyForHire"/>
-        <div class="decision">
+  <div class="adventurer-section">
+    <section class="recruit panel pinned-paper">
+      <h1>Applying adventurers</h1>
+      <div class="adventurers">
+        <div v-if="currentlyForHire">
+          <adventurer-tile class="hire-tile" :adventurer="currentlyForHire"/>
+          <div class="decision">
           <span
               title="Hire"
               @click="hireAdventurer(currentlyForHire)"
@@ -13,31 +13,32 @@
           >
             ✔
           </span>
-          <span
-              :title="Object.keys(adventurers).length > 0 ? 'Dismiss' : ''"
-              :class="{disabled: Object.keys(adventurers).length <= 0}"
-              @click="dismissAdventurer()"
-          >
+            <span
+                :title="Object.keys(adventurers).length > 0 ? 'Dismiss' : ''"
+                :class="{disabled: Object.keys(adventurers).length <= 0}"
+                @click="dismissAdventurer()"
+            >
             ✗
           </span>
+          </div>
+        </div>
+        <div v-else>
+          <span>Noone applied as of now. Check back later!</span>
+        </div>
+
+      </div>
+    </section>
+    <section class="collection panel pinned-paper">
+      <h1>Recruited adventurers ({{ Object.keys(adventurers).length }} /
+        {{ guild.adventurerCapacity.getAdventurerCapacity() }})</h1>
+      <div class="adventurers">
+        <div class="adventurer-tile" v-for="adventurer in adventurers" :key="adventurer.id">
+          <AdventurerTile class="entry" :adventurer="adventurer"/>
+          <b>{{ adventurer.name }}</b>
         </div>
       </div>
-      <div v-else>
-        <span>Noone applied as of now. Check back later!</span>
-      </div>
-
-    </div>
-  </section>
-  <section class="collection">
-    <h1>Recruited adventurers ({{ Object.keys(adventurers).length }} / {{ guild.adventurerCapacity.getAdventurerCapacity() }})</h1>
-    <div class="adventurers">
-      <div class="adventurer-tile" v-for="adventurer in adventurers" :key="adventurer.id">
-        <AdventurerTile class="entry" :adventurer="adventurer" />
-        <b>{{ adventurer.name }}</b>
-      </div>
-    </div>
-  </section>
-</div>
+    </section>
+  </div>
 </template>
 
 <script lang="ts">
@@ -45,7 +46,7 @@ import type {PropType} from "vue";
 import {defineComponent} from "vue";
 import AdventurerTile from "@/components/AdventurerTile.vue";
 import type {Adventurer} from "@/classes/Adventurer";
-import { loadAdventurersForHire } from "@/GameData";
+import {loadAdventurersForHire} from "@/GameData";
 import type {Guild} from "@/classes/Guild";
 
 export default defineComponent({
@@ -53,7 +54,7 @@ export default defineComponent({
   components: {AdventurerTile},
   data: () => {
     return {
-      currentlyForHire: null as Adventurer|null,
+      currentlyForHire: null as Adventurer | null,
       adventurersForHire: [] as Array<Adventurer>,
     }
   },
@@ -63,12 +64,14 @@ export default defineComponent({
       default() {
         return {} as Guild
       },
+      required: true,
     },
     adventurers: {
       type: Object as PropType<{ [key: string]: Adventurer }>,
       default() {
         return {} as { [key: string]: Adventurer };
       },
+      required: true,
     },
     lastRecruitTime: {
       type: Number as PropType<number>,
@@ -78,7 +81,7 @@ export default defineComponent({
     },
   },
   methods: {
-    getRandomAdventurer(): Adventurer|null {
+    getRandomAdventurer(): Adventurer | null {
       if (this.adventurersForHire.length <= 0) return null;
       const randomId = this.adventurersForHire.length * Math.random() << 0;
       return this.adventurersForHire[randomId];
@@ -99,7 +102,7 @@ export default defineComponent({
       window.localStorage.setItem("currentlyForHire", adventurer.id);
 
     },
-    hireAdventurer(adventurer: Adventurer|any): void {
+    hireAdventurer(adventurer: Adventurer | any): void {
       if (Object.keys(this.adventurers).length >= this.guild.adventurerCapacity.getAdventurerCapacity()) return;
       this.adventurers[adventurer.id] = adventurer;
       this.currentlyForHire = null;
@@ -148,22 +151,28 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .adventurer-section {
+  padding-block: 1rem;
   display: flex;
-  flex-direction: column;
   justify-content: center;
-  align-items: center;
+  align-content: center;
+  flex-direction: column;
+  gap: 1rem;
   width: 100%;
+
   section {
-    max-width: 1280px;
-    width: 100%;
     text-align: center;
-    padding-block: 1rem;
+    padding: 1rem;
+    width: calc(100% - 2rem);
+    max-width: 45rem;
+    margin: 0 auto;
   }
+
   h1 {
     font-size: 2rem;
     font-weight: bold;
     margin: 0;
   }
+
   .adventurers {
     display: flex;
     flex-direction: row;
@@ -171,6 +180,7 @@ export default defineComponent({
     align-items: center;
     flex-wrap: wrap;
     gap: 1rem;
+
     .adventurer-tile {
       display: flex;
       justify-content: center;
@@ -178,10 +188,12 @@ export default defineComponent({
       flex-direction: column;
       gap: 0.25rem;
       font-size: 1.1rem;
+
       .entry {
         height: 7rem;
         width: 7rem;
       }
+
       b {
         line-height: 1;
         text-align: center;
@@ -192,6 +204,7 @@ export default defineComponent({
       }
     }
   }
+
   .decision {
     display: flex;
     flex-direction: row;
@@ -199,17 +212,21 @@ export default defineComponent({
     align-items: center;
     font-size: 2rem;
     gap: 1rem;
+
     span {
       cursor: pointer;
+
       &:hover {
         color: #fff;
       }
+
       &.disabled {
-        color: rgba(0,0,0, 0.5);
+        color: rgba(0, 0, 0, 0.5);
         cursor: default;
       }
     }
   }
+
   .hire-tile {
     width: 8rem;
     height: 8rem;