css: reworked support for floatable components.

What's done, roughly:

 * It's now possible to tuck the floating components out of the page
   flow similarly to .m-container-inflate. This required me to update
   the active section highlighting to handle this case correctly as well
   (and there's a lot more CSS for that now, ugh).
 * The .m-container-inflate has now padding after to make it better
   integrable into everything else.
 * OTOH, the all-around padding for .m-col-*-* elements is done only
   when they are direct children of .m-row. Otherwise, the padding is
   done only for .m-left-*, .m-right-*, .m-center-* and only on sides
   where it is needed.

Also added a few tests for functionality that was neglected before.

diff --git a/css/m-components.css b/css/m-components.css
index 0fe98dfdd443f1da548432471e20019b4ab8ad60..81f930385ae4388b5620d567130cb6142a463fcd 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -932,12 +932,72 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
 .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
 .m-container-inflatable > .m-row > [class*='m-col-'] section > pre,
 .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-code-figure,
-.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure {
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure,
+.m-container-inflatable [class*='m-center-'] > .m-note,
+.m-container-inflatable [class*='m-center-'] > .m-frame,
+.m-container-inflatable [class*='m-center-'] > .m-block,
+.m-container-inflatable [class*='m-center-'] > .m-imagegrid,
+.m-container-inflatable [class*='m-center-'] > pre,
+.m-container-inflatable [class*='m-center-'] > .m-code-figure,
+.m-container-inflatable [class*='m-center-'] > .m-console-figure,
+.m-container-inflatable [class*='m-left-'] > .m-note,
+.m-container-inflatable [class*='m-left-'] > .m-frame,
+.m-container-inflatable [class*='m-left-'] > .m-block,
+.m-container-inflatable [class*='m-left-'] > .m-imagegrid,
+.m-container-inflatable [class*='m-left-'] > pre,
+.m-container-inflatable [class*='m-left-'] > .m-code-figure,
+.m-container-inflatable [class*='m-left-'] > .m-console-figure,
+.m-container-inflatable [class*='m-right-'] > .m-note,
+.m-container-inflatable [class*='m-right-'] > .m-frame,
+.m-container-inflatable [class*='m-right-'] > .m-block,
+.m-container-inflatable [class*='m-right-'] > .m-imagegrid,
+.m-container-inflatable [class*='m-right-'] > pre,
+.m-container-inflatable [class*='m-right-'] > .m-code-figure,
+.m-container-inflatable [class*='m-right-'] > .m-console-figure,
+.m-container-inflatable .m-container-inflate > .m-note,
+.m-container-inflatable .m-container-inflate > .m-frame,
+.m-container-inflatable .m-container-inflate > .m-block,
+.m-container-inflatable .m-container-inflate > .m-imagegrid,
+.m-container-inflatable .m-container-inflate > pre,
+.m-container-inflatable .m-container-inflate > .m-code-figure,
+.m-container-inflatable .m-container-inflate > .m-console-figure
+{
   margin-left: -1rem;
   margin-right: -1rem;
 }
 
 @media screen and (min-width: 576px) {
+  .m-container-inflatable .m-center-s > .m-note,
+  .m-container-inflatable .m-center-s > .m-frame,
+  .m-container-inflatable .m-center-s > .m-block,
+  .m-container-inflatable .m-center-s > .m-imagegrid,
+  .m-container-inflatable .m-center-s > pre,
+  .m-container-inflatable .m-center-s > .m-code-figure,
+  .m-container-inflatable .m-center-s > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+  .m-container-inflatable .m-left-s > .m-note,
+  .m-container-inflatable .m-left-s > .m-frame,
+  .m-container-inflatable .m-left-s > .m-block,
+  .m-container-inflatable .m-left-s > .m-imagegrid,
+  .m-container-inflatable .m-left-s > pre,
+  .m-container-inflatable .m-left-s > .m-code-figure,
+  .m-container-inflatable .m-left-s > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: 0;
+  }
+  .m-container-inflatable .m-right-s > .m-note,
+  .m-container-inflatable .m-right-s > .m-frame,
+  .m-container-inflatable .m-right-s > .m-block,
+  .m-container-inflatable .m-right-s > .m-imagegrid,
+  .m-container-inflatable .m-right-s > pre,
+  .m-container-inflatable .m-right-s > .m-code-figure,
+  .m-container-inflatable .m-right-s > .m-console-figure {
+    margin-left: 0;
+    margin-right: -1rem;
+  }
+
   .m-container-inflatable > .m-row > .m-col-s-10 > .m-imagegrid.m-container-inflate,
   .m-container-inflatable > .m-row > .m-col-s-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
@@ -945,6 +1005,37 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
   }
 }
 @media screen and (min-width: 768px) {
+  .m-container-inflatable .m-center-m > .m-note,
+  .m-container-inflatable .m-center-m > .m-frame,
+  .m-container-inflatable .m-center-m > .m-block,
+  .m-container-inflatable .m-center-m > .m-imagegrid,
+  .m-container-inflatable .m-center-m > pre,
+  .m-container-inflatable .m-center-m > .m-code-figure,
+  .m-container-inflatable .m-center-m > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+  .m-container-inflatable .m-left-m > .m-note,
+  .m-container-inflatable .m-left-m > .m-frame,
+  .m-container-inflatable .m-left-m > .m-block,
+  .m-container-inflatable .m-left-m > .m-imagegrid,
+  .m-container-inflatable .m-left-m > pre,
+  .m-container-inflatable .m-left-m > .m-code-figure,
+  .m-container-inflatable .m-left-m > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: 0;
+  }
+  .m-container-inflatable .m-right-m > .m-note,
+  .m-container-inflatable .m-right-m > .m-frame,
+  .m-container-inflatable .m-right-m > .m-block,
+  .m-container-inflatable .m-right-m > .m-imagegrid,
+  .m-container-inflatable .m-right-m > pre,
+  .m-container-inflatable .m-right-m > .m-code-figure,
+  .m-container-inflatable .m-right-m > .m-console-figure {
+    margin-left: 0;
+    margin-right: -1rem;
+  }
+
   .m-container-inflatable > .m-row > .m-col-m-10 > .m-imagegrid.m-container-inflate,
   .m-container-inflatable > .m-row > .m-col-m-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
@@ -952,6 +1043,37 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
   }
 }
 @media screen and (min-width: 992px) {
+  .m-container-inflatable .m-center-l > .m-note,
+  .m-container-inflatable .m-center-l > .m-frame,
+  .m-container-inflatable .m-center-l > .m-block,
+  .m-container-inflatable .m-center-l > .m-imagegrid,
+  .m-container-inflatable .m-center-l > pre,
+  .m-container-inflatable .m-center-l > .m-code-figure,
+  .m-container-inflatable .m-center-l > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+  .m-container-inflatable .m-left-l > .m-note,
+  .m-container-inflatable .m-left-l > .m-frame,
+  .m-container-inflatable .m-left-l > .m-block,
+  .m-container-inflatable .m-left-l > .m-imagegrid,
+  .m-container-inflatable .m-left-l > pre,
+  .m-container-inflatable .m-left-l > .m-code-figure,
+  .m-container-inflatable .m-left-l > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: 0;
+  }
+  .m-container-inflatable .m-right-l > .m-note,
+  .m-container-inflatable .m-right-l > .m-frame,
+  .m-container-inflatable .m-right-l > .m-block,
+  .m-container-inflatable .m-right-l > .m-imagegrid,
+  .m-container-inflatable .m-right-l > pre,
+  .m-container-inflatable .m-right-l > .m-code-figure,
+  .m-container-inflatable .m-right-l > .m-console-figure {
+    margin-left: 0;
+    margin-right: -1rem;
+  }
+
   .m-container-inflatable > .m-row > .m-col-l-10 > .m-imagegrid.m-container-inflate,
   .m-container-inflatable > .m-row > .m-col-l-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;

diff --git a/css/m-dark+doxygen.compiled.css b/css/m-dark+doxygen.compiled.css
index ff18c0af2f99f91127de171a4004023513f447db..ee8d6b791ee49be9c98a420f3c9d3b2a2b1e36fb 100644 (file)
--- a/css/m-dark+doxygen.compiled.css
+++ b/css/m-dark+doxygen.compiled.css
@@ -41,7 +41,7 @@ body { margin: 0; }
   clear: both;
   display: table;
 }
