Improve default content styling

package.json

@@ -18,6 +18,7 @@
         "@babel/core": "^7.12.16",
         "@babel/eslint-parser": "^7.12.16",
         "@google-cloud/storage": "^7.11.1",
+        "@mdx-js/vue": "^1.6.22",
         "@mdx-js/vue-loader": "^1.6.22",
         "@octokit/rest": "^20.1.1",
         "@vue/cli-plugin-babel": "~5.0.0",

src/App.vue

@@ -45,7 +45,7 @@ export default {
 
 main {
     padding: 120px 80px;
-    overflow: scroll;
+    overflow: auto;
     perspective: 1px;
 }
 

src/components/SidebarNav.vue

@@ -177,7 +177,7 @@ nav {
 
 .main {
     padding: 0 32px;
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 
 .footer {

src/content/components/buttons/index.mdx

@@ -3,7 +3,7 @@ import ExternalButton from '@/components/ExternalButton.vue';
 
 # Buttons
 
-Use buttons to enable the user to identify and trigger an action on the page.
+> Use buttons to enable the user to identify and trigger an action on the page.
 
 <ExternalButton
     type="storybook"

src/content/components/buttons/spec.mdx

@@ -35,7 +35,7 @@ Use Primary buttons for:
 -   Constructive actions (such as Submit).
 -   Confirmation (such as Yes, Delete).
 
-#### Examples:
+**Examples:**
 
 <PendoButton label="Save Changes" type="primary" />
 &ensp;&ensp;
@@ -51,7 +51,7 @@ Use Secondary buttons for:
 -   Dismiss actions (such as Cancel).
 -   When actions need less prominence because they arent critical to the purpose, i.e. Share
 
-#### Examples:
+**Examples:**
 
 <PendoButton label="Cancel" type="secondary" />
 &ensp;&ensp;
@@ -68,7 +68,7 @@ Use Tertiary Buttons:
 -   When standard buttons would be too heavy, distracting, or visually unappealing in the space.
 -   In right hand CTA’s of a table
 
-#### Examples:
+**Examples:**
 
 <PendoButton label="Add More" type="tertiary" />
 &ensp;&ensp;
@@ -84,7 +84,7 @@ Use Tertiary Link Buttons:
 -   Highlighting the interactivity of an option relative to normal text (such as + 3 more rules)
 -   Placing next to a primary action for less prominence
 
-#### Examples:
+**Examples:**
 
 <PendoButton label="+ 3 More" type="link" />
 &ensp;&ensp;
@@ -102,7 +102,7 @@ Use Destructive Buttons:
 
 -   For Primary actions that are critical, such as removing access, or difficult to reverse, such as deleting an object.
 
-#### Examples:
+**Examples:**
 
 <PendoButton label="Delete Page" type="danger" />
 &ensp;&ensp;

src/main.js

@@ -1,11 +1,48 @@
 import Vue from 'vue';
 import router from './router';
+import { MDXProvider } from '@mdx-js/vue';
 import App from './App.vue';
-import './main.css';
+import './main.scss';
 
 Vue.config.productionTip = false;
 
+/**
+ * Use this object *only* to map standard Markdown elements to custom Vue components.
+ *
+ * Doing so allows writers to, for example, use the blockquote `>` syntax to render
+ * a different HTML tag that is more semantically relevant.
+ *
+ * In all other cases, prefer explicit component imports into the MDX file.
+ */
+const components = {
+    blockquote: () => ({
+        render() {
+            delete this.$slots.default[0].data.attrs.parentName;
+            this.$slots.default[0].data.class = 'mdx-blurb';
+
+            return this.$slots.default;
+        }
+    }),
+    // shallow-copy props because MDXProvider shares the parameter instance to parents
+    img: ({ ...props }) => ({
+        render() {
+            // Pull everything except `attrs` into a child object, domProps
+            const { attrs, ...domProps } = props;
+            const data = { attrs, domProps };
+            const elProps = { class: 'mdx-img', ...props, ...data };
+
+            return <img {...elProps} />;
+        }
+    })
+};
+
 new Vue({
-    render: (h) => h(App),
+    render() {
+        return (
+            <MDXProvider components={components}>
+                <App />
+            </MDXProvider>
+        );
+    },
     router
 }).$mount('#app');

src/main.scss

@@ -0,0 +1,73 @@
+@import '@pendo/components/lib/es/components.css';
+
+html,
+body {
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    font-family: Inter, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: Sora, Helvetica, Arial, sans-serif;
+}
+
+[mdxtype='MDXLayout'] {
+    h1 {
+        font-size: 46px;
+        margin: 16px 0;
+    }
+
+    h2 {
+        font-size: 22px;
+        margin-top: 64px;
+    }
+
+    h3 {
+        font-size: 20px;
+        margin-top: 64px;
+    }
+
+    h4 {
+        font-size: 18px;
+    }
+
+    h5 {
+        font-size: 16px;
+    }
+
+    h6 {
+        font-size: 14px;
+    }
+
+    p {
+        line-height: 135%;
+        margin: 1.5em 0;
+    }
+
+    ul {
+        line-height: 135%;
+
+        > li {
+            margin: 0.2em 0;
+        }
+    }
+
+    .mdx-blurb {
+        font-size: 18px;
+    }
+
+    .mdx-img {
+        max-width: 95%;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+        margin: 0 auto;
+        display: block;
+    }
+}