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,7 +1,14 @@
 <template>
-  <div class="changelog">
+    <div class="changelog 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>
         <h1>Changelog</h1>
         <div class="changelog-entry" v-for="release in releases">
+            <hr>
             <h2>Version {{ release.name }}</h2>
             <pre>{{ release.body }}</pre>
         </div>
@@ -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">
+        <div class="socials panel pinned-paper">
+            <div class="nail top-left small">
+                <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+            </div>
+            <div class="nail top-right small">
+                <img src="/img/quests/overlays/nail.png" alt="" draggable="false"/>
+            </div>
             <h1>Socials</h1>
-  <div class="socials">
+            <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://discord.gg/j8KK5dGBps">
-    <a class="link" href="https://github.com/YouHaveTrouble/GuildMaster"><img class="icon" src="/img/icons/github.svg" alt="GitHub" />GitHub</a>
+                    <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>
 
         <ChangelogComponent/>
 
-</section>
+    </section>
 </template>
 
 <script lang="ts">
@@ -31,18 +45,28 @@ 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: 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;
@@ -55,6 +79,10 @@ export default defineComponent({
         color: #000;
         font-weight: bold;
       }
+    }
+  }
+
+
   .icon {
     width: 2rem;
     height: 2rem;