From 48f34afa9812f546bff8a098f0ab0c8e813ce21b Mon Sep 17 00:00:00 2001
From: Eben Eliason <eben.eliason@gmail.com>
Date: Thu, 16 Dec 2021 07:50:44 -0800
Subject: [PATCH] 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        |  2 +-
 docs/courses.mdx                 |  4 ++--
 src/components/Card.module.css   | 11 ++++++++++-
 src/components/Card.tsx          |  2 +-
 src/components/CenterLayout.tsx  | 17 ++++++++++++++++-
 src/components/Course.module.css |  1 +
 6 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/_docs-sources/courses.mdx b/_docs-sources/courses.mdx
index 1259fa583..04b26b5f5 100644
--- a/_docs-sources/courses.mdx
+++ b/_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"
diff --git a/docs/courses.mdx b/docs/courses.mdx
index 86d94a810..2f65b5569 100644
--- a/docs/courses.mdx
+++ b/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 -->
diff --git a/src/components/Card.module.css b/src/components/Card.module.css
index 488169219..407f0027f 100644
--- a/src/components/Card.module.css
+++ b/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;
 }
 
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index cfbf58dbc..9a1766887 100644
--- a/src/components/Card.tsx
+++ b/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}>
diff --git a/src/components/CenterLayout.tsx b/src/components/CenterLayout.tsx
index b023df1d7..bd1704f64 100644
--- a/src/components/CenterLayout.tsx
+++ b/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
diff --git a/src/components/Course.module.css b/src/components/Course.module.css
index 9f615a54b..2a3938430 100644
--- a/src/components/Course.module.css
+++ b/src/components/Course.module.css
@@ -1,5 +1,6 @@
 .author {
   color: gray;
+  margin: 1.5rem 0;
 }
 
 .author img {