From: Vladimír Vondruš <mosra@centrum.cz>
Date: Sun, 26 Aug 2018 14:46:00 +0000 (+0200)
Subject: css: ability to remove the underline from links.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=022854db1a2a3155e3bd0908efeb9c1517fd224a;p=blog.git

css: ability to remove the underline from links.

This will be a bit harder to do for reST, will need to create a custom
role for it.
---

diff --git a/css/m-components.css b/css/m-components.css
index 495c11a0..9f0be76e 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -108,6 +108,9 @@ sub { bottom: -0.2rem; }
 a {
   color: var(--link-color);
 }
+a.m-flat {
+  text-decoration: none;
+}
 a:hover, a:focus, a:active {
   color: var(--link-active-color);
 }
diff --git a/css/m-dark+doxygen.compiled.css b/css/m-dark+doxygen.compiled.css
index 85150baf..26f98190 100644
--- a/css/m-dark+doxygen.compiled.css
+++ b/css/m-dark+doxygen.compiled.css
@@ -467,6 +467,9 @@ sub { bottom: -0.2rem; }
 a {
   color: #5b9dd9;
 }
+a.m-flat {
+  text-decoration: none;
+}
 a:hover, a:focus, a:active {
   color: #a5c9ea;
 }
diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index b2459dba..ff49b956 100644
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -467,6 +467,9 @@ sub { bottom: -0.2rem; }
 a {
   color: #5b9dd9;
 }
+a.m-flat {
+  text-decoration: none;
+}
 a:hover, a:focus, a:active {
   color: #a5c9ea;
 }
diff --git a/css/m-light+doxygen.compiled.css b/css/m-light+doxygen.compiled.css
index c7ca76e8..e156a673 100644
--- a/css/m-light+doxygen.compiled.css
+++ b/css/m-light+doxygen.compiled.css
@@ -467,6 +467,9 @@ sub { bottom: -0.2rem; }
 a {
   color: #ea7944;
 }
+a.m-flat {
+  text-decoration: none;
+}
 a:hover, a:focus, a:active {
   color: #cb4b16;
 }
diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index 2b58d04e..8a94d103 100644
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -467,6 +467,9 @@ sub { bottom: -0.2rem; }
 a {
   color: #ea7944;
 }
+a.m-flat {
+  text-decoration: none;
+}
 a:hover, a:focus, a:active {
   color: #cb4b16;
 }
diff --git a/doc/css/typography.rst b/doc/css/typography.rst
index e96c39e7..948b489d 100644
--- a/doc/css/typography.rst
+++ b/doc/css/typography.rst
@@ -354,6 +354,15 @@ 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>`_.
 
+`Text alignment`_
+=================
+
+Use :css:`.m-text-left`, :css:`.m-text-right` or :css:`.m-text-center` to
+align text inside its parent element. Use :css:`.m-text-top`,
+:css:`.m-text-middle` and :css:`.m-text-bottom` to align text vertically for
+example in a table cell. See `Floating around <{filename}/css/grid.rst#floating-around>`_
+in the grid system for aligning and floating blocks in a similar way.
+
 `Inline elements`_
 ==================
 
@@ -377,20 +386,29 @@ 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>.
 
+Links are underlined by default in all `builtin themes <{filename}/css/themes.rst>`_.
+Adding :css:`.m-flat` to the :html:`<a>` element will remove the underline,
+useful where underlines would be too distracting:
+
+.. code-figure::
+
+    .. code:: html
+
+        <p class="m-text-center m-text m-dim">
+          There is a <a href="#" class="m-flat">hidden</a> link.
+        </p>
+
+    .. raw:: html
+
+        <p class="m-text-center m-text m-dim">
+          There is a <a href="#" class="m-flat">hidden</a> link.
+        </p>
+
 .. note-info::
 
     The Components page has additional information about
     `text styling <{filename}/css/components.rst#text>`_.
 
-`Text alignment`_
-=================
-
-Use :css:`.m-text-left`, :css:`.m-text-right` or :css:`.m-text-center` to
-align text inside its parent element. Use :css:`.m-text-top`,
-:css:`.m-text-middle` and :css:`.m-text-bottom` to align text vertically for
-example in a table cell. See `Floating around <{filename}/css/grid.rst#floating-around>`_
-in the grid system for aligning and floating blocks in a similar way.
-
 `Padding`_
 ==========