More clarity a11y tweaks

src/templates/common/elements/affiliations_ul.html

@@ -1,4 +1,4 @@
-<ul>
+<ul class="no-bullet-list">
   {% for affiliation in affiliations %}
     <li>
       {% include "common/elements/affiliation_display.html" %}

src/themes/clean/assets/css/cardinal.css

@@ -18,6 +18,7 @@
   --text-white: #fff;
   --text-header: var(--text-black);
   --body-text: #525252;
+  --body-text-dyslexia: var(--text-black);
   --nav-text: #636363;
   --nav-text-active: var(--brand-primary);
   --recede-opacity: 70%;
@@ -39,6 +40,8 @@
   --bg-card-alt: #f8f9fa;
   --bg-blockquote: #F0F0F0;
   --bg-overlay: rgba(55, 55, 55, 0.8);
+  --bg-dyslexia: #F5F5DC;
+  --bg-dyslexia-em: #FAFAC8;
 
   /* UI State Colors */
   --color-success: green;
@@ -95,4 +98,7 @@
   --pagination-active-bg: var(--btn-primary-bg);
   --pagination-active-border: var(--btn-primary-border);
   --pagination-disabled-color: var(--text-muted);
+
+  /* workarounds, note the fill colour is hardcoded not a variable*/
+  --custom-select-background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23747474' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
 }

src/themes/clean/assets/css/clean.css

@@ -234,6 +234,10 @@ main a {
   background-color: var(--bg-card-alt);
 }
 