-[class*='m-col-'] {
+.m-row > [class*='m-col-'] {
   position: relative;
   padding: 1rem;
 }
@@ -53,17 +53,11 @@ body { margin: 0; }
 [class*='m-show-'] {
   display: none;
 }
-[class*='m-col-'].m-left-s, [class*='m-col-'].m-right-s, [class*='m-col-'].m-center-s,
-[class*='m-col-'].m-left-m, [class*='m-col-'].m-right-m, [class*='m-col-'].m-center-m,
-[class*='m-col-'].m-left-l, [class*='m-col-'].m-right-l, [class*='m-col-'].m-center-l {
-  margin-left: -1rem;
-  margin-right: -1rem;
+.m-container-inflate, :not(.m-row) > [class*='m-col-'] {
+  margin-bottom: 1rem;
 }
-.m-row > [class*='m-col-'].m-left-s, .m-row > [class*='m-col-'].m-right-s, .m-row > [class*='m-col-'].m-center-s,
-.m-row > [class*='m-col-'].m-left-m, .m-row > [class*='m-col-'].m-right-m, .m-row > [class*='m-col-'].m-center-m,
-.m-row > [class*='m-col-'].m-left-l, .m-row > [class*='m-col-'].m-right-l  .m-row > [class*='m-col-'].m-center-l {
-  margin-left: 0;
-  margin-right: 0;
+.m-container-inflate:last-child, :not(.m-row) > [class*='m-col-']:last-child {
+  margin-bottom: 0;
 }
 .m-container.m-nopad, [class*='m-col-'].m-nopad,
 .m-container.m-nopadx, [class*='m-col-'].m-nopadx,
@@ -78,35 +72,22 @@ body { margin: 0; }
 [class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadt {
   padding-top: 0;
 }
-[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb {
+[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb,
+.m-container-inflate.m-nopadb {
   padding-bottom: 0;
 }
 [class*='m-col-t-'] { float: left; }
-[class*='m-col-t-'].m-left-t, [class*='m-col-t-'].m-right-t {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
 .m-left-t {
+  padding-right: 1rem;
   float: left;
 }
 .m-right-t, [class*='m-col-t-'].m-right-t {
+  padding-left: 1rem;
   float: right;
 }
 .m-center-t, [class*='m-col-t-'].m-center-t {
   float: none;
 }
-[class*='m-col-t-'].m-left-t {
-  margin-left: -1rem;
-}
-[class*='m-col-t-'].m-right-t {
-  margin-right: -1rem;
-}
-.m-row > [class*='m-col-t-'].m-left-t {
-  margin-left: 0;
-}
-.m-row > [class*='m-col-t-'].m-right-t {
-  margin-right: 0;
-}
 .m-center-t, [class*='m-col-t-'].m-center-t {
   margin-left: auto;
   margin-right: auto;
@@ -148,35 +129,25 @@ body { margin: 0; }
 .m-pull-t-11 { right: calc(11 * 100% / 12); }
 @media screen and (min-width: 576px) {
   .m-container { width: 560px; }
-  .m-container-inflatable .m-col-s-10 .m-container-inflate {
+  .m-container-inflatable .m-col-s-10 .m-container-inflate:not([class*='m-left-']):not([class*='m-right-']) {
     margin-left: -10%;
     margin-right: -10%;
   }
-  [class*='m-col-s-'] { float: left; }
-  [class*='m-col-s-'].m-left-s, [class*='m-col-s-'].m-right-s {
-    padding-top: 0px;
-    padding-bottom: 0px;
+  .m-container-inflatable .m-col-s-10 .m-container-inflate.m-left-s {
+    margin-left: -10%;
+  }
+  .m-container-inflatable .m-col-s-10 .m-container-inflate.m-right-s {
+    margin-right: -10%;
   }
+  [class*='m-col-s-'] { float: left; }
   .m-left-s {
+    padding-right: 1rem;
     float: left;
   }
   .m-right-s, [class*='m-col-s-'].m-right-s {
+    padding-left: 1rem;
     float: right;
   }
-  [class*='m-col-s-'].m-left-s {
-    margin-left: -1rem;
-    margin-right: 0;
-  }
-  [class*='m-col-s-'].m-right-s {
-    margin-left: 0;
-    margin-right: -1rem;
-  }
-  .m-row > [class*='m-col-s-'].m-left-s {
-    margin-left: 0;
-  }
-  .m-row > [class*='m-col-s-'].m-right-s {
-    margin-right: 0;
-  }
   .m-center-s, [class*='m-col-s-'].m-center-s {
     margin-left: auto;
     margin-right: auto;
@@ -228,35 +199,25 @@ body { margin: 0; }
 }
 @media screen and (min-width: 768px) {
   .m-container { width: 750px; }
-  .m-container-inflatable .m-col-m-10 .m-container-inflate {
+  .m-container-inflatable .m-col-m-10 .m-container-inflate:not([class*='m-left-']):not([class*='m-right-']) {
     margin-left: -10%;
     margin-right: -10%;
   }
-  [class*='m-col-m-'] { float: left; }
-  [class*='m-col-m-'].m-left-m, [class*='m-col-m-'].m-right-m {
-    padding-top: 0px;
-    padding-bottom: 0px;
+  .m-container-inflatable .m-col-m-10 .m-container-inflate.m-left-m {
+    margin-left: -10%;
   }
+  .m-container-inflatable .m-col-m-10 .m-container-inflate.m-right-m {
+    margin-right: -10%;
+  }
+  [class*='m-col-m-'] { float: left; }
   .m-left-m {
+    padding-right: 1rem;
     float: left;
   }
   .m-right-m, [class*='m-col-m-'].m-right-m {
+    padding-left: 1rem;
     float: right;
   }
-  [class*='m-col-m-'].m-left-m {
-    margin-left: -1rem;
-    margin-right: 0;
-  }
-  [class*='m-col-m-'].m-right-m {
-    margin-left: 0;
-    margin-right: -1rem;
-  }
-  .m-row > [class*='m-col-m-'].m-left-m {
-    margin-left: 0;
-  }
-  .m-row > [class*='m-col-m-'].m-right-m {
-    margin-right: 0;
-  }
   .m-center-m, [class*='m-col-m-'].m-center-m {
     margin-left: auto;
     margin-right: auto;
@@ -308,35 +269,25 @@ body { margin: 0; }
 }
 @media screen and (min-width: 992px) {
   .m-container { width: 960px; }
-  .m-container-inflatable .m-col-l-10 .m-container-inflate {
+  .m-container-inflatable .m-col-l-10 .m-container-inflate:not([class*='m-left-']):not([class*='m-right-']) {
     margin-left: -10%;
     margin-right: -10%;
   }
-  [class*='m-col-l-'] { float: left; }
-  [class*='m-col-l-'].m-left-l, [class*='m-col-l-'].m-right-l {
-    padding-top: 0px;
-    padding-bottom: 0px;
+  .m-container-inflatable .m-col-l-10 .m-container-inflate.m-left-l {
+    margin-left: -10%;
+  }
+  .m-container-inflatable .m-col-l-10 .m-container-inflate.m-right-l {
+    margin-right: -10%;
   }
+  [class*='m-col-l-'] { float: left; }
   .m-left-l {
+    padding-right: 1rem;
     float: left;
   }
   .m-right-l, [class*='m-col-l-'].m-right-l {
+    padding-left: 1rem;
     float: right;
   }
-  [class*='m-col-l-'].m-left-l {
-    margin-left: -1rem;
-    margin-right: 0;
-  }
-  [class*='m-col-l-'].m-right-l {
-    margin-left: 0;
-    margin-right: -1rem;
-  }
-  .m-row > [class*='m-col-l-'].m-left-l {
-    margin-left: 0;
-  }
-  .m-row > [class*='m-col-l-'].m-right-l {
-    margin-right: 0;
-  }
   .m-center-l, [class*='m-col-l-'].m-center-l {
     margin-left: auto;
     margin-right: auto;
@@ -1234,11 +1185,70 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
 .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
 .m-container-inflatable > .m-row > [class*='m-col-'] section > pre,
 .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-code-figure,
-.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure {
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure,
+.m-container-inflatable [class*='m-center-'] > .m-note,
+.m-container-inflatable [class*='m-center-'] > .m-frame,
+.m-container-inflatable [class*='m-center-'] > .m-block,
+.m-container-inflatable [class*='m-center-'] > .m-imagegrid,
+.m-container-inflatable [class*='m-center-'] > pre,
+.m-container-inflatable [class*='m-center-'] > .m-code-figure,
+.m-container-inflatable [class*='m-center-'] > .m-console-figure,
+.m-container-inflatable [class*='m-left-'] > .m-note,
+.m-container-inflatable [class*='m-left-'] > .m-frame,
+.m-container-inflatable [class*='m-left-'] > .m-block,
+.m-container-inflatable [class*='m-left-'] > .m-imagegrid,
+.m-container-inflatable [class*='m-left-'] > pre,
+.m-container-inflatable [class*='m-left-'] > .m-code-figure,
+.m-container-inflatable [class*='m-left-'] > .m-console-figure,
+.m-container-inflatable [class*='m-right-'] > .m-note,
+.m-container-inflatable [class*='m-right-'] > .m-frame,
+.m-container-inflatable [class*='m-right-'] > .m-block,
+.m-container-inflatable [class*='m-right-'] > .m-imagegrid,
+.m-container-inflatable [class*='m-right-'] > pre,
+.m-container-inflatable [class*='m-right-'] > .m-code-figure,
+.m-container-inflatable [class*='m-right-'] > .m-console-figure,
+.m-container-inflatable .m-container-inflate > .m-note,
+.m-container-inflatable .m-container-inflate > .m-frame,
+.m-container-inflatable .m-container-inflate > .m-block,
+.m-container-inflatable .m-container-inflate > .m-imagegrid,
+.m-container-inflatable .m-container-inflate > pre,
+.m-container-inflatable .m-container-inflate > .m-code-figure,
+.m-container-inflatable .m-container-inflate > .m-console-figure
+{
   margin-left: -1rem;
   margin-right: -1rem;
 }
 @media screen and (min-width: 576px) {
+  .m-container-inflatable .m-center-s > .m-note,
+  .m-container-inflatable .m-center-s > .m-frame,
+  .m-container-inflatable .m-center-s > .m-block,
+  .m-container-inflatable .m-center-s > .m-imagegrid,
+  .m-container-inflatable .m-center-s > pre,
+  .m-container-inflatable .m-center-s > .m-code-figure,
+  .m-container-inflatable .m-center-s > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+  .m-container-inflatable .m-left-s > .m-note,
+  .m-container-inflatable .m-left-s > .m-frame,
+  .m-container-inflatable .m-left-s > .m-block,
+  .m-container-inflatable .m-left-s > .m-imagegrid,
+  .m-container-inflatable .m-left-s > pre,
+  .m-container-inflatable .m-left-s > .m-code-figure,
+  .m-container-inflatable .m-left-s > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: 0;
+  }
+  .m-container-inflatable .m-right-s > .m-note,
+  .m-container-inflatable .m-right-s > .m-frame,
+  .m-container-inflatable .m-right-s > .m-block,
+  .m-container-inflatable .m-right-s > .m-imagegrid,
+  .m-container-inflatable .m-right-s > pre,
+  .m-container-inflatable .m-right-s > .m-code-figure,
+  .m-container-inflatable .m-right-s > .m-console-figure {
+    margin-left: 0;
+    margin-right: -1rem;
+  }
   .m-container-inflatable > .m-row > .m-col-s-10 > .m-imagegrid.m-container-inflate,
   .m-container-inflatable > .m-row > .m-col-s-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
@@ -1246,6 +1256,36 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
   }
 }
 @media screen and (min-width: 768px) {
+  .m-container-inflatable .m-center-m > .m-note,
+  .m-container-inflatable .m-center-m > .m-frame,
+  .m-container-inflatable .m-center-m > .m-block,
+  .m-container-inflatable .m-center-m > .m-imagegrid,
+  .m-container-inflatable .m-center-m > pre,
+  .m-container-inflatable .m-center-m > .m-code-figure,
+  .m-container-inflatable .m-center-m > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+  .m-container-inflatable .m-left-m > .m-note,
+  .m-container-inflatable .m-left-m > .m-frame,
+  .m-container-inflatable .m-left-m > .m-block,
+  .m-container-inflatable .m-left-m > .m-imagegrid,
+  .m-container-inflatable .m-left-m > pre,
+  .m-container-inflatable .m-left-m > .m-code-figure,
+  .m-container-inflatable .m-left-m > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: 0;
+  }
+  .m-container-inflatable .m-right-m > .m-note,
+  .m-container-inflatable .m-right-m > .m-frame,
+  .m-container-inflatable .m-right-m > .m-block,
+  .m-container-inflatable .m-right-m > .m-imagegrid,
+  .m-container-inflatable .m-right-m > pre,
+  .m-container-inflatable .m-right-m > .m-code-figure,
+  .m-container-inflatable .m-right-m > .m-console-figure {
+    margin-left: 0;
+    margin-right: -1rem;
+  }
   .m-container-inflatable > .m-row > .m-col-m-10 > .m-imagegrid.m-container-inflate,
   .m-container-inflatable > .m-row > .m-col-m-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
@@ -1253,6 +1293,36 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
   }
 }
 @media screen and (min-width: 992px) {
+  .m-container-inflatable .m-center-l > .m-note,
+  .m-container-inflatable .m-center-l > .m-frame,
+  .m-container-inflatable .m-center-l > .m-block,
+  .m-container-inflatable .m-center-l > .m-imagegrid,
+  .m-container-inflatable .m-center-l > pre,
+  .m-container-inflatable .m-center-l > .m-code-figure,
+  .m-container-inflatable .m-center-l > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+  .m-container-inflatable .m-left-l > .m-note,
+  .m-container-inflatable .m-left-l > .m-frame,
+  .m-container-inflatable .m-left-l > .m-block,
+  .m-container-inflatable .m-left-l > .m-imagegrid,
+  .m-container-inflatable .m-left-l > pre,
+  .m-container-inflatable .m-left-l > .m-code-figure,
+  .m-container-inflatable .m-left-l > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: 0;
+  }
+  .m-container-inflatable .m-right-l > .m-note,
+  .m-container-inflatable .m-right-l > .m-frame,
+  .m-container-inflatable .m-right-l > .m-block,
+  .m-container-inflatable .m-right-l > .m-imagegrid,
+  .m-container-inflatable .m-right-l > pre,
+  .m-container-inflatable .m-right-l > .m-code-figure,
+  .m-container-inflatable .m-right-l > .m-console-figure {
+    margin-left: 0;
+    margin-right: -1rem;
+  }
   .m-container-inflatable > .m-row > .m-col-l-10 > .m-imagegrid.m-container-inflate,
   .m-container-inflatable > .m-row > .m-col-l-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
@@ -1701,7 +1771,7 @@ body > header > nav ol {
 body > header > nav ol ol {
   padding-left: 1.5rem;
 }
-body > header > nav [class*='m-col-'] {
+body > header > nav .m-row > [class*='m-col-'] {
   padding-top: 0;
   padding-bottom: 0;
 }
@@ -2039,7 +2109,31 @@ article:last-child, article section:last-child { margin-bottom: 0; }
 .m-container-inflatable section:target section > .m-block,
 .m-container-inflatable section:target section > pre,
 .m-container-inflatable section:target section > figure.m-code-figure > pre:first-child,
-.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child {
+.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-center-'] > .m-note,
+.m-container-inflatable section:target [class*='m-center-'] > .m-frame,
+.m-container-inflatable section:target [class*='m-center-'] > .m-block,
+.m-container-inflatable section:target [class*='m-center-'] > pre,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-left-'] > .m-note,
+.m-container-inflatable section:target [class*='m-left-'] > .m-frame,
+.m-container-inflatable section:target [class*='m-left-'] > .m-block,
+.m-container-inflatable section:target [class*='m-left-'] > pre,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-right-'] > .m-note,
+.m-container-inflatable section:target [class*='m-right-'] > .m-frame,
+.m-container-inflatable section:target [class*='m-right-'] > .m-block,
+.m-container-inflatable section:target [class*='m-right-'] > pre,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target .m-container-inflate > .m-note,
+.m-container-inflatable section:target .m-container-inflate > .m-frame,
+.m-container-inflatable section:target .m-container-inflate > .m-block,
+.m-container-inflatable section:target .m-container-inflate > pre,
+.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure > pre:first-child {
   margin-left: -1.0rem;
   border-left-style: solid;
   border-left-width: 0.25rem;
@@ -2050,50 +2144,223 @@ article:last-child, article section:last-child { margin-bottom: 0; }
 .m-container-inflatable section:target > figure.m-code-figure::before,
 .m-container-inflatable section:target > figure.m-console-figure::before,
 .m-container-inflatable section:target section > figure.m-code-figure::before,
-.m-container-inflatable section:target section > figure.m-console-figure::before {
+.m-container-inflatable section:target section > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure::before,
+.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure::before {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-width: 0.25rem;
 }
-.m-container-inflatable section:target > pre,
-.m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
-.m-container-inflatable section:target > figure.m-console-figure > pre:first-child,
-.m-container-inflatable section:target section > pre,
-.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child,
-.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child {
-  border-color: #405363;
+@media screen and (min-width: 576px) {
+  .m-container-inflatable section:target .m-center-s > .m-note,
+  .m-container-inflatable section:target .m-center-s > pre,
+  .m-container-inflatable section:target .m-center-s > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-center-s > figure.m-console-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-s > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-s > figure.m-console-figure > pre:first-child {
+    border-left-width: 0;
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-s > .m-block,
+  .m-container-inflatable section:target .m-right-s > .m-block {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+  }
+  .m-container-inflatable section:target .m-center-s > .m-frame,
+  .m-container-inflatable section:target .m-right-s > .m-frame {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+    padding-left: 0.875rem;
+  }
+  .m-container-inflatable section:target .m-right-s > .m-block,
+  .m-container-inflatable section:target .m-right-s > .m-frame {
+    margin-left: 0;
+  }
+  .m-container-inflatable section:target .m-right-s > .m-note,
+  .m-container-inflatable section:target .m-right-s > pre {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    margin-left: 0;
+    border-left-width: 0;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+  }
+}
+@media screen and (min-width: 768px) {
+  .m-container-inflatable section:target .m-center-m > .m-note,
+  .m-container-inflatable section:target .m-center-m > pre,
+  .m-container-inflatable section:target .m-center-m > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-center-m > figure.m-console-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-m > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-m > figure.m-console-figure > pre:first-child {
+    border-left-width: 0;
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-m > .m-block,
+  .m-container-inflatable section:target .m-right-m > .m-block {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+  }
+  .m-container-inflatable section:target .m-center-m > .m-frame,
+  .m-container-inflatable section:target .m-right-m > .m-frame {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+    padding-left: 0.875rem;
+  }
+  .m-container-inflatable section:target .m-right-m > .m-block,
+  .m-container-inflatable section:target .m-right-m > .m-frame {
+    margin-left: 0;
+  }
+  .m-container-inflatable section:target .m-right-m > .m-note,
+  .m-container-inflatable section:target .m-right-m > pre {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    margin-left: 0;
+    border-left-width: 0;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+  }
+}
+@media screen and (min-width: 992px) {
+  .m-container-inflatable section:target .m-center-l > .m-note,
+  .m-container-inflatable section:target .m-center-l > pre,
+  .m-container-inflatable section:target .m-center-l > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-center-l > figure.m-console-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-l > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-l > figure.m-console-figure > pre:first-child {
+    border-left-width: 0;
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-l > .m-block,
+  .m-container-inflatable section:target .m-right-l > .m-block {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+  }
+  .m-container-inflatable section:target .m-center-l > .m-frame,
+  .m-container-inflatable section:target .m-right-l > .m-frame {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+    padding-left: 0.875rem;
+  }
+  .m-container-inflatable section:target .m-right-l > .m-block,
+  .m-container-inflatable section:target .m-right-l > .m-frame {
+    margin-left: 0;
+  }
+  .m-container-inflatable section:target .m-right-l > .m-note,
+  .m-container-inflatable section:target .m-right-l > pre {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    margin-left: 0;
+    border-left-width: 0;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+  }
 }
 .m-container-inflatable section:target > figure.m-code-figure::before,
 .m-container-inflatable section:target > figure.m-console-figure::before,
-.m-container-inflatable section:target > .m-note.m-default,
 .m-container-inflatable section:target section > figure.m-code-figure::before,
 .m-container-inflatable section:target section > figure.m-console-figure::before,
-.m-container-inflatable section:target section > .m-note.m-default {
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target .m-container-inflatable > figure.m-code-figure::before,
+.m-container-inflatable section:target .m-container-inflatable > figure.m-console-figure::before {
   border-left-color: #405363;
 }
-.m-container-inflatable section:target > .m-note.m-primary,
-.m-container-inflatable section:target section > .m-note.m-primary {
-  border-left-color: #a5c9ea;
+@media screen and (min-width: 576px) {
+  .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before {
+    border-color: #282e36;
+  }
+  .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before {
+    border-color: #000000;
+  }
+}
+@media screen and (min-width: 768px) {
+  .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before {
+    border-color: #282e36;
+  }
+  .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before {
+    border-color: #000000;
+  }
+}
+@media screen and (min-width: 992px) {
+  .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before {
+    border-color: #282e36;
+  }
+  .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before {
+    border-color: #000000;
+  }
+}
+.m-container-inflatable section:target pre,
+.m-container-inflatable section:target figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target figure.m-console-figure > pre:first-child {
+  border-color: #405363;
+}
+.m-container-inflatable section:target .m-note.m-default {
+  border-color: #405363;
 }
-.m-container-inflatable section:target > .m-note.m-success,
-.m-container-inflatable section:target section > .m-note.m-success {
-  border-left-color: #3bd267;
+.m-container-inflatable section:target .m-note.m-primary  {
+  border-color: #a5c9ea;
 }
-.m-container-inflatable section:target > .m-note.m-warning,
-.m-container-inflatable section:target section > .m-note.m-warning {
-  border-left-color: #c7cf2f;
+.m-container-inflatable section:target .m-note.m-success {
+  border-color: #3bd267;
 }
-.m-container-inflatable section:target > .m-note.m-danger,
-.m-container-inflatable section:target section > .m-note.m-danger {
-  border-left-color: #cd3431;
+.m-container-inflatable section:target .m-note.m-warning {
+  border-color: #c7cf2f;
 }
-.m-container-inflatable section:target > .m-note.m-info,
-.m-container-inflatable section:target section > .m-note.m-info {
-  border-left-color: #2f83cc;
+.m-container-inflatable section:target .m-note.m-danger {
+  border-color: #cd3431;
 }
-.m-container-inflatable section:target > .m-note.m-dim,
-.m-container-inflatable section:target section > .m-note.m-dim {
-  border-left-color: #747474;
+.m-container-inflatable section:target .m-note.m-info {
+  border-color: #2f83cc;
+}
+.m-container-inflatable section:target .m-note.m-dim {
+  border-color: #747474;
 }
 
 .m-code .hll { background-color: #34424d }

diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index 685f52f850bea3ea87de909e8491a3854bf82df7..2d9d96526c14f7bb55a594d01cdf43eaa7bb1ac6 100644 (file)
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -41,7 +41,7 @@ body { margin: 0; }
   clear: both;
   display: table;
 }
-[class*='m-col-'] {
+.m-row > [class*='m-col-'] {
   position: relative;
   padding: 1rem;
 }
@@ -53,17 +53,11 @@ body { margin: 0; }
 [class*='m-show-'] {
   display: none;
 }
-[class*='m-col-'].m-left-s, [class*='m-col-'].m-right-s, [class*='m-col-'].m-center-s,
-[class*='m-col-'].m-left-m, [class*='m-col-'].m-right-m, [class*='m-col-'].m-center-m,
-[class*='m-col-'].m-left-l, [class*='m-col-'].m-right-l, [class*='m-col-'].m-center-l {
-  margin-left: -1rem;
-  margin-right: -1rem;
+.m-container-inflate, :not(.m-row) > [class*='m-col-'] {
+  margin-bottom: 1rem;
 }
-.m-row > [class*='m-col-'].m-left-s, .m-row > [class*='m-col-'].m-right-s, .m-row > [class*='m-col-'].m-center-s,
-.m-row > [class*='m-col-'].m-left-m, .m-row > [class*='m-col-'].m-right-m, .m-row > [class*='m-col-'].m-center-m,
-.m-row > [class*='m-col-'].m-left-l, .m-row > [class*='m-col-'].m-right-l  .m-row > [class*='m-col-'].m-center-l {
-  margin-left: 0;
-  margin-right: 0;
+.m-container-inflate:last-child, :not(.m-row) > [class*='m-col-']:last-child {
+  margin-bottom: 0;
 }
 .m-container.m-nopad, [class*='m-col-'].m-nopad,
 .m-container.m-nopadx, [class*='m-col-'].m-nopadx,
@@ -78,35 +72,22 @@ body { margin: 0; }
 [class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadt {
   padding-top: 0;
 }
-[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb {
+[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb,
+.m-container-inflate.m-nopadb {
   padding-bottom: 0;
 }
 [class*='m-col-t-'] { float: left; }
-[class*='m-col-t-'].m-left-t, [class*='m-col-t-'].m-right-t {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
 .m-left-t {
+  padding-right: 1rem;
   float: left;
 }
 .m-right-t, [class*='m-col-t-'].m-right-t {
+  padding-left: 1rem;
   float: right;
 }
 .m-center-t, [class*='m-col-t-'].m-center-t {
   float: none;
 }
-[class*='m-col-t-'].m-left-t {
-  margin-left: -1rem;
-}
-[class*='m-col-t-'].m-right-t {
-  margin-right: -1rem;
-}
-.m-row > [class*='m-col-t-'].m-left-t {
-  margin-left: 0;
-}
-.m-row > [class*='m-col-t-'].m-right-t {
-  margin-right: 0;
-}
 .m-center-t, [class*='m-col-t-'].m-center-t {
   margin-left: auto;
   margin-right: auto;
@@ -148,35 +129,25 @@ body { margin: 0; }
 .m-pull-t-11 { right: calc(11 * 100% / 12); }
 @media screen and (min-width: 576px) {
   .m-container { width: 560px; }
-  .m-container-inflatable .m-col-s-10 .m-container-inflate {
+  .m-container-inflatable .m-col-s-10 .m-container-inflate:not([class*='m-left-']):not([class*='m-right-']) {
     margin-left: -10%;
     margin-right: -10%;
   }
-  [class*='m-col-s-'] { float: left; }
-  [class*='m-col-s-'].m-left-s, [class*='m-col-s-'].m-right-s {
-    padding-top: 0px;
-    padding-bottom: 0px;
+  .m-container-inflatable .m-col-s-10 .m-container-inflate.m-left-s {
+    margin-left: -10%;
+  }
+  .m-container-inflatable .m-col-s-10 .m-container-inflate.m-right-s {
+    margin-right: -10%;
   }
+  [class*='m-col-s-'] { float: left; }
   .m-left-s {
+    padding-right: 1rem;
     float: left;
   }
   .m-right-s, [class*='m-col-s-'].m-right-s {
+    padding-left: 1rem;
     float: right;
   }
-  [class*='m-col-s-'].m-left-s {
-    margin-left: -1rem;
-    margin-right: 0;
-  }
-  [class*='m-col-s-'].m-right-s {
-    margin-left: 0;
-    margin-right: -1rem;
-  }
-  .m-row > [class*='m-col-s-'].m-left-s {
-    margin-left: 0;
-  }
-  .m-row > [class*='m-col-s-'].m-right-s {
-    margin-right: 0;
-  }
   .m-center-s, [class*='m-col-s-'].m-center-s {
     margin-left: auto;
     margin-right: auto;
@@ -228,35 +199,25 @@ body { margin: 0; }
 }
 @media screen and (min-width: 768px) {
   .m-container { width: 750px; }
-  .m-container-inflatable .m-col-m-10 .m-container-inflate {
+  .m-container-inflatable .m-col-m-10 .m-container-inflate:not([class*='m-left-']):not([class*='m-right-']) {
     margin-left: -10%;
     margin-right: -10%;
   }
-  [class*='m-col-m-'] { float: left; }
-  [class*='m-col-m-'].m-left-m, [class*='m-col-m-'].m-right-m {
-    padding-top: 0px;
-    padding-bottom: 0px;
+  .m-container-inflatable .m-col-m-10 .m-container-inflate.m-left-m {
+    margin-left: -10%;
   }
+  .m-container-inflatable .m-col-m-10 .m-container-inflate.m-right-m {
+    margin-right: -10%;
+  }
+  [class*='m-col-m-'] { float: left; }
   .m-left-m {
+    padding-right: 1rem;
     float: left;
   }
   .m-right-m, [class*='m-col-m-'].m-right-m {
+    padding-left: 1rem;
     float: right;
   }
-  [class*='m-col-m-'].m-left-m {
-    margin-left: -1rem;
-    margin-right: 0;
-  }
-  [class*='m-col-m-'].m-right-m {
-    margin-left: 0;
-    margin-right: -1rem;
-  }
-  .m-row > [class*='m-col-m-'].m-left-m {
-    margin-left: 0;
-  }
-  .m-row > [class*='m-col-m-'].m-right-m {
-    margin-right: 0;
-  }
   .m-center-m, [class*='m-col-m-'].m-center-m {
     margin-left: auto;
     margin-right: auto;
@@ -308,35 +269,25 @@ body { margin: 0; }
 }
 @media screen and (min-width: 992px) {
   .m-container { width: 960px; }
-  .m-container-inflatable .m-col-l-10 .m-container-inflate {
+  .m-container-inflatable .m-col-l-10 .m-container-inflate:not([class*='m-left-']):not([class*='m-right-']) {
     margin-left: -10%;
     margin-right: -10%;
   }
-  [class*='m-col-l-'] { float: left; }
-  [class*='m-col-l-'].m-left-l, [class*='m-col-l-'].m-right-l {
-    padding-top: 0px;
-    padding-bottom: 0px;
+  .m-container-inflatable .m-col-l-10 .m-container-inflate.m-left-l {
+    margin-left: -10%;
   }
+  .m-container-inflatable .m-col-l-10 .m-container-inflate.m-right-l {
+    margin-right: -10%;
+  }
+  [class*='m-col-l-'] { float: left; }
   .m-left-l {
+    padding-right: 1rem;
     float: left;
   }
   .m-right-l, [class*='m-col-l-'].m-right-l {
+    padding-left: 1rem;
     float: right;
   }
-  [class*='m-col-l-'].m-left-l {
-    margin-left: -1rem;
-    margin-right: 0;
-  }
-  [class*='m-col-l-'].m-right-l {
-    margin-left: 0;
-    margin-right: -1rem;
-  }
-  .m-row > [class*='m-col-l-'].m-left-l {
-    margin-left: 0;
-  }
-  .m-row > [class*='m-col-l-'].m-right-l {
-    margin-right: 0;
-  }
   .m-center-l, [class*='m-col-l-'].m-center-l {
     margin-left: auto;
     margin-right: auto;
@@ -1234,11 +1185,70 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
 .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
 .m-container-inflatable > .m-row > [class*='m-col-'] section > pre,
 .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-code-figure,
-.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure {
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure,
+.m-container-inflatable [class*='m-center-'] > .m-note,
+.m-container-inflatable [class*='m-center-'] > .m-frame,
+.m-container-inflatable [class*='m-center-'] > .m-block,
+.m-container-inflatable [class*='m-center-'] > .m-imagegrid,
+.m-container-inflatable [class*='m-center-'] > pre,
+.m-container-inflatable [class*='m-center-'] > .m-code-figure,
+.m-container-inflatable [class*='m-center-'] > .m-console-figure,
+.m-container-inflatable [class*='m-left-'] > .m-note,
+.m-container-inflatable [class*='m-left-'] > .m-frame,
+.m-container-inflatable [class*='m-left-'] > .m-block,
+.m-container-inflatable [class*='m-left-'] > .m-imagegrid,
+.m-container-inflatable [class*='m-left-'] > pre,
+.m-container-inflatable [class*='m-left-'] > .m-code-figure,
+.m-container-inflatable [class*='m-left-'] > .m-console-figure,
+.m-container-inflatable [class*='m-right-'] > .m-note,
+.m-container-inflatable [class*='m-right-'] > .m-frame,
+.m-container-inflatable [class*='m-right-'] > .m-block,
+.m-container-inflatable [class*='m-right-'] > .m-imagegrid,
+.m-container-inflatable [class*='m-right-'] > pre,
+.m-container-inflatable [class*='m-right-'] > .m-code-figure,
+.m-container-inflatable [class*='m-right-'] > .m-console-figure,
+.m-container-inflatable .m-container-inflate > .m-note,
+.m-container-inflatable .m-container-inflate > .m-frame,
+.m-container-inflatable .m-container-inflate > .m-block,
+.m-container-inflatable .m-container-inflate > .m-imagegrid,
+.m-container-inflatable .m-container-inflate > pre,
+.m-container-inflatable .m-container-inflate > .m-code-figure,
+.m-container-inflatable .m-container-inflate > .m-console-figure
+{
   margin-left: -1rem;
   margin-right: -1rem;
 }
 @media screen and (min-width: 576px) {
+  .m-container-inflatable .m-center-s > .m-note,
+  .m-container-inflatable .m-center-s > .m-frame,
+  .m-container-inflatable .m-center-s > .m-block,
+  .m-container-inflatable .m-center-s > .m-imagegrid,
+  .m-container-inflatable .m-center-s > pre,
+  .m-container-inflatable .m-center-s > .m-code-figure,
+  .m-container-inflatable .m-center-s > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+  .m-container-inflatable .m-left-s > .m-note,
+  .m-container-inflatable .m-left-s > .m-frame,
+  .m-container-inflatable .m-left-s > .m-block,
+  .m-container-inflatable .m-left-s > .m-imagegrid,
+  .m-container-inflatable .m-left-s > pre,
+  .m-container-inflatable .m-left-s > .m-code-figure,
+  .m-container-inflatable .m-left-s > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: 0;
+  }
+  .m-container-inflatable .m-right-s > .m-note,
+  .m-container-inflatable .m-right-s > .m-frame,
+  .m-container-inflatable .m-right-s > .m-block,
+  .m-container-inflatable .m-right-s > .m-imagegrid,
+  .m-container-inflatable .m-right-s > pre,
+  .m-container-inflatable .m-right-s > .m-code-figure,
+  .m-container-inflatable .m-right-s > .m-console-figure {
+    margin-left: 0;
+    margin-right: -1rem;
+  }
   .m-container-inflatable > .m-row > .m-col-s-10 > .m-imagegrid.m-container-inflate,
   .m-container-inflatable > .m-row > .m-col-s-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
@@ -1246,6 +1256,36 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
   }
 }
 @media screen and (min-width: 768px) {
+  .m-container-inflatable .m-center-m > .m-note,
+  .m-container-inflatable .m-center-m > .m-frame,
+  .m-container-inflatable .m-center-m > .m-block,
+  .m-container-inflatable .m-center-m > .m-imagegrid,
+  .m-container-inflatable .m-center-m > pre,
+  .m-container-inflatable .m-center-m > .m-code-figure,
+  .m-container-inflatable .m-center-m > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+  .m-container-inflatable .m-left-m > .m-note,
+  .m-container-inflatable .m-left-m > .m-frame,
+  .m-container-inflatable .m-left-m > .m-block,
+  .m-container-inflatable .m-left-m > .m-imagegrid,
+  .m-container-inflatable .m-left-m > pre,
+  .m-container-inflatable .m-left-m > .m-code-figure,
+  .m-container-inflatable .m-left-m > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: 0;
+  }
+  .m-container-inflatable .m-right-m > .m-note,
+  .m-container-inflatable .m-right-m > .m-frame,
+  .m-container-inflatable .m-right-m > .m-block,
+  .m-container-inflatable .m-right-m > .m-imagegrid,
+  .m-container-inflatable .m-right-m > pre,
+  .m-container-inflatable .m-right-m > .m-code-figure,
+  .m-container-inflatable .m-right-m > .m-console-figure {
+    margin-left: 0;
+    margin-right: -1rem;
+  }
   .m-container-inflatable > .m-row > .m-col-m-10 > .m-imagegrid.m-container-inflate,
   .m-container-inflatable > .m-row > .m-col-m-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
@@ -1253,6 +1293,36 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
   }
 }
 @media screen and (min-width: 992px) {
+  .m-container-inflatable .m-center-l > .m-note,
+  .m-container-inflatable .m-center-l > .m-frame,
+  .m-container-inflatable .m-center-l > .m-block,
+  .m-container-inflatable .m-center-l > .m-imagegrid,
+  .m-container-inflatable .m-center-l > pre,
+  .m-container-inflatable .m-center-l > .m-code-figure,
+  .m-container-inflatable .m-center-l > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+  .m-container-inflatable .m-left-l > .m-note,
+  .m-container-inflatable .m-left-l > .m-frame,
+  .m-container-inflatable .m-left-l > .m-block,
+  .m-container-inflatable .m-left-l > .m-imagegrid,
+  .m-container-inflatable .m-left-l > pre,
+  .m-container-inflatable .m-left-l > .m-code-figure,
+  .m-container-inflatable .m-left-l > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: 0;
+  }
+  .m-container-inflatable .m-right-l > .m-note,
+  .m-container-inflatable .m-right-l > .m-frame,
+  .m-container-inflatable .m-right-l > .m-block,
+  .m-container-inflatable .m-right-l > .m-imagegrid,
+  .m-container-inflatable .m-right-l > pre,
+  .m-container-inflatable .m-right-l > .m-code-figure,
+  .m-container-inflatable .m-right-l > .m-console-figure {
+    margin-left: 0;
+    margin-right: -1rem;
+  }
   .m-container-inflatable > .m-row > .m-col-l-10 > .m-imagegrid.m-container-inflate,
   .m-container-inflatable > .m-row > .m-col-l-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
@@ -1701,7 +1771,7 @@ body > header > nav ol {
 body > header > nav ol ol {
   padding-left: 1.5rem;
 }
-body > header > nav [class*='m-col-'] {
+body > header > nav .m-row > [class*='m-col-'] {
   padding-top: 0;
   padding-bottom: 0;
 }
@@ -2039,7 +2109,31 @@ article:last-child, article section:last-child { margin-bottom: 0; }
 .m-container-inflatable section:target section > .m-block,
 .m-container-inflatable section:target section > pre,
 .m-container-inflatable section:target section > figure.m-code-figure > pre:first-child,
-.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child {
+.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-center-'] > .m-note,
+.m-container-inflatable section:target [class*='m-center-'] > .m-frame,
+.m-container-inflatable section:target [class*='m-center-'] > .m-block,
+.m-container-inflatable section:target [class*='m-center-'] > pre,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-left-'] > .m-note,
+.m-container-inflatable section:target [class*='m-left-'] > .m-frame,
+.m-container-inflatable section:target [class*='m-left-'] > .m-block,
+.m-container-inflatable section:target [class*='m-left-'] > pre,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-right-'] > .m-note,
+.m-container-inflatable section:target [class*='m-right-'] > .m-frame,
+.m-container-inflatable section:target [class*='m-right-'] > .m-block,
+.m-container-inflatable section:target [class*='m-right-'] > pre,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target .m-container-inflate > .m-note,
+.m-container-inflatable section:target .m-container-inflate > .m-frame,
+.m-container-inflatable section:target .m-container-inflate > .m-block,
+.m-container-inflatable section:target .m-container-inflate > pre,
+.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure > pre:first-child {
   margin-left: -1.0rem;
   border-left-style: solid;
   border-left-width: 0.25rem;
@@ -2050,50 +2144,223 @@ article:last-child, article section:last-child { margin-bottom: 0; }
 .m-container-inflatable section:target > figure.m-code-figure::before,
 .m-container-inflatable section:target > figure.m-console-figure::before,
 .m-container-inflatable section:target section > figure.m-code-figure::before,
-.m-container-inflatable section:target section > figure.m-console-figure::before {
+.m-container-inflatable section:target section > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure::before,
+.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure::before {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-width: 0.25rem;
 }
-.m-container-inflatable section:target > pre,
-.m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
-.m-container-inflatable section:target > figure.m-console-figure > pre:first-child,
-.m-container-inflatable section:target section > pre,
-.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child,
-.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child {
-  border-color: #405363;
+@media screen and (min-width: 576px) {
+  .m-container-inflatable section:target .m-center-s > .m-note,
+  .m-container-inflatable section:target .m-center-s > pre,
+  .m-container-inflatable section:target .m-center-s > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-center-s > figure.m-console-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-s > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-s > figure.m-console-figure > pre:first-child {
+    border-left-width: 0;
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-s > .m-block,
+  .m-container-inflatable section:target .m-right-s > .m-block {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+  }
+  .m-container-inflatable section:target .m-center-s > .m-frame,
+  .m-container-inflatable section:target .m-right-s > .m-frame {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+    padding-left: 0.875rem;
+  }
+  .m-container-inflatable section:target .m-right-s > .m-block,
+  .m-container-inflatable section:target .m-right-s > .m-frame {
+    margin-left: 0;
+  }
+  .m-container-inflatable section:target .m-right-s > .m-note,
+  .m-container-inflatable section:target .m-right-s > pre {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    margin-left: 0;
+    border-left-width: 0;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+  }
+}
+@media screen and (min-width: 768px) {
+  .m-container-inflatable section:target .m-center-m > .m-note,
+  .m-container-inflatable section:target .m-center-m > pre,
+  .m-container-inflatable section:target .m-center-m > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-center-m > figure.m-console-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-m > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-m > figure.m-console-figure > pre:first-child {
+    border-left-width: 0;
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-m > .m-block,
+  .m-container-inflatable section:target .m-right-m > .m-block {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+  }
+  .m-container-inflatable section:target .m-center-m > .m-frame,
+  .m-container-inflatable section:target .m-right-m > .m-frame {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+    padding-left: 0.875rem;
+  }
+  .m-container-inflatable section:target .m-right-m > .m-block,
+  .m-container-inflatable section:target .m-right-m > .m-frame {
+    margin-left: 0;
+  }
+  .m-container-inflatable section:target .m-right-m > .m-note,
+  .m-container-inflatable section:target .m-right-m > pre {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    margin-left: 0;
+    border-left-width: 0;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+  }
+}
+@media screen and (min-width: 992px) {
+  .m-container-inflatable section:target .m-center-l > .m-note,
+  .m-container-inflatable section:target .m-center-l > pre,
+  .m-container-inflatable section:target .m-center-l > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-center-l > figure.m-console-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-l > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-l > figure.m-console-figure > pre:first-child {
+    border-left-width: 0;
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-l > .m-block,
+  .m-container-inflatable section:target .m-right-l > .m-block {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+  }
+  .m-container-inflatable section:target .m-center-l > .m-frame,
+  .m-container-inflatable section:target .m-right-l > .m-frame {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+    padding-left: 0.875rem;
+  }
+  .m-container-inflatable section:target .m-right-l > .m-block,
+  .m-container-inflatable section:target .m-right-l > .m-frame {
+    margin-left: 0;
+  }
+  .m-container-inflatable section:target .m-right-l > .m-note,
+  .m-container-inflatable section:target .m-right-l > pre {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    margin-left: 0;
+    border-left-width: 0;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+  }
 }
 .m-container-inflatable section:target > figure.m-code-figure::before,
 .m-container-inflatable section:target > figure.m-console-figure::before,
-.m-container-inflatable section:target > .m-note.m-default,
 .m-container-inflatable section:target section > figure.m-code-figure::before,
 .m-container-inflatable section:target section > figure.m-console-figure::before,
-.m-container-inflatable section:target section > .m-note.m-default {
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target .m-container-inflatable > figure.m-code-figure::before,
+.m-container-inflatable section:target .m-container-inflatable > figure.m-console-figure::before {
   border-left-color: #405363;
 }
-.m-container-inflatable section:target > .m-note.m-primary,
-.m-container-inflatable section:target section > .m-note.m-primary {
-  border-left-color: #a5c9ea;
+@media screen and (min-width: 576px) {
+  .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before {
+    border-color: #282e36;
+  }
+  .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before {
+    border-color: #000000;
+  }
+}
+@media screen and (min-width: 768px) {
+  .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before {
+    border-color: #282e36;
+  }
+  .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before {
+    border-color: #000000;
+  }
+}
+@media screen and (min-width: 992px) {
+  .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before {
+    border-color: #282e36;
+  }
+  .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before {
+    border-color: #000000;
+  }
+}
+.m-container-inflatable section:target pre,
+.m-container-inflatable section:target figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target figure.m-console-figure > pre:first-child {
+  border-color: #405363;
+}
+.m-container-inflatable section:target .m-note.m-default {
+  border-color: #405363;
 }
-.m-container-inflatable section:target > .m-note.m-success,
-.m-container-inflatable section:target section > .m-note.m-success {
-  border-left-color: #3bd267;
+.m-container-inflatable section:target .m-note.m-primary  {
+  border-color: #a5c9ea;
 }
-.m-container-inflatable section:target > .m-note.m-warning,
-.m-container-inflatable section:target section > .m-note.m-warning {
-  border-left-color: #c7cf2f;
+.m-container-inflatable section:target .m-note.m-success {
+  border-color: #3bd267;
 }
-.m-container-inflatable section:target > .m-note.m-danger,
-.m-container-inflatable section:target section > .m-note.m-danger {
-  border-left-color: #cd3431;
+.m-container-inflatable section:target .m-note.m-warning {
+  border-color: #c7cf2f;
 }
-.m-container-inflatable section:target > .m-note.m-info,
-.m-container-inflatable section:target section > .m-note.m-info {
-  border-left-color: #2f83cc;
+.m-container-inflatable section:target .m-note.m-danger {
+  border-color: #cd3431;
 }
-.m-container-inflatable section:target > .m-note.m-dim,
-.m-container-inflatable section:target section > .m-note.m-dim {
-  border-left-color: #747474;
+.m-container-inflatable section:target .m-note.m-info {
+  border-color: #2f83cc;
+}
+.m-container-inflatable section:target .m-note.m-dim {
+  border-color: #747474;
 }
 
 .m-code .hll { background-color: #34424d }

diff --git a/css/m-grid.css b/css/m-grid.css
index 8c20e49fc7f45f0c178167a6c2ed4d248f13d153..df2c429410d985c5721e3e311157b67702e94de5 100644 (file)
--- a/css/m-grid.css
+++ b/css/m-grid.css
@@ -27,7 +27,8 @@
 body { margin: 0; }
 
 /* 12-column layout. Inspired by Bootstrap and
-   https://www.w3schools.com/css/css_rwd_grid.asp */
+   https://www.w3schools.com/css/css_rwd_grid.asp. The container is padded from
+   sides, the row inside removes the padding and columns add it back. */
 .m-container {
   width: 100%;
   margin: auto;
@@ -43,7 +44,7 @@ body { margin: 0; }
   clear: both;
   display: table;
 }
-[class*='m-col-'] {
+.m-row > [class*='m-col-'] {
   position: relative;
   padding: 1rem;
 }
@@ -55,19 +56,18 @@ body { margin: 0; }
 [class*='m-show-'] {
   display: none;
 }
-[class*='m-col-'].m-left-s, [class*='m-col-'].m-right-s, [class*='m-col-'].m-center-s,
-[class*='m-col-'].m-left-m, [class*='m-col-'].m-right-m, [class*='m-col-'].m-center-m,
-[class*='m-col-'].m-left-l, [class*='m-col-'].m-right-l, [class*='m-col-'].m-center-l {
-  margin-left: -1rem;
-  margin-right: -1rem;
+
+/* Margin for inflated / floating columns behaves as "padding-after" by default
+   -- there's only padding on the bottom but not when the column is last. */
+.m-container-inflate, :not(.m-row) > [class*='m-col-'] {
+  margin-bottom: 1rem;
 }
-.m-row > [class*='m-col-'].m-left-s, .m-row > [class*='m-col-'].m-right-s, .m-row > [class*='m-col-'].m-center-s,
-.m-row > [class*='m-col-'].m-left-m, .m-row > [class*='m-col-'].m-right-m, .m-row > [class*='m-col-'].m-center-m,
-.m-row > [class*='m-col-'].m-left-l, .m-row > [class*='m-col-'].m-right-l  .m-row > [class*='m-col-'].m-center-l {
-  margin-left: 0;
-  margin-right: 0;
+.m-container-inflate:last-child, :not(.m-row) > [class*='m-col-']:last-child {
+  margin-bottom: 0;
 }
 
+/* Padding overrides for container and columns. Works for both columns inside
+   rows and floating columns. */
 .m-container.m-nopad, [class*='m-col-'].m-nopad,
 .m-container.m-nopadx, [class*='m-col-'].m-nopadx,
 .m-container.m-nopadl, [class*='m-col-'].m-nopadl {
@@ -81,39 +81,25 @@ body { margin: 0; }
 [class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadt {
   padding-top: 0;
 }
-[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb {
+[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb,
+.m-container-inflate.m-nopadb {
   padding-bottom: 0;
 }
 
 /* 12-column layout -- T (portrait phones) */
 [class*='m-col-t-'] { float: left; }
 
-[class*='m-col-t-'].m-left-t, [class*='m-col-t-'].m-right-t {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
 .m-left-t {
+  padding-right: 1rem;
   float: left;
 }
 .m-right-t, [class*='m-col-t-'].m-right-t {
+  padding-left: 1rem;
   float: right;
 }
 .m-center-t, [class*='m-col-t-'].m-center-t {
   float: none;
 }
-[class*='m-col-t-'].m-left-t {
-  margin-left: -1rem;
-}
-[class*='m-col-t-'].m-right-t {
-  margin-right: -1rem;
-}
-.m-row > [class*='m-col-t-'].m-left-t {
-  margin-left: 0;
-}
-.m-row > [class*='m-col-t-'].m-right-t {
-  margin-right: 0;
-}
 .m-center-t, [class*='m-col-t-'].m-center-t {
   margin-left: auto;
   margin-right: auto;
@@ -161,38 +147,27 @@ body { margin: 0; }
 @media screen and (min-width: 576px) {
   .m-container { width: 560px; }
 
-  .m-container-inflatable .m-col-s-10 .m-container-inflate {
+  .m-container-inflatable .m-col-s-10 .m-container-inflate:not([class*='m-left-']):not([class*='m-right-']) {
+    margin-left: -10%;
+    margin-right: -10%;
+  }
+  .m-container-inflatable .m-col-s-10 .m-container-inflate.m-left-s {
     margin-left: -10%;
+  }
+  .m-container-inflatable .m-col-s-10 .m-container-inflate.m-right-s {
     margin-right: -10%;
   }
 
   [class*='m-col-s-'] { float: left; }
 
-  [class*='m-col-s-'].m-left-s, [class*='m-col-s-'].m-right-s {
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-
   .m-left-s {
+    padding-right: 1rem;
     float: left;
   }
   .m-right-s, [class*='m-col-s-'].m-right-s {
+    padding-left: 1rem;
     float: right;
   }
-  [class*='m-col-s-'].m-left-s {
-    margin-left: -1rem;
-    margin-right: 0;
-  }
-  [class*='m-col-s-'].m-right-s {
-    margin-left: 0;
-    margin-right: -1rem;
-  }
-  .m-row > [class*='m-col-s-'].m-left-s {
-    margin-left: 0;
-  }
-  .m-row > [class*='m-col-s-'].m-right-s {
-    margin-right: 0;
-  }
   .m-center-s, [class*='m-col-s-'].m-center-s {
     margin-left: auto;
     margin-right: auto;
@@ -253,38 +228,27 @@ body { margin: 0; }
 @media screen and (min-width: 768px) {
   .m-container { width: 750px; }
 
-  .m-container-inflatable .m-col-m-10 .m-container-inflate {
+  .m-container-inflatable .m-col-m-10 .m-container-inflate:not([class*='m-left-']):not([class*='m-right-']) {
+    margin-left: -10%;
+    margin-right: -10%;
+  }
+  .m-container-inflatable .m-col-m-10 .m-container-inflate.m-left-m {
     margin-left: -10%;
+  }
+  .m-container-inflatable .m-col-m-10 .m-container-inflate.m-right-m {
     margin-right: -10%;
   }
 
   [class*='m-col-m-'] { float: left; }
 
-  [class*='m-col-m-'].m-left-m, [class*='m-col-m-'].m-right-m {
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-
   .m-left-m {
+    padding-right: 1rem;
     float: left;
   }
   .m-right-m, [class*='m-col-m-'].m-right-m {
+    padding-left: 1rem;
     float: right;
   }
-  [class*='m-col-m-'].m-left-m {
-    margin-left: -1rem;
-    margin-right: 0;
-  }
-  [class*='m-col-m-'].m-right-m {
-    margin-left: 0;
-    margin-right: -1rem;
-  }
-  .m-row > [class*='m-col-m-'].m-left-m {
-    margin-left: 0;
-  }
-  .m-row > [class*='m-col-m-'].m-right-m {
-    margin-right: 0;
-  }
   .m-center-m, [class*='m-col-m-'].m-center-m {
     margin-left: auto;
     margin-right: auto;
@@ -345,38 +309,27 @@ body { margin: 0; }
 @media screen and (min-width: 992px) {
   .m-container { width: 960px; }
 
-  .m-container-inflatable .m-col-l-10 .m-container-inflate {
+  .m-container-inflatable .m-col-l-10 .m-container-inflate:not([class*='m-left-']):not([class*='m-right-']) {
     margin-left: -10%;
     margin-right: -10%;
   }
+  .m-container-inflatable .m-col-l-10 .m-container-inflate.m-left-l {
+    margin-left: -10%;
+  }
+  .m-container-inflatable .m-col-l-10 .m-container-inflate.m-right-l {
+    margin-right: -10%;
+  }
 
   [class*='m-col-l-'] { float: left; }
 
-  [class*='m-col-l-'].m-left-l, [class*='m-col-l-'].m-right-l {
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-
   .m-left-l {
+    padding-right: 1rem;
     float: left;
   }
   .m-right-l, [class*='m-col-l-'].m-right-l {
+    padding-left: 1rem;
     float: right;
   }
-  [class*='m-col-l-'].m-left-l {
-    margin-left: -1rem;
-    margin-right: 0;
-  }
-  [class*='m-col-l-'].m-right-l {
-    margin-left: 0;
-    margin-right: -1rem;
-  }
-  .m-row > [class*='m-col-l-'].m-left-l {
-    margin-left: 0;
-  }
-  .m-row > [class*='m-col-l-'].m-right-l {
-    margin-right: 0;
-  }
   .m-center-l, [class*='m-col-l-'].m-center-l {
     margin-left: auto;
     margin-right: auto;

diff --git a/css/m-layout.css b/css/m-layout.css
index 9d10f769f4d8a58574b5da72ef42a023af69bab9..f728341a2f4f1e0c82d3576d57e7c5abf3b999ba 100644 (file)
--- a/css/m-layout.css
+++ b/css/m-layout.css
@@ -120,7 +120,7 @@ body > header > nav ol {
 body > header > nav ol ol {
   padding-left: 1.5rem;
 }
-body > header > nav [class*='m-col-'] {
+body > header > nav .m-row > [class*='m-col-'] {
   padding-top: 0;
   padding-bottom: 0;
 }
@@ -479,7 +479,9 @@ article section:target figure.m-code-figure, article section:target figure.m-con
 article, article > header, article section { margin-bottom: 1rem; }
 article:last-child, article section:last-child { margin-bottom: 0; }
 
-/* Active sections in inflatable content affect left border of some components */
+/* Active sections in inflatable content affect left border of some components
+   --- restrict to components directly in active section, its subsections and
+   floating / inflatable content inside. */
 .m-container-inflatable section:target > .m-note,
 .m-container-inflatable section:target > .m-frame,
 .m-container-inflatable section:target > .m-block,
@@ -491,7 +493,31 @@ article:last-child, article section:last-child { margin-bottom: 0; }
 .m-container-inflatable section:target section > .m-block,
 .m-container-inflatable section:target section > pre,
 .m-container-inflatable section:target section > figure.m-code-figure > pre:first-child,
-.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child {
+.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-center-'] > .m-note,
+.m-container-inflatable section:target [class*='m-center-'] > .m-frame,
+.m-container-inflatable section:target [class*='m-center-'] > .m-block,
+.m-container-inflatable section:target [class*='m-center-'] > pre,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-left-'] > .m-note,
+.m-container-inflatable section:target [class*='m-left-'] > .m-frame,
+.m-container-inflatable section:target [class*='m-left-'] > .m-block,
+.m-container-inflatable section:target [class*='m-left-'] > pre,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-right-'] > .m-note,
+.m-container-inflatable section:target [class*='m-right-'] > .m-frame,
+.m-container-inflatable section:target [class*='m-right-'] > .m-block,
+.m-container-inflatable section:target [class*='m-right-'] > pre,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target .m-container-inflate > .m-note,
+.m-container-inflatable section:target .m-container-inflate > .m-frame,
+.m-container-inflatable section:target .m-container-inflate > .m-block,
+.m-container-inflatable section:target .m-container-inflate > pre,
+.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure > pre:first-child {
   margin-left: -1.0rem;
   border-left-style: solid;
   border-left-width: 0.25rem;
@@ -502,50 +528,253 @@ article:last-child, article section:last-child { margin-bottom: 0; }
 .m-container-inflatable section:target > figure.m-code-figure::before,
 .m-container-inflatable section:target > figure.m-console-figure::before,
 .m-container-inflatable section:target section > figure.m-code-figure::before,
-.m-container-inflatable section:target section > figure.m-console-figure::before {
+.m-container-inflatable section:target section > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure::before,
+.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure::before {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-width: 0.25rem;
 }
-.m-container-inflatable section:target > pre,
-.m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
-.m-container-inflatable section:target > figure.m-console-figure > pre:first-child,
-.m-container-inflatable section:target section > pre,
-.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child,
-.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child {
-  border-color: var(--line-color);
+/* Center/left/right are tied to particular breakpoint so we need to
+   conditionally revert that. Left-aligned content is touching the left border
+   both in full size and aligned, so we revert it only for center and right. */
+@media screen and (min-width: 576px) {
+  .m-container-inflatable section:target .m-center-s > .m-note,
+  .m-container-inflatable section:target .m-center-s > pre,
+  .m-container-inflatable section:target .m-center-s > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-center-s > figure.m-console-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-s > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-s > figure.m-console-figure > pre:first-child {
+    /* Centers have -1rem margin on both sides *always* and pre inside figures
+       as well, don't revert that */
+    border-left-width: 0;
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-s > .m-block,
+  .m-container-inflatable section:target .m-right-s > .m-block {
+    /* Block keep the same left border width at all times */
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+  }
+  .m-container-inflatable section:target .m-center-s > .m-frame,
+  .m-container-inflatable section:target .m-right-s > .m-frame {
+    /* Frame has a thinner border */
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    border-left-width: 0.125rem;
+    padding-left: 0.875rem;
+  }
+  .m-container-inflatable section:target .m-right-s > .m-block,
+  .m-container-inflatable section:target .m-right-s > .m-frame {
+    margin-left: 0;
+  }
+  .m-container-inflatable section:target .m-right-s > .m-note,
+  .m-container-inflatable section:target .m-right-s > pre {
+    /* Note and pre has no border */
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    margin-left: 0;
+    border-left-width: 0;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before {
+    /* Reverting thin figure border, keeping -1rem margin */
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    border-left-width: 0.125rem;
+  }
+}
+@media screen and (min-width: 768px) {
+  .m-container-inflatable section:target .m-center-m > .m-note,
+  .m-container-inflatable section:target .m-center-m > pre,
+  .m-container-inflatable section:target .m-center-m > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-center-m > figure.m-console-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-m > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-m > figure.m-console-figure > pre:first-child {
+    /* Centers have -1rem margin on both sides *always* and pre inside figures
+       as well, don't revert that */
+    border-left-width: 0;
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-m > .m-block,
+  .m-container-inflatable section:target .m-right-m > .m-block {
+    /* Block keep the same left border width at all times */
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+  }
+  .m-container-inflatable section:target .m-center-m > .m-frame,
+  .m-container-inflatable section:target .m-right-m > .m-frame {
+    /* Frame has a thinner border */
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    border-left-width: 0.125rem;
+    padding-left: 0.875rem;
+  }
+  .m-container-inflatable section:target .m-right-m > .m-block,
+  .m-container-inflatable section:target .m-right-m > .m-frame {
+    margin-left: 0;
+  }
+  .m-container-inflatable section:target .m-right-m > .m-note,
+  .m-container-inflatable section:target .m-right-m > pre {
+    /* Note and pre has no border */
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    margin-left: 0;
+    border-left-width: 0;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before {
+    /* Reverting thin figure border, keeping -1rem margin */
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    border-left-width: 0.125rem;
+  }
+}
+@media screen and (min-width: 992px) {
+  .m-container-inflatable section:target .m-center-l > .m-note,
+  .m-container-inflatable section:target .m-center-l > pre,
+  .m-container-inflatable section:target .m-center-l > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-center-l > figure.m-console-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-l > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-l > figure.m-console-figure > pre:first-child {
+    /* Centers have -1rem margin on both sides *always* and pre inside figures
+       as well, don't revert that */
+    border-left-width: 0;
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-l > .m-block,
+  .m-container-inflatable section:target .m-right-l > .m-block {
+    /* Block keep the same left border width at all times */
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+  }
+  .m-container-inflatable section:target .m-center-l > .m-frame,
+  .m-container-inflatable section:target .m-right-l > .m-frame {
+    /* Frame has a thinner border */
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    border-left-width: 0.125rem;
+    padding-left: 0.875rem;
+  }
+  .m-container-inflatable section:target .m-right-l > .m-block,
+  .m-container-inflatable section:target .m-right-l > .m-frame {
+    margin-left: 0;
+  }
+  .m-container-inflatable section:target .m-right-l > .m-note,
+  .m-container-inflatable section:target .m-right-l > pre {
+    /* Note and pre has no border */
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    margin-left: 0;
+    border-left-width: 0;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before {
+    /* Reverting thin figure border, keeping -1rem margin */
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    border-left-width: 0.125rem;
+  }
 }
+
+/* These have different border width/color around so we need to restrict like
+   above. */
 .m-container-inflatable section:target > figure.m-code-figure::before,
 .m-container-inflatable section:target > figure.m-console-figure::before,
-.m-container-inflatable section:target > .m-note.m-default,
 .m-container-inflatable section:target section > figure.m-code-figure::before,
 .m-container-inflatable section:target section > figure.m-console-figure::before,
-.m-container-inflatable section:target section > .m-note.m-default {
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target .m-container-inflatable > figure.m-code-figure::before,
+.m-container-inflatable section:target .m-container-inflatable > figure.m-console-figure::before {
   border-left-color: var(--line-color);
 }
-.m-container-inflatable section:target > .m-note.m-primary,
-.m-container-inflatable section:target section > .m-note.m-primary {
-  border-left-color: var(--primary-color);
+/* Center/left/right are tied to particular breakpoint so we need to
+   conditionally revert that. Left-aligned content is touching the left border
+   both in full size and aligned, so we revert it only for center and right. */
+@media screen and (min-width: 576px) {
+  .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before {
+    border-color: var(--code-background-color);
+  }
+  .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before {
+    border-color: var(--console-background-color);
+  }
+}
+@media screen and (min-width: 768px) {
+  .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before {
+    border-color: var(--code-background-color);
+  }
+  .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before {
+    border-color: var(--console-background-color);
+  }
+}
+@media screen and (min-width: 992px) {
+  .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before {
+    border-color: var(--code-background-color);
+  }
+  .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before {
+    border-color: var(--console-background-color);
+  }
+}
+
+/* These don't have any border otherwise, so we don't need to restrict the
+   selectors or border sides like above. */
+.m-container-inflatable section:target pre,
+.m-container-inflatable section:target figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target figure.m-console-figure > pre:first-child {
+  border-color: var(--line-color);
+}
+.m-container-inflatable section:target .m-note.m-default {
+  border-color: var(--line-color);
+}
+.m-container-inflatable section:target .m-note.m-primary  {
+  border-color: var(--primary-color);
 }
-.m-container-inflatable section:target > .m-note.m-success,
-.m-container-inflatable section:target section > .m-note.m-success {
-  border-left-color: var(--success-color);
+.m-container-inflatable section:target .m-note.m-success {
+  border-color: var(--success-color);
 }
-.m-container-inflatable section:target > .m-note.m-warning,
-.m-container-inflatable section:target section > .m-note.m-warning {
-  border-left-color: var(--warning-color);
+.m-container-inflatable section:target .m-note.m-warning {
+  border-color: var(--warning-color);
 }
-.m-container-inflatable section:target > .m-note.m-danger,
-.m-container-inflatable section:target section > .m-note.m-danger {
-  border-left-color: var(--danger-color);
+.m-container-inflatable section:target .m-note.m-danger {
+  border-color: var(--danger-color);
 }
-.m-container-inflatable section:target > .m-note.m-info,
-.m-container-inflatable section:target section > .m-note.m-info {
-  border-left-color: var(--info-color);
+.m-container-inflatable section:target .m-note.m-info {
+  border-color: var(--info-color);
 }
-.m-container-inflatable section:target > .m-note.m-dim,
-.m-container-inflatable section:target section > .m-note.m-dim {
-  border-left-color: var(--dim-color);
+.m-container-inflatable section:target .m-note.m-dim {
+  border-color: var(--dim-color);
 }
 
 /* kate: indent-width 2; */

diff --git a/css/m-light+doxygen.compiled.css b/css/m-light+doxygen.compiled.css
index 4629aa159b5c56bf77e54237132ba260f64b4d12..59d5b0e7ecedddc7c905f8cbab6120ebe39fbb68 100644 (file)
--- a/css/m-light+doxygen.compiled.css
+++ b/css/m-light+doxygen.compiled.css
@@ -41,7 +41,7 @@ body { margin: 0; }
   clear: both;
   display: table;
 }
-[class*='m-col-'] {
+.m-row > [class*='m-col-'] {
   position: relative;
   padding: 1rem;
 }
@@ -53,17 +53,11 @@ body { margin: 0; }
 [class*='m-show-'] {
   display: none;
 }
-[class*='m-col-'].m-left-s, [class*='m-col-'].m-right-s, [class*='m-col-'].m-center-s,
-[class*='m-col-'].m-left-m, [class*='m-col-'].m-right-m, [class*='m-col-'].m-center-m,
-[class*='m-col-'].m-left-l, [class*='m-col-'].m-right-l, [class*='m-col-'].m-center-l {
-  margin-left: -1rem;
-  margin-right: -1rem;
+.m-container-inflate, :not(.m-row) > [class*='m-col-'] {
+  margin-bottom: 1rem;
 }
-.m-row > [class*='m-col-'].m-left-s, .m-row > [class*='m-col-'].m-right-s, .m-row > [class*='m-col-'].m-center-s,
-.m-row > [class*='m-col-'].m-left-m, .m-row > [class*='m-col-'].m-right-m, .m-row > [class*='m-col-'].m-center-m,
-.m-row > [class*='m-col-'].m-left-l, .m-row > [class*='m-col-'].m-right-l  .m-row > [class*='m-col-'].m-center-l {
-  margin-left: 0;
-  margin-right: 0;
+.m-container-inflate:last-child, :not(.m-row) > [class*='m-col-']:last-child {
+  margin-bottom: 0;
 }
 .m-container.m-nopad, [class*='m-col-'].m-nopad,
 .m-container.m-nopadx, [class*='m-col-'].m-nopadx,
@@ -78,35 +72,22 @@ body { margin: 0; }
 [class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadt {
   padding-top: 0;
 }
-[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb {
+[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb,
+.m-container-inflate.m-nopadb {
   padding-bottom: 0;
 }
 [class*='m-col-t-'] { float: left; }
-[class*='m-col-t-'].m-left-t, [class*='m-col-t-'].m-right-t {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
 .m-left-t {
+  padding-right: 1rem;
   float: left;
 }
 .m-right-t, [class*='m-col-t-'].m-right-t {
+  padding-left: 1rem;
   float: right;
 }
 .m-center-t, [class*='m-col-t-'].m-center-t {
   float: none;
 }
-[class*='m-col-t-'].m-left-t {
-  margin-left: -1rem;
-}
-[class*='m-col-t-'].m-right-t {
-  margin-right: -1rem;
-}
-.m-row > [class*='m-col-t-'].m-left-t {
-  margin-left: 0;
-}
-.m-row > [class*='m-col-t-'].m-right-t {
-  margin-right: 0;
-}
 .m-center-t, [class*='m-col-t-'].m-center-t {
   margin-left: auto;
   margin-right: auto;
@@ -148,35 +129,25 @@ body { margin: 0; }
 .m-pull-t-11 { right: calc(11 * 100% / 12); }
 @media screen and (min-width: 576px) {
   .m-container { width: 560px; }
-  .m-container-inflatable .m-col-s-10 .m-container-inflate {
+  .m-container-inflatable .m-col-s-10 .m-container-inflate:not([class*='m-left-']):not([class*='m-right-']) {
     margin-left: -10%;
     margin-right: -10%;
   }
-  [class*='m-col-s-'] { float: left; }
-  [class*='m-col-s-'].m-left-s, [class*='m-col-s-'].m-right-s {
-    padding-top: 0px;
-    padding-bottom: 0px;
+  .m-container-inflatable .m-col-s-10 .m-container-inflate.m-left-s {
+    margin-left: -10%;
+  }
+  .m-container-inflatable .m-col-s-10 .m-container-inflate.m-right-s {
+    margin-right: -10%;
   }
+  [class*='m-col-s-'] { float: left; }
   .m-left-s {
+    padding-right: 1rem;
     float: left;
   }
   .m-right-s, [class*='m-col-s-'].m-right-s {
+    padding-left: 1rem;
     float: right;
   }
-  [class*='m-col-s-'].m-left-s {
-    margin-left: -1rem;
-    margin-right: 0;
-  }
-  [class*='m-col-s-'].m-right-s {
-    margin-left: 0;
-    margin-right: -1rem;
-  }
-  .m-row > [class*='m-col-s-'].m-left-s {
-    margin-left: 0;
-  }
-  .m-row > [class*='m-col-s-'].m-right-s {
-    margin-right: 0;
-  }
   .m-center-s, [class*='m-col-s-'].m-center-s {
     margin-left: auto;
     margin-right: auto;
@@ -228,35 +199,25 @@ body { margin: 0; }
 }
 @media screen and (min-width: 768px) {
   .m-container { width: 750px; }
-  .m-container-inflatable .m-col-m-10 .m-container-inflate {
+  .m-container-inflatable .m-col-m-10 .m-container-inflate:not([class*='m-left-']):not([class*='m-right-']) {
     margin-left: -10%;
     margin-right: -10%;
   }
-  [class*='m-col-m-'] { float: left; }
-  [class*='m-col-m-'].m-left-m, [class*='m-col-m-'].m-right-m {
-    padding-top: 0px;
-    padding-bottom: 0px;
+  .m-container-inflatable .m-col-m-10 .m-container-inflate.m-left-m {
+    margin-left: -10%;
   }
+  .m-container-inflatable .m-col-m-10 .m-container-inflate.m-right-m {
+    margin-right: -10%;
+  }
+  [class*='m-col-m-'] { float: left; }
   .m-left-m {
+    padding-right: 1rem;
     float: left;
   }
   .m-right-m, [class*='m-col-m-'].m-right-m {
+    padding-left: 1rem;
     float: right;
   }
-  [class*='m-col-m-'].m-left-m {
-    margin-left: -1rem;
-    margin-right: 0;
-  }
-  [class*='m-col-m-'].m-right-m {
-    margin-left: 0;
-    margin-right: -1rem;
-  }
-  .m-row > [class*='m-col-m-'].m-left-m {
-    margin-left: 0;
-  }
-  .m-row > [class*='m-col-m-'].m-right-m {
-    margin-right: 0;
-  }
   .m-center-m, [class*='m-col-m-'].m-center-m {
     margin-left: auto;
     margin-right: auto;
@@ -308,35 +269,25 @@ body { margin: 0; }
 }
 @media screen and (min-width: 992px) {
   .m-container { width: 960px; }
-  .m-container-inflatable .m-col-l-10 .m-container-inflate {
+  .m-container-inflatable .m-col-l-10 .m-container-inflate:not([class*='m-left-']):not([class*='m-right-']) {
     margin-left: -10%;
     margin-right: -10%;
   }
-  [class*='m-col-l-'] { float: left; }
-  [class*='m-col-l-'].m-left-l, [class*='m-col-l-'].m-right-l {
-    padding-top: 0px;
-    padding-bottom: 0px;
+  .m-container-inflatable .m-col-l-10 .m-container-inflate.m-left-l {
+    margin-left: -10%;
+  }
+  .m-container-inflatable .m-col-l-10 .m-container-inflate.m-right-l {
+    margin-right: -10%;
   }
+  [class*='m-col-l-'] { float: left; }
   .m-left-l {
+    padding-right: 1rem;
     float: left;
   }
   .m-right-l, [class*='m-col-l-'].m-right-l {
+    padding-left: 1rem;
     float: right;
   }
-  [class*='m-col-l-'].m-left-l {
-    margin-left: -1rem;
-    margin-right: 0;
-  }
-  [class*='m-col-l-'].m-right-l {
-    margin-left: 0;
-    margin-right: -1rem;
-  }
-  .m-row > [class*='m-col-l-'].m-left-l {
-    margin-left: 0;
-  }
-  .m-row > [class*='m-col-l-'].m-right-l {
-    margin-right: 0;
-  }
   .m-center-l, [class*='m-col-l-'].m-center-l {
     margin-left: auto;
     margin-right: auto;
@@ -1234,11 +1185,70 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
 .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
 .m-container-inflatable > .m-row > [class*='m-col-'] section > pre,
 .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-code-figure,
-.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure {
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure,
+.m-container-inflatable [class*='m-center-'] > .m-note,
+.m-container-inflatable [class*='m-center-'] > .m-frame,
+.m-container-inflatable [class*='m-center-'] > .m-block,
+.m-container-inflatable [class*='m-center-'] > .m-imagegrid,
+.m-container-inflatable [class*='m-center-'] > pre,
+.m-container-inflatable [class*='m-center-'] > .m-code-figure,
+.m-container-inflatable [class*='m-center-'] > .m-console-figure,
+.m-container-inflatable [class*='m-left-'] > .m-note,
+.m-container-inflatable [class*='m-left-'] > .m-frame,
+.m-container-inflatable [class*='m-left-'] > .m-block,
+.m-container-inflatable [class*='m-left-'] > .m-imagegrid,
+.m-container-inflatable [class*='m-left-'] > pre,
+.m-container-inflatable [class*='m-left-'] > .m-code-figure,
+.m-container-inflatable [class*='m-left-'] > .m-console-figure,
+.m-container-inflatable [class*='m-right-'] > .m-note,
+.m-container-inflatable [class*='m-right-'] > .m-frame,
+.m-container-inflatable [class*='m-right-'] > .m-block,
+.m-container-inflatable [class*='m-right-'] > .m-imagegrid,
+.m-container-inflatable [class*='m-right-'] > pre,
+.m-container-inflatable [class*='m-right-'] > .m-code-figure,
+.m-container-inflatable [class*='m-right-'] > .m-console-figure,
+.m-container-inflatable .m-container-inflate > .m-note,
+.m-container-inflatable .m-container-inflate > .m-frame,
+.m-container-inflatable .m-container-inflate > .m-block,
+.m-container-inflatable .m-container-inflate > .m-imagegrid,
+.m-container-inflatable .m-container-inflate > pre,
+.m-container-inflatable .m-container-inflate > .m-code-figure,
+.m-container-inflatable .m-container-inflate > .m-console-figure
+{
   margin-left: -1rem;
   margin-right: -1rem;
 }
 @media screen and (min-width: 576px) {
+  .m-container-inflatable .m-center-s > .m-note,
+  .m-container-inflatable .m-center-s > .m-frame,
+  .m-container-inflatable .m-center-s > .m-block,
+  .m-container-inflatable .m-center-s > .m-imagegrid,
+  .m-container-inflatable .m-center-s > pre,
+  .m-container-inflatable .m-center-s > .m-code-figure,
+  .m-container-inflatable .m-center-s > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+  .m-container-inflatable .m-left-s > .m-note,
+  .m-container-inflatable .m-left-s > .m-frame,
+  .m-container-inflatable .m-left-s > .m-block,
+  .m-container-inflatable .m-left-s > .m-imagegrid,
+  .m-container-inflatable .m-left-s > pre,
+  .m-container-inflatable .m-left-s > .m-code-figure,
+  .m-container-inflatable .m-left-s > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: 0;
+  }
+  .m-container-inflatable .m-right-s > .m-note,
+  .m-container-inflatable .m-right-s > .m-frame,
+  .m-container-inflatable .m-right-s > .m-block,
+  .m-container-inflatable .m-right-s > .m-imagegrid,
+  .m-container-inflatable .m-right-s > pre,
+  .m-container-inflatable .m-right-s > .m-code-figure,
+  .m-container-inflatable .m-right-s > .m-console-figure {
+    margin-left: 0;
+    margin-right: -1rem;
+  }
   .m-container-inflatable > .m-row > .m-col-s-10 > .m-imagegrid.m-container-inflate,
   .m-container-inflatable > .m-row > .m-col-s-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
@@ -1246,6 +1256,36 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
   }
 }
 @media screen and (min-width: 768px) {
+  .m-container-inflatable .m-center-m > .m-note,
+  .m-container-inflatable .m-center-m > .m-frame,
+  .m-container-inflatable .m-center-m > .m-block,
+  .m-container-inflatable .m-center-m > .m-imagegrid,
+  .m-container-inflatable .m-center-m > pre,
+  .m-container-inflatable .m-center-m > .m-code-figure,
+  .m-container-inflatable .m-center-m > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+  .m-container-inflatable .m-left-m > .m-note,
+  .m-container-inflatable .m-left-m > .m-frame,
+  .m-container-inflatable .m-left-m > .m-block,
+  .m-container-inflatable .m-left-m > .m-imagegrid,
+  .m-container-inflatable .m-left-m > pre,
+  .m-container-inflatable .m-left-m > .m-code-figure,
+  .m-container-inflatable .m-left-m > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: 0;
+  }
+  .m-container-inflatable .m-right-m > .m-note,
+  .m-container-inflatable .m-right-m > .m-frame,
+  .m-container-inflatable .m-right-m > .m-block,
+  .m-container-inflatable .m-right-m > .m-imagegrid,
+  .m-container-inflatable .m-right-m > pre,
+  .m-container-inflatable .m-right-m > .m-code-figure,
+  .m-container-inflatable .m-right-m > .m-console-figure {
+    margin-left: 0;
+    margin-right: -1rem;
+  }
   .m-container-inflatable > .m-row > .m-col-m-10 > .m-imagegrid.m-container-inflate,
   .m-container-inflatable > .m-row > .m-col-m-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
@@ -1253,6 +1293,36 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
   }
 }
 @media screen and (min-width: 992px) {
+  .m-container-inflatable .m-center-l > .m-note,
+  .m-container-inflatable .m-center-l > .m-frame,
+  .m-container-inflatable .m-center-l > .m-block,
+  .m-container-inflatable .m-center-l > .m-imagegrid,
+  .m-container-inflatable .m-center-l > pre,
+  .m-container-inflatable .m-center-l > .m-code-figure,
+  .m-container-inflatable .m-center-l > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+  .m-container-inflatable .m-left-l > .m-note,
+  .m-container-inflatable .m-left-l > .m-frame,
+  .m-container-inflatable .m-left-l > .m-block,
+  .m-container-inflatable .m-left-l > .m-imagegrid,
+  .m-container-inflatable .m-left-l > pre,
+  .m-container-inflatable .m-left-l > .m-code-figure,
+  .m-container-inflatable .m-left-l > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: 0;
+  }
+  .m-container-inflatable .m-right-l > .m-note,
+  .m-container-inflatable .m-right-l > .m-frame,
+  .m-container-inflatable .m-right-l > .m-block,
+  .m-container-inflatable .m-right-l > .m-imagegrid,
+  .m-container-inflatable .m-right-l > pre,
+  .m-container-inflatable .m-right-l > .m-code-figure,
+  .m-container-inflatable .m-right-l > .m-console-figure {
+    margin-left: 0;
+    margin-right: -1rem;
+  }
   .m-container-inflatable > .m-row > .m-col-l-10 > .m-imagegrid.m-container-inflate,
   .m-container-inflatable > .m-row > .m-col-l-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
@@ -1701,7 +1771,7 @@ body > header > nav ol {
 body > header > nav ol ol {
   padding-left: 1.5rem;
 }
-body > header > nav [class*='m-col-'] {
+body > header > nav .m-row > [class*='m-col-'] {
   padding-top: 0;
   padding-bottom: 0;
 }
@@ -2039,7 +2109,31 @@ article:last-child, article section:last-child { margin-bottom: 0; }
 .m-container-inflatable section:target section > .m-block,
 .m-container-inflatable section:target section > pre,
 .m-container-inflatable section:target section > figure.m-code-figure > pre:first-child,
-.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child {
+.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-center-'] > .m-note,
+.m-container-inflatable section:target [class*='m-center-'] > .m-frame,
+.m-container-inflatable section:target [class*='m-center-'] > .m-block,
+.m-container-inflatable section:target [class*='m-center-'] > pre,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-left-'] > .m-note,
+.m-container-inflatable section:target [class*='m-left-'] > .m-frame,
+.m-container-inflatable section:target [class*='m-left-'] > .m-block,
+.m-container-inflatable section:target [class*='m-left-'] > pre,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-right-'] > .m-note,
+.m-container-inflatable section:target [class*='m-right-'] > .m-frame,
+.m-container-inflatable section:target [class*='m-right-'] > .m-block,
+.m-container-inflatable section:target [class*='m-right-'] > pre,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target .m-container-inflate > .m-note,
+.m-container-inflatable section:target .m-container-inflate > .m-frame,
+.m-container-inflatable section:target .m-container-inflate > .m-block,
+.m-container-inflatable section:target .m-container-inflate > pre,
+.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure > pre:first-child {
   margin-left: -1.0rem;
   border-left-style: solid;
   border-left-width: 0.25rem;
@@ -2050,50 +2144,223 @@ article:last-child, article section:last-child { margin-bottom: 0; }
 .m-container-inflatable section:target > figure.m-code-figure::before,
 .m-container-inflatable section:target > figure.m-console-figure::before,
 .m-container-inflatable section:target section > figure.m-code-figure::before,
-.m-container-inflatable section:target section > figure.m-console-figure::before {
+.m-container-inflatable section:target section > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure::before,
+.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure::before {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-width: 0.25rem;
 }
-.m-container-inflatable section:target > pre,
-.m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
-.m-container-inflatable section:target > figure.m-console-figure > pre:first-child,
-.m-container-inflatable section:target section > pre,
-.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child,
-.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child {
-  border-color: #f7e3db;
+@media screen and (min-width: 576px) {
+  .m-container-inflatable section:target .m-center-s > .m-note,
+  .m-container-inflatable section:target .m-center-s > pre,
+  .m-container-inflatable section:target .m-center-s > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-center-s > figure.m-console-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-s > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-s > figure.m-console-figure > pre:first-child {
+    border-left-width: 0;
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-s > .m-block,
+  .m-container-inflatable section:target .m-right-s > .m-block {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+  }
+  .m-container-inflatable section:target .m-center-s > .m-frame,
+  .m-container-inflatable section:target .m-right-s > .m-frame {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+    padding-left: 0.875rem;
+  }
+  .m-container-inflatable section:target .m-right-s > .m-block,
+  .m-container-inflatable section:target .m-right-s > .m-frame {
+    margin-left: 0;
+  }
+  .m-container-inflatable section:target .m-right-s > .m-note,
+  .m-container-inflatable section:target .m-right-s > pre {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    margin-left: 0;
+    border-left-width: 0;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+  }
+}
+@media screen and (min-width: 768px) {
+  .m-container-inflatable section:target .m-center-m > .m-note,
+  .m-container-inflatable section:target .m-center-m > pre,
+  .m-container-inflatable section:target .m-center-m > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-center-m > figure.m-console-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-m > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-m > figure.m-console-figure > pre:first-child {
+    border-left-width: 0;
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-m > .m-block,
+  .m-container-inflatable section:target .m-right-m > .m-block {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+  }
+  .m-container-inflatable section:target .m-center-m > .m-frame,
+  .m-container-inflatable section:target .m-right-m > .m-frame {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+    padding-left: 0.875rem;
+  }
+  .m-container-inflatable section:target .m-right-m > .m-block,
+  .m-container-inflatable section:target .m-right-m > .m-frame {
+    margin-left: 0;
+  }
+  .m-container-inflatable section:target .m-right-m > .m-note,
+  .m-container-inflatable section:target .m-right-m > pre {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    margin-left: 0;
+    border-left-width: 0;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+  }
+}
+@media screen and (min-width: 992px) {
+  .m-container-inflatable section:target .m-center-l > .m-note,
+  .m-container-inflatable section:target .m-center-l > pre,
+  .m-container-inflatable section:target .m-center-l > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-center-l > figure.m-console-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-l > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-l > figure.m-console-figure > pre:first-child {
+    border-left-width: 0;
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-l > .m-block,
+  .m-container-inflatable section:target .m-right-l > .m-block {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+  }
+  .m-container-inflatable section:target .m-center-l > .m-frame,
+  .m-container-inflatable section:target .m-right-l > .m-frame {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+    padding-left: 0.875rem;
+  }
+  .m-container-inflatable section:target .m-right-l > .m-block,
+  .m-container-inflatable section:target .m-right-l > .m-frame {
+    margin-left: 0;
+  }
+  .m-container-inflatable section:target .m-right-l > .m-note,
+  .m-container-inflatable section:target .m-right-l > pre {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    margin-left: 0;
+    border-left-width: 0;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+  }
 }
 .m-container-inflatable section:target > figure.m-code-figure::before,
 .m-container-inflatable section:target > figure.m-console-figure::before,
-.m-container-inflatable section:target > .m-note.m-default,
 .m-container-inflatable section:target section > figure.m-code-figure::before,
 .m-container-inflatable section:target section > figure.m-console-figure::before,
-.m-container-inflatable section:target section > .m-note.m-default {
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target .m-container-inflatable > figure.m-code-figure::before,
+.m-container-inflatable section:target .m-container-inflatable > figure.m-console-figure::before {
   border-left-color: #f7e3db;
 }
-.m-container-inflatable section:target > .m-note.m-primary,
-.m-container-inflatable section:target section > .m-note.m-primary {
-  border-left-color: #cb4b16;
+@media screen and (min-width: 576px) {
+  .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before {
+    border-color: #fbf0ec;
+  }
+  .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before {
+    border-color: #000000;
+  }
+}
+@media screen and (min-width: 768px) {
+  .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before {
+    border-color: #fbf0ec;
+  }
+  .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before {
+    border-color: #000000;
+  }
+}
+@media screen and (min-width: 992px) {
+  .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before {
+    border-color: #fbf0ec;
+  }
+  .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before {
+    border-color: #000000;
+  }
+}
+.m-container-inflatable section:target pre,
+.m-container-inflatable section:target figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target figure.m-console-figure > pre:first-child {
+  border-color: #f7e3db;
+}
+.m-container-inflatable section:target .m-note.m-default {
+  border-color: #f7e3db;
 }
-.m-container-inflatable section:target > .m-note.m-success,
-.m-container-inflatable section:target section > .m-note.m-success {
-  border-left-color: #31c25d;
+.m-container-inflatable section:target .m-note.m-primary  {
+  border-color: #cb4b16;
 }
-.m-container-inflatable section:target > .m-note.m-warning,
-.m-container-inflatable section:target section > .m-note.m-warning {
-  border-left-color: #c7cf2f;
+.m-container-inflatable section:target .m-note.m-success {
+  border-color: #31c25d;
 }
-.m-container-inflatable section:target > .m-note.m-danger,
-.m-container-inflatable section:target section > .m-note.m-danger {
-  border-left-color: #f60000;
+.m-container-inflatable section:target .m-note.m-warning {
+  border-color: #c7cf2f;
 }
-.m-container-inflatable section:target > .m-note.m-info,
-.m-container-inflatable section:target section > .m-note.m-info {
-  border-left-color: #2e7dc5;
+.m-container-inflatable section:target .m-note.m-danger {
+  border-color: #f60000;
 }
-.m-container-inflatable section:target > .m-note.m-dim,
-.m-container-inflatable section:target section > .m-note.m-dim {
-  border-left-color: #bdbdbd;
+.m-container-inflatable section:target .m-note.m-info {
+  border-color: #2e7dc5;
+}
+.m-container-inflatable section:target .m-note.m-dim {
+  border-color: #bdbdbd;
 }
 
 .m-console .hll { background-color: #ffffcc }

diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index 0c1c71d5c882fcf8362e2b67415b6107457de2f2..5b5e86235a3fa3a4acca9b1ba38405dab2b2bdbe 100644 (file)
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -41,7 +41,7 @@ body { margin: 0; }
   clear: both;
   display: table;
 }
-[class*='m-col-'] {
+.m-row > [class*='m-col-'] {
   position: relative;
   padding: 1rem;
 }
@@ -53,17 +53,11 @@ body { margin: 0; }
 [class*='m-show-'] {
   display: none;
 }
-[class*='m-col-'].m-left-s, [class*='m-col-'].m-right-s, [class*='m-col-'].m-center-s,
-[class*='m-col-'].m-left-m, [class*='m-col-'].m-right-m, [class*='m-col-'].m-center-m,
-[class*='m-col-'].m-left-l, [class*='m-col-'].m-right-l, [class*='m-col-'].m-center-l {
-  margin-left: -1rem;
-  margin-right: -1rem;
+.m-container-inflate, :not(.m-row) > [class*='m-col-'] {
+  margin-bottom: 1rem;
 }
-.m-row > [class*='m-col-'].m-left-s, .m-row > [class*='m-col-'].m-right-s, .m-row > [class*='m-col-'].m-center-s,
-.m-row > [class*='m-col-'].m-left-m, .m-row > [class*='m-col-'].m-right-m, .m-row > [class*='m-col-'].m-center-m,
-.m-row > [class*='m-col-'].m-left-l, .m-row > [class*='m-col-'].m-right-l  .m-row > [class*='m-col-'].m-center-l {
-  margin-left: 0;
-  margin-right: 0;
+.m-container-inflate:last-child, :not(.m-row) > [class*='m-col-']:last-child {
+  margin-bottom: 0;
 }
 .m-container.m-nopad, [class*='m-col-'].m-nopad,
 .m-container.m-nopadx, [class*='m-col-'].m-nopadx,
@@ -78,35 +72,22 @@ body { margin: 0; }
 [class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadt {
   padding-top: 0;
 }
-[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb {
+[class*='m-col-'].m-nopad, [class*='m-col-'].m-nopady, [class*='m-col-'].m-nopadb,
+.m-container-inflate.m-nopadb {
   padding-bottom: 0;
 }
 [class*='m-col-t-'] { float: left; }
-[class*='m-col-t-'].m-left-t, [class*='m-col-t-'].m-right-t {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
 .m-left-t {
+  padding-right: 1rem;
   float: left;
 }
 .m-right-t, [class*='m-col-t-'].m-right-t {
+  padding-left: 1rem;
   float: right;
 }
 .m-center-t, [class*='m-col-t-'].m-center-t {
   float: none;
 }
-[class*='m-col-t-'].m-left-t {
-  margin-left: -1rem;
-}
-[class*='m-col-t-'].m-right-t {
-  margin-right: -1rem;
-}
-.m-row > [class*='m-col-t-'].m-left-t {
-  margin-left: 0;
-}
-.m-row > [class*='m-col-t-'].m-right-t {
-  margin-right: 0;
-}
 .m-center-t, [class*='m-col-t-'].m-center-t {
   margin-left: auto;
   margin-right: auto;
@@ -148,35 +129,25 @@ body { margin: 0; }
 .m-pull-t-11 { right: calc(11 * 100% / 12); }
 @media screen and (min-width: 576px) {
   .m-container { width: 560px; }
-  .m-container-inflatable .m-col-s-10 .m-container-inflate {
+  .m-container-inflatable .m-col-s-10 .m-container-inflate:not([class*='m-left-']):not([class*='m-right-']) {
     margin-left: -10%;
     margin-right: -10%;
   }
-  [class*='m-col-s-'] { float: left; }
-  [class*='m-col-s-'].m-left-s, [class*='m-col-s-'].m-right-s {
-    padding-top: 0px;
-    padding-bottom: 0px;
+  .m-container-inflatable .m-col-s-10 .m-container-inflate.m-left-s {
+    margin-left: -10%;
+  }
+  .m-container-inflatable .m-col-s-10 .m-container-inflate.m-right-s {
+    margin-right: -10%;
   }
+  [class*='m-col-s-'] { float: left; }
   .m-left-s {
+    padding-right: 1rem;
     float: left;
   }
   .m-right-s, [class*='m-col-s-'].m-right-s {
+    padding-left: 1rem;
     float: right;
   }
-  [class*='m-col-s-'].m-left-s {
-    margin-left: -1rem;
-    margin-right: 0;
-  }
-  [class*='m-col-s-'].m-right-s {
-    margin-left: 0;
-    margin-right: -1rem;
-  }
-  .m-row > [class*='m-col-s-'].m-left-s {
-    margin-left: 0;
-  }
-  .m-row > [class*='m-col-s-'].m-right-s {
-    margin-right: 0;
-  }
   .m-center-s, [class*='m-col-s-'].m-center-s {
     margin-left: auto;
     margin-right: auto;
@@ -228,35 +199,25 @@ body { margin: 0; }
 }
 @media screen and (min-width: 768px) {
   .m-container { width: 750px; }
-  .m-container-inflatable .m-col-m-10 .m-container-inflate {
+  .m-container-inflatable .m-col-m-10 .m-container-inflate:not([class*='m-left-']):not([class*='m-right-']) {
     margin-left: -10%;
     margin-right: -10%;
   }
-  [class*='m-col-m-'] { float: left; }
-  [class*='m-col-m-'].m-left-m, [class*='m-col-m-'].m-right-m {
-    padding-top: 0px;
-    padding-bottom: 0px;
+  .m-container-inflatable .m-col-m-10 .m-container-inflate.m-left-m {
+    margin-left: -10%;
   }
+  .m-container-inflatable .m-col-m-10 .m-container-inflate.m-right-m {
+    margin-right: -10%;
+  }
+  [class*='m-col-m-'] { float: left; }
   .m-left-m {
+    padding-right: 1rem;
     float: left;
   }
   .m-right-m, [class*='m-col-m-'].m-right-m {
+    padding-left: 1rem;
     float: right;
   }
-  [class*='m-col-m-'].m-left-m {
-    margin-left: -1rem;
-    margin-right: 0;
-  }
-  [class*='m-col-m-'].m-right-m {
-    margin-left: 0;
-    margin-right: -1rem;
-  }
-  .m-row > [class*='m-col-m-'].m-left-m {
-    margin-left: 0;
-  }
-  .m-row > [class*='m-col-m-'].m-right-m {
-    margin-right: 0;
-  }
   .m-center-m, [class*='m-col-m-'].m-center-m {
     margin-left: auto;
     margin-right: auto;
@@ -308,35 +269,25 @@ body { margin: 0; }
 }
 @media screen and (min-width: 992px) {
   .m-container { width: 960px; }
-  .m-container-inflatable .m-col-l-10 .m-container-inflate {
+  .m-container-inflatable .m-col-l-10 .m-container-inflate:not([class*='m-left-']):not([class*='m-right-']) {
     margin-left: -10%;
     margin-right: -10%;
   }
-  [class*='m-col-l-'] { float: left; }
-  [class*='m-col-l-'].m-left-l, [class*='m-col-l-'].m-right-l {
-    padding-top: 0px;
-    padding-bottom: 0px;
+  .m-container-inflatable .m-col-l-10 .m-container-inflate.m-left-l {
+    margin-left: -10%;
   }
+  .m-container-inflatable .m-col-l-10 .m-container-inflate.m-right-l {
+    margin-right: -10%;
+  }
+  [class*='m-col-l-'] { float: left; }
   .m-left-l {
+    padding-right: 1rem;
     float: left;
   }
   .m-right-l, [class*='m-col-l-'].m-right-l {
+    padding-left: 1rem;
     float: right;
   }
-  [class*='m-col-l-'].m-left-l {
-    margin-left: -1rem;
-    margin-right: 0;
-  }
-  [class*='m-col-l-'].m-right-l {
-    margin-left: 0;
-    margin-right: -1rem;
-  }
-  .m-row > [class*='m-col-l-'].m-left-l {
-    margin-left: 0;
-  }
-  .m-row > [class*='m-col-l-'].m-right-l {
-    margin-right: 0;
-  }
   .m-center-l, [class*='m-col-l-'].m-center-l {
     margin-left: auto;
     margin-right: auto;
@@ -1234,11 +1185,70 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
 .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
 .m-container-inflatable > .m-row > [class*='m-col-'] section > pre,
 .m-container-inflatable > .m-row > [class*='m-col-'] section > .m-code-figure,
-.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure {
+.m-container-inflatable > .m-row > [class*='m-col-'] section > .m-console-figure,
+.m-container-inflatable [class*='m-center-'] > .m-note,
+.m-container-inflatable [class*='m-center-'] > .m-frame,
+.m-container-inflatable [class*='m-center-'] > .m-block,
+.m-container-inflatable [class*='m-center-'] > .m-imagegrid,
+.m-container-inflatable [class*='m-center-'] > pre,
+.m-container-inflatable [class*='m-center-'] > .m-code-figure,
+.m-container-inflatable [class*='m-center-'] > .m-console-figure,
+.m-container-inflatable [class*='m-left-'] > .m-note,
+.m-container-inflatable [class*='m-left-'] > .m-frame,
+.m-container-inflatable [class*='m-left-'] > .m-block,
+.m-container-inflatable [class*='m-left-'] > .m-imagegrid,
+.m-container-inflatable [class*='m-left-'] > pre,
+.m-container-inflatable [class*='m-left-'] > .m-code-figure,
+.m-container-inflatable [class*='m-left-'] > .m-console-figure,
+.m-container-inflatable [class*='m-right-'] > .m-note,
+.m-container-inflatable [class*='m-right-'] > .m-frame,
+.m-container-inflatable [class*='m-right-'] > .m-block,
+.m-container-inflatable [class*='m-right-'] > .m-imagegrid,
+.m-container-inflatable [class*='m-right-'] > pre,
+.m-container-inflatable [class*='m-right-'] > .m-code-figure,
+.m-container-inflatable [class*='m-right-'] > .m-console-figure,
+.m-container-inflatable .m-container-inflate > .m-note,
+.m-container-inflatable .m-container-inflate > .m-frame,
+.m-container-inflatable .m-container-inflate > .m-block,
+.m-container-inflatable .m-container-inflate > .m-imagegrid,
+.m-container-inflatable .m-container-inflate > pre,
+.m-container-inflatable .m-container-inflate > .m-code-figure,
+.m-container-inflatable .m-container-inflate > .m-console-figure
+{
   margin-left: -1rem;
   margin-right: -1rem;
 }
 @media screen and (min-width: 576px) {
+  .m-container-inflatable .m-center-s > .m-note,
+  .m-container-inflatable .m-center-s > .m-frame,
+  .m-container-inflatable .m-center-s > .m-block,
+  .m-container-inflatable .m-center-s > .m-imagegrid,
+  .m-container-inflatable .m-center-s > pre,
+  .m-container-inflatable .m-center-s > .m-code-figure,
+  .m-container-inflatable .m-center-s > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+  .m-container-inflatable .m-left-s > .m-note,
+  .m-container-inflatable .m-left-s > .m-frame,
+  .m-container-inflatable .m-left-s > .m-block,
+  .m-container-inflatable .m-left-s > .m-imagegrid,
+  .m-container-inflatable .m-left-s > pre,
+  .m-container-inflatable .m-left-s > .m-code-figure,
+  .m-container-inflatable .m-left-s > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: 0;
+  }
+  .m-container-inflatable .m-right-s > .m-note,
+  .m-container-inflatable .m-right-s > .m-frame,
+  .m-container-inflatable .m-right-s > .m-block,
+  .m-container-inflatable .m-right-s > .m-imagegrid,
+  .m-container-inflatable .m-right-s > pre,
+  .m-container-inflatable .m-right-s > .m-code-figure,
+  .m-container-inflatable .m-right-s > .m-console-figure {
+    margin-left: 0;
+    margin-right: -1rem;
+  }
   .m-container-inflatable > .m-row > .m-col-s-10 > .m-imagegrid.m-container-inflate,
   .m-container-inflatable > .m-row > .m-col-s-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
@@ -1246,6 +1256,36 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
   }
 }
 @media screen and (min-width: 768px) {
+  .m-container-inflatable .m-center-m > .m-note,
+  .m-container-inflatable .m-center-m > .m-frame,
+  .m-container-inflatable .m-center-m > .m-block,
+  .m-container-inflatable .m-center-m > .m-imagegrid,
+  .m-container-inflatable .m-center-m > pre,
+  .m-container-inflatable .m-center-m > .m-code-figure,
+  .m-container-inflatable .m-center-m > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+  .m-container-inflatable .m-left-m > .m-note,
+  .m-container-inflatable .m-left-m > .m-frame,
+  .m-container-inflatable .m-left-m > .m-block,
+  .m-container-inflatable .m-left-m > .m-imagegrid,
+  .m-container-inflatable .m-left-m > pre,
+  .m-container-inflatable .m-left-m > .m-code-figure,
+  .m-container-inflatable .m-left-m > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: 0;
+  }
+  .m-container-inflatable .m-right-m > .m-note,
+  .m-container-inflatable .m-right-m > .m-frame,
+  .m-container-inflatable .m-right-m > .m-block,
+  .m-container-inflatable .m-right-m > .m-imagegrid,
+  .m-container-inflatable .m-right-m > pre,
+  .m-container-inflatable .m-right-m > .m-code-figure,
+  .m-container-inflatable .m-right-m > .m-console-figure {
+    margin-left: 0;
+    margin-right: -1rem;
+  }
   .m-container-inflatable > .m-row > .m-col-m-10 > .m-imagegrid.m-container-inflate,
   .m-container-inflatable > .m-row > .m-col-m-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
@@ -1253,6 +1293,36 @@ figure.m-figure.m-dim a:hover, figure.m-figure.m-dim a:focus, figure.m-figure.m-
   }
 }
 @media screen and (min-width: 992px) {
+  .m-container-inflatable .m-center-l > .m-note,
+  .m-container-inflatable .m-center-l > .m-frame,
+  .m-container-inflatable .m-center-l > .m-block,
+  .m-container-inflatable .m-center-l > .m-imagegrid,
+  .m-container-inflatable .m-center-l > pre,
+  .m-container-inflatable .m-center-l > .m-code-figure,
+  .m-container-inflatable .m-center-l > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: -1rem;
+  }
+  .m-container-inflatable .m-left-l > .m-note,
+  .m-container-inflatable .m-left-l > .m-frame,
+  .m-container-inflatable .m-left-l > .m-block,
+  .m-container-inflatable .m-left-l > .m-imagegrid,
+  .m-container-inflatable .m-left-l > pre,
+  .m-container-inflatable .m-left-l > .m-code-figure,
+  .m-container-inflatable .m-left-l > .m-console-figure {
+    margin-left: -1rem;
+    margin-right: 0;
+  }
+  .m-container-inflatable .m-right-l > .m-note,
+  .m-container-inflatable .m-right-l > .m-frame,
+  .m-container-inflatable .m-right-l > .m-block,
+  .m-container-inflatable .m-right-l > .m-imagegrid,
+  .m-container-inflatable .m-right-l > pre,
+  .m-container-inflatable .m-right-l > .m-code-figure,
+  .m-container-inflatable .m-right-l > .m-console-figure {
+    margin-left: 0;
+    margin-right: -1rem;
+  }
   .m-container-inflatable > .m-row > .m-col-l-10 > .m-imagegrid.m-container-inflate,
   .m-container-inflatable > .m-row > .m-col-l-10 section > .m-imagegrid.m-container-inflate {
     margin-left: -10%;
@@ -1701,7 +1771,7 @@ body > header > nav ol {
 body > header > nav ol ol {
   padding-left: 1.5rem;
 }
-body > header > nav [class*='m-col-'] {
+body > header > nav .m-row > [class*='m-col-'] {
   padding-top: 0;
   padding-bottom: 0;
 }
@@ -2039,7 +2109,31 @@ article:last-child, article section:last-child { margin-bottom: 0; }
 .m-container-inflatable section:target section > .m-block,
 .m-container-inflatable section:target section > pre,
 .m-container-inflatable section:target section > figure.m-code-figure > pre:first-child,
-.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child {
+.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-center-'] > .m-note,
+.m-container-inflatable section:target [class*='m-center-'] > .m-frame,
+.m-container-inflatable section:target [class*='m-center-'] > .m-block,
+.m-container-inflatable section:target [class*='m-center-'] > pre,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-left-'] > .m-note,
+.m-container-inflatable section:target [class*='m-left-'] > .m-frame,
+.m-container-inflatable section:target [class*='m-left-'] > .m-block,
+.m-container-inflatable section:target [class*='m-left-'] > pre,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-right-'] > .m-note,
+.m-container-inflatable section:target [class*='m-right-'] > .m-frame,
+.m-container-inflatable section:target [class*='m-right-'] > .m-block,
+.m-container-inflatable section:target [class*='m-right-'] > pre,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure > pre:first-child,
+.m-container-inflatable section:target .m-container-inflate > .m-note,
+.m-container-inflatable section:target .m-container-inflate > .m-frame,
+.m-container-inflatable section:target .m-container-inflate > .m-block,
+.m-container-inflatable section:target .m-container-inflate > pre,
+.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure > pre:first-child {
   margin-left: -1.0rem;
   border-left-style: solid;
   border-left-width: 0.25rem;
@@ -2050,50 +2144,223 @@ article:last-child, article section:last-child { margin-bottom: 0; }
 .m-container-inflatable section:target > figure.m-code-figure::before,
 .m-container-inflatable section:target > figure.m-console-figure::before,
 .m-container-inflatable section:target section > figure.m-code-figure::before,
-.m-container-inflatable section:target section > figure.m-console-figure::before {
+.m-container-inflatable section:target section > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target .m-container-inflate > figure.m-code-figure::before,
+.m-container-inflatable section:target .m-container-inflate > figure.m-console-figure::before {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   border-left-width: 0.25rem;
 }
-.m-container-inflatable section:target > pre,
-.m-container-inflatable section:target > figure.m-code-figure > pre:first-child,
-.m-container-inflatable section:target > figure.m-console-figure > pre:first-child,
-.m-container-inflatable section:target section > pre,
-.m-container-inflatable section:target section > figure.m-code-figure > pre:first-child,
-.m-container-inflatable section:target section > figure.m-console-figure > pre:first-child {
-  border-color: #f7e3db;
+@media screen and (min-width: 576px) {
+  .m-container-inflatable section:target .m-center-s > .m-note,
+  .m-container-inflatable section:target .m-center-s > pre,
+  .m-container-inflatable section:target .m-center-s > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-center-s > figure.m-console-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-s > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-s > figure.m-console-figure > pre:first-child {
+    border-left-width: 0;
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-s > .m-block,
+  .m-container-inflatable section:target .m-right-s > .m-block {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+  }
+  .m-container-inflatable section:target .m-center-s > .m-frame,
+  .m-container-inflatable section:target .m-right-s > .m-frame {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+    padding-left: 0.875rem;
+  }
+  .m-container-inflatable section:target .m-right-s > .m-block,
+  .m-container-inflatable section:target .m-right-s > .m-frame {
+    margin-left: 0;
+  }
+  .m-container-inflatable section:target .m-right-s > .m-note,
+  .m-container-inflatable section:target .m-right-s > pre {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    margin-left: 0;
+    border-left-width: 0;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+  }
+}
+@media screen and (min-width: 768px) {
+  .m-container-inflatable section:target .m-center-m > .m-note,
+  .m-container-inflatable section:target .m-center-m > pre,
+  .m-container-inflatable section:target .m-center-m > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-center-m > figure.m-console-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-m > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-m > figure.m-console-figure > pre:first-child {
+    border-left-width: 0;
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-m > .m-block,
+  .m-container-inflatable section:target .m-right-m > .m-block {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+  }
+  .m-container-inflatable section:target .m-center-m > .m-frame,
+  .m-container-inflatable section:target .m-right-m > .m-frame {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+    padding-left: 0.875rem;
+  }
+  .m-container-inflatable section:target .m-right-m > .m-block,
+  .m-container-inflatable section:target .m-right-m > .m-frame {
+    margin-left: 0;
+  }
+  .m-container-inflatable section:target .m-right-m > .m-note,
+  .m-container-inflatable section:target .m-right-m > pre {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    margin-left: 0;
+    border-left-width: 0;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+  }
+}
+@media screen and (min-width: 992px) {
+  .m-container-inflatable section:target .m-center-l > .m-note,
+  .m-container-inflatable section:target .m-center-l > pre,
+  .m-container-inflatable section:target .m-center-l > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-center-l > figure.m-console-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-l > figure.m-code-figure > pre:first-child,
+  .m-container-inflatable section:target .m-right-l > figure.m-console-figure > pre:first-child {
+    border-left-width: 0;
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-l > .m-block,
+  .m-container-inflatable section:target .m-right-l > .m-block {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+  }
+  .m-container-inflatable section:target .m-center-l > .m-frame,
+  .m-container-inflatable section:target .m-right-l > .m-frame {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+    padding-left: 0.875rem;
+  }
+  .m-container-inflatable section:target .m-right-l > .m-block,
+  .m-container-inflatable section:target .m-right-l > .m-frame {
+    margin-left: 0;
+  }
+  .m-container-inflatable section:target .m-right-l > .m-note,
+  .m-container-inflatable section:target .m-right-l > pre {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    margin-left: 0;
+    border-left-width: 0;
+    padding-left: 1rem;
+  }
+  .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before {
+    border-top-left-radius: 0.2rem;
+    border-bottom-left-radius: 0.2rem;
+    border-left-width: 0.125rem;
+  }
 }
 .m-container-inflatable section:target > figure.m-code-figure::before,
 .m-container-inflatable section:target > figure.m-console-figure::before,
-.m-container-inflatable section:target > .m-note.m-default,
 .m-container-inflatable section:target section > figure.m-code-figure::before,
 .m-container-inflatable section:target section > figure.m-console-figure::before,
-.m-container-inflatable section:target section > .m-note.m-default {
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-center-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-left-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-code-figure::before,
+.m-container-inflatable section:target [class*='m-right-'] > figure.m-console-figure::before,
+.m-container-inflatable section:target .m-container-inflatable > figure.m-code-figure::before,
+.m-container-inflatable section:target .m-container-inflatable > figure.m-console-figure::before {
   border-left-color: #f7e3db;
 }
-.m-container-inflatable section:target > .m-note.m-primary,
-.m-container-inflatable section:target section > .m-note.m-primary {
-  border-left-color: #cb4b16;
+@media screen and (min-width: 576px) {
+  .m-container-inflatable section:target .m-center-s > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-code-figure::before {
+    border-color: #fbf0ec;
+  }
+  .m-container-inflatable section:target .m-center-s > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-s > figure.m-console-figure::before {
+    border-color: #000000;
+  }
+}
+@media screen and (min-width: 768px) {
+  .m-container-inflatable section:target .m-center-m > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-code-figure::before {
+    border-color: #fbf0ec;
+  }
+  .m-container-inflatable section:target .m-center-m > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-m > figure.m-console-figure::before {
+    border-color: #000000;
+  }
+}
+@media screen and (min-width: 992px) {
+  .m-container-inflatable section:target .m-center-l > figure.m-code-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-code-figure::before {
+    border-color: #fbf0ec;
+  }
+  .m-container-inflatable section:target .m-center-l > figure.m-console-figure::before,
+  .m-container-inflatable section:target .m-right-l > figure.m-console-figure::before {
+    border-color: #000000;
+  }
+}
+.m-container-inflatable section:target pre,
+.m-container-inflatable section:target figure.m-code-figure > pre:first-child,
+.m-container-inflatable section:target figure.m-console-figure > pre:first-child {
+  border-color: #f7e3db;
+}
+.m-container-inflatable section:target .m-note.m-default {
+  border-color: #f7e3db;
 }
-.m-container-inflatable section:target > .m-note.m-success,
-.m-container-inflatable section:target section > .m-note.m-success {
-  border-left-color: #31c25d;
+.m-container-inflatable section:target .m-note.m-primary  {
+  border-color: #cb4b16;
 }
-.m-container-inflatable section:target > .m-note.m-warning,
-.m-container-inflatable section:target section > .m-note.m-warning {
-  border-left-color: #c7cf2f;
+.m-container-inflatable section:target .m-note.m-success {
+  border-color: #31c25d;
 }
-.m-container-inflatable section:target > .m-note.m-danger,
-.m-container-inflatable section:target section > .m-note.m-danger {
-  border-left-color: #f60000;
+.m-container-inflatable section:target .m-note.m-warning {
+  border-color: #c7cf2f;
 }
-.m-container-inflatable section:target > .m-note.m-info,
-.m-container-inflatable section:target section > .m-note.m-info {
-  border-left-color: #2e7dc5;
+.m-container-inflatable section:target .m-note.m-danger {
+  border-color: #f60000;
 }
-.m-container-inflatable section:target > .m-note.m-dim,
-.m-container-inflatable section:target section > .m-note.m-dim {
-  border-left-color: #bdbdbd;
+.m-container-inflatable section:target .m-note.m-info {
+  border-color: #2e7dc5;
+}
+.m-container-inflatable section:target .m-note.m-dim {
+  border-color: #bdbdbd;
 }
 
 .m-console .hll { background-color: #ffffcc }

diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst
index 870f2059c68355ab67e6c2d2d6cec49c880e1229..06862c6c3e9572eda3ed78cbb3303520481ec268 100644 (file)
--- a/doc/css/components-test.rst
+++ b/doc/css/components-test.rst
@@ -25,7 +25,7 @@
 Test
 ####
 
-:save_as: css/components/test/index.html
+:slug: css/components/test
 :breadcrumb: {filename}/css.rst CSS
              {filename}/css/components.rst Components
 
@@ -1193,3 +1193,76 @@ List with components inside
     </ul>
 
     <p>Paragraph after.</p>
+
+`Floating around`_
+==================
+
+Similar to the `grid test <{filename}/css/grid-test.rst#floating-around>`_, but
+with components.
+
+.. raw:: html
+
+    <div class="m-note m-default">
+      Should have the background extended all the way to the sides on small
+      screens.
+    </div>
+
+    <div class="m-col-m-5 m-right-m">
+      <div class="m-note m-default">
+      <p>Should have no spacing on top/sides but on the bottom, extended to the
+      sides on tiny. Lorem ipsum dolor.</p>
+      </div>
+    </div>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+    elit posuere, consectetur magna congue, sagittis est. Pellentesque
+    est neque, aliquet nec consectetur in, mattis ac diam. Aliquam
+    placerat justo ut purus interdum, ac placerat lacus consequat. Ut dictum
+    enim posuere metus porta, et aliquam ex condimentum. Proin sagittis nisi
+    leo, ac pellentesque purus bibendum sit amet.</p>
+
+    <div class="m-col-s-6 m-center-s">
+      <div class="m-note m-default">
+      <p>Should have spacing on sides but not on the bottom, extended to the
+      sides on tiny. Pellentesque est neque, aliquet nec consectetur.</p>
+      </div>
+    </div>
+
+`Floating around, inflated`_
+============================
+
+.. raw:: html
+
+    <div class="m-container-inflate">
+      <div class="m-note m-default">
+      <p>Should be extended to both sides, have padding on bottom an on sides
+      the same as above. Lorem ipsum dolor sit amet, consectetur adipiscing
+      elit. Aenean id elit posuere, consectetur magna congue, sagittis est.
+      Pellentesque est neque, aliquet nec consectetur in, mattis ac diam.
+      Aliquam placerat justo ut purus interdum, ac placerat lacus
+      consequat.</p>
+      </div>
+    </div>
+
+    <div class="m-container-inflate m-col-l-4 m-right-l">
+      <div class="m-note m-default">
+      <p>Should be extended to the right, have padding on bottom an on the
+      right side the same as above. Lorem ipsum dolor.</p>
+      </div>
+    </div>
+
+    <div class="m-container-inflate m-col-l-4 m-left-l">
+      <div class="m-note m-default">
+      <p>Should be extended to the left, have padding on bottom an on the
+      outside the same as above. Lorem ipsum dolor.</p>
+      </div>
+    </div>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+    elit posuere, consectetur magna congue, sagittis est. Pellentesque
+    est neque, aliquet nec consectetur in, mattis ac diam. Aliquam placerat
+    justo ut purus interdum, ac placerat lacus consequat. Ut dictum enim
+    posuere metus porta, et aliquam ex condimentum. Proin sagittis nisi leo, ac
+    pellentesque purus bibendum sit amet. Aliquam placerat justo ut purus
+    interdum, ac placerat lacus consequat. Ut dictum enim posuere metus porta,
+    et aliquam ex condimentum. </p>

diff --git a/doc/css/components.rst b/doc/css/components.rst
index acb9273b3db5c91d902f1c34fb6f00bb4bb03db2..4dcb5b6d790abfd6e9937588be6e6573e239362c 100644 (file)
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -1290,8 +1290,8 @@ element and put the :html:`<svg>` as a first child, all other content after.
         <figcaption>Impenetrable logic</figcaption>
         </figure>
 
-`Padding`_
-==========
+`Padding and floating`_
+=======================
 
 Similarly to `typography elements <{filename}/css/typography.rst#padding>`_;
 blocks, notes, frames, tables, images, figures, image grids, code and math
@@ -1299,6 +1299,17 @@ blocks and code figures have :css:`1rem` padding on the bottom, except when
 they are the last element, to avoid excessive spacing. The list special casing
 and ability to disable the padding using :css:`.m-nopadb` applies here as well.
 
+Components that appear directly in a column that's :css:`m-container-inflatable`
+or directly inside any nested :html:`<section>` are outdented to preserve a
+straight line of text alignment on the sides. You can spot that on this page
+--- look how notes and figures have their background outside. This also makes
+narrow layouts better readable, as the component visuals don't cut into
+precious screen width.
+
+All components support the `floating classes <{filename}/css/grid.rst#floating-around>`_ from the grid system, however having floating elements *inside* the
+components is not supported. Floating elements also preserve the inflatable
+behavior described above.
+
 `Responsive utilities`_
 =======================
 

diff --git a/doc/css/grid-test.rst b/doc/css/grid-test.rst
new file mode 100644 (file)
index 0000000..4003946
--- /dev/null
+++ b/doc/css/grid-test.rst
@@ -0,0 +1,87 @@
+..
+    This file is part of m.css.
+
+    Copyright © 2017, 2018 Vladimír Vondruš <mosra@centrum.cz>
+
+    Permission is hereby granted, free of charge, to any person obtaining a
+    copy of this software and associated documentation files (the "Software"),
+    to deal in the Software without restriction, including without limitation
+    the rights to use, copy, modify, merge, publish, distribute, sublicense,
+    and/or sell copies of the Software, and to permit persons to whom the
+    Software is furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included
+    in all copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+    THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+    FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+    DEALINGS IN THE SOFTWARE.
+..
+
+Test
+####
+
+:save_as: css/grid/test/index.html
+:breadcrumb: {filename}/css.rst CSS
+             {filename}/css/grid.rst Grid system
+
+See the `Components test <{filename}/css/components-test.rst#floating-around>`_
+for a similar test but with components.
+
+Floating around
+===============
+
+.. raw:: html
+
+    <div class="m-col-m-5 m-right-m">
+      <p>Should have no spacing on top/sides but on the bottom, extended to the
+      sides on tiny. Lorem ipsum dolor.</p>
+    </div>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+    elit posuere, consectetur magna congue, sagittis est. Pellentesque
+    est neque, aliquet nec consectetur in, mattis ac diam. Aliquam
+    placerat justo ut purus interdum, ac placerat lacus consequat. Ut dictum
+    enim posuere metus porta, et aliquam ex condimentum. Proin sagittis nisi
+    leo, ac pellentesque purus bibendum sit amet.</p>
+
+    <div class="m-col-s-6 m-center-s">
+      <p>Should have spacing on sides but not on the bottom, extended to the
+      sides on tiny. Pellentesque est neque, aliquet nec consectetur.</p>
+    </div>
+
+Floating around, inflated
+=========================
+
+.. raw:: html
+
+    <div class="m-container-inflate">
+      <p>Should be extended to both sides, have padding on bottom an on sides
+      the same as above, lines aligned. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id elit posuere, consectetur magna congue,
+      sagittis est. Pellentesque est neque, aliquet nec consectetur in, mattis
+      ac diam. Aliquam placerat justo ut purus interdum, ac placerat lacus
+      consequat.</p>
+    </div>
+
+    <div class="m-container-inflate m-col-l-4 m-right-l">
+      <p>Should be extended to the right, have padding on bottom an on the
+      right side the same as above, lines aligned. Lorem ipsum dolor.</p>
+    </div>
+
+    <div class="m-container-inflate m-col-l-4 m-left-l">
+      <p>Should be extended to the left, have padding on bottom an on the
+      outside the same as above, lines aligned. Lorem ipsum dolor.</p>
+    </div>
+
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+    elit posuere, consectetur magna congue, sagittis est. Pellentesque
+    est neque, aliquet nec consectetur in, mattis ac diam. Aliquam placerat
+    justo ut purus interdum, ac placerat lacus consequat. Ut dictum enim
+    posuere metus porta, et aliquam ex condimentum. Proin sagittis nisi leo, ac
+    pellentesque purus bibendum sit amet. Aliquam placerat justo ut purus
+    interdum, ac placerat lacus consequat. Ut dictum enim posuere metus porta,
+    et aliquam ex condimentum. </p>

diff --git a/doc/css/grid.rst b/doc/css/grid.rst
index 916b52d998620b46d58e92a21b1c48a85d9ce5a9..148599cb1971a1b445bae2aa3b6c7da5c2c17046 100644 (file)
--- a/doc/css/grid.rst
+++ b/doc/css/grid.rst
@@ -215,7 +215,7 @@ content based on screen width. Learn by example:
       <div class="m-col-l-6 m-push-l-3 m-nopad"><div class="m-frame m-text-center">.m-col-l-6 .m-push-l-3</div></div>
     </div>
     <div class="m-row">
-      <div class="m-col-s-8 m-push-s-4 m-nopadx m-nopadt"><div class="m-frame m-text-center">.m-col-s-8 .m-push-s-4<br/>first</div></div>
+      <div class="m-col-s-8 m-push-s-4 m-nopad"><div class="m-frame m-text-center">.m-col-s-8 .m-push-s-4<br/>first</div></div>
       <div class="m-col-s-4 m-pull-s-8 m-nopadx m-nopadt"><div class="m-frame m-text-center">.m-col-s-4 .m-pull-s-8<br/>second</div></div>
     </div>
 
@@ -245,21 +245,31 @@ on tiny screens:
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     consequat.</p>
 
-.. frame::
+.. raw:: html
 
-    .. raw:: html
+    <div class="m-col-s-6 m-center-s m-col-m-4 m-right-m">
+    <div class="m-frame m-text-center">.m-col-s-6 .m-center-s .m-col-m-4 .m-right-m</div>
+    </div>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat.</p>
 
-        <div class="m-col-s-6 m-center-s m-col-m-4 m-right-m">
-        <div class="m-note m-primary m-text-center">.m-col-s-6 .m-center-s .m-col-m-4 .m-right-m</div>
-        </div>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat.</p>
+.. container:: m-clearfix-m
+
+    ..
+
+Left-aligned floating blocks additionally have :css:`1rem` padding on the right
+and right-aligned blocks on the left. All of them have implicitly padding on bottom, except if the element is a last child. Add a :css:`.m-nopadb` class to
+them to disable bottom padding, if you want to preserve it even for a last
+child, add an empty :html:`<div></div>` element after.
 
 .. note-info::
 
     The floating works on any element, not just those that are :css:`.m-col-*`.
+    Moreover, if you'll float `components <{filename}/css/components.rst>`_
+    such as images or figures without using :css:`.m-col-*`, they will occupy
+    exactly the width of their contents without being shrunk or scaled.
 
 `Grid padding`_
 ===============
@@ -336,7 +346,7 @@ navigation on different devices.
 =========================
 
 It's usual that the content area of the page doesn't span the full 12-column
-width in order to avoid long unreadable lines. But sometimmes one might want to
+width in order to avoid long unreadable lines. But sometimes one might want to
 use the full available width --- for example to show big pictures or to fit
 many things next to each other.
 
@@ -356,7 +366,48 @@ put your nested content in elements marked with :css:`.m-container-inflate`.
 
 .. raw:: html
 
-    <div class="m-container-inflate"><div class="m-frame m-text-center">.m-container-inflate</div></div>
+    <div class="m-container-inflate">
+      <div class="m-frame m-text-center">.m-container-inflate</div>
+    </div>
+
+The :css:`.m-container-inflate` block has implicitly a :css:`1rem` padding
+after (but not on other sides and also not if it's the last child). Add a
+:css:`.m-nopadb` class to it to disable that, if you want to preserve the
+padding even for a last child, add an empty :html:`<div></div>` element after.
+
+It's also possible to tuck floating content out of the page flow by combining
+:css:`.m-left-*` with :css:`.m-container-inflate`:
+
+.. code:: html
+
+    <div class="m-container m-container-inflatable">
+      <div class="m-row">
+        <div class="m-col-l-10 m-push-l-1">
+          <div class="m-container-inflate m-col-l-6 m-right-l">
+            .m-container-inflate .m-col-l-6 .m-right-l
+          </div>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+          elit posuere, consectetur magna congue, sagittis est. Pellentesque
+          est neque, aliquet nec consectetur in, mattis ac diam.</p>
+        </div>
+      </div>
+    </div>
+
+.. raw:: html
+
+    <div class="m-container-inflate m-col-l-6 m-right-l">
+      <div class="m-frame m-text-center">.m-container-inflate .m-col-l-6 m-right-l</div>
+    </div>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id
+    elit posuere, consectetur magna congue, sagittis est. Pellentesque
+    est neque, aliquet nec consectetur in, mattis ac diam.</p>
+
+.. note-warning::
+
+    Similarly to `pushing and pulling`_, there may be corner cases where
+    inflating of floating elements may not work. To fix that, try specifying
+    all applicable :css:`.m-col-*-10` breakpoints for the inflatable column and
+    :css:`.m-right-*` / :css:`.m-left-*` for the floating element explicitly.
 
 `Debug CSS`_
 ============

diff --git a/doc/css/page-layout-test.rst b/doc/css/page-layout-test.rst
index f31621b8f90b5534d9829d1894eb69662aa90305..9c6eacd2840eaf3ff0e48b173b2261a1ada95f5f 100644 (file)
--- a/doc/css/page-layout-test.rst
+++ b/doc/css/page-layout-test.rst
@@ -25,7 +25,7 @@
 Test
 ####
 
-:save_as: css/page-layout/test/index.html
+:slug: css/page-layout/test
 :breadcrumb: {filename}/css.rst CSS
              {filename}/css/page-layout.rst Page layout
 
@@ -82,6 +82,110 @@ elements should be flattened and nothing should jump when highlighted.
 
     Frame will have its left border fattened.
 
+.. code-figure::
+
+    .. code:: c++
+
+        /* The code will have a custom border */
+
+    The figure as well.
+
+`Floating components`_
+----------------------
+
+.. container:: m-col-m-4 m-left-m
+
+    .. note-success::
+
+        Changed on the left side.
+
+.. container:: m-col-m-4 m-right-m
+
+    .. note-danger::
+
+        No change if not fullsize.
+
+Should behave as expected on the left side, but not on the right (unless the
+window size is small). Centered note below should be marked also only when
+touching the left side, not when centered.
+
+.. container:: m-clearfix-l
+
+    ..
+
+.. container:: m-col-m-4 m-left-m
+
+    .. block-success:: Block
+
+        Changed on the left side.
+
+.. container:: m-col-m-4 m-right-m
+
+    .. block-danger:: Block
+
+        No change if not fullsize.
+
+Neither the blocks should do that.
+
+.. container:: m-clearfix-l
+
+    ..
+
+.. container:: m-col-m-4 m-center-m
+
+    .. block-danger:: Centered
+
+        No change if not fullsize.
+
+.. container:: m-col-m-4 m-center-m
+
+    .. frame:: Watch the border
+
+        No change if not fullsize.
+
+.. container:: m-col-m-8 m-center-m
+
+    .. code:: c++
+
+        /* Change on the left on small screen sizes. */
+
+.. container:: m-col-m-10 m-center-m
+
+    .. console-figure::
+
+        .. code:: shell-session
+
+            $ code will have a custom border on small screens
+
+        The figure as well.
+
+`Floating components, inflated`_
+--------------------------------
+
+.. container:: m-col-l-4 m-left-l m-container-inflate
+
+    .. note-success::
+
+        Changed.
+
+.. container:: m-col-l-4 m-right-l m-container-inflate
+
+    .. note-success::
+
+        Not changed if not on the left.
+
+Lorem ipsum.
+
+.. container:: m-clearfix-l
+
+    ..
+
+.. container:: m-container-inflate
+
+    .. note-info:: Yes.
+
+        This changes as well.
+
 `Nested components`_
 --------------------
 

diff --git a/doc/css/typography.rst b/doc/css/typography.rst
index 129ead06a6422b87abe071178d6247e0bef01a24..e6c8e91a4c5ff44cc04c510a171d9580d39eec4d 100644 (file)
--- a/doc/css/typography.rst
+++ b/doc/css/typography.rst
@@ -421,4 +421,6 @@ elements have :css:`1rem` padding on the bottom, except when the :html:`<li>`
 is last, to achieve consistent spacing for inflated lists.
 
 The :css:`1rem` padding on the bottom can be disabled with :css:`.m-nopadb`,
-similarly as with `grid layouts <{filename}/css/grid.rst#grid-padding>`_.
+similarly as with `grid layouts <{filename}/css/grid.rst#grid-padding>`_. On
+the other hand, if you want to preserve it, add an empty :html:`<div></div>`
+element after.