From: Vladimír Vondruš <mosra@centrum.cz>
Date: Sun, 26 Aug 2018 14:27:48 +0000 (+0200)
Subject: css: add m-block-dot-* to have linear lists delimited by a center dot.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=89ef6a0d94110e87be4ccfa7dbd205674ab4f41c;p=blog.git

css: add m-block-dot-* to have linear lists delimited by a center dot.
---

diff --git a/css/m-components.css b/css/m-components.css
index b32c8853..495c11a0 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -185,20 +185,32 @@ ul[class*='m-block-'] li, ol[class*='m-block-'] li {
 ul[class*='m-block-bar-'] li:not(:last-child)::after, ol[class*='m-block-bar-'] li:not(:last-child)::after {
   content: " | ";
 }
+ul[class*='m-block-dot-'] li:not(:last-child)::after, ol[class*='m-block-dot-'] li:not(:last-child)::after {
+  content: " • ";
+}
 @media screen and (min-width: 576px) {
-  ul.m-block-bar-s, ol.m-block-bar-s { padding-left: 2rem; }
-  ul.m-block-bar-s li, ol.m-block-bar-s li { display: list-item; }
-  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-s, ol.m-block-bar-s,
+  ul.m-block-dot-s, ol.m-block-dot-s { padding-left: 2rem; }
+  ul.m-block-bar-s li, ol.m-block-bar-s li,
+  ul.m-block-dot-s li, ol.m-block-dot-s li { display: list-item; }
+  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after,
+  ul.m-block-dot-s li:not(:last-child)::after, ol.m-block-dot-s li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 768px) {
-  ul.m-block-bar-m, ol.m-block-bar-m { padding-left: 2rem; }
-  ul.m-block-bar-m li, ol.m-block-bar-m li { display: list-item; }
-  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-m, ol.m-block-bar-m,
+  ul.m-block-dot-m, ol.m-block-dot-m { padding-left: 2rem; }
+  ul.m-block-bar-m li, ol.m-block-bar-m li,
+  ul.m-block-dot-m li, ol.m-block-dot-m li { display: list-item; }
+  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after,
+  ul.m-block-dot-m li:not(:last-child)::after, ol.m-block-dot-m li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 992px) {
-  ul.m-block-bar-l, ol.m-block-bar-l { padding-left: 2rem; }
-  ul.m-block-bar-l li, ol.m-block-bar-l li { display: list-item; }
-  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-l, ol.m-block-bar-l,
+  ul.m-block-dot-l, ol.m-block-dot-l { padding-left: 2rem; }
+  ul.m-block-bar-l li, ol.m-block-bar-l li,
+  ul.m-block-dot-l li, ol.m-block-dot-l li { display: list-item; }
+  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after,
+  ul.m-block-dot-l li:not(:last-child)::after, ol.m-block-dot-l li:not(:last-child)::after { content: ""; }
 }
 
 /* Special paragraph styling */
diff --git a/css/m-dark+doxygen.compiled.css b/css/m-dark+doxygen.compiled.css
index 0bd8572f..85150baf 100644
--- a/css/m-dark+doxygen.compiled.css
+++ b/css/m-dark+doxygen.compiled.css
@@ -540,20 +540,32 @@ ul[class*='m-block-'] li, ol[class*='m-block-'] li {
 ul[class*='m-block-bar-'] li:not(:last-child)::after, ol[class*='m-block-bar-'] li:not(:last-child)::after {
   content: " | ";
 }
+ul[class*='m-block-dot-'] li:not(:last-child)::after, ol[class*='m-block-dot-'] li:not(:last-child)::after {
+  content: " • ";
+}
 @media screen and (min-width: 576px) {
-  ul.m-block-bar-s, ol.m-block-bar-s { padding-left: 2rem; }
-  ul.m-block-bar-s li, ol.m-block-bar-s li { display: list-item; }
-  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-s, ol.m-block-bar-s,
+  ul.m-block-dot-s, ol.m-block-dot-s { padding-left: 2rem; }
+  ul.m-block-bar-s li, ol.m-block-bar-s li,
+  ul.m-block-dot-s li, ol.m-block-dot-s li { display: list-item; }
+  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after,
+  ul.m-block-dot-s li:not(:last-child)::after, ol.m-block-dot-s li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 768px) {
-  ul.m-block-bar-m, ol.m-block-bar-m { padding-left: 2rem; }
-  ul.m-block-bar-m li, ol.m-block-bar-m li { display: list-item; }
-  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-m, ol.m-block-bar-m,
+  ul.m-block-dot-m, ol.m-block-dot-m { padding-left: 2rem; }
+  ul.m-block-bar-m li, ol.m-block-bar-m li,
+  ul.m-block-dot-m li, ol.m-block-dot-m li { display: list-item; }
+  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after,
+  ul.m-block-dot-m li:not(:last-child)::after, ol.m-block-dot-m li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 992px) {
-  ul.m-block-bar-l, ol.m-block-bar-l { padding-left: 2rem; }
-  ul.m-block-bar-l li, ol.m-block-bar-l li { display: list-item; }
-  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-l, ol.m-block-bar-l,
+  ul.m-block-dot-l, ol.m-block-dot-l { padding-left: 2rem; }
+  ul.m-block-bar-l li, ol.m-block-bar-l li,
+  ul.m-block-dot-l li, ol.m-block-dot-l li { display: list-item; }
+  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after,
+  ul.m-block-dot-l li:not(:last-child)::after, ol.m-block-dot-l li:not(:last-child)::after { content: ""; }
 }
 p.m-poem {
   text-indent: 0;
diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index a904f4fa..b2459dba 100644
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -540,20 +540,32 @@ ul[class*='m-block-'] li, ol[class*='m-block-'] li {
 ul[class*='m-block-bar-'] li:not(:last-child)::after, ol[class*='m-block-bar-'] li:not(:last-child)::after {
   content: " | ";
 }
+ul[class*='m-block-dot-'] li:not(:last-child)::after, ol[class*='m-block-dot-'] li:not(:last-child)::after {
+  content: " • ";
+}
 @media screen and (min-width: 576px) {
-  ul.m-block-bar-s, ol.m-block-bar-s { padding-left: 2rem; }
-  ul.m-block-bar-s li, ol.m-block-bar-s li { display: list-item; }
-  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-s, ol.m-block-bar-s,
+  ul.m-block-dot-s, ol.m-block-dot-s { padding-left: 2rem; }
+  ul.m-block-bar-s li, ol.m-block-bar-s li,
+  ul.m-block-dot-s li, ol.m-block-dot-s li { display: list-item; }
+  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after,
+  ul.m-block-dot-s li:not(:last-child)::after, ol.m-block-dot-s li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 768px) {
-  ul.m-block-bar-m, ol.m-block-bar-m { padding-left: 2rem; }
-  ul.m-block-bar-m li, ol.m-block-bar-m li { display: list-item; }
-  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-m, ol.m-block-bar-m,
+  ul.m-block-dot-m, ol.m-block-dot-m { padding-left: 2rem; }
+  ul.m-block-bar-m li, ol.m-block-bar-m li,
+  ul.m-block-dot-m li, ol.m-block-dot-m li { display: list-item; }
+  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after,
+  ul.m-block-dot-m li:not(:last-child)::after, ol.m-block-dot-m li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 992px) {
-  ul.m-block-bar-l, ol.m-block-bar-l { padding-left: 2rem; }
-  ul.m-block-bar-l li, ol.m-block-bar-l li { display: list-item; }
-  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-l, ol.m-block-bar-l,
+  ul.m-block-dot-l, ol.m-block-dot-l { padding-left: 2rem; }
+  ul.m-block-bar-l li, ol.m-block-bar-l li,
+  ul.m-block-dot-l li, ol.m-block-dot-l li { display: list-item; }
+  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after,
+  ul.m-block-dot-l li:not(:last-child)::after, ol.m-block-dot-l li:not(:last-child)::after { content: ""; }
 }
 p.m-poem {
   text-indent: 0;
diff --git a/css/m-light+doxygen.compiled.css b/css/m-light+doxygen.compiled.css
index 0afc2c26..c7ca76e8 100644
--- a/css/m-light+doxygen.compiled.css
+++ b/css/m-light+doxygen.compiled.css
@@ -540,20 +540,32 @@ ul[class*='m-block-'] li, ol[class*='m-block-'] li {
 ul[class*='m-block-bar-'] li:not(:last-child)::after, ol[class*='m-block-bar-'] li:not(:last-child)::after {
   content: " | ";
 }
+ul[class*='m-block-dot-'] li:not(:last-child)::after, ol[class*='m-block-dot-'] li:not(:last-child)::after {
+  content: " • ";
+}
 @media screen and (min-width: 576px) {
-  ul.m-block-bar-s, ol.m-block-bar-s { padding-left: 2rem; }
-  ul.m-block-bar-s li, ol.m-block-bar-s li { display: list-item; }
-  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-s, ol.m-block-bar-s,
+  ul.m-block-dot-s, ol.m-block-dot-s { padding-left: 2rem; }
+  ul.m-block-bar-s li, ol.m-block-bar-s li,
+  ul.m-block-dot-s li, ol.m-block-dot-s li { display: list-item; }
+  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after,
+  ul.m-block-dot-s li:not(:last-child)::after, ol.m-block-dot-s li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 768px) {
-  ul.m-block-bar-m, ol.m-block-bar-m { padding-left: 2rem; }
-  ul.m-block-bar-m li, ol.m-block-bar-m li { display: list-item; }
-  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-m, ol.m-block-bar-m,
+  ul.m-block-dot-m, ol.m-block-dot-m { padding-left: 2rem; }
+  ul.m-block-bar-m li, ol.m-block-bar-m li,
+  ul.m-block-dot-m li, ol.m-block-dot-m li { display: list-item; }
+  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after,
+  ul.m-block-dot-m li:not(:last-child)::after, ol.m-block-dot-m li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 992px) {
-  ul.m-block-bar-l, ol.m-block-bar-l { padding-left: 2rem; }
-  ul.m-block-bar-l li, ol.m-block-bar-l li { display: list-item; }
-  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-l, ol.m-block-bar-l,
+  ul.m-block-dot-l, ol.m-block-dot-l { padding-left: 2rem; }
+  ul.m-block-bar-l li, ol.m-block-bar-l li,
+  ul.m-block-dot-l li, ol.m-block-dot-l li { display: list-item; }
+  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after,
+  ul.m-block-dot-l li:not(:last-child)::after, ol.m-block-dot-l li:not(:last-child)::after { content: ""; }
 }
 p.m-poem {
   text-indent: 0;
diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index ea40bc14..2b58d04e 100644
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -540,20 +540,32 @@ ul[class*='m-block-'] li, ol[class*='m-block-'] li {
 ul[class*='m-block-bar-'] li:not(:last-child)::after, ol[class*='m-block-bar-'] li:not(:last-child)::after {
   content: " | ";
 }
+ul[class*='m-block-dot-'] li:not(:last-child)::after, ol[class*='m-block-dot-'] li:not(:last-child)::after {
+  content: " • ";
+}
 @media screen and (min-width: 576px) {
-  ul.m-block-bar-s, ol.m-block-bar-s { padding-left: 2rem; }
-  ul.m-block-bar-s li, ol.m-block-bar-s li { display: list-item; }
-  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-s, ol.m-block-bar-s,
+  ul.m-block-dot-s, ol.m-block-dot-s { padding-left: 2rem; }
+  ul.m-block-bar-s li, ol.m-block-bar-s li,
+  ul.m-block-dot-s li, ol.m-block-dot-s li { display: list-item; }
+  ul.m-block-bar-s li:not(:last-child)::after, ol.m-block-bar-s li:not(:last-child)::after,
+  ul.m-block-dot-s li:not(:last-child)::after, ol.m-block-dot-s li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 768px) {
-  ul.m-block-bar-m, ol.m-block-bar-m { padding-left: 2rem; }
-  ul.m-block-bar-m li, ol.m-block-bar-m li { display: list-item; }
-  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-m, ol.m-block-bar-m,
+  ul.m-block-dot-m, ol.m-block-dot-m { padding-left: 2rem; }
+  ul.m-block-bar-m li, ol.m-block-bar-m li,
+  ul.m-block-dot-m li, ol.m-block-dot-m li { display: list-item; }
+  ul.m-block-bar-m li:not(:last-child)::after, ol.m-block-bar-m li:not(:last-child)::after,
+  ul.m-block-dot-m li:not(:last-child)::after, ol.m-block-dot-m li:not(:last-child)::after { content: ""; }
 }
 @media screen and (min-width: 992px) {
-  ul.m-block-bar-l, ol.m-block-bar-l { padding-left: 2rem; }
-  ul.m-block-bar-l li, ol.m-block-bar-l li { display: list-item; }
-  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after { content: ""; }
+  ul.m-block-bar-l, ol.m-block-bar-l,
+  ul.m-block-dot-l, ol.m-block-dot-l { padding-left: 2rem; }
+  ul.m-block-bar-l li, ol.m-block-bar-l li,
+  ul.m-block-dot-l li, ol.m-block-dot-l li { display: list-item; }
+  ul.m-block-bar-l li:not(:last-child)::after, ol.m-block-bar-l li:not(:last-child)::after,
+  ul.m-block-dot-l li:not(:last-child)::after, ol.m-block-dot-l li:not(:last-child)::after { content: ""; }
 }
 p.m-poem {
   text-indent: 0;
diff --git a/doc/css/typography.rst b/doc/css/typography.rst
index e8ca1a23..e96c39e7 100644
--- a/doc/css/typography.rst
+++ b/doc/css/typography.rst
@@ -146,8 +146,9 @@ indentation.
         </ol>
 
 It's possible to convert a list to a single line with items separated by ``|``
-to save vertical space on mobile devices and responsively change it back on
-larger screens. Mark such list with :css:`.m-block-bar-*`:
+or ``•`` to save vertical space on mobile devices and responsively change it
+back on larger screens. Mark such list with :css:`.m-block-bar-*` or
+:css:`.m-block-dot-*`:
 
 .. code-figure::
 
@@ -159,6 +160,12 @@ larger screens. Mark such list with :css:`.m-block-bar-*`:
           <li>Item 3</li>
         </ul>
 
+        <ul class="m-block-dot-t">
+          <li>Alice</li>
+          <li>Bob</li>
+          <li>Joe</li>
+        </ul>
+
     .. raw:: html
 
         <ul class="m-block-bar-m">
@@ -167,6 +174,12 @@ larger screens. Mark such list with :css:`.m-block-bar-*`:
           <li>Item 3</li>
         </ul>
 
+        <ul class="m-block-dot-t">
+          <li>Alice</li>
+          <li>Bob</li>
+          <li>Joe</li>
+        </ul>
+
 .. note-success::
 
     Shrink your browser window to see the effect in the above list.