improve styling

docs/src/layouts/App/base.scss

@@ -95,3 +95,304 @@ code {
 .DocSearch-Container {
   filter: saturate(0);
 }
+
+
+.text {
+  $spacing: 0.75em;
+
+  > p {
+    &.is-large {
+      font-size: 1.2rem;
+    }
+  }
+
+  > div,
+  > p,
+  > ul,
+  > ol,
+  > blockquote {
+    margin-top: 2 * $spacing;
+    margin-bottom: 2 * $spacing;
+  }
+
+  > ul li,
+  > ol li,
+  > ul ul,
+  > ul ol,
+  > ol ol,
+  > ol ul {
+    margin-top: 0.5 * $spacing;
+    margin-bottom: 0.5 * $spacing;
+  }
+
+  > h1,
+  > h2,
+  > h3,
+  > h4,
+  > h5,
+  > h6 {
+    color: $colorBlack;
+    margin-top: 3 * $spacing;
+    margin-bottom: $spacing;
+
+    & + * {
+      margin-top: 0;
+    }
+  }
+
+  > h1,
+  > h4,
+  > h5,
+  > h6 {
+    a {
+      display: none;
+    }
+  }
+
+  > h1,
+  > .is-h1 {
+    font-size: 2.75rem;
+    line-height: 1.15;
+
+    &.is-large {
+      font-size: 3.75rem;
+    }
+  }
+
+  > h2,
+  > .is-h2 {
+    font-size: 1.5rem;
+    line-height: 1.2;
+  }
+
+  > h2,
+  > h3 {
+    position: relative;
+
+    a {
+      position: absolute;
+      top: 0;
+      right: 100%;
+      color: rgba($colorBlack, 0.4);
+      text-decoration: none;
+      font-weight: 400;
+      padding-right: 0.5rem;
+      opacity: 0;
+      transition: opacity 0.1s $ease;
+    }
+
+    &:hover a {
+      opacity: 1;
+    }
+  }
+
+  > p > img {
+    max-width: 100%;
+  }
+
+  :first-child {
+    margin-top: 0;
+  }
+
+  :last-child {
+    margin-bottom: 0;
+  }
+
+  > pre {
+    border: 1px solid rgba($colorBlack, 0.1);
+  }
+
+  > p code,
+  > ul code,
+  > ol code,
+  > .table-wrapper code,
+  > .remark-container code {
+    color: rgba($colorBlack, 0.7);
+    background-color: rgba($colorYellow, 0.3);
+    box-decoration-break: clone;
+  }
+
+  > p a,
+  > ul a,
+  > ol a,
+  > .table-wrapper a,
+  > .remark-container a {
+    text-decoration: underline;
+
+    code {
+      text-decoration: underline;
+    }
+  }
+
+  #toc {
+    display: none;
+
+    & + ul {
+      list-style: none;
+      background-color: rgba($colorBlack, 0.03);
+      padding: 1.25rem !important;
+      border-radius: 0.5rem;
+      font-size: 0.85rem;
+
+      &::before {
+        display: block;
+        content: 'On this page';
+        font-weight: 700;
+        letter-spacing: 0.025rem;
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        color: rgba($colorBlack, 0.3);
+        margin-bottom: 0.5rem;
+      }
+
+      li {
+        padding-left: 0;
+
+        &::before {
+          display: none;
+        }
+
+        ul {
+          list-style: none;
+          margin-left: 1rem;
+        }
+      }
+    }
+  }
+
+  p a img[src^="https://img.shields.io"] {
+    margin-right: 0.5rem;
+  }
+
+  > ul {
+    list-style: none;
+
+    li {
+      position: relative;
+      padding-left: 1.25rem;
+
+      &::before {
+        position: absolute;
+        left: 0;
+        display: inline-block;
+        margin-right: 0.75rem;
+        content: "\2022";
+        color: $colorBlack;
+      }
+    }
+  }
+
+  > ol {
+    list-style: none;
+    counter-reset: item;
+
+    li {
+      position: relative;
+      padding-left: 2.5rem;
+
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        margin-top: 1px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 1.5rem;
+        width: 1.5rem;
+        background-color: rgba($colorBlack, 0.1);
+        border-radius: 9999px;
+        color: $colorBlack;
+        font-size: 0.75rem;
+        font-weight: 700;
+        content: counter(item);
+        counter-increment: item;
+      }
+    }
+  }
+
+  > .table-wrapper {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+
+    > table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.85rem;
+      text-align: left;
+
+      th,
+      td {
+        padding: 0.5rem;
+        min-width: 8rem;
+
+        &:first-child {
+          padding-left: 0;
+        }
+
+        &:last-child {
+          padding-right: 0;
+        }
+      }
+
+      th {
+        white-space: nowrap;
+        color: $colorBlack;
+        font-weight: 500;
+        border-bottom: 1px solid rgba($colorBlack, 0.2);
+      }
+
+      td {
+        border-bottom: 1px solid rgba($colorBlack, 0.1);
+      }
+
+      tr:last-child td {
+        border-bottom: 0;
+      }
+
+      tbody tr {
+        &:last-child td {
+          border-bottom: 0;
+        }
+
+        &:hover {
+          background: rgba($colorBlack, 0.02);
+        }
+      }
+    }
+  }
+
+  > .remark-container {
+    padding: 1.25rem;
+    border-radius: 0.5rem;
+    color: rgba($colorBlack, 0.7);
+
+    &.warning {
+      background-color: rgba($colorYellow, 0.3);
+    }
+
+    &.info {
+      background-color: rgba($colorBlue, 0.3);
+    }
+
+    &.error {
+      background-color: rgba($colorRed, 0.3);
+    }
+
+    &.pro {
+      background-color: rgba($colorOrange, 0.3);
+    }
+
+    .remark-container-title {
+      font-weight: 600;
+    }
+  }
+
+  > blockquote {
+    border-left: 1px solid rgba($colorGrey, 0.5);
+    padding-left: 2 * $spacing;
+  }
+
+}

