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 b0bfcdd03e847110d35fb098ea303b0765c330ee..daaa65ab6d6034f9c9f55877eeeb4991e8f28237 100644 (file)
--- 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 0fc962a0bb50bb05e6bdde948b27da76666bc37d..914b404d398f474ab927e73e3b72c69822746529 100644 (file)
--- 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 27a1fc5a8d729d267020a748b3e16622dcd57b6e..609acaa761d2af852ef5cca914e5889da60619da 100644 (file)
--- 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 30d1924021dab9862ee7be084ff66eb367f8d9fa..65bb86a7d1a893b8aee4a000139223495f36c5a7 100644 (file)
--- 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 58a05a3afba8923e3bb0cdd35fb3e0be371a36c7..44eb2da1d42f6e18ff1ff28a58aad49b5decfd09 100644 (file)
--- 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 94e8ae66ea75045f82e51ad2107a768cef8f4c0e..b4b8a81480e75912678384339306e71e3ddef7cc 100644 (file)
--- 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 e31b938d36ecdab56e6e3c4a1cb2d42df25c9077..e17cf0e217953165f5b587a5b798e01a80970f00 100644 (file)
--- 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