From 5590e4c45bb868a8fa4610a1273ad131a3ee6354 Mon Sep 17 00:00:00 2001
From: Johannes Stoelp <johannes.stoelp@gmail.com>
Date: Wed, 20 Mar 2024 00:17:30 +0100
Subject: html: add example with floating figures

---
 src/web/html.md         |   6 +++
 src/web/src/figure.html |  99 ++++++++++++++++++++++++++++++++++++++++++++++++
 src/web/src/grad.png    | Bin 0 -> 33635 bytes
 3 files changed, 105 insertions(+)
 create mode 100644 src/web/src/figure.html
 create mode 100644 src/web/src/grad.png

diff --git a/src/web/html.md b/src/web/html.md
index d3b78ba..0f236ef 100644
--- a/src/web/html.md
+++ b/src/web/html.md
@@ -30,3 +30,9 @@
 ```html
 {{#include src/tags.html }}
 ```
+
+# Floating figures with caption
+[Rendered html](src/figure.html)
+```html
+{{#include src/figure.html }}
+```
diff --git a/src/web/src/figure.html b/src/web/src/figure.html
new file mode 100644
index 0000000..ebcdf58
--- /dev/null
+++ b/src/web/src/figure.html
@@ -0,0 +1,99 @@
+<style>
+img {
+    width: 100%;
+    height: auto;
+}
+figure {
+    width: 20%;
+}
+</style>
+
+<!-- EXAMPLE 1 ---------------------------------------------------------------->
+
+<figure style="float: left;">
+    <img src="grad.png">
+    <figcaption>Fig 1: wow such colors</figcaption>
+</figure>
+
+<p><i>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam
+faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus
+quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl
+condimentum id venenatis. Gravida dictum fusce ut placerat orci nulla. Pulvinar
+etiam non quam lacus suspendisse faucibus interdum posuere. Pulvinar
+pellentesque habitant morbi tristique senectus et netus et malesuada. Sem
+fringilla ut morbi tincidunt augue interdum. Consectetur purus ut faucibus
+pulvinar elementum. Dui faucibus in ornare quam. Sodales ut etiam sit amet
+nisl. Nunc scelerisque viverra mauris in aliquam. Nec sagittis aliquam
+malesuada bibendum arcu vitae elementum curabitur.
+</i></p>
+
+<figure style="float: right;">
+    <img src="grad.png">
+    <figcaption>Fig 2: wow such colors again</figcaption>
+</figure>
+
+<p><i>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam
+faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus
+quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl
+condimentum id venenatis.
+</i></p>
+
+<!-- EXAMPLE 2 ---------------------------------------------------------------->
+
+<hr style="clear: both">
+
+<figure style="float: left;">
+    <img src="grad.png">
+</figure>
+
+Floats can be next to each other on the same height.
+
+<figure style="float: right;">
+    <img src="grad.png">
+</figure>
+
+<!-- EXAMPLE 3 ---------------------------------------------------------------->
+
+<hr style="clear: both">
+
+<figure style="float: left;">
+    <img src="grad.png">
+</figure>
+
+The css property <code>clear: {left, right, both};</code> controls how elements
+should be handled relative to the previous floating element.
+
+<figure style="float: right; clear: left;">
+    <img src="grad.png">
+</figure>
+
+<p><i>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+incididunt ut labore et dolore magna aliqua. Nunc lobortis mattis aliquam
+faucibus. A iaculis at erat pellentesque adipiscing. Dolor morbi non arcu risus
+quis varius quam quisque. Fermentum odio eu feugiat pretium. Nibh nisl
+condimentum id venenatis. Gravida dictum fusce ut placerat orci nulla. Pulvinar
+etiam non quam lacus suspendisse faucibus interdum posuere.
+</i></p>
+
+<!-- EXAMPLE 4 ---------------------------------------------------------------->
+
+<hr style="clear: both">
+
+<div style="overflow: auto; border: 2px solid red;">
+<figure style="float: left;">
+    <img src="grad.png">
+</figure>
+<code>overflow: auto</code> gives an alternative to <code>clear</code> to
+control placement of the floats. The red boarder visualizes the size of the
+<code>&ltdiv&gt</code> block, you can remove the <code>overflow</code> property
+and observe how the border changes.
+</div>
+
+<figure style="float: right;">
+    <img src="grad.png">
+</figure>
diff --git a/src/web/src/grad.png b/src/web/src/grad.png
new file mode 100644
index 0000000..0ae458a
Binary files /dev/null and b/src/web/src/grad.png differ
-- 
cgit v1.2.3