From 913659e7f7049c862ff491575316b3737d5dcce6 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= <mosra@centrum.cz>
Date: Wed, 1 Nov 2017 17:21:12 +0100
Subject: [PATCH] css: added .m-light class to make part of a heading thinner.

Also documented how headings behave.
---
 css/m-components.css     |  3 +++
 css/m-dark.compiled.css  |  3 +++
 css/m-light.compiled.css |  3 +++
 doc/css/typography.rst   | 38 ++++++++++++++++++++++++++++++++++++++
 4 files changed, 47 insertions(+)

diff --git a/css/m-components.css b/css/m-components.css
index 8f604deb..6de031fd 100644
--- 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 e8d5c254..67b29ee3 100644
--- 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 781aa61e..72eaaa2b 100644
--- 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 f75576fe..ad42ebe1 100644
--- 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`_
 ==============
 
-- 
2.30.2