From: Vladimír Vondruš <mosra@centrum.cz>
Date: Wed, 1 Nov 2017 22:44:44 +0000 (+0100)
Subject: css: add .m-strong and .m-em classes.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=102307ff4f8f6cc32ac6e69b4eced4ca2263c060;p=blog.git

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 6de031fd..50d684ec 100644
--- 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 67b29ee3..ab1b172a 100644
--- 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 72eaaa2b..d68d7308 100644
--- 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 3c924f5c..e7b2a914 100644
--- 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 ad42ebe1..9ebf37da 100644
--- 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`_
 =================