provide backgrounds for the guild page components

src/assets/main.scss

@@ -4,49 +4,61 @@
 }
 
 body {
-    margin: 0;
-    padding: 0 0 10rem;
-    min-height: calc(100vh - 10rem);
-    font-family: 'EB Garamond', serif;
-    overflow-y: scroll;
-    user-select: none;
-    background-size: 25rem;
-    background-color: rgba(87, 50, 20, 0.45);
-    background-image: url("/img/background/panels/wood.png");
-    background-blend-mode: darken;
-    background-repeat: repeat;
+  margin: 0;
+  padding: 0 0 10rem;
+  min-height: calc(100vh - 10rem);
+  font-family: 'EB Garamond', serif;
+  overflow-y: scroll;
+  user-select: none;
+  background-size: 25rem;
+  background-color: rgba(87, 50, 20, 0.45);
+  background-image: url("/img/background/wood/cut_wood_background.png");
+  background-blend-mode: darken;
+  background-repeat: repeat;
 }
 
 #app {
-    width: 100%;
+  width: 100%;
 }
 
 .panel {
-    &.pinned-paper {
-        background-image: url("/img/quests/backgrounds/paper.png");
-        position: relative;
-        filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
-        .nail {
-            position: absolute;
-            width: 2rem;
-            height: 2rem;
-            filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.5));
-            &.small {
-                width: 1rem;
-                height: 1rem;
-            }
-            img {
-                width: 100%;
-                height: 100%;
-            }
-            &.top-left {
-                top: 1rem;
-                left: 1rem;
-            }
-            &.top-right {
-                top: 1rem;
-                right: 1rem;
-            }
-        }
+  &.pinned-paper {
+    background-image: url("/img/quests/backgrounds/paper.png");
+    position: relative;
+    filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
+
+    .nail {
+      position: absolute;
+      width: 2rem;
+      height: 2rem;
+      filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.5));
+
+      &.small {
+        width: 1rem;
+        height: 1rem;
+      }
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+
+      &.top-left {
+        top: 1rem;
+        left: 1rem;
+      }
+
+      &.top-right {
+        top: 1rem;
+        right: 1rem;
+      }
     }
+  }
+
+  &.note-paper {
+    background-image: url("/img/background/paper/small_tile_paper.png");
+    position: relative;
+    filter: drop-shadow(-0.15rem 0.2rem 0.1rem rgba(0, 0, 0, 0.25));
+    border-image: url("/img/borders/metal_corner.png") 30 round;
+  }
 }

src/views/HomeView.vue

@@ -1,27 +1,36 @@
 <template>
-  <main>
-    <section class="title">
-      <h1>Guild Master</h1>
-      <h3>Adventurer's guild management game</h3>
-      <small>v{{version}}</small>
-    </section>
-    <section class="coffer">
-      <p>Coffer: {{guild.gold}} gold</p>
-    </section>
-    <section class="upgrade">
-      <p>Guild level: {{ guild.level }}</p>
-      <button :disabled="guild.upgradeCost ? guild.gold < guild.upgradeCost : true" @click="guild.upgrade()">
-        <span>Upgrade guild level</span><br>
-        <span>({{ guild.displayUpgradeCost }})</span>
-      </button>
-    </section>
-    <section class="upgrade">
-      <UpgradesList :guild="guild" />
-    </section>
-    <section class="upgrade">
-      <span class="wipe-save" @click="$emit('wipeSave')">Wipe your save data</span>
-    </section>
-  </main>
+    <main>
+        <section class="title panel note-paper">
+            <h1>Guild Master</h1>
+            <h3>Adventurer's guild management game</h3>
+            <small>v{{ version }}</small>
+        </section>
+        <section class="upgrades panel pinned-paper">
+            <div class="nail top-left">
+                <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+            </div>
+            <div class="nail top-right">
+                <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+            </div>
+            <section class="coffer">
+                <p>Coffer: {{ guild.gold }} gold</p>
+            </section>
+            <section class="upgrade">
+                <p>Guild level: {{ guild.level }}</p>
+                <button :disabled="guild.upgradeCost ? guild.gold < guild.upgradeCost : true" @click="guild.upgrade()">
+                    <span>Upgrade guild level</span><br>
+                    <span>({{ guild.displayUpgradeCost }})</span>
+                </button>
+            </section>
+            <section class="upgrade">
+                <UpgradesList :guild="guild"/>
+            </section>
+            <section class="upgrade">
+                <span class="wipe-save" @click="$emit('wipeSave')">Wipe your save data</span>
+            </section>
+        </section>
+
+    </main>
 </template>
 
 <script lang="ts">
@@ -33,23 +42,38 @@ import {version} from "../../package.json"
 import UpgradesList from "@/components/UpgradesList.vue";
 
 export default defineComponent({
-  name: "GuildView",
-  components: {UpgradesList},
-  data: () => {
-    return {
-      version: version,
-    }
-  },
-  props: {
-    guild: {
-      type: Object as PropType<Guild>,
-      default: () => new Guild(1, 0) as Guild,
+    name: "GuildView",
+    components: {UpgradesList},
+    data: () => {
+        return {
+            version: version,
+        }
     },
-  }
+    props: {
+        guild: {
+            type: Object as PropType<Guild>,
+            default: () => new Guild(1, 0) as Guild,
+            required: true,
+        },
+    }
 });
 </script>
 
 <style lang="scss">
+main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-block: 1rem;
+  gap: 1rem;
+
+  .upgrades {
+    padding: 1rem;
+      width: 45rem;
+  }
+}
+
 .title {
   display: flex;
   flex-direction: column;
@@ -57,33 +81,40 @@ export default defineComponent({
   align-items: center;
   padding: 2.5rem;
   text-align: center;
-
+  width: max-content;
   gap: 0.5rem;
+
   h1 {
     font-size: 4rem;
     line-height: 0.75;
 
     margin: 0;
   }
+
   h3 {
     margin: 0;
     line-height: 0.9;
   }
+
   small {
     font-size: 0.9rem;
     font-weight: bold;
     line-height: 0.25;
   }
 }
+
 .coffer {
   text-align: center;
+
   p {
     font-size: 1.5rem;
     font-weight: bold;
   }
 }
+
 .upgrade {
   text-align: center;
+
   .wipe-save {
     display: inline-flex;
     font-weight: bold;
@@ -91,6 +122,7 @@ export default defineComponent({
     color: #d52121;
     cursor: pointer;
   }
+
   p {
     margin: 0;
     font-size: 1.5rem;