make generic panel css class

src/components/ChangelogComponent.vue

@@ -1,11 +1,18 @@
 <template>
-  <div class="changelog">
-    <h1>Changelog</h1>
-    <div class="changelog-entry" v-for="release in releases">
-      <h2>Version {{ release.name }}</h2>
-      <pre>{{ release.body }}</pre>
+    <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>
     </div>
-  </div>
 </template>
 
 <script lang="ts">
@@ -13,35 +20,35 @@ import {defineComponent} from "vue";
 
 
 export default defineComponent({
-  name: "ChangelogComponent",
-  data: () => ({
-    releases: [] as Array<any>,
-    lastPage: 1,
-  }),
-  methods: {
-    async getReleases(page: number): Promise<void> {
-      const result = await fetch("https://api.github.com/repos/YouHaveTrouble/GuildMaster/releases?per_page=10")
-          .catch((e) => {
-            return null;
-          });
+    name: "ChangelogComponent",
+    data: () => ({
+        releases: [] as Array<any>,
+        lastPage: 1,
+    }),
+    methods: {
+        async getReleases(page: number): Promise<void> {
+            const result = await fetch("https://api.github.com/repos/YouHaveTrouble/GuildMaster/releases?per_page=10")
+                .catch((e) => {
+                    return null;
+                });
 
-      if (result === null) return;
-      const json = await result.json();
+            if (result === null) return;
+            const json = await result.json();
 
 
-      for (const release of json) {
-        const version = {} as any;
-        version.body = release.body.trim();
-        version.name = release.name;
-        if (release.body.length === 0) continue;
-        this.releases.push(version);
-      }
+            for (const release of json) {
+                const version = {} as any;
+                version.body = release.body.trim();
+                version.name = release.name;
+                if (release.body.length === 0) continue;
+                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;