Tweak card styles for better handling of card content

_docs-sources/courses.mdx

@@ -30,7 +30,7 @@ Courses are offered through Teachable. Access is included with every Gruntwork s
     author="Josh Padnick & Yoriyasu Yano"
     authorImg="/img/courses/authors/josh-yori.png"
     videos={30}
-    duration={90}
+    duration={92}
   />
   <Course
     title="A Crash Course on Docker + Packer"

docs/courses.mdx

@@ -30,7 +30,7 @@ Courses are offered through Teachable. Access is included with every Gruntwork s
     author="Josh Padnick & Yoriyasu Yano"
     authorImg="/img/courses/authors/josh-yori.png"
     videos={30}
-    duration={90}
+    duration={92}
   />
   <Course
     title="A Crash Course on Docker + Packer"
@@ -58,5 +58,5 @@ Courses are offered through Teachable. Access is included with every Gruntwork s
 
 
 <!-- ##DOCS-SOURCER-START
-{"sourcePlugin":"Local File Copier","hash":"e7db12791a1d683580786b082c83953a"}
+{"sourcePlugin":"Local File Copier","hash":"33744450a711b984427abb3c19bf1c77"}
 ##DOCS-SOURCER-END -->

src/components/Card.module.css

@@ -19,6 +19,11 @@
   margin-bottom: 1rem;
 }
 
+.card .title {
+  margin-top: 1em;
+  margin-bottom: 0.75rem;
+}
+
 .card strong {
   font-weight: 600;
 }
@@ -30,7 +35,11 @@
   display: inline;
 }
 
-.card p:last-child {
+.card *:first-child {
+  margin-top: 0;
+}
+
+.card *:last-child {
   margin-bottom: 0;
 }
 

src/components/Card.tsx

@@ -20,7 +20,7 @@ export const Card: React.FunctionComponent<CardProps> = ({
   const body = (
     <div className={styles.card}>
       {icon && <img className={styles.icon} alt={title} src={icon} />}
-      <h3>{title}</h3>
+      <h3 className={styles.title}>{title}</h3>
       <div>{children || description}</div>
       {tags && (
         <ul className={styles.tags}>

src/components/CenterLayout.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import clsx from "clsx"
 import styles from "./CenterLayout.module.css"
 
 /**
@@ -9,10 +10,24 @@ import styles from "./CenterLayout.module.css"
  * hide_table_of_contents: true
  * hide_title: true
  * ---
+ *
+ * You should then wrap _all_ content on the page between <CenterLayout> tags:
+ *
+ * <CenterLayout>
+ *
+ * # Page Title
+ *
+ * Content…
+ *
+ * </CenterLayout>
+ *
+ * Also note: The "markdown" class being applied is essential to preserve
+ * default styles applied by the theme e.g. with `.markdown > h2` selectors
+ *
  * */
 
 export const CenterLayout: React.FunctionComponent<any> = ({ children }) => {
-  return <div className={styles.center}>{children}</div>
+  return <div className={clsx(styles.center, "markdown")}>{children}</div>
 }
 
 export default CenterLayout

src/components/Course.module.css

@@ -1,5 +1,6 @@
 .author {
   color: gray;
+  margin: 1.5rem 0;
 }
 
 .author img {