add hero component to examples

examples/Components/App/index.vue

@@ -2,6 +2,9 @@
   <div class="page" spellcheck="false">
 
     <navigation />
+
+    <hero />
+
     <subnavigation />
 
     <div class="page__content">
@@ -24,6 +27,7 @@
 
 <script>
 import Navigation from 'Components/Navigation'
+import Hero from 'Components/Hero'
 import Subnavigation from 'Components/Subnavigation'
 import Icon from 'Components/Icon'
 import Ad from 'Components/Ad'
@@ -31,6 +35,7 @@ import Ad from 'Components/Ad'
 export default {
   components: {
     Navigation,
+    Hero,
     Subnavigation,
     Icon,
     Ad,

examples/Components/App/style.scss

@@ -8,6 +8,7 @@
 
   &__footer {
     text-align: center;
+    margin-bottom: 2rem;
   }
 
   &__source-link {

examples/Components/Hero/index.vue

@@ -0,0 +1,14 @@
+<template>
+	<div class="hero">
+		<div class="hero__inner">
+			<h1>
+				tiptap – a renderless rich-text editor toolkit for Vue.js
+			</h1>
+			<p>
+				This editor is based on <a href="https://prosemirror.net">Prosemirror</a>, <em>fully extendable</em> and renderless. There is a plugin system that lets you render each node as <strong>a vue component</strong>.
+			</p>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" src="./style.scss" scoped></style>

examples/Components/Hero/style.scss

@@ -0,0 +1,15 @@
+@import "~variables";
+
+.hero {
+
+	background-color: $color-black;
+	color: $color-white;
+	text-align: center;
+	padding: 3rem 1rem;
+
+	&__inner {
+		margin: 0 auto;
+		max-width: 30rem;
+	}
+
+}

examples/Components/Routes/MenuBar/index.vue

@@ -89,11 +89,11 @@
 			</div>
 
 			<div class="editor__content" slot="content" slot-scope="props">
-				<h1>
-					A renderless rich-text editor for Vue.js
-				</h1>
+				<h2>
+					Menu Bar
+				</h2>
 				<p>
-					This editor is based on <a href="https://prosemirror.net">Prosemirror</a>, <em>fully extendable</em> and renderless. There is a plugin system that lets you render each node as <strong>a vue component</strong>.
+					This is a very <em>basic</em> example of tiptap.
 				</p>
 				<pre><code>body { display: none; }</code></pre>
 				<ul>

examples/assets/sass/main.scss

@@ -38,6 +38,7 @@ a {
 
 h1,
 h2,
+h3,
 p,
 ul,
 ol,
@@ -53,3 +54,9 @@ blockquote {
     margin-bottom: 0;
   }
 }
+
+h1,
+h2,
+h3 {
+	line-height: 1.3;
+}