docs first pages

src/views/docs/DocPage.vue

@@ -1,15 +1,17 @@
 <template>
   <MainTemplate :useStagedOverviewLink="false">
-    <template #topBar>
+    <!-- <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
         <h1 class="font-bold text-xl h-8">{{page}}</h1>
       </div>
-    </template>
-    <template #main>
-      <div class="markdown-container">
-        <component v-if="markdownComponent" :is="markdownComponent" />
-        <p v-else>Diese Seite existiert nicht.</p>
-      </div>
+    </template> -->
+    <template #diffMain>
+      <div class="flex flex-col gap-2 h-full px-4 overflow-hidden">
+        <div class="markdown-container overflow-y-scroll">
+          <component v-if="markdownComponent" :is="markdownComponent" />
+          <p v-else>Diese Seite existiert nicht.</p>
+        </div>
+      </div>      
     </template>
   </MainTemplate>
 </template>
@@ -40,8 +42,46 @@ export default defineComponent({
   },
   methods:{
     loadPage(){
+      this.markdownComponent = null
       this.markdownComponent = markRaw(defineAsyncComponent(() => import(`$/${this.page?.toLowerCase()}.md`)));
     }
   }
 });
-</script>
+</script>
+
+<style>
+.markdown-container {
+  font-family: 'Open Sans', sans-serif;
+  color: #555;
+  background-color: #f8f8f8;
+  border: 2px solid gray;
+  padding: 20px;
+  border-radius: 5px;
+  height: 100%
+}
+
+.markdown-container h1 {
+  font-size: 2rem !important;
+  color: #222;
+}
+
+.markdown-container h2 {
+  font-size: 1.25rem !important;
+  color: #222;
+}
+
+.markdown-container hr {
+  background-color: #222;
+  margin: 8px 0;
+  padding: 1px;
+}
+
+.markdown-container p {
+  margin: 10px 0;
+}
+
+.markdown-container ul {
+  list-style-type: disc;
+  margin-left: 20px;
+}
+</style>