From 52ecfbde548f5bd18cf55501a322b5c8df9b6625 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sun, 24 Jan 2021 23:55:03 +0300
Subject: [PATCH] Add default docs layout

---
 rollup.config.js             |  7 ++++++-
 src/docs/Carousel.svx        |  2 --
 src/docs/Layouts/Main.svelte | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 src/docs/Layouts/Main.svelte

diff --git a/rollup.config.js b/rollup.config.js
index 7b4ada6..cd71aff 100644
--- a/rollup.config.js
+++ b/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
diff --git a/src/docs/Carousel.svx b/src/docs/Carousel.svx
index be58505..edd82f4 100644
--- a/src/docs/Carousel.svx
+++ b/src/docs/Carousel.svx
@@ -54,6 +54,4 @@
 </Carousel>
 ```
 
-<style>
 
-</style>
diff --git a/src/docs/Layouts/Main.svelte b/src/docs/Layouts/Main.svelte
new file mode 100644
index 0000000..af1eb14
--- /dev/null
+++ b/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>
\ No newline at end of file