css: nicely packed code + console figure.

diff --git a/css/m-components.css b/css/m-components.css
index 6c66b091ff9dd10cc1f908918faad056f36f1e98..d5197cc606fe9f331447adfa0e5913f7830e05f2 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -615,6 +615,16 @@ figure.m-figure.m-fullwidth:after {
   border-bottom-right-radius: 0;
 }
 
+/* "Nopad" code block inside a code/console figure -- show code and console
+   output nicely packed together */
+.m-code-figure > pre.m-nopad, .m-console-figure > pre.m-nopad {
+  margin-left: -0.875rem;
+  margin-right: -0.875rem;
+  margin-top: -1rem;
+  margin-bottom: -0.875rem;
+  padding-left: 0.875rem;
+}
+
 /* Figure caption */
 figure.m-figure figcaption, .m-code-figure figcaption, .m-console-figure figcaption {
   margin-top: 0.5rem;

diff --git a/css/m-dark+documentation.compiled.css b/css/m-dark+documentation.compiled.css
index 55ca32a9aa12a42030169a06bf73f74716aaf2ed..c2a92391f98c6d94cc4b593ecdc58d02e1ddcc14 100644 (file)
--- a/css/m-dark+documentation.compiled.css
+++ b/css/m-dark+documentation.compiled.css
@@ -880,6 +880,13 @@ figure.m-figure.m-fullwidth:after {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
+.m-code-figure > pre.m-nopad, .m-console-figure > pre.m-nopad {
+  margin-left: -0.875rem;
+  margin-right: -0.875rem;
+  margin-top: -1rem;
+  margin-bottom: -0.875rem;
+  padding-left: 0.875rem;
+}
 figure.m-figure figcaption, .m-code-figure figcaption, .m-console-figure figcaption {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -2251,6 +2258,11 @@ article:last-child, article section:last-child { margin-bottom: 0; }
   border-bottom-left-radius: 0;
   border-left-width: 0.25rem;
 }
+.m-container-inflatable section:target > .m-code-figure > pre.m-nopad,
+.m-container-inflatable section:target > .m-console-figure > pre.m-nopad {
+  margin-left: -0.75rem;
+  padding-left: -0.75rem;
+}
 @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,

diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index d51702d5bf9391266df417d10daaacb861921730..55d10a6ef667d0fda7a9e6173c22c7c2659ee814 100644 (file)
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -880,6 +880,13 @@ figure.m-figure.m-fullwidth:after {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
+.m-code-figure > pre.m-nopad, .m-console-figure > pre.m-nopad {
+  margin-left: -0.875rem;
+  margin-right: -0.875rem;
+  margin-top: -1rem;
+  margin-bottom: -0.875rem;
+  padding-left: 0.875rem;
+}
 figure.m-figure figcaption, .m-code-figure figcaption, .m-console-figure figcaption {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -2251,6 +2258,11 @@ article:last-child, article section:last-child { margin-bottom: 0; }
   border-bottom-left-radius: 0;
   border-left-width: 0.25rem;
 }
+.m-container-inflatable section:target > .m-code-figure > pre.m-nopad,
+.m-container-inflatable section:target > .m-console-figure > pre.m-nopad {
+  margin-left: -0.75rem;
+  padding-left: -0.75rem;
+}
 @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,

diff --git a/css/m-layout.css b/css/m-layout.css
index c1035e316d2e5006f5730fbe813f962a799a6669..71d246c932c4ac4b8ecb1b0752bd8612668fff3e 100644 (file)
--- a/css/m-layout.css
+++ b/css/m-layout.css
@@ -541,6 +541,11 @@ article:last-child, article section:last-child { margin-bottom: 0; }
   border-bottom-left-radius: 0;
   border-left-width: 0.25rem;
 }
+.m-container-inflatable section:target > .m-code-figure > pre.m-nopad,
+.m-container-inflatable section:target > .m-console-figure > pre.m-nopad {
+  margin-left: -0.75rem;
+  padding-left: -0.75rem;
+}
 /* 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. */

diff --git a/css/m-light+documentation.compiled.css b/css/m-light+documentation.compiled.css
index 04a1c5ab933ef8a138eac84e56889ec641477ca0..74bcdf32d50fbad0a4c7dec828c734920ab31c1b 100644 (file)
--- a/css/m-light+documentation.compiled.css
+++ b/css/m-light+documentation.compiled.css
@@ -880,6 +880,13 @@ figure.m-figure.m-fullwidth:after {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
+.m-code-figure > pre.m-nopad, .m-console-figure > pre.m-nopad {
+  margin-left: -0.875rem;
+  margin-right: -0.875rem;
+  margin-top: -1rem;
+  margin-bottom: -0.875rem;
+  padding-left: 0.875rem;
+}
 figure.m-figure figcaption, .m-code-figure figcaption, .m-console-figure figcaption {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -2251,6 +2258,11 @@ article:last-child, article section:last-child { margin-bottom: 0; }
   border-bottom-left-radius: 0;
   border-left-width: 0.25rem;
 }
+.m-container-inflatable section:target > .m-code-figure > pre.m-nopad,
+.m-container-inflatable section:target > .m-console-figure > pre.m-nopad {
+  margin-left: -0.75rem;
+  padding-left: -0.75rem;
+}
 @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,

diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index c58651fea145612c3ab86f2d53f6a735e68782a8..cc04184a1fd594cbad31bac26a4d3272226480cf 100644 (file)
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -880,6 +880,13 @@ figure.m-figure.m-fullwidth:after {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
+.m-code-figure > pre.m-nopad, .m-console-figure > pre.m-nopad {
+  margin-left: -0.875rem;
+  margin-right: -0.875rem;
+  margin-top: -1rem;
+  margin-bottom: -0.875rem;
+  padding-left: 0.875rem;
+}
 figure.m-figure figcaption, .m-code-figure figcaption, .m-console-figure figcaption {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -2251,6 +2258,11 @@ article:last-child, article section:last-child { margin-bottom: 0; }
   border-bottom-left-radius: 0;
   border-left-width: 0.25rem;
 }
+.m-container-inflatable section:target > .m-code-figure > pre.m-nopad,
+.m-container-inflatable section:target > .m-console-figure > pre.m-nopad {
+  margin-left: -0.75rem;
+  padding-left: -0.75rem;
+}
 @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,

diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst
index 0877ccabef2a3f334f648f1bb15ffbf9c1155498..af8973fb2c66edb4c00b3f7779c619e565e1bc26 100644 (file)
--- a/doc/css/components-test.rst
+++ b/doc/css/components-test.rst
@@ -1266,6 +1266,28 @@ should not affect it.
         <pre>And a resulting output.</pre>
     </figure>
 
+Code figure with a "nopad" console output inside:
+
+.. raw:: html
+
+    <figure class="m-code-figure">
+        <pre class="m-code">Some
+        code
+    snippet</pre>
+        <pre class="m-console m-nopad">And a resulting output.</pre>
+    </figure>
+
+Console figure with a "nopad" code output inside:
+
+.. raw:: html
+
+    <figure class="m-console-figure">
+        <pre class="m-console">Some
+        console
+    output</pre>
+        <pre class="m-code m-nopad">And the code that goes out.</pre>
+    </figure>
+
 Console figure:
 
 .. raw:: html

diff --git a/doc/css/components.rst b/doc/css/components.rst
index 6fc1e485f32944889794553c0126ecf73f594d99..f099aeb5aa913a730f82bc368fd4a88a668c7af8 100644 (file)
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -963,6 +963,28 @@ bit of a figure inception shown here):
 
 It's also possible to have matching border for a console output. Just use
 :css:`.m-console-figure` instead of :css:`.m-code-figure` on the outer element.
+For reduced clutter when combining a code figure with console output (and vice
+versa), mark the second :html:`<pre>` with :css:`.m-nopad`:
+
+.. code-figure::
+
+    .. code:: html
+
+        <figure class="m-code-figure">
+            <pre class="m-code">Some
+            code
+        snippet</pre>
+            <pre class="m-console m-nopad">And a resulting output.</pre>
+        </figure>
+
+    .. raw:: html
+
+        <figure class="m-code-figure">
+            <pre class="m-code">Some
+            code
+        snippet</pre>
+            <pre class="m-console m-nopad">And a resulting output.</pre>
+        </figure>
 
 .. note-info::