add support for float-group and float-gap roles

* float-group establishes a block formatting context (without affecting margin collapsing)
* float-gap adds side and bottom margin to a floating element

diff --git a/preview-src/index.adoc b/preview-src/index.adoc
index 79ac5af..dd76475 100644 (file)
--- a/preview-src/index.adoc
+++ b/preview-src/index.adoc
@@ -6,16 +6,21 @@ Author Name
 :!table-caption:
 :page-pagination:
 
-image:multirepo-ssg.svg[Multirepo SSG,200,150,float=right]
+[.float-group]
+--
+image:multirepo-ssg.svg[Multirepo SSG,180,135,float=right,role=float-gap]
 Platonem complectitur mediocritatem ea eos.
 Ei nonumy deseruisse ius.
 Mel id omnes verear.
 Vis no velit audiam, sonet <<dependencies,praesent>> eum ne.
 *Prompta eripuit* nec ad.
 Integer diam enim, dignissim eget eros et, ultricies mattis odio.
+--
+
 Vestibulum consectetur nec urna a luctus.
 Quisque pharetra tristique arcu fringilla dapibus.
 https://example.org[Curabitur,role=unresolved] ut massa aliquam, cursus enim et, accumsan lectus.
+Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna.
 
 == Cu solet
 
@@ -298,7 +303,8 @@ Eos suscipit scaevola at.
 ____
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna.
-Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae!
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna.
 Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae!
 ____

diff --git a/src/css/doc.css b/src/css/doc.css
index 4b29cef..4ca5aa8 100644 (file)
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -171,6 +171,20 @@
   float: left;
 }
 
+.doc .float-gap.right {
+  margin: 0 1rem 1rem 0;
+}
+
+.doc .float-gap.left {
+  margin: 0 0 1rem 1rem;
+}
+
+.doc .float-group::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
 .doc .stretch {
   width: 100%;
 }