+.card-img-overlay.white-text > .card-text {
+  background: var(--bg-overlay);
+}
+
 .card.no-image .card-img-overlay {
   position: relative;
   background-color: var(--bg-card-alt);
@@ -271,6 +275,10 @@ main a {
   font-size: 1.5rem;
 }
 
+.card-title.white-text {
+  background: var(--bg-overlay);
+}
+
 .full-width-card {
   min-width: 100%;
 }
@@ -288,8 +296,8 @@ main a {
 
 .btn-primary:hover,
 .btn-primary:focus {
-  color: var(--btn-primary-text);
-  background-color: var(--btn-primary-bg);
+  color: var(--btn-primary-bg);
+  background-color: var(--btn-primary-text);
   border-color: var(--btn-primary-border);
 }
 
@@ -298,7 +306,7 @@ main a {
 .btn-background:visited {
   background-color: inherit;
   color: inherit;
-  border: 1px solid var(--brand-primary);
+  border: 1px solid var(--btn-outline-secondary);
   padding: 0 10px;
   min-width: 7rem;
   min-height: 2rem;
@@ -312,9 +320,9 @@ main a {
 }
 
 .btn-background:hover {
-  color: var(--text-on-dark);
-  background-color: var(--brand-primary);
-  border-color: var(--brand-primary);
+  color: var(--btn-primary-text);
+  background-color: var(--btn-primary-bg);
+  border-color: var(--btn-primary-border);
   transition: var(--transition-standard);
 }
 
@@ -338,9 +346,16 @@ a.btn {
   border: 1px black solid;
 }
 
-.alert .close {
+.alert .close,
+button.close {
   color: var(--color-danger);
   opacity: var(--recede-opacity);
+  text-shadow: none;
+}
+
+button.close:hover {
+  background: var(--color-danger);
+  color: var(--body-text)
 }
 
 .btn-outline-secondary {
@@ -395,7 +410,7 @@ a.btn {
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(transparent, rgba(0, 0, 0, var(--recede-opacity)) 20%);
+  background: var(--bg-overlay);
   padding: 2rem;
   text-align: center;
 }
@@ -437,7 +452,6 @@ a.btn {
   margin-bottom: 0.25rem;
   font-weight: 500;
   line-height: 1.3;
-  color: var(--text-white);
 }
 
 .article-thumbnail {
@@ -477,6 +491,10 @@ a.btn {
   border-bottom: 1px solid var(--border-light);
 }
 
+.article-list .article-item {
+  padding: 2rem;
+}
+
 .article-item:last-child {
   border-bottom: none;
   padding-bottom: 0;
@@ -552,6 +570,14 @@ a.btn {
   padding-bottom: var(--spacing-sm);
 }
 
+dt {
+  font-size: larger;
+}
+
+a[href^="http"] {
+  overflow-wrap: anywhere;
+}
+
 #reading-options{
   display: flex;
   gap: 1rem;
@@ -565,23 +591,26 @@ a.btn {
   z-index: 1000;
   width: fit-content;
   margin-left: auto;
-  background-color: var(--bg-body);
+  background-color: var(--bg-card-alt);
 }
 
-.btn-opt {
-    border: 1px solid #1C304A;
-    background: #f1f1f1;
+#reading-options .btn-background {
+    min-width: 3rem;
 }
 
-.dyslexia-friendly {
+.dyslexia-friendly{
     font-family: Verdana !important;
-    color: #4c4c4c;
-    background-color: #F5F5DC;
+    color: var(--body-text-dyslexia) !important;
+    background-color: var(--bg-dyslexia) !important;
+}
+
+.dyslexia-friendly .fa {
+    font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
 }
 
 .dyslexia-friendly em,
 .dyslexia-friendly i {
-    background-color: #FAFAC8;
+    background-color: var(--bg-dyslexia-em);
     font-style: normal;
 }
 
@@ -773,12 +802,25 @@ header svg {
 /* ========================================================================
    Form Elements
    ======================================================================== */
+input[type="text"],
+input[type="email"],
+textarea.form-control,
+.custom-select {
+  background: var(--bg-card-alt);
+  color: var(--text-muted);
+  border: solid, 1px, var(--brand-primary);
+}
+.custom-select {
+  background: var(--custom-select-background);
+}
+
 .homepage-element-search-bar input[type="text"] {
   font-size: 1.5rem;
 }
 
-.homepage-element-search-bar .input-group-text {
+.homepage-element-search-bar .input-group .input-group-text {
   font-size: 1.5rem;
+  height: 100%;
 }
 
 .input-group .form-control,
@@ -802,6 +844,12 @@ header svg {
   align-items: stretch;
 }
 
+.input-group-text {
+  color: var(--body-text);
+  background: var(--bg-card-alt);
+  border: solid, 1px, var(--brand-primary);
+}
+
 .input-group .custom-select,
 .input-group .input-group-text {
   height: 2.5rem;
@@ -833,7 +881,8 @@ header svg {
 
 .badge-secondary {
   background-color: var(--brand-secondary);
-  color: #fff;
+  color: var(--text-white);
+  text-decoration: none;
 }
 
 input + .btn-background {
@@ -903,12 +952,14 @@ span + .btn-background {
     position: sticky;
     max-height: 100vh;
     overflow-y: auto;
-    top: 60px;
+    top: 80px;
     z-index: 999;
 }
 
-.table-caption {
+.table-caption,
+.fig-caption {
   margin-bottom: var(--spacing-sm);
+  background: var(--bg-card-alt) !important;
 }
 
 .math-formulae {
@@ -957,6 +1008,10 @@ span + .btn-background {
   margin-left: 0;
 }
 
+.line-spaced-list > li {
+  margin-bottom: 0.7rem;
+}
+
 .keywords-list {
   list-style: none;
   padding-left: 0;
@@ -1115,6 +1170,15 @@ span + .btn-background {
   min-height: 24px;
 }
 
+.modal-body {
+  background: var(--bg-body);
+  border: var(--border-medium) 1px solid;
+}
+
+.modal-header {
+    background: var(--bg-card-alt);
+}
+
 /* ========================================================================
    Accessibility & Skip Navigation
    ======================================================================== */

src/themes/clean/assets/css/evergreen.css

@@ -18,6 +18,7 @@
   --text-white: #fff;
   --text-header: var(--text-black);
   --body-text: #525252;
+  --body-text-dyslexia: var(--text-black);
   --nav-text: #636363;
   --nav-text-active: var(--brand-primary);
   --recede-opacity: 70%;
@@ -39,6 +40,8 @@
   --bg-card-alt: #f8f9fa;
   --bg-blockquote: #F0F0F0;
   --bg-overlay: rgba(55, 55, 55, 0.8);
+  --bg-dyslexia: #F5F5DC;
+  --bg-dyslexia-em: #FAFAC8;
 
   /* UI State Colors */
   --color-success: green;
@@ -95,4 +98,7 @@
   --pagination-active-bg: var(--btn-primary-bg);
   --pagination-active-border: var(--btn-primary-border);
   --pagination-disabled-color: var(--text-muted);
+
+  /* workarounds, note the fill colour is hardcoded not a variable*/
+  --custom-select-background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23747474' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
 }

src/themes/clean/assets/css/midnight.css

@@ -1,6 +1,6 @@
 :root {
   /* Brand & Theme Colors */
-  --brand-primary: #0a0f1a;
+  --brand-primary: #4d9fff;;
   --brand-secondary: #7eb3ff;
   --color-success: #5cb85c;
   --text-link-alt: #6ba3ff;
@@ -16,6 +16,7 @@
   --text-white: #0a0f1a;
   --text-header: #ffffff;
   --body-text: #e4e6eb;
+  --body-text-dyslexia: #F5F5DC;
   --nav-text: #b0b3b8;
   --nav-text-active: #4d9fff;
   --recede-opacity: 70%;
@@ -37,6 +38,8 @@
   --bg-card-alt: #1a2235;
   --bg-blockquote: #1a2235;
   --bg-overlay: rgba(10, 15, 26, 0.9);
+  --bg-dyslexia: black;
+  --bg-dyslexia-em: var(--bg-card-alt);
 
   /* UI State Colors */
   --color-danger: #ff6b6b;
@@ -92,4 +95,8 @@
   --pagination-active-bg: var(--btn-primary-bg);
   --pagination-active-border: var(--btn-primary-border);
   --pagination-disabled-color: var(--text-muted);
+
+  /* workarounds, note the fill colour is hardcoded not a variable*/
+  --custom-select-background: var(--bg-card-alt) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23b0b3b8' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
+
 }

src/themes/clean/assets/css/ocean.css

@@ -18,6 +18,7 @@
   --text-white: #fff;
   --text-header: var(--text-black);
   --body-text: #525252;
+  --body-text-dyslexia: var(--text-black);
   --nav-text: #636363;
   --nav-text-active: var(--brand-primary);
   --recede-opacity: 70%;
@@ -39,6 +40,8 @@
   --bg-card-alt: #f8f9fa;
   --bg-blockquote: #F0F0F0;
   --bg-overlay: rgba(55, 55, 55, 0.8);
+  --bg-dyslexia: #F5F5DC;
+  --bg-dyslexia-em: #FAFAC8;
 
   /* UI State Colors */
   --color-success: green;
@@ -95,4 +98,7 @@
   --pagination-active-bg: var(--btn-primary-bg);
   --pagination-active-border: var(--btn-primary-border);
   --pagination-disabled-color: var(--text-muted);
+
+  /* workarounds, note the fill colour is hardcoded not a variable*/
+  --custom-select-background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23747474' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
 }