typography and spacing fixes

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a design library of components for use with VueJS. It supports light and dark modes and can be extended to support multiple themes",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "main": "dist/@aotearoan/neon.umd.js",
   "types": "dist/@aotearoan/components.d.ts",
   "files": [

public/docs/layout/card/NeonCard.json

@@ -18,8 +18,15 @@
     },
     {
       "name": "horizontalBreakpoint",
-      "tags": {},
-      "description": "The breakpoint to switch horizontal cards to vertical cards. Accepts the values mobile, mobile-large and tablet.",
+      "tags": {
+        "type": [
+          {
+            "title": "type",
+            "description": "NeonResponsive"
+          }
+        ]
+      },
+      "description": "The breakpoint to switch horizontal cards to vertical cards. Accepts <em>Mobile | MobileLarge | Tablet</em> ONLY.",
       "type": {
         "name": "union",
         "elements": [

src/app/App.scss

@@ -69,7 +69,6 @@ $font-family-monospaced: Inconsolata, Consolas, Monaco, 'Andale Mono', 'Ubuntu M
       @import '../../themes/classic/light';
 
       $color-api-docs-property-name: d2;
-      $background-color-component-header: darken($background-color-card, 2);
 
       // application light mode SASS
       @import 'components/editor/Editor-colors';
@@ -154,7 +153,11 @@ $font-family-monospaced: Inconsolata, Consolas, Monaco, 'Andale Mono', 'Ubuntu M
       .logo-wrapper {
         display: flex;
         flex-direction: row;
-        align-items: center;
+        align-items: flex-end;
+
+        @include responsive(tablet) {
+          align-items: center;
+        }
 
         .neon-button {
           margin-right: 4 * $base-space;
@@ -175,7 +178,6 @@ $font-family-monospaced: Inconsolata, Consolas, Monaco, 'Andale Mono', 'Ubuntu M
         opacity: 0.9;
         font-style: oblique;
         letter-spacing: 1px;
-        font-weight: 200;
         line-height: 1.125;
         user-select: none;
 
@@ -199,6 +201,12 @@ $font-family-monospaced: Inconsolata, Consolas, Monaco, 'Andale Mono', 'Ubuntu M
       grid-template-rows: auto 1fr;
     }
 
+    .neon-h1,
+    .neon-h2,
+    .neon-h3,
+    .neon-h4,
+    .neon-h5,
+    .neon-h6,
     h1,
     h2,
     h3,

src/app/App.vue

@@ -33,7 +33,7 @@
             <neon-link href="/" class="homepage-link">
               <neon-logo></neon-logo>
             </neon-link>
-            <span class="tagline">A VueJs design library</span>
+            <span class="tagline neon-color-text-neutral">A VueJs design library</span>
           </span>
           <div>
             <div id="nav">

src/app/components/ApiModel.ts

@@ -5,11 +5,21 @@ export interface DocumentationModel {
   slots?: SlotModel[];
 }
 
+export interface TagModel {
+  title: string;
+  description: string;
+}
+
+export interface TagsModel {
+  type?: TagModel[];
+}
+
 export interface PropertyModel {
   name?: string;
   required?: boolean;
   type?: PropTypeModel;
   defaultValue?: PropDefaultModel;
+  tags?: TagsModel;
 }
 
 export interface EventModel {

src/app/components/api-docs/ApiDocs.scss

@@ -1,19 +1,33 @@
 .api-docs {
+  &__tab-title {
+    display: none;
+
+    @include responsive(mobile-large) {
+      display: flex;
+    }
+  }
+
   & > h2 {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
+  &__desktop,
+  &__responsive {
+    margin-top: 2 * $base-space;
+  }
+
   &__section {
-    &:not(:first-child) {
-      margin-top: 6 * $base-space;
+    margin-bottom: 4 * $base-space;
+
+    &:last-child {
+      margin-bottom: 8 * $base-space;
     }
   }
 
   &__title {
-    margin-top: 2 * $base-space;
-    margin-bottom: 0;
+    margin-bottom: -2 * $base-space;
   }
 
   &__name,

src/app/components/api-docs/ApiDocs.ts

@@ -20,7 +20,9 @@ export default class ApiDocs extends Vue {
   }
 
   private typeName(prop: PropertyModel) {
-    if (prop && prop.type) {
+    if (prop.tags && prop.tags.type) {
+      return prop.tags.type[0].description;
+    } else if (prop && prop.type) {
       const type: PropTypeModel = prop.type;
 
       if (this.isArray(prop)) {