docs/src/layouts/App/fonts.scss

@@ -93,44 +93,44 @@
   ;
 }
 
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 600;
-  src:
-    url("~@/assets/fonts/Inter-SemiBold.woff2") format("woff2"),
-    url("~@/assets/fonts/Inter-SemiBold.woff") format("woff"),
-  ;
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 600;
-  src:
-    url("~@/assets/fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
-    url("~@/assets/fonts/Inter-SemiBoldItalic.woff") format("woff"),
-  ;
-}
-
 // @font-face {
 //   font-family: 'Inter';
 //   font-style:  normal;
-//   font-weight: 700;
+//   font-weight: 600;
 //   src:
-//     url("~@/assets/fonts/Inter-Bold.woff2") format("woff2"),
+//     url("~@/assets/fonts/Inter-SemiBold.woff2") format("woff2"),
-//     url("~@/assets/fonts/Inter-Bold.woff") format("woff"),
+//     url("~@/assets/fonts/Inter-SemiBold.woff") format("woff"),
 //   ;
 // }
 // @font-face {
 //   font-family: 'Inter';
 //   font-style:  italic;
-//   font-weight: 700;
+//   font-weight: 600;
 //   src:
-//     url("~@/assets/fonts/Inter-BoldItalic.woff2") format("woff2"),
+//     url("~@/assets/fonts/Inter-SemiBoldItalic.woff2") format("woff2"),
-//     url("~@/assets/fonts/Inter-BoldItalic.woff") format("woff"),
+//     url("~@/assets/fonts/Inter-SemiBoldItalic.woff") format("woff"),
 //   ;
 // }
 
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 700;
+  src:
+    url("~@/assets/fonts/Inter-Bold.woff2") format("woff2"),
+    url("~@/assets/fonts/Inter-Bold.woff") format("woff"),
+  ;
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 700;
+  src:
+    url("~@/assets/fonts/Inter-BoldItalic.woff2") format("woff2"),
+    url("~@/assets/fonts/Inter-BoldItalic.woff") format("woff"),
+  ;
+}
+
 // @font-face {
 //   font-family: 'Inter';
 //   font-style:  normal;

docs/src/pages/index.vue

@@ -1,15 +1,17 @@
 <template>
   <Layout :show-sidebar="false">
     <app-section>
-      <h1>
+      <div class="text">
-        Headless WYSIWYG Text Editor
+        <h1 class="is-large">
+          A framework to build the editor you want
         </h1>
