From: Vladimír Vondruš <mosra@centrum.cz>
Date: Mon, 29 Apr 2019 17:20:51 +0000 (+0200)
Subject: css: nicely packed code + console figure.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=f892fdd3637b988b243ac5f525d9008797bc180e;p=blog.git

css: nicely packed code + console figure.
---

diff --git a/css/m-components.css b/css/m-components.css
index 6c66b091..d5197cc6 100644
--- 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 55ca32a9..c2a92391 100644
--- 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 d51702d5..55d10a6e 100644
--- 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 c1035e31..71d246c9 100644
--- 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 04a1c5ab..74bcdf32 100644
--- 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 c58651fe..cc04184a 100644
--- 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 0877ccab..af8973fb 100644
--- 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 6fc1e485..f099aeb5 100644
--- 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::