css: styling for footnotes and footnote references.

diff --git a/css/m-components.css b/css/m-components.css
index daaa65ab6d6034f9c9f55877eeeb4991e8f28237..4dbc7b52ec7a231f6c1fcf33e6a83f7b47b411fe 100644 (file)
--- 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 914b404d398f474ab927e73e3b72c69822746529..28770188107b1841564d95fabe82b32af508a871 100644 (file)
--- 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 609acaa761d2af852ef5cca914e5889da60619da..dab000c1c4f9b8104d50e03608755b6fd33d4c52 100644 (file)
--- 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 65bb86a7d1a893b8aee4a000139223495f36c5a7..5627e06153709d3840dc521e53e7b033501b1aae 100644 (file)
--- 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 44eb2da1d42f6e18ff1ff28a58aad49b5decfd09..74a574210b1dff658025696b5767586544c1e42c 100644 (file)
--- 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 e17cf0e217953165f5b587a5b798e01a80970f00..a81f48f613a1f9b2c1f8837f248fd70347feaaaa 100644 (file)
--- 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`_
 =================