docs: add image float css idea

website/src/components/Figure/Figure.tsx

@@ -67,6 +67,7 @@ import React from 'react';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import './styles.module.css';
+import styles from './styles.module.css';
 
 type Props = {
     // An optional alt text, if the caption does not already convey all relevant
@@ -76,11 +77,13 @@ type Props = {
     caption: string;
     // the path to the image, starting with `/img/`. Example: /img/image.png
     img: string;
+    // whether the image should be floated to one side on larger setups
+    float?: boolean;
 };
 
-const Component: React.FC<Props> = ({ img, alt, caption }) => {
+const Component: React.FC<Props> = ({ img, alt, caption, float }) => {
     return (
-        <figure>
+        <figure className={float ? styles.float : ''}>
             <img alt={alt} src={useBaseUrl(img)} />
             <figcaption>{caption}</figcaption>
         </figure>

website/src/components/Figure/styles.module.css

@@ -7,6 +7,12 @@ figure {
     margin-inline: 0;
 }
 
+.float {
+    float: right;
+    max-width: 50%;
+    margin-left: var(--ifm-pre-padding);
+}
+
 figure img {
     box-shadow: none;
     border: none;
@@ -21,3 +27,9 @@ figcaption {
     padding-inline: var(--ifm-pre-padding);
     border-inline-start: 5px solid var(--ifm-color-primary);
 }
+
+
+/* clear floating figures for everything but paragraphs and lists */
+:global(.markdown) :is(:not(p):not(ol):not(ul):not(li)) {
+    clear: both;
+}