From 030d01dc0c297989afdc123b6714ea22ff245d71 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 29 Nov 2018 22:37:50 +0100
Subject: [PATCH] styling

---
 src/templates/ApiSwagger.jsx         |  3 ++-
 src/templates/ApiSwagger.module.scss | 29 +++++++++++++---------------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/templates/ApiSwagger.jsx b/src/templates/ApiSwagger.jsx
index a32f2bad..1999a407 100644
--- a/src/templates/ApiSwagger.jsx
+++ b/src/templates/ApiSwagger.jsx
@@ -104,7 +104,7 @@ const Parameters = ({ parameters }) => (
             return (
                 <div className={styles.parameters} key={parameter.name}>
                     <h5>
-                        {name}
+                        <code>{name}</code>
                         {required && (
                             <span
                                 className={styles.parameterRequired}
@@ -190,6 +190,7 @@ const Paths = ({ paths }) =>
 
 const BasePath = ({ host, basePath }) => (
     <div className={styles.basePath}>
+        <h2>Base Path</h2>
         <code>
             <span>{host}</span>
             {basePath}
diff --git a/src/templates/ApiSwagger.module.scss b/src/templates/ApiSwagger.module.scss
index 3706708d..8b3b40a9 100644
--- a/src/templates/ApiSwagger.module.scss
+++ b/src/templates/ApiSwagger.module.scss
@@ -24,19 +24,14 @@
 }
 
 .basePath {
-    margin-top: $spacer * 2;
-    font-size: $font-size-large;
-    font-family: $font-family-monospace;
-    font-weight: $font-weight-bold;
-    position: relative;
+    margin-top: $spacer;
 
-    &:after {
-        content: 'Base path';
-        font-size: $font-size-mini;
-        color: $brand-grey-light;
-        position: absolute;
-        left: 0;
-        top: -1.25rem;
+    h2 {
+        font-size: $font-size-h3;
+        border-bottom: 1px solid $brand-grey-lighter;
+        padding-bottom: $spacer / 2;
+        margin-top: $spacer * 2;
+        margin-bottom: $spacer;
     }
 
     span {
@@ -45,12 +40,13 @@
 
     code {
         // stylelint-disable-next-line
-        font-size: inherit !important;
+        font-size: $font-size-large !important;
+        font-weight: $font-weight-bold;
     }
 }
 
 .pathName {
-    font-size: $font-size-h2;
+    font-size: $font-size-h3;
     border-bottom: 1px solid $brand-grey-lighter;
     padding-bottom: $spacer / 2;
     margin-top: $spacer * 2;
@@ -103,10 +99,11 @@
     h5 {
         font-size: $font-size-small;
         margin-bottom: $spacer / 4;
-        font-family: $font-family-monospace;
     }
 
     pre {
+        max-height: 80vh;
+
         code {
             padding: $spacer / $line-height;
         }
@@ -114,7 +111,7 @@
 }
 
 .parameterRequired {
-    font-size: $font-size-mini;
+    font-size: $font-size-small;
     vertical-align: top;
     color: $brand-purple;
 }