Fix alignment/zoom for avatars on courses page (#139)

Author: ebeneliason

docusaurus.config.js

@@ -249,7 +249,7 @@ const config = {
             contextualSearch: true,
           }
         : undefined,
-      zoomSelector: ".markdown img",
+      zoomSelector: ".markdown :not(em) > img:not(.no-zoom)",
       posthog: enablePosthog
         ? {
             apiKey: posthogConfig.apiKey,

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>

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;