make generic panel css class

src/assets/main.css

@@ -1,22 +0,0 @@
-
-:root {
-
-}
-
-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;
-}
-
-#app {
-    width: 100%;
-}

src/assets/main.scss

@@ -0,0 +1,52 @@
+
+:root {
+
+}
+
+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;
+}
+
+#app {
+    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;
+            }
+        }
+    }
+}

src/components/ChangelogComponent.vue

@@ -1,11 +1,18 @@
 <template>
-  <div class="changelog">
+    <div class="changelog panel pinned-paper">
-    <h1>Changelog</h1>
+        <div class="nail top-left">
-    <div class="changelog-entry" v-for="release in releases">
+            <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
-      <h2>Version {{ release.name }}</h2>
+        </div>
-      <pre>{{ release.body }}</pre>
+        <div class="nail top-right">
+            <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+        </div>
+        <h1>Changelog</h1>
+        <div class="changelog-entry" v-for="release in releases">
+            <hr>
+            <h2>Version {{ release.name }}</h2>
+            <pre>{{ release.body }}</pre>
+        </div>
     </div>
-  </div>
 </template>
 
 <script lang="ts">
@@ -13,35 +20,35 @@ import {defineComponent} from "vue";
 
 
 export default defineComponent({
-  name: "ChangelogComponent",
+    name: "ChangelogComponent",
-  data: () => ({
+    data: () => ({
-    releases: [] as Array<any>,
+        releases: [] as Array<any>,
-    lastPage: 1,
+        lastPage: 1,
-  }),
+    }),
-  methods: {
+    methods: {
-    async getReleases(page: number): Promise<void> {
+        async getReleases(page: number): Promise<void> {
-      const result = await fetch("https://api.github.com/repos/YouHaveTrouble/GuildMaster/releases?per_page=10")
+            const result = await fetch("https://api.github.com/repos/YouHaveTrouble/GuildMaster/releases?per_page=10")
-          .catch((e) => {
+                .catch((e) => {
-            return null;
+                    return null;
-          });
+                });
 
-      if (result === null) return;
+            if (result === null) return;
-      const json = await result.json();
+            const json = await result.json();
 
 
-      for (const release of json) {
+            for (const release of json) {
-        const version = {} as any;
+                const version = {} as any;
-        version.body = release.body.trim();
+                version.body = release.body.trim();
-        version.name = release.name;
+                version.name = release.name;
-        if (release.body.length === 0) continue;
+                if (release.body.length === 0) continue;
-        this.releases.push(version);
+                this.releases.push(version);
-      }
+            }
+        }
+    },
+    async mounted() {
+        this.getReleases(1);
+
     }
-  },
-  async mounted() {
-    this.getReleases(1);
-
-  }
 });
 </script>
 
@@ -54,17 +61,27 @@ export default defineComponent({
   align-items: center;
   gap: 1rem;
   max-width: 45rem;
+    width: 100%;
+
   h1 {
     font-size: 3rem;
     line-height: 1;
     margin: 0;
     text-align: center;
   }
+
   .changelog-entry {
     width: 100%;
+
     h2 {
       margin: 0;
     }
+
+    hr {
+      border: 0;
+      border-bottom: 1px solid black;
+    }
+
     pre {
       line-height: 1.2;
       margin: 0;

src/main.ts

@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 
-import './assets/main.css'
+import './assets/main.scss'
 
 const app = createApp(App)
 

src/views/TechnicalView.vue

@@ -1,15 +1,29 @@
 <template>
-<section class="technical-view">
+    <section class="technical-view">
-  <h1>Socials</h1>
+        <div class="socials panel pinned-paper">
-  <div class="socials">
+            <div class="nail top-left small">
-    <a class="link" href="https://discord.gg/j8KK5dGBps"><img class="icon" src="/img/icons/discord.svg" alt="Discord" />Discord</a>
+                <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
-    <a class="link" href="https://github.com/YouHaveTrouble/GuildMaster"><img class="icon" src="/img/icons/github.svg" alt="GitHub" />GitHub</a>
+            </div>
+            <div class="nail top-right small">
+                <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+            </div>
+            <h1>Socials</h1>
+            <div class="links">
+                <a class="link" href="https://discord.gg/j8KK5dGBps">
+                    <img class="icon" src="/img/icons/discord.svg" alt="Discord"/>
+                    Discord
+                </a>
+                <a class="link" href="https://github.com/YouHaveTrouble/GuildMaster">
+                    <img class="icon" src="/img/icons/github.svg" alt="GitHub"/>
+                    GitHub
+                </a>
+            </div>
 
-  </div>
+        </div>
 
-  <ChangelogComponent/>
+        <ChangelogComponent/>
 
-</section>
+    </section>
 </template>
 
 <script lang="ts">
@@ -17,8 +31,8 @@ import {defineComponent} from "vue";
 import ChangelogComponent from "@/components/ChangelogComponent.vue";
 
 export default defineComponent({
-  name: "TechnicalView",
+    name: "TechnicalView",
-  components: {ChangelogComponent},
+    components: {ChangelogComponent},
 
 })
 </script>
@@ -31,30 +45,44 @@ export default defineComponent({
   align-items: center;
   gap: 1rem;
   padding-block: 1rem;
+
   h1 {
     font-size: 3rem;
     line-height: 1;
     margin: 0;
   }
+
   .socials {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 1rem;
+    padding: 1rem;
+
+    .links {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      gap: 1rem;
+
+      .link {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 0.05rem;
+        text-decoration: underline;
+        font-size: 1.5rem;
+        color: #000;
+        font-weight: bold;
+      }
+    }
   }
-  .link {
+
-    display: flex;
+
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 0.05rem;
-    text-decoration: underline;
-    font-size: 1.5rem;
-    color: #000;
-    font-weight: bold;
-  }
   .icon {
     width: 2rem;
     height: 2rem;