fix(docs): moved snippet above TOC, removed Design from TOC, fixed fo…

…nts sizing/padding in snippet (#50)
patternfly · Oct 31, 2019 · 7ee6576 · 7ee6576
1 parent 01a252d
commit 7ee6576
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 14 deletions.
diff --git a/gatsby-theme-patternfly-org/templates/mdx.css b/gatsby-theme-patternfly-org/templates/mdx.css
@@ -3,6 +3,13 @@
   padding-top: 32px;
 }
 
+@media (max-width: 767px) {
+  .ws-section {
+    padding: 16px;
+    padding-top: 16px;
+  }
+}
+
 .ws-section:first-of-type {
   padding-bottom: 0;
 }
@@ -17,3 +24,11 @@
   margin-right: 30px;
   display: inline-block;
 }
+
+.ws-page-title {
+  margin: 8px 0 16px;
+}
+
+.ws-page-title ~ p {
+  font-size: 18px;
+}
diff --git a/gatsby-theme-patternfly-org/templates/mdx.js b/gatsby-theme-patternfly-org/templates/mdx.js
@@ -70,7 +70,7 @@ export default ({ data, location, pageContext }) => {
           <Title size="md" className="ws-framework-title">
             {source === 'core' ? 'HTML' : capitalize(source)}
           </Title>
-          <Title size="4xl">{title}</Title>
+          <Title size="4xl" className="ws-page-title">{title}</Title>
           {optIn && (
             <Alert
               variant="info"
@@ -92,11 +92,13 @@ export default ({ data, location, pageContext }) => {
               {getWarning(experimentalStage)}
             </Alert>
           )}
-          {data.designDoc && (
-            <a href="#design" className="ws-toc">
-              Design
-            </a>
-          )}
+          {data.designDoc &&
+            <React.Fragment>
+              <MDXRenderer>
+                {data.designDoc.body}
+              </MDXRenderer>
+            </React.Fragment>
+          }
           {tableOfContents.map(heading => (
             <a key={heading} href={`#${slugger(heading)}`} className="ws-toc">
               {heading}
@@ -128,14 +130,6 @@ export default ({ data, location, pageContext }) => {
               {...props} />,
           ...commonComponents
         }}>
-          {data.designDoc &&
-            <React.Fragment>
-              <AutoLinkHeader size="h2" id="design" className="ws-title">Design</AutoLinkHeader>
-              <MDXRenderer>
-                {data.designDoc.body}
-              </MDXRenderer>
-            </React.Fragment>
-          }
           <MDXRenderer>
             {data.doc.body}
           </MDXRenderer>