From: Vladimír Vondruš <mosra@centrum.cz>
Date: Fri, 16 Nov 2018 23:06:34 +0000 (+0100)
Subject: css: correctly color links inside block headers.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=f8a559a7fcf23139f621cc2ce61e791dcdb90c55;p=blog.git

css: correctly color links inside block headers.
---

diff --git a/css/m-components.css b/css/m-components.css
index 0b0ef844..748fdc9b 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -913,37 +913,52 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
   background-color: var(--line-color);
 }
 
-/* Colored block */
+/* Colored block, header links in a colored block, colored text, flat label */
 .m-block.m-default { border-left-color: var(--line-color); }
-.m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6 {
+.m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6,
+.m-text.m-default, .m-label.m-flat.m-default {
   color: var(--default-color);
 }
+.m-block.m-default h3 a, .m-block.m-default h4 a, .m-block.m-default h5 a, .m-block.m-default h6 a {
+  color: var(--link-color);
+}
 .m-block.m-primary { border-left-color: var(--primary-color); }
-.m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6 {
+.m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6,
+.m-block.m-primary h3 a, .m-block.m-primary h4 a, .m-block.m-primary h5 a, .m-block.m-primary h6 a,
+.m-text.m-primary, .m-label.m-flat.m-primary {
   color: var(--primary-color);
 }
 .m-block.m-success { border-left-color: var(--success-color); }
-.m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6 {
+.m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6,
+.m-block.m-success h3 a, .m-block.m-success h4 a, .m-block.m-success h5 a, .m-block.m-success h6 a,
+.m-text.m-success, .m-label.m-flat.m-success {
   color: var(--success-color);
 }
 .m-block.m-warning { border-left-color: var(--warning-color); }
-.m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6 {
+.m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6,
+.m-block.m-warning h3 a, .m-block.m-warning h4 a, .m-block.m-warning h5 a, .m-block.m-warning h6 a,
+.m-text.m-warning, .m-label.m-flat.m-warning {
   color: var(--warning-color);
 }
 .m-block.m-danger { border-left-color: var(--danger-color); }
-.m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6 {
+.m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6,
+.m-block.m-danger h3 a, .m-block.m-danger h4 a, .m-block.m-danger h5 a, .m-block.m-danger h6 a,
+.m-text.m-danger, .m-label.m-flat.m-danger {
   color: var(--danger-color);
 }
 .m-block.m-info { border-left-color: var(--info-color); }
-.m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6 {
+.m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6,
+.m-block.m-info h3 a, .m-block.m-info h4 a, .m-block.m-info h5 a, .m-block.m-info h6 a,
+.m-text.m-info, .m-label.m-flat.m-info {
   color: var(--info-color);
 }
-.m-block.m-dim {
-  border-left-color: var(--dim-color);
+.m-block.m-dim { border-left-color: var(--dim-color); }
+.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim {
   color: var(--dim-color);
 }
-.m-block.m-dim a { color: var(--dim-link-color); }
-.m-block.m-dim a:hover, .m-block.m-dim a:focus, .m-block.m-dim a:active {
+.m-block.m-dim a, .m-text.m-dim a { color: var(--dim-link-color); }
+.m-block.m-dim a:hover, .m-block.m-dim a:focus, .m-block.m-dim a:active,
+.m-text.m-dim a:hover, .m-text.m-dim a:focus, .m-text.m-dim a:active {
   color: var(--dim-link-active-color);
 }
 .m-block.m-flat { border-color: transparent; }
@@ -951,20 +966,46 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
   color: var(--default-color);
 }
 
-/* Colored text, flat label */
-.m-text.m-default, .m-label.m-flat.m-default { color: var(--default-color); }
-.m-text.m-primary, .m-label.m-flat.m-primary { color: var(--primary-color); }
-.m-text.m-success, .m-label.m-flat.m-success { color: var(--success-color); }
-.m-text.m-warning, .m-label.m-flat.m-warning { color: var(--warning-color); }
-.m-text.m-danger, .m-label.m-flat.m-danger { color: var(--danger-color); }
-.m-text.m-info, .m-label.m-flat.m-info { color: var(--info-color); }
-.m-text.m-dim, .m-label.m-flat.m-dim { color: var(--dim-color); }
-.m-text.m-dim a { color: var(--dim-link-color); }
-.m-text.m-dim a:hover, .m-text.m-dim a:focus, .m-text.m-dim a:active {
-  color: var(--dim-link-active-color);
+/* Active link in a block header (gawd, this is verbose as hell). Dim blocks
+   have the link colors already defined above. */
+.m-block.m-default h3 a:hover, .m-block.m-default h3 a:focus, .m-block.m-default h3 a:active,
+.m-block.m-default h4 a:hover, .m-block.m-default h4 a:focus, .m-block.m-default h4 a:active,
+.m-block.m-default h5 a:hover, .m-block.m-default h5 a:focus, .m-block.m-default h5 a:active,
+.m-block.m-default h6 a:hover, .m-block.m-default h6 a:focus, .m-block.m-default h6 a:active {
+  color: var(--default-link-active-color);
+}
+.m-block.m-primary h3 a:hover, .m-block.m-primary h3 a:focus, .m-block.m-primary h3 a:active,
+.m-block.m-primary h4 a:hover, .m-block.m-primary h4 a:focus, .m-block.m-primary h4 a:active,
+.m-block.m-primary h5 a:hover, .m-block.m-primary h5 a:focus, .m-block.m-primary h5 a:active,
+.m-block.m-primary h6 a:hover, .m-block.m-primary h6 a:focus, .m-block.m-primary h6 a:active {
+  color: var(--primary-link-active-color);
+}
+.m-block.m-success h3 a:hover, .m-block.m-success h3 a:focus, .m-block.m-success h3 a:active,
+.m-block.m-success h4 a:hover, .m-block.m-success h4 a:focus, .m-block.m-success h4 a:active,
+.m-block.m-success h5 a:hover, .m-block.m-success h5 a:focus, .m-block.m-success h5 a:active,
+.m-block.m-success h6 a:hover, .m-block.m-success h6 a:focus, .m-block.m-success h6 a:active {
+  color: var(--success-link-active-color);
+}
+.m-block.m-warning h3 a:hover, .m-block.m-warning h3 a:focus, .m-block.m-warning h3 a:active,
+.m-block.m-warning h4 a:hover, .m-block.m-warning h4 a:focus, .m-block.m-warning h4 a:active,
+.m-block.m-warning h5 a:hover, .m-block.m-warning h5 a:focus, .m-block.m-warning h5 a:active,
+.m-block.m-warning h6 a:hover, .m-block.m-warning h6 a:focus, .m-block.m-warning h6 a:active {
+  color: var(--warning-link-active-color);
+}
+.m-block.m-danger h3 a:hover, .m-block.m-danger h3 a:focus, .m-block.m-danger h3 a:active,
+.m-block.m-danger h4 a:hover, .m-block.m-danger h4 a:focus, .m-block.m-danger h4 a:active,
+.m-block.m-danger h5 a:hover, .m-block.m-danger h5 a:focus, .m-block.m-danger h5 a:active,
+.m-block.m-danger h6 a:hover, .m-block.m-danger h6 a:focus, .m-block.m-danger h6 a:active {
+  color: var(--danger-link-active-color);
+}
+.m-block.m-info h3 a:hover, .m-block.m-info h3 a:focus, .m-block.m-info h3 a:active,
+.m-block.m-info h4 a:hover, .m-block.m-info h4 a:focus, .m-block.m-info h4 a:active,
+.m-block.m-info h5 a:hover, .m-block.m-info h5 a:focus, .m-block.m-info h5 a:active,
+.m-block.m-info h6 a:hover, .m-block.m-info h6 a:focus, .m-block.m-info h6 a:active {
+  color: var(--info-link-active-color);
 }
 
-/* Colored button, label */
+/* Colored button, non-flat label */
 div.m-button a, .m-label { color: var(--button-background-color); }
 div.m-button.m-flat a { color: var(--color); }
 div.m-button.m-flat a:hover, div.m-button.m-default a:focus, div.m-button.m-default a:active {
diff --git a/css/m-dark+doxygen.compiled.css b/css/m-dark+doxygen.compiled.css
index eb9ef000..2ea1a943 100644
--- a/css/m-dark+doxygen.compiled.css
+++ b/css/m-dark+doxygen.compiled.css
@@ -1157,51 +1157,91 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
   background-color: #405363;
 }
 .m-block.m-default { border-left-color: #405363; }
-.m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6 {
+.m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6,
+.m-text.m-default, .m-label.m-flat.m-default {
   color: #dcdcdc;
 }
+.m-block.m-default h3 a, .m-block.m-default h4 a, .m-block.m-default h5 a, .m-block.m-default h6 a {
+  color: #5b9dd9;
+}
 .m-block.m-primary { border-left-color: #a5c9ea; }
-.m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6 {
+.m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6,
+.m-block.m-primary h3 a, .m-block.m-primary h4 a, .m-block.m-primary h5 a, .m-block.m-primary h6 a,
+.m-text.m-primary, .m-label.m-flat.m-primary {
   color: #a5c9ea;
 }
 .m-block.m-success { border-left-color: #3bd267; }
-.m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6 {
+.m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6,
+.m-block.m-success h3 a, .m-block.m-success h4 a, .m-block.m-success h5 a, .m-block.m-success h6 a,
+.m-text.m-success, .m-label.m-flat.m-success {
   color: #3bd267;
 }
 .m-block.m-warning { border-left-color: #c7cf2f; }
-.m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6 {
+.m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6,
+.m-block.m-warning h3 a, .m-block.m-warning h4 a, .m-block.m-warning h5 a, .m-block.m-warning h6 a,
+.m-text.m-warning, .m-label.m-flat.m-warning {
   color: #c7cf2f;
 }
 .m-block.m-danger { border-left-color: #cd3431; }
-.m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6 {
+.m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6,
+.m-block.m-danger h3 a, .m-block.m-danger h4 a, .m-block.m-danger h5 a, .m-block.m-danger h6 a,
+.m-text.m-danger, .m-label.m-flat.m-danger {
   color: #cd3431;
 }
 .m-block.m-info { border-left-color: #2f83cc; }
-.m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6 {
+.m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6,
+.m-block.m-info h3 a, .m-block.m-info h4 a, .m-block.m-info h5 a, .m-block.m-info h6 a,
+.m-text.m-info, .m-label.m-flat.m-info {
   color: #2f83cc;
 }
-.m-block.m-dim {
-  border-left-color: #747474;
+.m-block.m-dim { border-left-color: #747474; }
+.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim {
   color: #747474;
 }
-.m-block.m-dim a { color: #acacac; }
-.m-block.m-dim a:hover, .m-block.m-dim a:focus, .m-block.m-dim a:active {
+.m-block.m-dim a, .m-text.m-dim a { color: #acacac; }
+.m-block.m-dim a:hover, .m-block.m-dim a:focus, .m-block.m-dim a:active,
+.m-text.m-dim a:hover, .m-text.m-dim a:focus, .m-text.m-dim a:active {
   color: #747474;
 }
 .m-block.m-flat { border-color: transparent; }
 .m-block.m-flat h3, .m-block.m-flat h4, .m-block.m-flat h5. .m-block.m-flat h6 {
   color: #dcdcdc;
 }
-.m-text.m-default, .m-label.m-flat.m-default { color: #dcdcdc; }
-.m-text.m-primary, .m-label.m-flat.m-primary { color: #a5c9ea; }
-.m-text.m-success, .m-label.m-flat.m-success { color: #3bd267; }
-.m-text.m-warning, .m-label.m-flat.m-warning { color: #c7cf2f; }
-.m-text.m-danger, .m-label.m-flat.m-danger { color: #cd3431; }
-.m-text.m-info, .m-label.m-flat.m-info { color: #2f83cc; }
-.m-text.m-dim, .m-label.m-flat.m-dim { color: #747474; }
-.m-text.m-dim a { color: #acacac; }
-.m-text.m-dim a:hover, .m-text.m-dim a:focus, .m-text.m-dim a:active {
-  color: #747474;
+.m-block.m-default h3 a:hover, .m-block.m-default h3 a:focus, .m-block.m-default h3 a:active,
+.m-block.m-default h4 a:hover, .m-block.m-default h4 a:focus, .m-block.m-default h4 a:active,
+.m-block.m-default h5 a:hover, .m-block.m-default h5 a:focus, .m-block.m-default h5 a:active,
+.m-block.m-default h6 a:hover, .m-block.m-default h6 a:focus, .m-block.m-default h6 a:active {
+  color: #a5c9ea;
+}
+.m-block.m-primary h3 a:hover, .m-block.m-primary h3 a:focus, .m-block.m-primary h3 a:active,
+.m-block.m-primary h4 a:hover, .m-block.m-primary h4 a:focus, .m-block.m-primary h4 a:active,
+.m-block.m-primary h5 a:hover, .m-block.m-primary h5 a:focus, .m-block.m-primary h5 a:active,
+.m-block.m-primary h6 a:hover, .m-block.m-primary h6 a:focus, .m-block.m-primary h6 a:active {
+  color: #dcdcdc;
+}
+.m-block.m-success h3 a:hover, .m-block.m-success h3 a:focus, .m-block.m-success h3 a:active,
+.m-block.m-success h4 a:hover, .m-block.m-success h4 a:focus, .m-block.m-success h4 a:active,
+.m-block.m-success h5 a:hover, .m-block.m-success h5 a:focus, .m-block.m-success h5 a:active,
+.m-block.m-success h6 a:hover, .m-block.m-success h6 a:focus, .m-block.m-success h6 a:active {
+  color: #acecbe;
+}
+.m-block.m-warning h3 a:hover, .m-block.m-warning h3 a:focus, .m-block.m-warning h3 a:active,
+.m-block.m-warning h4 a:hover, .m-block.m-warning h4 a:focus, .m-block.m-warning h4 a:active,
+.m-block.m-warning h5 a:hover, .m-block.m-warning h5 a:focus, .m-block.m-warning h5 a:active,
+.m-block.m-warning h6 a:hover, .m-block.m-warning h6 a:focus, .m-block.m-warning h6 a:active {
+  color: #e9ecae;
+}
+.m-block.m-danger h3 a:hover, .m-block.m-danger h3 a:focus, .m-block.m-danger h3 a:active,
+.m-block.m-danger h4 a:hover, .m-block.m-danger h4 a:focus, .m-block.m-danger h4 a:active,
+.m-block.m-danger h5 a:hover, .m-block.m-danger h5 a:focus, .m-block.m-danger h5 a:active,
+.m-block.m-danger h6 a:hover, .m-block.m-danger h6 a:focus, .m-block.m-danger h6 a:active {
+  color: #ff9391;
+}
+.m-block.m-info h3 a:hover, .m-block.m-info h3 a:focus, .m-block.m-info h3 a:active,
+.m-block.m-info h4 a:hover, .m-block.m-info h4 a:focus, .m-block.m-info h4 a:active,
+.m-block.m-info h5 a:hover, .m-block.m-info h5 a:focus, .m-block.m-info h5 a:active,
+.m-block.m-info h6 a:hover, .m-block.m-info h6 a:focus, .m-block.m-info h6 a:active {
+  color: #5297d7;
 }
 div.m-button a, .m-label { color: #22272e; }
 div.m-button.m-flat a { color: #dcdcdc; }
diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index 5d960516..6347eca3 100644
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -1157,51 +1157,91 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
   background-color: #405363;
 }
 .m-block.m-default { border-left-color: #405363; }
-.m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6 {
+.m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6,
+.m-text.m-default, .m-label.m-flat.m-default {
   color: #dcdcdc;
 }
+.m-block.m-default h3 a, .m-block.m-default h4 a, .m-block.m-default h5 a, .m-block.m-default h6 a {
+  color: #5b9dd9;
+}
 .m-block.m-primary { border-left-color: #a5c9ea; }
-.m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6 {
+.m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6,
+.m-block.m-primary h3 a, .m-block.m-primary h4 a, .m-block.m-primary h5 a, .m-block.m-primary h6 a,
+.m-text.m-primary, .m-label.m-flat.m-primary {
   color: #a5c9ea;
 }
 .m-block.m-success { border-left-color: #3bd267; }
-.m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6 {
+.m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6,
+.m-block.m-success h3 a, .m-block.m-success h4 a, .m-block.m-success h5 a, .m-block.m-success h6 a,
+.m-text.m-success, .m-label.m-flat.m-success {
   color: #3bd267;
 }
 .m-block.m-warning { border-left-color: #c7cf2f; }
-.m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6 {
+.m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6,
+.m-block.m-warning h3 a, .m-block.m-warning h4 a, .m-block.m-warning h5 a, .m-block.m-warning h6 a,
+.m-text.m-warning, .m-label.m-flat.m-warning {
   color: #c7cf2f;
 }
 .m-block.m-danger { border-left-color: #cd3431; }
-.m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6 {
+.m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6,
+.m-block.m-danger h3 a, .m-block.m-danger h4 a, .m-block.m-danger h5 a, .m-block.m-danger h6 a,
+.m-text.m-danger, .m-label.m-flat.m-danger {
   color: #cd3431;
 }
 .m-block.m-info { border-left-color: #2f83cc; }
-.m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6 {
+.m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6,
+.m-block.m-info h3 a, .m-block.m-info h4 a, .m-block.m-info h5 a, .m-block.m-info h6 a,
+.m-text.m-info, .m-label.m-flat.m-info {
   color: #2f83cc;
 }
-.m-block.m-dim {
-  border-left-color: #747474;
+.m-block.m-dim { border-left-color: #747474; }
+.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim {
   color: #747474;
 }
-.m-block.m-dim a { color: #acacac; }
-.m-block.m-dim a:hover, .m-block.m-dim a:focus, .m-block.m-dim a:active {
+.m-block.m-dim a, .m-text.m-dim a { color: #acacac; }
+.m-block.m-dim a:hover, .m-block.m-dim a:focus, .m-block.m-dim a:active,
+.m-text.m-dim a:hover, .m-text.m-dim a:focus, .m-text.m-dim a:active {
   color: #747474;
 }
 .m-block.m-flat { border-color: transparent; }
 .m-block.m-flat h3, .m-block.m-flat h4, .m-block.m-flat h5. .m-block.m-flat h6 {
   color: #dcdcdc;
 }
-.m-text.m-default, .m-label.m-flat.m-default { color: #dcdcdc; }
-.m-text.m-primary, .m-label.m-flat.m-primary { color: #a5c9ea; }
-.m-text.m-success, .m-label.m-flat.m-success { color: #3bd267; }
-.m-text.m-warning, .m-label.m-flat.m-warning { color: #c7cf2f; }
-.m-text.m-danger, .m-label.m-flat.m-danger { color: #cd3431; }
-.m-text.m-info, .m-label.m-flat.m-info { color: #2f83cc; }
-.m-text.m-dim, .m-label.m-flat.m-dim { color: #747474; }
-.m-text.m-dim a { color: #acacac; }
-.m-text.m-dim a:hover, .m-text.m-dim a:focus, .m-text.m-dim a:active {
-  color: #747474;
+.m-block.m-default h3 a:hover, .m-block.m-default h3 a:focus, .m-block.m-default h3 a:active,
+.m-block.m-default h4 a:hover, .m-block.m-default h4 a:focus, .m-block.m-default h4 a:active,
+.m-block.m-default h5 a:hover, .m-block.m-default h5 a:focus, .m-block.m-default h5 a:active,
+.m-block.m-default h6 a:hover, .m-block.m-default h6 a:focus, .m-block.m-default h6 a:active {
+  color: #a5c9ea;
+}
+.m-block.m-primary h3 a:hover, .m-block.m-primary h3 a:focus, .m-block.m-primary h3 a:active,
+.m-block.m-primary h4 a:hover, .m-block.m-primary h4 a:focus, .m-block.m-primary h4 a:active,
+.m-block.m-primary h5 a:hover, .m-block.m-primary h5 a:focus, .m-block.m-primary h5 a:active,
+.m-block.m-primary h6 a:hover, .m-block.m-primary h6 a:focus, .m-block.m-primary h6 a:active {
+  color: #dcdcdc;
+}
+.m-block.m-success h3 a:hover, .m-block.m-success h3 a:focus, .m-block.m-success h3 a:active,
+.m-block.m-success h4 a:hover, .m-block.m-success h4 a:focus, .m-block.m-success h4 a:active,
+.m-block.m-success h5 a:hover, .m-block.m-success h5 a:focus, .m-block.m-success h5 a:active,
+.m-block.m-success h6 a:hover, .m-block.m-success h6 a:focus, .m-block.m-success h6 a:active {
+  color: #acecbe;
+}
+.m-block.m-warning h3 a:hover, .m-block.m-warning h3 a:focus, .m-block.m-warning h3 a:active,
+.m-block.m-warning h4 a:hover, .m-block.m-warning h4 a:focus, .m-block.m-warning h4 a:active,
+.m-block.m-warning h5 a:hover, .m-block.m-warning h5 a:focus, .m-block.m-warning h5 a:active,
+.m-block.m-warning h6 a:hover, .m-block.m-warning h6 a:focus, .m-block.m-warning h6 a:active {
+  color: #e9ecae;
+}
+.m-block.m-danger h3 a:hover, .m-block.m-danger h3 a:focus, .m-block.m-danger h3 a:active,
+.m-block.m-danger h4 a:hover, .m-block.m-danger h4 a:focus, .m-block.m-danger h4 a:active,
+.m-block.m-danger h5 a:hover, .m-block.m-danger h5 a:focus, .m-block.m-danger h5 a:active,
+.m-block.m-danger h6 a:hover, .m-block.m-danger h6 a:focus, .m-block.m-danger h6 a:active {
+  color: #ff9391;
+}
+.m-block.m-info h3 a:hover, .m-block.m-info h3 a:focus, .m-block.m-info h3 a:active,
+.m-block.m-info h4 a:hover, .m-block.m-info h4 a:focus, .m-block.m-info h4 a:active,
+.m-block.m-info h5 a:hover, .m-block.m-info h5 a:focus, .m-block.m-info h5 a:active,
+.m-block.m-info h6 a:hover, .m-block.m-info h6 a:focus, .m-block.m-info h6 a:active {
+  color: #5297d7;
 }
 div.m-button a, .m-label { color: #22272e; }
 div.m-button.m-flat a { color: #dcdcdc; }
diff --git a/css/m-light+doxygen.compiled.css b/css/m-light+doxygen.compiled.css
index f4427b3b..5023cacd 100644
--- a/css/m-light+doxygen.compiled.css
+++ b/css/m-light+doxygen.compiled.css
@@ -1157,51 +1157,91 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
   background-color: #f7e3db;
 }
 .m-block.m-default { border-left-color: #f7e3db; }
-.m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6 {
+.m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6,
+.m-text.m-default, .m-label.m-flat.m-default {
   color: #000000;
 }
+.m-block.m-default h3 a, .m-block.m-default h4 a, .m-block.m-default h5 a, .m-block.m-default h6 a {
+  color: #ea7944;
+}
 .m-block.m-primary { border-left-color: #cb4b16; }
-.m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6 {
+.m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6,
+.m-block.m-primary h3 a, .m-block.m-primary h4 a, .m-block.m-primary h5 a, .m-block.m-primary h6 a,
+.m-text.m-primary, .m-label.m-flat.m-primary {
   color: #cb4b16;
 }
 .m-block.m-success { border-left-color: #31c25d; }
-.m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6 {
+.m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6,
+.m-block.m-success h3 a, .m-block.m-success h4 a, .m-block.m-success h5 a, .m-block.m-success h6 a,
+.m-text.m-success, .m-label.m-flat.m-success {
   color: #31c25d;
 }
 .m-block.m-warning { border-left-color: #c7cf2f; }
-.m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6 {
+.m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6,
+.m-block.m-warning h3 a, .m-block.m-warning h4 a, .m-block.m-warning h5 a, .m-block.m-warning h6 a,
+.m-text.m-warning, .m-label.m-flat.m-warning {
   color: #c7cf2f;
 }
 .m-block.m-danger { border-left-color: #f60000; }
-.m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6 {
+.m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6,
+.m-block.m-danger h3 a, .m-block.m-danger h4 a, .m-block.m-danger h5 a, .m-block.m-danger h6 a,
+.m-text.m-danger, .m-label.m-flat.m-danger {
   color: #f60000;
 }
 .m-block.m-info { border-left-color: #2e7dc5; }
-.m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6 {
+.m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6,
+.m-block.m-info h3 a, .m-block.m-info h4 a, .m-block.m-info h5 a, .m-block.m-info h6 a,
+.m-text.m-info, .m-label.m-flat.m-info {
   color: #2e7dc5;
 }
-.m-block.m-dim {
-  border-left-color: #bdbdbd;
+.m-block.m-dim { border-left-color: #bdbdbd; }
+.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim {
   color: #bdbdbd;
 }
-.m-block.m-dim a { color: #c0c0c0; }
-.m-block.m-dim a:hover, .m-block.m-dim a:focus, .m-block.m-dim a:active {
+.m-block.m-dim a, .m-text.m-dim a { color: #c0c0c0; }
+.m-block.m-dim a:hover, .m-block.m-dim a:focus, .m-block.m-dim a:active,
+.m-text.m-dim a:hover, .m-text.m-dim a:focus, .m-text.m-dim a:active {
   color: #949494;
 }
 .m-block.m-flat { border-color: transparent; }
 .m-block.m-flat h3, .m-block.m-flat h4, .m-block.m-flat h5. .m-block.m-flat h6 {
   color: #000000;
 }
-.m-text.m-default, .m-label.m-flat.m-default { color: #000000; }
-.m-text.m-primary, .m-label.m-flat.m-primary { color: #cb4b16; }
-.m-text.m-success, .m-label.m-flat.m-success { color: #31c25d; }
-.m-text.m-warning, .m-label.m-flat.m-warning { color: #c7cf2f; }
-.m-text.m-danger, .m-label.m-flat.m-danger { color: #f60000; }
-.m-text.m-info, .m-label.m-flat.m-info { color: #2e7dc5; }
-.m-text.m-dim, .m-label.m-flat.m-dim { color: #bdbdbd; }
-.m-text.m-dim a { color: #c0c0c0; }
-.m-text.m-dim a:hover, .m-text.m-dim a:focus, .m-text.m-dim a:active {
-  color: #949494;
+.m-block.m-default h3 a:hover, .m-block.m-default h3 a:focus, .m-block.m-default h3 a:active,
+.m-block.m-default h4 a:hover, .m-block.m-default h4 a:focus, .m-block.m-default h4 a:active,
+.m-block.m-default h5 a:hover, .m-block.m-default h5 a:focus, .m-block.m-default h5 a:active,
+.m-block.m-default h6 a:hover, .m-block.m-default h6 a:focus, .m-block.m-default h6 a:active {
+  color: #cb4b16;
+}
+.m-block.m-primary h3 a:hover, .m-block.m-primary h3 a:focus, .m-block.m-primary h3 a:active,
+.m-block.m-primary h4 a:hover, .m-block.m-primary h4 a:focus, .m-block.m-primary h4 a:active,
+.m-block.m-primary h5 a:hover, .m-block.m-primary h5 a:focus, .m-block.m-primary h5 a:active,
+.m-block.m-primary h6 a:hover, .m-block.m-primary h6 a:focus, .m-block.m-primary h6 a:active {
+  color: #000000;
+}
+.m-block.m-success h3 a:hover, .m-block.m-success h3 a:focus, .m-block.m-success h3 a:active,
+.m-block.m-success h4 a:hover, .m-block.m-success h4 a:focus, .m-block.m-success h4 a:active,
+.m-block.m-success h5 a:hover, .m-block.m-success h5 a:focus, .m-block.m-success h5 a:active,
+.m-block.m-success h6 a:hover, .m-block.m-success h6 a:focus, .m-block.m-success h6 a:active {
+  color: #dcf6e3;
+}
+.m-block.m-warning h3 a:hover, .m-block.m-warning h3 a:focus, .m-block.m-warning h3 a:active,
+.m-block.m-warning h4 a:hover, .m-block.m-warning h4 a:focus, .m-block.m-warning h4 a:active,
+.m-block.m-warning h5 a:hover, .m-block.m-warning h5 a:focus, .m-block.m-warning h5 a:active,
+.m-block.m-warning h6 a:hover, .m-block.m-warning h6 a:focus, .m-block.m-warning h6 a:active {
+  color: #f6f6dc;
+}
+.m-block.m-danger h3 a:hover, .m-block.m-danger h3 a:focus, .m-block.m-danger h3 a:active,
+.m-block.m-danger h4 a:hover, .m-block.m-danger h4 a:focus, .m-block.m-danger h4 a:active,
+.m-block.m-danger h5 a:hover, .m-block.m-danger h5 a:focus, .m-block.m-danger h5 a:active,
+.m-block.m-danger h6 a:hover, .m-block.m-danger h6 a:focus, .m-block.m-danger h6 a:active {
+  color: #f6dddc;
+}
+.m-block.m-info h3 a:hover, .m-block.m-info h3 a:focus, .m-block.m-info h3 a:active,
+.m-block.m-info h4 a:hover, .m-block.m-info h4 a:focus, .m-block.m-info h4 a:active,
+.m-block.m-info h5 a:hover, .m-block.m-info h5 a:focus, .m-block.m-info h5 a:active,
+.m-block.m-info h6 a:hover, .m-block.m-info h6 a:focus, .m-block.m-info h6 a:active {
+  color: #c6ddf2;
 }
 div.m-button a, .m-label { color: #ffffff; }
 div.m-button.m-flat a { color: #000000; }
diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index b3c6f10d..da316cb6 100644
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -1157,51 +1157,91 @@ figure.m-figure:not(.m-flat) > svg.m-graph:first-child {
   background-color: #f7e3db;
 }
 .m-block.m-default { border-left-color: #f7e3db; }
-.m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6 {
+.m-block.m-default h3, .m-block.m-default h4, .m-block.m-default h5, .m-block.m-default h6,
+.m-text.m-default, .m-label.m-flat.m-default {
   color: #000000;
 }
+.m-block.m-default h3 a, .m-block.m-default h4 a, .m-block.m-default h5 a, .m-block.m-default h6 a {
+  color: #ea7944;
+}
 .m-block.m-primary { border-left-color: #cb4b16; }
-.m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6 {
+.m-block.m-primary h3, .m-block.m-primary h4, .m-block.m-primary h5, .m-block.m-primary h6,
+.m-block.m-primary h3 a, .m-block.m-primary h4 a, .m-block.m-primary h5 a, .m-block.m-primary h6 a,
+.m-text.m-primary, .m-label.m-flat.m-primary {
   color: #cb4b16;
 }
 .m-block.m-success { border-left-color: #31c25d; }
-.m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6 {
+.m-block.m-success h3, .m-block.m-success h4, .m-block.m-success h5, .m-block.m-success h6,
+.m-block.m-success h3 a, .m-block.m-success h4 a, .m-block.m-success h5 a, .m-block.m-success h6 a,
+.m-text.m-success, .m-label.m-flat.m-success {
   color: #31c25d;
 }
 .m-block.m-warning { border-left-color: #c7cf2f; }
-.m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6 {
+.m-block.m-warning h3, .m-block.m-warning h4, .m-block.m-warning h5, .m-block.m-warning h6,
+.m-block.m-warning h3 a, .m-block.m-warning h4 a, .m-block.m-warning h5 a, .m-block.m-warning h6 a,
+.m-text.m-warning, .m-label.m-flat.m-warning {
   color: #c7cf2f;
 }
 .m-block.m-danger { border-left-color: #f60000; }
-.m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6 {
+.m-block.m-danger h3, .m-block.m-danger h4, .m-block.m-danger h5, .m-block.m-danger h6,
+.m-block.m-danger h3 a, .m-block.m-danger h4 a, .m-block.m-danger h5 a, .m-block.m-danger h6 a,
+.m-text.m-danger, .m-label.m-flat.m-danger {
   color: #f60000;
 }
 .m-block.m-info { border-left-color: #2e7dc5; }
-.m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6 {
+.m-block.m-info h3, .m-block.m-info h4, .m-block.m-info h5, .m-block.m-info h6,
+.m-block.m-info h3 a, .m-block.m-info h4 a, .m-block.m-info h5 a, .m-block.m-info h6 a,
+.m-text.m-info, .m-label.m-flat.m-info {
   color: #2e7dc5;
 }
-.m-block.m-dim {
-  border-left-color: #bdbdbd;
+.m-block.m-dim { border-left-color: #bdbdbd; }
+.m-block.m-dim, .m-text.m-dim, .m-label.m-flat.m-dim {
   color: #bdbdbd;
 }
-.m-block.m-dim a { color: #c0c0c0; }
-.m-block.m-dim a:hover, .m-block.m-dim a:focus, .m-block.m-dim a:active {
+.m-block.m-dim a, .m-text.m-dim a { color: #c0c0c0; }
+.m-block.m-dim a:hover, .m-block.m-dim a:focus, .m-block.m-dim a:active,
+.m-text.m-dim a:hover, .m-text.m-dim a:focus, .m-text.m-dim a:active {
   color: #949494;
 }
 .m-block.m-flat { border-color: transparent; }
 .m-block.m-flat h3, .m-block.m-flat h4, .m-block.m-flat h5. .m-block.m-flat h6 {
   color: #000000;
 }
-.m-text.m-default, .m-label.m-flat.m-default { color: #000000; }
-.m-text.m-primary, .m-label.m-flat.m-primary { color: #cb4b16; }
-.m-text.m-success, .m-label.m-flat.m-success { color: #31c25d; }
-.m-text.m-warning, .m-label.m-flat.m-warning { color: #c7cf2f; }
-.m-text.m-danger, .m-label.m-flat.m-danger { color: #f60000; }
-.m-text.m-info, .m-label.m-flat.m-info { color: #2e7dc5; }
-.m-text.m-dim, .m-label.m-flat.m-dim { color: #bdbdbd; }
-.m-text.m-dim a { color: #c0c0c0; }
-.m-text.m-dim a:hover, .m-text.m-dim a:focus, .m-text.m-dim a:active {
-  color: #949494;
+.m-block.m-default h3 a:hover, .m-block.m-default h3 a:focus, .m-block.m-default h3 a:active,
+.m-block.m-default h4 a:hover, .m-block.m-default h4 a:focus, .m-block.m-default h4 a:active,
+.m-block.m-default h5 a:hover, .m-block.m-default h5 a:focus, .m-block.m-default h5 a:active,
+.m-block.m-default h6 a:hover, .m-block.m-default h6 a:focus, .m-block.m-default h6 a:active {
+  color: #cb4b16;
+}
+.m-block.m-primary h3 a:hover, .m-block.m-primary h3 a:focus, .m-block.m-primary h3 a:active,
+.m-block.m-primary h4 a:hover, .m-block.m-primary h4 a:focus, .m-block.m-primary h4 a:active,
+.m-block.m-primary h5 a:hover, .m-block.m-primary h5 a:focus, .m-block.m-primary h5 a:active,
+.m-block.m-primary h6 a:hover, .m-block.m-primary h6 a:focus, .m-block.m-primary h6 a:active {
+  color: #000000;
+}
+.m-block.m-success h3 a:hover, .m-block.m-success h3 a:focus, .m-block.m-success h3 a:active,
+.m-block.m-success h4 a:hover, .m-block.m-success h4 a:focus, .m-block.m-success h4 a:active,
+.m-block.m-success h5 a:hover, .m-block.m-success h5 a:focus, .m-block.m-success h5 a:active,
+.m-block.m-success h6 a:hover, .m-block.m-success h6 a:focus, .m-block.m-success h6 a:active {
+  color: #dcf6e3;
+}
+.m-block.m-warning h3 a:hover, .m-block.m-warning h3 a:focus, .m-block.m-warning h3 a:active,
+.m-block.m-warning h4 a:hover, .m-block.m-warning h4 a:focus, .m-block.m-warning h4 a:active,
+.m-block.m-warning h5 a:hover, .m-block.m-warning h5 a:focus, .m-block.m-warning h5 a:active,
+.m-block.m-warning h6 a:hover, .m-block.m-warning h6 a:focus, .m-block.m-warning h6 a:active {
+  color: #f6f6dc;
+}
+.m-block.m-danger h3 a:hover, .m-block.m-danger h3 a:focus, .m-block.m-danger h3 a:active,
+.m-block.m-danger h4 a:hover, .m-block.m-danger h4 a:focus, .m-block.m-danger h4 a:active,
+.m-block.m-danger h5 a:hover, .m-block.m-danger h5 a:focus, .m-block.m-danger h5 a:active,
+.m-block.m-danger h6 a:hover, .m-block.m-danger h6 a:focus, .m-block.m-danger h6 a:active {
+  color: #f6dddc;
+}
+.m-block.m-info h3 a:hover, .m-block.m-info h3 a:focus, .m-block.m-info h3 a:active,
+.m-block.m-info h4 a:hover, .m-block.m-info h4 a:focus, .m-block.m-info h4 a:active,
+.m-block.m-info h5 a:hover, .m-block.m-info h5 a:focus, .m-block.m-info h5 a:active,
+.m-block.m-info h6 a:hover, .m-block.m-info h6 a:focus, .m-block.m-info h6 a:active {
+  color: #c6ddf2;
 }
 div.m-button a, .m-label { color: #ffffff; }
 div.m-button.m-flat a { color: #000000; }
diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst
index 06862c6c..ed86e0b6 100644
--- a/doc/css/components-test.rst
+++ b/doc/css/components-test.rst
@@ -480,6 +480,110 @@ Different :html:`<h*>` tags.
       </div>
     </div>
 
+Blocks, notes with a link
+=========================
+
+Different :html:`<h*>` tags.
+
+.. raw:: html
+
+    <div class="m-row">
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-default">
+          <h3><a href="#">Header link</a></h3>
+          Lorem ipsum dolor sit amet. <a href="#">Text link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-primary">
+          <h3><a href="#">Header link</a></h3>
+          Lorem ipsum dolor sit amet. <a href="#">Text link.</a>
+        </div>
+      </div>
+      <div class="m-clearfix-s"></div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-success">
+          <h3><a href="#">Header link</a></h3>
+          Lorem ipsum dolor sit amet. <a href="#">Text link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-warning">
+          <h3><a href="#">Header link</a></h3>
+          Lorem ipsum dolor sit amet. <a href="#">Text link.</a>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-danger">
+          <h3><a href="#">Header link</a></h3>
+          Lorem ipsum dolor sit amet. <a href="#">Text link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-info">
+          <h3><a href="#">Header link</a></h3>
+          Lorem ipsum dolor sit amet. <a href="#">Text link.</a>
+        </div>
+      </div>
+      <div class="m-clearfix-s"></div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-note m-dim">
+          <h3><a href="#">Header link</a></h3>
+          Lorem ipsum dolor sit amet. <a href="#">Text link.</a>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-default">
+          <h3><a href="#">Header link</a></h3>
+          Lorem ipsum dolor sit amet. <a href="#">Text link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-primary">
+          <h3><a href="#">Header link</a></h3>
+          Lorem ipsum dolor sit amet. <a href="#">Text link.</a>
+        </div>
+      </div>
+      <div class="m-clearfix-s"></div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-success">
+          <h3><a href="#">Header link</a></h3>
+          Lorem ipsum dolor sit amet. <a href="#">Text link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-warning">
+          <h3><a href="#">Header link</a></h3>
+          Lorem ipsum dolor sit amet. <a href="#">Text link.</a>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-danger">
+          <h3><a href="#">Header link</a></h3>
+          Lorem ipsum dolor sit amet. <a href="#">Text link.</a>
+        </div>
+      </div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-info">
+          <h3><a href="#">Header link</a></h3>
+          Lorem ipsum dolor sit amet. <a href="#">Text link.</a>
+        </div>
+      </div>
+      <div class="m-clearfix-s"></div>
+      <div class="m-col-m-3 m-col-s-6">
+        <div class="m-block m-dim">
+          <h3><a href="#">Header link</a></h3>
+          Lorem ipsum dolor sit amet. <a href="#">Text link.</a>
+        </div>
+      </div>
+    </div>
+
 Labels
 ======
 
diff --git a/doc/css/components.rst b/doc/css/components.rst
index 94826dd2..8e4f7a64 100644
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -67,7 +67,7 @@ Blocks, defined by :css:`.m-block`, wrap the content in a light frame and add a
 bolder colored bar on the left. Use in combination with one of the color styles
 above. Block caption should go into :html:`<h3>` (or :html:`<h4>`,
 :html:`<h5>`, :html:`<h6>`) and is colored in respect to the color style as
-well. Text and links always have the default color, except for
+well. Text and links inside the text always have the default color, except for
 :css:`.m-block.m-dim`. It's also possible to have a block without the border,
 just add :css:`.m-flat` class to it.