css: add .m-strong and .m-em classes.

Meant to help work around reST limitation of not being able to have
strong emphasis.

diff --git a/css/m-components.css b/css/m-components.css
index 6de031fd515e3c4c07c9adab419bfb259db33f14..50d684ec510083e6249aa77fc933503d6e958fc9 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -543,6 +543,12 @@ 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 67b29ee32652e131d29a894fd94114b0a73852aa..ab1b172affd0204586ca3edfc5fc421e04f9aecb 100644 (file)
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -875,6 +875,12 @@ 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 72eaaa2b8f1a052a71cbd6f594550429aa03dc68..d68d730873c5a4967d1818181bb3ae3d9831474d 100644 (file)
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -875,6 +875,12 @@ 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 3c924f5ceec1defe7e67e54dca1f02339fbb17f1..e7b2a914d310730496585be0dbc79146da5cac68 100644 (file)
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -260,6 +260,22 @@ 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 ad42ebe1695f0b14fe5ba26941111d64ab61aed3..9ebf37da31871fa8fbc0fc5ecc9ccba31ac39e14 100644 (file)
--- a/doc/css/typography.rst
+++ b/doc/css/typography.rst
@@ -311,6 +311,11 @@ will have negative margin to make its contents aligned with surrounding text.
         right now</s> oh, there is also <mark>marked text</mark> and
         <code>int a = some_code();</code>.
 
+.. note-info::
+
+    The Components page has additional information about
+    `text styling <{filename}/css/components.rst#text>`_.
+
 `Text alignment`_
 =================