Add underlines under links, for better accessibility

moodlebox · Mar 16, 2024 · e83b4f5 · e83b4f5
1 parent de481be
commit e83b4f5
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/assets/css/moodlebox.css b/assets/css/moodlebox.css
@@ -239,6 +239,7 @@ ul.list-style-none {
  letter-spacing: 0.04em;
  border-top: solid 5px transparent;
  display: inline-block;
+ text-decoration: none;
 }
 .navbar ul.nav > li > a:hover {
  border-top: solid 5px #d73c3c;
@@ -294,6 +295,7 @@ ul.list-style-none {
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  left: 0;
+ text-decoration: none;
 }
 .navbar ul.dropdown-menu li a:hover {
  color: #d73c3c;
@@ -1862,6 +1864,7 @@ fieldset[disabled] .btn-template-primary.active {
  padding: 10px 0;
  font-size: 1.125rem;
  line-height: 20px;
+ text-decoration: none;
 }
 .navbar-brand:hover,
 .navbar-brand:focus {
@@ -2084,12 +2087,16 @@ body {
 }
 a {
  color: #d73c3c;
- text-decoration: none;
+ text-decoration-line: underline;
+ text-decoration-thickness: 1px;
+ text-underline-offset: 0.4ex;
 }
 a:hover,
 a:focus {
  color: #b52626;
- text-decoration: underline;
+ text-decoration-line: underline;
+ text-decoration-thickness: 3px;
+ text-underline-offset: 0.4ex;
 }
 a:focus {
  outline: thin dotted;
@@ -2623,7 +2630,7 @@ a[data-fancybox] img {
  display: inherit;
  margin: 0;
  padding: 4px;
- box-shadow: none;
+ text-decoration: none;
  vertical-align: inherit;
 }