make generic panel css class

src/views/TechnicalView.vue

@@ -1,15 +1,29 @@
 <template>
-<section class="technical-view">
-  <h1>Socials</h1>
-  <div class="socials">
-    <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>
+    <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="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",
-  components: {ChangelogComponent},
+    name: "TechnicalView",
+    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;