Updates docs

src/pages/About.tsx

@@ -9,7 +9,6 @@ import AdditionalResources from 'components/misc/AdditionalResources';
 import { StyledCard } from 'components/Form/Card';
 import docs, { about, license, fairUse, supportUs } from 'utils/docs';
 
-
 const AboutContainer = styled.div`
 width: 95vw;
 max-width: 1000px;
@@ -38,6 +37,9 @@ const Section = styled(StyledCard)`
   margin-bottom: 2rem;
   overflow: clip;
   max-height: 100%;
+  section {
+    clear: both;
+  }
   h3 {
     font-size: 1.5rem;
   }
@@ -77,13 +79,25 @@ const Section = styled(StyledCard)`
       }
     }
   }
-  .screenshot {
-    float: right;
-    break-inside: avoid;
-    max-width: 300px;
-    // max-height: 28rem;
-    border-radius: 6px;
+  .example-screenshot {
+    float: right; 
+    display: inline-flex;
+    flex-direction: column;
     clear: both;
+    max-width: 300px;
+    img {
+      float: right;
+      break-inside: avoid;
+      max-width: 300px;
+      // max-height: 30rem;
+      border-radius: 6px;
+      clear: both;
+    }
+    figcaption {
+      font-size: 0.8rem;
+      text-align: center;
+      opacity: 0.7;
+    }
   }
 `;
 
@@ -123,9 +137,13 @@ const About = (): JSX.Element => {
         </div>
         {docs.map((section, sectionIndex: number) => (
           <section key={section.title}>
+            { sectionIndex > 0 && <hr /> }
             <Heading as="h3" size="small" id={makeAnchor(section.title)} color={colors.primary}>{section.title}</Heading>
-            {section.screenshot && 
-              <img className="screenshot" src={section.screenshot} alt={`Example Screenshot ${section.title}`} />
+            {section.screenshot &&
+              <figure className="example-screenshot">
+                <img className="screenshot" src={section.screenshot} alt={`Example Screenshot ${section.title}`} />
+                <figcaption>Fig.{sectionIndex + 1} - Example of {section.title}</figcaption>
+              </figure> 
             }
             {section.description && <>
               <Heading as="h4" size="small">Description</Heading>
@@ -147,7 +165,7 @@ const About = (): JSX.Element => {
                 ))}
               </ul>
             </>}
-            { sectionIndex < docs.length - 1 && <hr /> }
+            {/* { sectionIndex < docs.length - 1 && <hr /> } */}
           </section>
         ))}
       </Section>