From 91b6309a2ceb5fc20762283f85f2e58f89fae8f2 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= <mosra@centrum.cz>
Date: Fri, 29 Mar 2019 10:56:03 +0100
Subject: [PATCH] css: styling for footnotes and footnote references.

---
 css/m-components.css             | 29 ++++++++++++
 css/m-dark+doxygen.compiled.css  | 27 ++++++++++++
 css/m-dark.compiled.css          | 27 ++++++++++++
 css/m-light+doxygen.compiled.css | 27 ++++++++++++
 css/m-light.compiled.css         | 27 ++++++++++++
 doc/css/typography.rst           | 75 ++++++++++++++++++++++++++++++++
 6 files changed, 212 insertions(+)

diff --git a/css/m-components.css b/css/m-components.css
index daaa65ab..4dbc7b52 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -254,6 +254,35 @@ dl.m-diary dd {
   padding-left: 3.5rem;
 }
 
+/* Footnotes, footnote references */
+a.m-footnote, dl.m-footnote dd span.m-footnote {
+  top: -0.35rem; /* Same as .m-text.m-sup */
+  font-size: 0.75rem;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+a.m-footnote, dl.m-footnote dd span.m-footnote a {
+  text-decoration: none;
+}
+a.m-footnote::before { content: '['; }
+a.m-footnote::after { content: ']'; }
+dl.m-footnote dt {
+  width: 1.5rem;
+  float: left;
+  clear: both;
+}
+dl.m-footnote dd {
+  margin-left: 1.5rem;
+}
+dl.m-footnote { /* Same as .m-small */
+  font-size: 85.4%;
+}
+dl.m-footnote dd span.m-footnote a {
+  font-weight: bold;
+  font-style: italic;
+}
+
 /* Note, frame, block */
 .m-note {
   border-radius: var(--border-radius);
diff --git a/css/m-dark+doxygen.compiled.css b/css/m-dark+doxygen.compiled.css
index 914b404d..28770188 100644
--- a/css/m-dark+doxygen.compiled.css
+++ b/css/m-dark+doxygen.compiled.css
@@ -550,6 +550,33 @@ dl.m-diary dd {
   padding-top: 0.25rem;
   padding-left: 3.5rem;
 }
+a.m-footnote, dl.m-footnote dd span.m-footnote {
+  top: -0.35rem;
+  font-size: 0.75rem;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+a.m-footnote, dl.m-footnote dd span.m-footnote a {
+  text-decoration: none;
+}
+a.m-footnote::before { content: '['; }
+a.m-footnote::after { content: ']'; }
+dl.m-footnote dt {
+  width: 1.5rem;
+  float: left;
+  clear: both;
+}
+dl.m-footnote dd {
+  margin-left: 1.5rem;
+}
+dl.m-footnote {
+  font-size: 85.4%;
+}
+dl.m-footnote dd span.m-footnote a {
+  font-weight: bold;
+  font-style: italic;
+}
 .m-note {
   border-radius: 0.2rem;
   padding: 1rem;
diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index 609acaa7..dab000c1 100644
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -550,6 +550,33 @@ dl.m-diary dd {
   padding-top: 0.25rem;
   padding-left: 3.5rem;
 }
+a.m-footnote, dl.m-footnote dd span.m-footnote {
+  top: -0.35rem;
+  font-size: 0.75rem;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+a.m-footnote, dl.m-footnote dd span.m-footnote a {
+  text-decoration: none;
+}
+a.m-footnote::before { content: '['; }
+a.m-footnote::after { content: ']'; }
+dl.m-footnote dt {
+  width: 1.5rem;
+  float: left;
+  clear: both;
+}
+dl.m-footnote dd {
+  margin-left: 1.5rem;
+}
+dl.m-footnote {
+  font-size: 85.4%;
+}
+dl.m-footnote dd span.m-footnote a {
+  font-weight: bold;
+  font-style: italic;
+}
 .m-note {
   border-radius: 0.2rem;
   padding: 1rem;
diff --git a/css/m-light+doxygen.compiled.css b/css/m-light+doxygen.compiled.css
index 65bb86a7..5627e061 100644
--- a/css/m-light+doxygen.compiled.css
+++ b/css/m-light+doxygen.compiled.css
@@ -550,6 +550,33 @@ dl.m-diary dd {
   padding-top: 0.25rem;
   padding-left: 3.5rem;
 }
+a.m-footnote, dl.m-footnote dd span.m-footnote {
+  top: -0.35rem;
+  font-size: 0.75rem;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+a.m-footnote, dl.m-footnote dd span.m-footnote a {
+  text-decoration: none;
+}
+a.m-footnote::before { content: '['; }
+a.m-footnote::after { content: ']'; }
+dl.m-footnote dt {
+  width: 1.5rem;
+  float: left;
+  clear: both;
+}
+dl.m-footnote dd {
+  margin-left: 1.5rem;
+}
+dl.m-footnote {
+  font-size: 85.4%;
+}
+dl.m-footnote dd span.m-footnote a {
+  font-weight: bold;
+  font-style: italic;
+}
 .m-note {
   border-radius: 0.2rem;
   padding: 1rem;
diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index 44eb2da1..74a57421 100644
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -550,6 +550,33 @@ dl.m-diary dd {
   padding-top: 0.25rem;
   padding-left: 3.5rem;
 }
+a.m-footnote, dl.m-footnote dd span.m-footnote {
+  top: -0.35rem;
+  font-size: 0.75rem;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+a.m-footnote, dl.m-footnote dd span.m-footnote a {
+  text-decoration: none;
+}
+a.m-footnote::before { content: '['; }
+a.m-footnote::after { content: ']'; }
+dl.m-footnote dt {
+  width: 1.5rem;
+  float: left;
+  clear: both;
+}
+dl.m-footnote dd {
+  margin-left: 1.5rem;
+}
+dl.m-footnote {
+  font-size: 85.4%;
+}
+dl.m-footnote dd span.m-footnote a {
+  font-weight: bold;
+  font-style: italic;
+}
 .m-note {
   border-radius: 0.2rem;
   padding: 1rem;
diff --git a/doc/css/typography.rst b/doc/css/typography.rst
index e17cf0e2..a81f48f6 100644
--- a/doc/css/typography.rst
+++ b/doc/css/typography.rst
@@ -357,6 +357,81 @@ will have negative margin to make its contents aligned with surrounding text.
     The Components page has additional information about
     `code block styling <{filename}/css/components.rst#code>`_.
 
+`Footnotes and footnote references`_
+====================================
+
+Applying :css:`.m-footnote` to a link will turn it into a footnote reference
+--- a superscript, wrapped in brackets. For the actual footnotes use
+:html:`<dl class="m-footnote">`; :html:`<dt>` contains footnote ID and
+:html:`<dd>` the footnote text. You can add a :html:`<span class="m-footnote">`
+inside the :html:`<dd>` to provide styled back-references to the original text.
+
+.. code-figure::
+
+    .. code:: html
+
+        <p>
+          As also noted in the court case of <em>Mondays vs The Working People</em>
+          <a href="#ref1" class="m-footnote" id="ref1-backref">1</a>, the transition
+          between the weekend and a working day has a similar impact on overall
+          happines as a transition between holidays and working days, however not as
+          significant <a href="#ref2" class="m-footnote" id="ref2-backref">2</a>.
+          This is a common theme of small talk conversations, together with
+          weather <a href="#ref1" class="m-footnote" id="ref1-backref2">1</a>
+          <a href="#ref3" class="m-footnote" id="ref3-backref">3</a>.
+        </p>
+        <dl class="m-footnote">
+          <dt id="ref1">1.</dt>
+          <dd>
+            <span class="m-footnote">^ <a href="#ref1-backref">a</a>
+            <a href="#ref1-backref2">b</a></span> Mondays vs The Working People,
+            The Arizona Highest Court, 2019
+          </dd>
+          <dt id="ref2">2.</dt>
+          <dd>
+            <span class="m-footnote"><a href="#ref2-backref">^</a></span>
+            <a href="https://garfield.com/comic/2014/05/26">Garfield; Monday,
+            May 26, 2014</a>
+          </dd>
+          <dt id="ref3">3.</dt>
+          <dd>
+            <span class="m-footnote"><a href="#ref3-backref">^</a></span> From a
+            conversation overheard this very morning.
+          </dd>
+        </dl>
+
+    .. raw:: html
+
+        <p>
+          As also noted in the court case of <em>Mondays vs The Working People</em>
+          <a href="#ref1" class="m-footnote" id="ref1-backref">1</a>, the transition
+          between the weekend and a working day has a similar impact on overall
+          happines as a transition between holidays and working days, however not as
+          significant <a href="#ref2" class="m-footnote" id="ref2-backref">2</a>.
+          This is a common theme of small talk conversations, together with
+          weather <a href="#ref1" class="m-footnote" id="ref1-backref2">1</a>
+          <a href="#ref3" class="m-footnote" id="ref3-backref">3</a>.
+        </p>
+        <dl class="m-footnote">
+          <dt id="ref1">1.</dt>
+          <dd>
+            <span class="m-footnote">^ <a href="#ref1-backref">a</a>
+            <a href="#ref1-backref2">b</a></span> Mondays vs The Working People,
+            The Arizona Highest Court, 2019
+          </dd>
+          <dt id="ref2">2.</dt>
+          <dd>
+            <span class="m-footnote"><a href="#ref2-backref">^</a></span>
+            <a href="https://garfield.com/comic/2014/05/26">Garfield; Monday,
+            May 26, 2014</a>
+          </dd>
+          <dt id="ref3">3.</dt>
+          <dd>
+            <span class="m-footnote"><a href="#ref3-backref">^</a></span> From a
+            conversation overheard this very morning.
+          </dd>
+        </dl>
+
 `Text alignment`_
 =================
 
-- 
2.30.2