From: Vladimír Vondruš <mosra@centrum.cz>
Date: Fri, 22 Feb 2019 17:18:12 +0000 (+0100)
Subject: css: provide CSS classes for <em>, <strong>, <sup>, <sub> and <s>.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=2564d28a5a9d4efb01f637873621c5818ebdebfd;p=blog.git

css: provide CSS classes for <em>, <strong>, <sup>, <sub> and <s>.

For cases where one can't use the tags (some cases with reST, Doxygen
etc.). The .m-em and .m-strong were already there, just making it
complete with .m-sup, .m-sub and .m-s.
---

diff --git a/css/m-components.css b/css/m-components.css
index b0bfcdd0..daaa65ab 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -93,18 +93,22 @@ pre.m-console {
 }
 
 /* Inline elements */
-abbr {
-  cursor: help;
-  text-decoration: underline dotted;
-}
-sub, sup { /* https://gist.github.com/unruthless/413930 */
+strong, .m-text.m-strong { font-weight: bold; }
+em, .m-text.m-em { font-style: italic; }
+s, .m-text.m-s { text-decoration: line-through; }
+sub, sup, .m-text.m-sub, .m-text.m-sup {
+  /* https://gist.github.com/unruthless/413930 */
   font-size: 0.75rem;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
 }
-sup { top: -0.35rem; }
-sub { bottom: -0.2rem; }
+sup, .m-text.m-sup { top: -0.35rem; }
+sub, .m-text.m-sub { bottom: -0.2rem; }
+abbr {
+  cursor: help;
+  text-decoration: underline dotted;
+}
 a {
   color: var(--link-color);
 }
@@ -172,12 +176,6 @@ div.m-scroll {
 .m-text.m-big {
   font-size: 117%;
 }
-.m-text.m-strong {
-  font-weight: bold;
-}
-.m-text.m-em {
-  font-style: italic;
-}
 h1 .m-thin, h2 .m-thin, h3 .m-thin, h4 .m-thin, h5 .m-thin, h6 .m-thin {
   font-weight: normal;
 }
diff --git a/css/m-dark+doxygen.compiled.css b/css/m-dark+doxygen.compiled.css
index 0fc962a0..914b404d 100644
--- a/css/m-dark+doxygen.compiled.css
+++ b/css/m-dark+doxygen.compiled.css
@@ -403,18 +403,21 @@ pre {
 pre.m-console {
   background-color: #000000;
 }
-abbr {
-  cursor: help;
-  text-decoration: underline dotted;
-}
-sub, sup {
+strong, .m-text.m-strong { font-weight: bold; }
+em, .m-text.m-em { font-style: italic; }
+s, .m-text.m-s { text-decoration: line-through; }
+sub, sup, .m-text.m-sub, .m-text.m-sup {
   font-size: 0.75rem;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
 }
-sup { top: -0.35rem; }
-sub { bottom: -0.2rem; }
+sup, .m-text.m-sup { top: -0.35rem; }
+sub, .m-text.m-sub { bottom: -0.2rem; }
+abbr {
+  cursor: help;
+  text-decoration: underline dotted;
+}
 a {
   color: #5b9dd9;
 }
@@ -476,12 +479,6 @@ div.m-scroll {
 .m-text.m-big {
   font-size: 117%;
 }
-.m-text.m-strong {
-  font-weight: bold;
-}
-.m-text.m-em {
-  font-style: italic;
-}
 h1 .m-thin, h2 .m-thin, h3 .m-thin, h4 .m-thin, h5 .m-thin, h6 .m-thin {
   font-weight: normal;
 }
diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index 27a1fc5a..609acaa7 100644
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -403,18 +403,21 @@ pre {
 pre.m-console {
   background-color: #000000;
 }
-abbr {
-  cursor: help;
-  text-decoration: underline dotted;
-}
-sub, sup {
+strong, .m-text.m-strong { font-weight: bold; }
+em, .m-text.m-em { font-style: italic; }
+s, .m-text.m-s { text-decoration: line-through; }
+sub, sup, .m-text.m-sub, .m-text.m-sup {
   font-size: 0.75rem;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
 }
-sup { top: -0.35rem; }
-sub { bottom: -0.2rem; }
+sup, .m-text.m-sup { top: -0.35rem; }
+sub, .m-text.m-sub { bottom: -0.2rem; }
+abbr {
+  cursor: help;
+  text-decoration: underline dotted;
+}
 a {
   color: #5b9dd9;
 }
@@ -476,12 +479,6 @@ div.m-scroll {
 .m-text.m-big {
   font-size: 117%;
 }
-.m-text.m-strong {
-  font-weight: bold;
-}
-.m-text.m-em {
-  font-style: italic;
-}
 h1 .m-thin, h2 .m-thin, h3 .m-thin, h4 .m-thin, h5 .m-thin, h6 .m-thin {
   font-weight: normal;
 }
diff --git a/css/m-light+doxygen.compiled.css b/css/m-light+doxygen.compiled.css
index 30d19240..65bb86a7 100644
--- a/css/m-light+doxygen.compiled.css
+++ b/css/m-light+doxygen.compiled.css
@@ -403,18 +403,21 @@ pre {
 pre.m-console {
   background-color: #000000;
 }
-abbr {
-  cursor: help;
-  text-decoration: underline dotted;
-}
-sub, sup {
+strong, .m-text.m-strong { font-weight: bold; }
+em, .m-text.m-em { font-style: italic; }
+s, .m-text.m-s { text-decoration: line-through; }
+sub, sup, .m-text.m-sub, .m-text.m-sup {
   font-size: 0.75rem;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
 }
-sup { top: -0.35rem; }
-sub { bottom: -0.2rem; }
+sup, .m-text.m-sup { top: -0.35rem; }
+sub, .m-text.m-sub { bottom: -0.2rem; }
+abbr {
+  cursor: help;
+  text-decoration: underline dotted;
+}
 a {
   color: #ea7944;
 }
@@ -476,12 +479,6 @@ div.m-scroll {
 .m-text.m-big {
   font-size: 117%;
 }
-.m-text.m-strong {
-  font-weight: bold;
-}
-.m-text.m-em {
-  font-style: italic;
-}
 h1 .m-thin, h2 .m-thin, h3 .m-thin, h4 .m-thin, h5 .m-thin, h6 .m-thin {
   font-weight: normal;
 }
diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index 58a05a3a..44eb2da1 100644
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -403,18 +403,21 @@ pre {
 pre.m-console {
   background-color: #000000;
 }
-abbr {
-  cursor: help;
-  text-decoration: underline dotted;
-}
-sub, sup {
+strong, .m-text.m-strong { font-weight: bold; }
+em, .m-text.m-em { font-style: italic; }
+s, .m-text.m-s { text-decoration: line-through; }
+sub, sup, .m-text.m-sub, .m-text.m-sup {
   font-size: 0.75rem;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
 }
-sup { top: -0.35rem; }
-sub { bottom: -0.2rem; }
+sup, .m-text.m-sup { top: -0.35rem; }
+sub, .m-text.m-sub { bottom: -0.2rem; }
+abbr {
+  cursor: help;
+  text-decoration: underline dotted;
+}
 a {
   color: #ea7944;
 }
@@ -476,12 +479,6 @@ div.m-scroll {
 .m-text.m-big {
   font-size: 117%;
 }
-.m-text.m-strong {
-  font-weight: bold;
-}
-.m-text.m-em {
-  font-style: italic;
-}
 h1 .m-thin, h2 .m-thin, h3 .m-thin, h4 .m-thin, h5 .m-thin, h6 .m-thin {
   font-weight: normal;
 }
diff --git a/doc/css/components.rst b/doc/css/components.rst
index 94e8ae66..b4b8a814 100644
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -333,22 +333,6 @@ to make the text appear smaller or larger.
         adipiscing elit. Vivamus ultrices a erat eu suscipit. Aliquam pharetra
         imperdiet tortor sed vehicula.</p>
 
-Besides :html:`<strong>` and :html:`<em>` you can use :css:`.m-strong` or
-:css:`.m-em` CSS class together with :css:`.m-text` to achieve the same effect
-without using those particular tags.
-
-.. code-figure::
-
-    .. code:: html
-
-        <p>Lorem ipsum dolor sit amet; <span class="m-text m-strong">strong text</span>;
-        consectetur adipiscing elit. <span class="m-text m-em">Emphasised.</span></p>
-
-    .. raw:: html
-
-        <p>Lorem ipsum dolor sit amet; <span class="m-text m-strong">strong text</span>;
-        consectetur adipiscing elit. <span class="m-text m-em">Emphasised.</span></p>
-
 `Button links`_
 ===============
 
diff --git a/doc/css/typography.rst b/doc/css/typography.rst
index e31b938d..e17cf0e2 100644
--- a/doc/css/typography.rst
+++ b/doc/css/typography.rst
@@ -407,6 +407,11 @@ useful where underlines would be too distracting:
           There is a <a href="#" class="m-flat">hidden</a> link.
         </p>
 
+For cases where you can't use the native HTML tags for emphasis, strong text,
+strikethrough and subscript/superscript, the equivalent is available through
+:css:`.m-em`, :css:`.m-strong`, :css:`.m-s`, :css:`.m-sup` and :css:`.m-sub`
+CSS classes used together with :css:`.m-text`.
+
 .. note-info::
 
     The Components page has additional information about