-      <p>
+        <p class="is-large">
-        tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+          tiptap is a headless wrapper around <a href="https://ProseMirror.net">ProseMirror</a> – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as <em>New York Times</em>, <em>The Guardian</em> or <em>Atlassian</em>.
         </p>
-      <p>
+        <p class="is-large">
           Create exactly the rich text editor you want out of customizable building blocks. tiptap comes with sensible defaults, a lot of extensions and a friendly API to customize every aspect. It’s backed by a welcoming community, open source, and free.
         </p>
+      </div>
     </app-section>
 
     <app-section>
@@ -17,7 +19,8 @@
     </app-section>
 
     <app-section>
-      <h2>
+      <div class="text">
+        <h2 class="is-h1">
           Features
         </h2>
 
@@ -55,12 +58,15 @@
         <p>
           Over the years, a lovely community has grown around tiptap. There’s so much content shared, so many people helping out in issues and a ton of community extensions, you’ll be surprised how much that can help.
         </p>
+      </div>
     </app-section>
 
     <app-section>
-      <h2>
+      <div class="text">
+        <h2 class="is-h1">
           Who uses tiptap?
         </h2>
+        <p>
           - [GitLab](https://gitlab.com)
           - [Statamic CMS](https://statamic.com)
           - [Twill CMS](https://twill.io)
@@ -71,15 +77,19 @@
           - [ycode](https://www.ycode.com/)
           - [Scrumpy](https://www.scrumpy.io)
           - … and [many more](https://github.com/ueberdosis/tiptap/network/dependents?package_id=UGFja2FnZS0xMzE5OTg0ODc%3D)
+        </p>
+      </div>
     </app-section>
 
     <app-section>
-      <h2>
+      <div class="text">
+        <h2 class="is-h1">
           License
         </h2>
         <p>
           tiptap is licensed under [MIT](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md), so you’re free to do whatever you want. If you’re using it in production, do the right thing and [become one of our wonderful sponsors](/sponsor) to fund the development, maintenance and support of tiptap and the whole ecosystem.
         </p>
+      </div>
     </app-section>
   </Layout>
 </template>

docs/src/templates/DocPage/index.vue

@@ -1,9 +1,7 @@
 <template>
   <Layout>
     <app-section>
-      <div class="doc-page">
+      <VueRemarkContent class="text" />
-        <VueRemarkContent class="doc-page__markdown" />
-      </div>
     </app-section>
   </Layout>
 </template>
@@ -72,5 +70,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss" src="./style.scss" scoped></style>

docs/src/templates/DocPage/style.scss

@@ -1,279 +0,0 @@
-.doc-page {
-  &__markdown ::v-deep {
-    $spacing: 0.75em;
-
-    > div,
-    > p,
-    > ul,
-    > ol,
-    > blockquote {
-      margin-top: 2 * $spacing;
-      margin-bottom: 2 * $spacing;
-    }
-
-    > ul li,
-    > ol li,
-    > ul ul,
-    > ul ol,
-    > ol ol,
-    > ol ul {
-      margin-top: 0.5 * $spacing;
-      margin-bottom: 0.5 * $spacing;
-    }
-
-    > h1,
-    > h2,
-    > h3,
-    > h4,
-    > h5,
-    > h6 {
-      color: $colorBlack;
-      margin-top: 3 * $spacing;
-      margin-bottom: $spacing;
-
-      & + * {
-        margin-top: 0;
-      }
-    }
-
-    > h1,
-    > h4,
-    > h5,
-    > h6 {
-      a {
-        display: none;
-      }
-    }
-
-    > h2,
-    > h3 {
-      position: relative;
-
-      a {
-        position: absolute;
-        top: 0;
-        right: 100%;
-        color: rgba($colorBlack, 0.4);
-        text-decoration: none;
-        font-weight: 400;
-        padding-right: 0.5rem;
-        opacity: 0;
-        transition: opacity 0.1s $ease;
-      }
-
-      &:hover a {
-        opacity: 1;
-      }
-    }
-
-    > p > img {
-      max-width: 100%;
-    }
-
-    :first-child {
-      margin-top: 0;
-    }
-
-    :last-child {
-      margin-bottom: 0;
-    }
-
-    > pre {
-      border: 1px solid rgba($colorBlack, 0.1);
-    }
-
-    > p code,
-    > ul code,
-    > ol code,
-    > .table-wrapper code,
-    > .remark-container code {
-      color: rgba($colorBlack, 0.7);
-      background-color: rgba($colorYellow, 0.3);
-      box-decoration-break: clone;
-    }
-
-    > p a,
-    > ul a,
-    > ol a,
-    > .table-wrapper a,
-    > .remark-container a {
-      text-decoration: underline;
-
-      code {
-        text-decoration: underline;
-      }
-    }
-
-    #toc {
-      display: none;
-
-      & + ul {
-        list-style: none;
-        background-color: rgba($colorBlack, 0.03);
-        padding: 1.25rem !important;
-        border-radius: 0.5rem;
-        font-size: 0.85rem;
-
-        &::before {
-          display: block;
-          content: 'On this page';
-          font-weight: 700;
-          letter-spacing: 0.025rem;
-          font-size: 0.75rem;
-          text-transform: uppercase;
-          color: rgba($colorBlack, 0.3);
-          margin-bottom: 0.5rem;
-        }
-
-        li {
-          padding-left: 0;
-
-          &::before {
-            display: none;
-          }
-
-          ul {
-            list-style: none;
-            margin-left: 1rem;
-          }
-        }
-      }
-    }
-
-    p a img[src^="https://img.shields.io"] {
-      margin-right: 0.5rem;
-    }
-
-    > ul {
-      list-style: none;
-
-      li {
-        position: relative;
-        padding-left: 1.25rem;
-
-        &::before {
-          position: absolute;
-          left: 0;
-          display: inline-block;
-          margin-right: 0.75rem;
-          content: "\2022";
-          color: $colorBlack;
-        }
-      }
-    }
-
-    > ol {
-      list-style: none;
-      counter-reset: item;
-
-      li {
-        position: relative;
-        padding-left: 2.5rem;
-
-        &::before {
-          position: absolute;
-          top: 0;
-          left: 0;
-          margin-top: 1px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          height: 1.5rem;
-          width: 1.5rem;
-          background-color: rgba($colorBlack, 0.1);
-          border-radius: 9999px;
-          color: $colorBlack;
-          font-size: 0.75rem;
-          font-weight: 700;
-          content: counter(item);
-          counter-increment: item;
-        }
-      }
-    }
-
-    > .table-wrapper {
-      display: block;
-      width: 100%;
-      overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
-
-      > table {
-        width: 100%;
-        border-collapse: collapse;
-        font-size: 0.85rem;
-        text-align: left;
-
-        th,
-        td {
-          padding: 0.5rem;
-          min-width: 8rem;
-
-          &:first-child {
-            padding-left: 0;
-          }
-
-          &:last-child {
-            padding-right: 0;
-          }
-        }
-
-        th {
-          white-space: nowrap;
-          color: $colorBlack;
-          font-weight: 500;
-          border-bottom: 1px solid rgba($colorBlack, 0.2);
-        }
-
-        td {
-          border-bottom: 1px solid rgba($colorBlack, 0.1);
-        }
-
-        tr:last-child td {
-          border-bottom: 0;
-        }
-
-        tbody tr {
-          &:last-child td {
-            border-bottom: 0;
-          }
-
-          &:hover {
-            background: rgba($colorBlack, 0.02);
-          }
-        }
-      }
-    }
-
-    > .remark-container {
-      padding: 1.25rem;
-      border-radius: 0.5rem;
-      color: rgba($colorBlack, 0.7);
-
-      &.warning {
-        background-color: rgba($colorYellow, 0.3);
-      }
-
-      &.info {
-        background-color: rgba($colorBlue, 0.3);
-      }
-
-      &.error {
-        background-color: rgba($colorRed, 0.3);
-      }
-
-      &.pro {
-        background-color: rgba($colorOrange, 0.3);
-      }
-
-      .remark-container-title {
-        font-weight: 600;
-      }
-    }
-
-    > blockquote {
-      border-left: 1px solid rgba($colorGrey, 0.5);
-      padding-left: 2 * $spacing;
-    }
-
-  }
-}