From 5cc0123a908a569abcc2dc3cd6d7ca69a05da0b7 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= <mosra@centrum.cz>
Date: Wed, 6 Dec 2017 20:01:43 +0100
Subject: [PATCH] css: make it possible and nice-looking to use <p> inside <li>
 and <td>.

Paragraphs inside list items and table cells are neither justified nor
indented, because it's often undesirable in such constrained spaces.
Also, in case of <li>, the padding after block elements is not removed
in order to have the spacing consistent.
---
 css/m-components.css        | 25 ++++++++++++++-
 css/m-dark.compiled.css     | 20 +++++++++++-
 css/m-light.compiled.css    | 20 +++++++++++-
 doc/css/components-test.rst | 50 ++++++++++++++++++++++++++++++
 doc/css/components.rst      |  7 ++++-
 doc/css/typography.rst      | 61 +++++++++++++++++++++++++++++++------
 6 files changed, 170 insertions(+), 13 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index 84086c67..4e979baa 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -57,7 +57,8 @@ main p {
   text-indent: var(--paragraph-indent);
   text-align: var(--paragraph-align);
 }
-main p.m-noindent {
+/* Remove indentation and justification where it doesn't make sense */
+main p.m-noindent, li p, table.m-table td p {
   text-indent: 0;
   text-align: left;
 }
@@ -1363,4 +1364,26 @@ figure.m-figure:last-child, .m-imagegrid:last-child, div.m-math:last-child {
   margin-bottom: 0;
 }
 
+/* List items usually have just inline elements and are kept compact. If (sane)
+   block elements are inside list items, they have spacing even as last, but
+   not if the list item is the last. */
+li > p:last-child, li > blockquote:last-child, li > pre:last-child,
+li > figure.m-code-figure:last-child, li > figure.m-console-figure:last-child,
+li > .m-note:last-child, li > .m-frame:last-child, li > .m-block:last-child,
+li > .m-button:last-child, li > div.m-scroll:last-child,
+li > table.m-table:last-child, li > div.m-image:last-child,
+li > img.m-image:last-child, li > figure.m-figure:last-child,
+li > div.m-math:last-child {
+  margin-bottom: 1rem;
+}
+li > p:last-child, li:last-child > blockquote:last-child, li:last-child > pre:last-child,
+li:last-child > figure.m-code-figure:last-child, li:last-child > figure.m-console-figure:last-child,
+li:last-child > .m-note:last-child, li:last-child > .m-frame:last-child, li:last-child > .m-block:last-child,
+li:last-child > .m-button:last-child, li:last-child > div.m-scroll:last-child,
+li:last-child > table.m-table:last-child, li:last-child > div.m-image:last-child,
+li:last-child > img.m-image:last-child, li:last-child > figure.m-figure:last-child,
+li:last-child > div.m-math:last-child {
+  margin-bottom: 0;
+}
+
 /* kate: indent-width 2; */
diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index 551acb21..c9957744 100644
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -419,7 +419,7 @@ main p {
   text-indent: 1.5rem;
   text-align: justify;
 }
-main p.m-noindent {
+main p.m-noindent, li p, table.m-table td p {
   text-indent: 0;
   text-align: left;
 }
@@ -1641,6 +1641,24 @@ table.m-table:last-child, img.m-image:last-child, div.m-image:last-child,
 figure.m-figure:last-child, .m-imagegrid:last-child, div.m-math:last-child {
   margin-bottom: 0;
 }
+li > p:last-child, li > blockquote:last-child, li > pre:last-child,
+li > figure.m-code-figure:last-child, li > figure.m-console-figure:last-child,
+li > .m-note:last-child, li > .m-frame:last-child, li > .m-block:last-child,
+li > .m-button:last-child, li > div.m-scroll:last-child,
+li > table.m-table:last-child, li > div.m-image:last-child,
+li > img.m-image:last-child, li > figure.m-figure:last-child,
+li > div.m-math:last-child {
+  margin-bottom: 1rem;
+}
+li > p:last-child, li:last-child > blockquote:last-child, li:last-child > pre:last-child,
+li:last-child > figure.m-code-figure:last-child, li:last-child > figure.m-console-figure:last-child,
+li:last-child > .m-note:last-child, li:last-child > .m-frame:last-child, li:last-child > .m-block:last-child,
+li:last-child > .m-button:last-child, li:last-child > div.m-scroll:last-child,
+li:last-child > table.m-table:last-child, li:last-child > div.m-image:last-child,
+li:last-child > img.m-image:last-child, li:last-child > figure.m-figure:last-child,
+li:last-child > div.m-math:last-child {
+  margin-bottom: 0;
+}
 
 .m-code .hll { background-color: #34424d }
 .m-code .c { color: #a5c9ea }
diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index 4a900489..8f36b712 100644
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -419,7 +419,7 @@ main p {
   text-indent: 1.5rem;
   text-align: justify;
 }
-main p.m-noindent {
+main p.m-noindent, li p, table.m-table td p {
   text-indent: 0;
   text-align: left;
 }
@@ -1641,6 +1641,24 @@ table.m-table:last-child, img.m-image:last-child, div.m-image:last-child,
 figure.m-figure:last-child, .m-imagegrid:last-child, div.m-math:last-child {
   margin-bottom: 0;
 }
+li > p:last-child, li > blockquote:last-child, li > pre:last-child,
+li > figure.m-code-figure:last-child, li > figure.m-console-figure:last-child,
+li > .m-note:last-child, li > .m-frame:last-child, li > .m-block:last-child,
+li > .m-button:last-child, li > div.m-scroll:last-child,
+li > table.m-table:last-child, li > div.m-image:last-child,
+li > img.m-image:last-child, li > figure.m-figure:last-child,
+li > div.m-math:last-child {
+  margin-bottom: 1rem;
+}
+li > p:last-child, li:last-child > blockquote:last-child, li:last-child > pre:last-child,
+li:last-child > figure.m-code-figure:last-child, li:last-child > figure.m-console-figure:last-child,
+li:last-child > .m-note:last-child, li:last-child > .m-frame:last-child, li:last-child > .m-block:last-child,
+li:last-child > .m-button:last-child, li:last-child > div.m-scroll:last-child,
+li:last-child > table.m-table:last-child, li:last-child > div.m-image:last-child,
+li:last-child > img.m-image:last-child, li:last-child > figure.m-figure:last-child,
+li:last-child > div.m-math:last-child {
+  margin-bottom: 0;
+}
 
 .m-console .hll { background-color: #ffffcc }
 .m-console .g-AnsiBlack { color: #000000 }
diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst
index 87782bd2..5807edf6 100644
--- a/doc/css/components-test.rst
+++ b/doc/css/components-test.rst
@@ -32,6 +32,9 @@ Test
 .. role:: html(code)
     :language: html
 
+.. contents::
+    :class: m-block m-default
+
 Blocks
 ======
 
@@ -752,6 +755,32 @@ Tables
       </tbody>
     </table>
 
+Table with paragraphs
+---------------------
+
+.. raw:: html
+
+    <table class="m-table">
+      <tr>
+        <td>
+          <p>A paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit.</p>
+          <p>A second paragraph.</p>
+        </td>
+        <td>
+          <p>Another.</p>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <p>Another. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ultrices a erat eu suscipit.</p>
+        </td>
+        <td>
+          <p>A paragraph.</p>
+          <p>A second paragraph.</p>
+        </td>
+      </tr>
+    </table>
+
 Images
 ======
 
@@ -957,3 +986,24 @@ Console figure:
     output</pre>
         And a description of that illegal crackery that's done above.
     </figure>
+
+List with components inside
+===========================
+
+.. raw:: html
+
+    <ul>
+      <li>
+        <p>A paragraph.</p>
+        <div class="m-note m-info">An info note.</div>
+      </li>
+      <li>
+        <a class="m-button m-primary">A button</a>
+      </li>
+      <li>
+        <p>Next item.</p>
+        <p>Next item next paragraph.</p>
+      </li>
+    </ul>
+
+    <p>Paragraph after.</p>
diff --git a/doc/css/components.rst b/doc/css/components.rst
index 9811f34e..4ecee21e 100644
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -562,6 +562,10 @@ classes from above:
       </tbody>
     </table></div>
 
+Similarly to `lists <{filename}/css/typography.rst#lists-diaries>`_, if using
+:html:`<p>` elements inside :html:`<td>`, they are neither indented nor
+justified.
+
 `Images`_
 =========
 
@@ -1008,7 +1012,8 @@ the ``depth`` value returned on stderr can be taken as a base for the
 Similarly to `typography elements <{filename}/css/typography.rst#padding>`_;
 blocks, notes, frames, tables, images, figures, image grids, code and math
 blocks and code figures have :css:`1rem` padding after, except when they are
-the last element, to avoid excessive spacing.
+the last element, to avoid excessive spacing. The list special casing applies
+here as well.
 
 `Responsive utilities`_
 =======================
diff --git a/doc/css/typography.rst b/doc/css/typography.rst
index 2fcd42ab..e501ccb0 100644
--- a/doc/css/typography.rst
+++ b/doc/css/typography.rst
@@ -49,11 +49,10 @@ great by default.
 
 Each :html:`<p>` element inside :html:`<main>` has the first line indented, is
 justified and is separated from the following content by some padding. The
-:html:`<blockquote>` elements are, in addition, indented with a distinctive
-line on the left. Because the indentation may look distracting for manually
-wrapped line blocks, assign :css:`.m-poem` to such paragraph to indent all
-lines the same way. To remove the indentation and justification altogether, use
-:css:`.m-noindent`.
+:html:`<blockquote>` elements are indented with a distinctive line on the left.
+Because the indentation may look distracting for manually wrapped line blocks,
+assign :css:`.m-poem` to such paragraph to indent all lines the same way. To
+remove the indentation and justification altogether, use :css:`.m-noindent`.
 
 .. code-figure::
 
@@ -64,8 +63,9 @@ lines the same way. To remove the indentation and justification altogether, use
         aliquet nec consectetur in, mattis ac diam. Aliquam placerat justo ut purus
         interdum, ac placerat lacus consequat.</p>
 
-        <blockquote>Ut dictum enim posuere metus porta, et aliquam ex condimentum.
-        Proin sagittis nisi leo, ac pellentesque purus bibendum sit amet.</blockquote>
+        <blockquote><p>Ut dictum enim posuere metus porta, et aliquam ex condimentum.
+        Proin sagittis nisi leo, ac pellentesque purus bibendum sit
+        amet.</p></blockquote>
 
         <p class="m-poem">
         Curabitur<br/>
@@ -84,8 +84,9 @@ lines the same way. To remove the indentation and justification altogether, use
         aliquet nec consectetur in, mattis ac diam. Aliquam placerat justo ut purus
         interdum, ac placerat lacus consequat.</p>
 
-        <blockquote>Ut dictum enim posuere metus porta, et aliquam ex condimentum.
-        Proin sagittis nisi leo, ac pellentesque purus bibendum sit amet.</blockquote>
+        <blockquote><p>Ut dictum enim posuere metus porta, et aliquam ex condimentum.
+        Proin sagittis nisi leo, ac pellentesque purus bibendum sit
+        amet.</p></blockquote>
 
         <p class="m-poem">
         Curabitur<br/>
@@ -197,6 +198,45 @@ definitions.
           <dd>Finally put my pants on. Too late.</dd>
         </dl>
 
+The lists are compact by default, wrap item content in :html:`<p>` to make them
+inflated. Paragraphs in list items are neither indented nor justified.
+
+.. code-figure::
+
+    .. code:: html
+
+        <ul>
+          <li>
+            <p>Item 1, first paragraph.</p>
+            <p>Item 1, second paragraph.</p>
+          </li>
+          <li>
+            <p>Item 2</p>
+            <ol>
+              <li><p>An item</p></li>
+              <li><p>Another item</p></li>
+            </ol>
+          </li>
+          <li><p>Item 3</p></li>
+        </ul>
+
+    .. raw:: html
+
+        <ul>
+          <li>
+            <p>Item 1, first paragraph.</p>
+            <p>Item 1, second paragraph.</p>
+          </li>
+          <li>
+            <p>Item 2</p>
+            <ol>
+              <li><p>An item</p></li>
+              <li><p>Another item</p></li>
+            </ol>
+          </li>
+          <li><p>Item 3</p></li>
+        </ul>
+
 `Headings`_
 ===========
 
@@ -337,3 +377,6 @@ for aligning and floating blocks in a similar way.
 Block elements :html:`<p>`, :html:`<ol>`, :html:`<ul>`, :html:`<dl>`,
 :html:`<blockqote>`, :html:`<pre>` and :html:`<hr>` by default have :css:`1rem`
 padding after, except when they are the last child, to avoid excessive spacing.
+A special case is lists --- components directly inside :html:`<li>` elements
+have :css:`1rem` padding after, except when the :html:`<li>` is last, to
+achieve consistent spacing for inflated lists.
-- 
2.30.2