Fixing colour contrast

kingsdigitallab · Sep 10, 2020 · f5a5365 · f5a5365
1 parent a308e28
commit f5a5365
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 12 deletions.
diff --git a/assets/scss/_settings.scss b/assets/scss/_settings.scss
@@ -62,14 +62,16 @@ $nav-anchor: #bdc1c3;
 $another-gray: #cdd7dc;
 $subhead-color: #9b9ea0;
 $dark-blue: #0a2d50;
-$bright-blue: #005ad2;
+// $bright-blue: #005ad2;
+$bright-blue: #0049d2;
 $bright-green: #28c382;
 $bright-pink: #fc5e72;
 $light-gray: #e6e6e6;
 $medium-gray: #cacaca;
 $dark-gray: #8a8a8a;
 $dark-blue-gray: #3f4649;
-$dirty-brown: #5f5550;
+// $dirty-brown: #5f5550;
+$dirty-brown: #4e4440;
 $dark-yellow: #f5b90f;
 $black: #0a0a0a;
 $white: #fefefe;

diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -117,7 +117,7 @@ cite:before {
 .datetime,
 .more,
 .more a {
-    font-size: rem-calc(20);
+    font-size: rem-calc(24);
     color: scale-color($nav-anchor, $lightness: -60%);
 }
 
@@ -423,7 +423,8 @@ iframe {
 }
 
 .with-background {
-    background: url('/static/images/grid-pattern.svg') $primary-color;
+    // background: url('/static/images/grid-pattern.svg') $primary-color;
+    background: url('/static/images/grid-pattern.svg') $dark-blue-gray;
     background-size: rem-calc(432);
 
     blockquote {
@@ -553,6 +554,10 @@ h2.heading-content {
     color: scale-color($primary-color, $lightness:-30%);
 }
 
+a.post-thumb {
+    display: block;
+}
+
 .post-title,
 .subhead {
     font-size: rem-calc(24);
@@ -701,17 +706,20 @@ nav {
         line-height: rem-calc(24);
 
         a {
-            color: #585858;
+            // color: #585858;
+            color: $dark-blue-gray;
             padding: rem-calc(4);
 
             &:hover {
-                color: $tertiary-color;
+                // color: $tertiary-color;
+                color: $bright-blue;
             }
         }
 
         .active > a {
             background: transparent;
-            color: $primary-color;
+            // color: $primary-color;
+            color: $dark-blue;
         }
     }
 }

diff --git a/assets/scss/palette-blue-azure.scss b/assets/scss/palette-blue-azure.scss
@@ -11,6 +11,12 @@
     //     color:scale-color($primary-color, $lightness:-40%)!important;
     // }
 
+    .more {
+        &::after {
+            color: $tertiary-color;
+        }
+    }
+
     a,
     h3,
     .title,

diff --git a/assets/scss/palette-gray-pink.scss b/assets/scss/palette-gray-pink.scss
@@ -4,13 +4,20 @@
 .gray-pink {
 
     &.with-background {
-        background-color: $primary-color;
+        // background-color: $primary-color;
+        background-color: scale-color($primary-color, $lightness: -70%);
     }
 
     // p {
     //  color: scale-color($bright-pink,$lightness:-50%) !important;
     // }
 
+    .more {
+        &::after {
+            color: $bright-pink;
+        }
+    }
+
     a,
     h3,
     .title,

diff --git a/assets/scss/palette-green-blue.scss b/assets/scss/palette-green-blue.scss
@@ -7,14 +7,22 @@
         background-color: $bright-green;
     }
 
+    .more {
+        &::after {
+            color: $dark-blue;
+        }
+    }
+
     a,
     h3,
     .title,
     blockquote {
-        color: $bright-blue;
+        // color: $bright-blue;
+        color: $dark-blue;
 
         &.button {
-            color: $white;
+            // color: $white;
+            color: $dark-blue;
         }
     }
 

diff --git a/assets/scss/palette-yellow-brown.scss b/assets/scss/palette-yellow-brown.scss
@@ -7,6 +7,12 @@
         background-color: $dirty-brown;
     }
 
+    .more {
+        &::after {
+            color: $dark-yellow;
+        }
+    }
+
     a,
     h3,
     .title,

diff --git a/cms/templates/cms/includes/work_index_page_children.html b/cms/templates/cms/includes/work_index_page_children.html
@@ -43,7 +43,7 @@ <h3 class="post-title">
 			{% if page.feed_image %}
 		    <div class="small-4 columns">
 		        {% image page.feed_image max-300x300 as tmp_image %}
-		        <a href="{% pageurl page %}">
+		        <a href="{% pageurl page %}" class="post-thumb">
 		            <img src="{{ tmp_image.url }}" width="100%" alt="{{ tmp_image.alt }}">
 		        </a>
 		    </div>

diff --git a/templates/includes/header.html b/templates/includes/header.html
@@ -3,7 +3,7 @@
 <div class="row collapse expanded clearfix">
     <div class="small-12 columns">
         <div class="kdl-heading">
-            <span class="show-for-large"><a href="//kdl.kcl.ac.uk/" aria-label="link to King's Digital Lab"><img src="{% static 'images/kdl-heading.svg' %}" alt="King's Digital Lab"></a></span><span class="hide-for-large"><a href="/"><img src="{% static 'images/kdl-heading-mob.svg' %}" alt="King's Digital Lab"></a></span>
+            <span class="show-for-large"><a href="/" aria-label="link to King's Digital Lab"><img src="{% static 'images/kdl-heading.svg' %}" alt="King's Digital Lab"></a></span><span class="hide-for-large"><a href="/"><img src="{% static 'images/kdl-heading-mob.svg' %}" alt="King's Digital Lab"></a></span>
         </div>
 
         <div class="float-right block-right">
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,12 @@ @@
         //     color:scale-color($primary-color, $lightness:-40%)!important;
         // }
+        .more {
+            &::after {
+                color: $tertiary-color;
+            }
+        }
         a,
         h3,
         .title,
@@ Expand Down @@