Add default docs layout

rollup.config.js

@@ -1,3 +1,4 @@
+import { join } from 'path';
 import svelte from 'rollup-plugin-svelte';
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
@@ -61,7 +62,11 @@ export default {
       },
       // tell svelte to handle mdsvex files
       extensions: [".svelte", ".svx"],
-      preprocess: mdsvex()
+      preprocess: mdsvex({
+        layout: {
+          _: join(__dirname, './src/docs/Layouts/Main.svelte')
+        }
+      })
     }),
     // we'll extract any component CSS out into
     // a separate file - better for performance

src/docs/Carousel.svx

@@ -54,6 +54,4 @@
 </Carousel>
 ```
 
-<style>
 
-</style>

src/docs/Layouts/Main.svelte

@@ -0,0 +1,32 @@
+<div class="docs__main-layout__content-container">
+  <div class="docs__main-layout__content-inner-container">
+    <slot></slot>
+  </div>
+</div>
+
+<style>
+.docs__main-layout__content-container {
+  display: flex;
+  justify-content: center;
+}
+@media screen and (min-width: 0px) {
+  .docs__main-layout__content-inner-container {
+    width: 100%;
+  }
+}
+@media screen and (min-width: 768px) {
+  .docs__main-layout__content-inner-container {
+    width: 70%;
+  }
+}
+@media screen and (min-width: 992px) {
+  .docs__main-layout__content-inner-container {
+    width: 60%;
+  }
+}
+@media screen and (min-width: 1200px) {
+  .docs__main-layout__content-inner-container {
+    width: 50%;
+  }
+}
+</style>