From 885b80749f53d22ab8b86e290a544b21c35abc91 Mon Sep 17 00:00:00 2001
From: Eben Eliason <eben.eliason@gmail.com>
Date: Tue, 18 Jan 2022 13:53:53 -0800
Subject: [PATCH] Fix alignment/zoom for avatars on courses page

---
 docusaurus.config.js      | 2 +-
 src/components/Course.tsx | 2 +-
 src/css/custom.css        | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 8eee4028b1..dc9b1cdbfb 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -228,7 +228,7 @@ const config = {
             contextualSearch: true,
           }
         : undefined,
-      zoomSelector: ".markdown img",
+      zoomSelector: ".markdown :not(em) > img:not(.no-zoom)",
       posthog: enablePosthog
         ? {
             apiKey: posthogConfig.apiKey,
diff --git a/src/components/Course.tsx b/src/components/Course.tsx
index 3eda6a6fad..5b8a79ed02 100644
--- a/src/components/Course.tsx
+++ b/src/components/Course.tsx
@@ -28,7 +28,7 @@ export const Course: React.FunctionComponent<CourseProps> = ({
     <Card title={title} icon={icon} href={href}>
       <p>{description}</p>
       <p className={styles.author}>
-        <img src={authorImg} />
+        <img src={authorImg} className="no-zoom" />
         <span>{author}</span>
       </p>
       <p>
diff --git a/src/css/custom.css b/src/css/custom.css
index 7eef8022f0..6245d435cb 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -71,12 +71,12 @@ main {
 
 /* IMAGES & CAPTIONS */
 
-p > img {
+p > img:not(.no-zoom) {
   display: block;
   margin: auto;
 }
 
-p > img + em {
+p > img:not(.no-zoom) + em {
   color: gray;
   font-size: 0.9rem;
   display: block;