Tweak card styles for better handling of card content

The primary motivation here is to refine the layout of the cards
on the courses page, but some of the tweaks apply more generally.
This also corrects other styling on the courses page via
improvements to the <CenterLayout> component.

_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 {