Move common style to app

app.vue

@@ -61,4 +61,65 @@
 .EDITOR_VIEWPORT {
   overflow: visible !important;
 }
+
+.prose {
+  max-width: 100% !important;
+
+  table p {
+    margin: 0 !important;
+  }
+
+  table tr,
+  table th,
+  table td {
+    border: 1px solid lightgray;
+  }
+
+  table tr,
+  table th:first-child,
+  table tr td:first-child {
+    border-left: none !important;
+  }
+
+  table tr,
+  table th:last-child,
+  table tr td:last-child {
+    border-right: none !important;
+  }
+
+  table thead tr:first-child,
+  table thead tr:first-child th {
+    border-top: none !important;
+    border-bottom: 2px solid var(--secondary-500);
+  }
+}
+
+.prose .element-full-width {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.prose>*:not(.element-full-width) {
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media (min-width: 640px) {
+  .prose>*:not(.element-full-width) {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .prose>*:not(.element-full-width) {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .prose>*:not(.element-full-width) {
+    max-width: 1024px;
+  }
+}
 </style>

pages/[...slug].vue

@@ -7,6 +7,7 @@ const data = ref({})
 <template>
   <main class="relative">
     <ViewModeSwitcher />
+
     <ContentDoc>
       <template #default="{ doc }">
         <div class="prose mx-4">
@@ -34,66 +35,3 @@ const data = ref({})
     </ContentDoc>
   </main>
 </template>
-
-<style lang="postcss">
-.prose {
-  max-width: 100% !important;
-
-  table p {
-    margin: 0 !important;
-  }
-
-  table tr,
-  table th,
-  table td {
-    border: 1px solid lightgray;
-  }
-
-  table tr,
-  table th:first-child,
-  table tr td:first-child {
-    border-left: none !important;
-  }
-
-  table tr,
-  table th:last-child,
-  table tr td:last-child {
-    border-right: none !important;
-  }
-
-  table thead tr:first-child,
-  table thead tr:first-child th {
-    border-top: none !important;
-    border-bottom: 2px solid var(--secondary-500);
-  }
-}
-
-.prose .element-full-width {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.prose>*:not(.element-full-width) {
-  max-width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-@media (min-width: 640px) {
-  .prose>*:not(.element-full-width) {
-    max-width: 640px;
-  }
-}
-
-@media (min-width: 768px) {
-  .prose>*:not(.element-full-width) {
-    max-width: 768px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .prose>*:not(.element-full-width) {
-    max-width: 1024px;
-  }
-}
-</style>