From 6c6343c3902e0395e0231d34bd2fb4a75eda9b3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 5 Feb 2021 10:00:14 +0100
Subject: [PATCH] fix btn group

---
 docs/src/components/Btn/style.scss        |  5 -----
 docs/src/components/BtnWrapper/index.vue  | 13 ++++++++++++
 docs/src/components/BtnWrapper/style.scss | 25 +++++++++++++++++++++++
 docs/src/pages/index.vue                  |  6 ++++--
 4 files changed, 42 insertions(+), 7 deletions(-)
 create mode 100644 docs/src/components/BtnWrapper/index.vue
 create mode 100644 docs/src/components/BtnWrapper/style.scss

diff --git a/docs/src/components/Btn/style.scss b/docs/src/components/Btn/style.scss
index c2d0494c..79974a7d 100644
--- a/docs/src/components/Btn/style.scss
+++ b/docs/src/components/Btn/style.scss
@@ -4,7 +4,6 @@
   justify-content: center;
   border-radius: 12px;
   font-weight: 700;
-  margin-left: 0.75rem;
   padding: 0.8rem 1rem;
   font-size: 1rem;
   text-align: center;
@@ -42,10 +41,6 @@
     opacity: 0.5;
   }
 
-  &:first-child {
-    margin-left: 0;
-  }
-
   &__icon {
     &:first-child {
       margin-right: 0.5rem;
diff --git a/docs/src/components/BtnWrapper/index.vue b/docs/src/components/BtnWrapper/index.vue
new file mode 100644
index 00000000..ec98ebf1
--- /dev/null
+++ b/docs/src/components/BtnWrapper/index.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="btn-wrapper">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" src="./style.scss"></style>
diff --git a/docs/src/components/BtnWrapper/style.scss b/docs/src/components/BtnWrapper/style.scss
new file mode 100644
index 00000000..4a7f95b3
--- /dev/null
+++ b/docs/src/components/BtnWrapper/style.scss
@@ -0,0 +1,25 @@
+.btn-wrapper {
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 600px) {
+    flex-direction: row;
+  }
+
+  > .btn {
+    margin-bottom: 0.75rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    @media (min-width: 600px) {
+      margin-bottom: 0;
+      margin-right: 0.75rem;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+}
diff --git a/docs/src/pages/index.vue b/docs/src/pages/index.vue
index 146b329b..2f5e15c4 100644
--- a/docs/src/pages/index.vue
+++ b/docs/src/pages/index.vue
@@ -8,7 +8,7 @@
         <p class="is-large">
           tiptap gives you full control about every single aspect of your text editor experience. It’s customizable, comes with a ton of extensions, is open-source, has an extensive documentation, and is simply a joy to use. Join our welcoming community and start building cool things! It’s free.
         </p>
-        <div>
+        <btn-wrapper>
           <btn type="primary" icon="arrow-right" to="/overview/installation">
             Get Started
           </btn>
@@ -20,7 +20,7 @@
           >
             View on GitHub
           </btn>
-        </div>
+        </btn-wrapper>
       </div>
     </app-section>
 
@@ -222,6 +222,7 @@ import LogoList from '@/components/LogoList'
 import LogoItem from '@/components/LogoItem'
 import Prism from '~/components/Prism'
 import Btn from '~/components/Btn'
+import BtnWrapper from '~/components/BtnWrapper'
 
 export default {
   components: {
@@ -232,6 +233,7 @@ export default {
     LogoItem,
     Prism,
     Btn,
+    BtnWrapper,
   },
 
   metaInfo() {