css: added .m-light class to make part of a heading thinner.

Also documented how headings behave.

diff --git a/css/m-components.css b/css/m-components.css
index 8f604deb70aa2e70bfa6304546d1ae46d5614bce..6de031fd515e3c4c07c9adab419bfb259db33f14 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -543,6 +543,9 @@ div.m-scroll {
 .m-text.m-big {
   font-size: 117%;
 }
+h1 .m-thin, h2 .m-thin, h3 .m-thin, h4 .m-thin, h5 .m-thin, h6 .m-thin {
+  font-weight: normal;
+}
 
 /* Lists */
 ul.m-unstyled, ol.m-unstyled {

diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index e8d5c2545ae6f3e71fb4e47102f16b9e0b6f0c15..67b29ee32652e131d29a894fd94114b0a73852aa 100644 (file)
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -875,6 +875,9 @@ div.m-scroll {
 .m-text.m-big {
   font-size: 117%;
 }
+h1 .m-thin, h2 .m-thin, h3 .m-thin, h4 .m-thin, h5 .m-thin, h6 .m-thin {
+  font-weight: normal;
+}
 ul.m-unstyled, ol.m-unstyled {
   list-style-type: none;
   padding-left: 0;

diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index 781aa61ebbf4547f471aaa460cc7124b67339dad..72eaaa2b8f1a052a71cbd6f594550429aa03dc68 100644 (file)
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -875,6 +875,9 @@ div.m-scroll {
 .m-text.m-big {
   font-size: 117%;
 }
+h1 .m-thin, h2 .m-thin, h3 .m-thin, h4 .m-thin, h5 .m-thin, h6 .m-thin {
+  font-weight: normal;
+}
 ul.m-unstyled, ol.m-unstyled {
   list-style-type: none;
   padding-left: 0;

diff --git a/doc/css/typography.rst b/doc/css/typography.rst
index f75576fe0f455507385245fb3455de9d4032a127..ad42ebe1695f0b14fe5ba26941111d64ab61aed3 100644 (file)
--- a/doc/css/typography.rst
+++ b/doc/css/typography.rst
@@ -190,6 +190,44 @@ definitions.
           <dd>Finally put my pants on. Too late.</dd>
         </dl>
 
+`Headings`_
+===========
+
+The :html:`<h1>` is meant to be a page heading, thus it is styled a bit
+differently --- it's bigger and has :css:`1rem` padding after. The :html:`<h2>`
+to :html:`<h6>` are smaller and have just :css:`0.5rem` padding after, to be
+closer to the content that follows. Wrapping part of the heading in a
+:css:`.m-thin` will make it appear thinner, depending on used CSS theme.
+
+.. code-figure::
+
+    .. code:: html
+
+        <h1>Heading 1 <span class="m-thin">with subtitle</span></h1>
+        <h2>Heading 2 <span class="m-thin">with subtitle</span></h2>
+        <h3>Heading 3 <span class="m-thin">with subtitle</span></h3>
+        <h4>Heading 4 <span class="m-thin">with subtitle</span></h4>
+        <h5>Heading 5 <span class="m-thin">with subtitle</span></h5>
+        <h6>Heading 6 <span class="m-thin">with subtitle</span></h6>
+
+    .. raw:: html
+
+        <h1>Heading 1 <span class="m-thin">with subtitle</span></h1>
+        <h2>Heading 2 <span class="m-thin">with subtitle</span></h2>
+        <h3>Heading 3 <span class="m-thin">with subtitle</span></h3>
+        <h4>Heading 4 <span class="m-thin">with subtitle</span></h4>
+        <h5>Heading 5 <span class="m-thin">with subtitle</span></h5>
+        <h6>Heading 6 <span class="m-thin">with subtitle</span></h6>
+
+.. note-warning::
+
+    Headings are styled in a slightly different way for
+    `page sections <{filename}/css/page-layout.rst#main-content>`_ and
+    `article headers <{filename}/css/page-layout.rst#articles>`_, clicks the
+    links for more information. There is also a possibility to put
+    `breadcrumb navigation <{filename}/css/page-layout.rst#breadcrumb-navigation>`_
+    in the :html:`<h1>` element.
+
 `Transitions`_
 ==============