Merge pull request #200 from CodeforAustralia/fixes/191-contrast_cleaned

Fixes contrast
CodeforAustralia · Sep 23, 2016 · cfba146 · cfba146
2 parents e62ccd5 + 2ee89da
commit cfba146
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 19 deletions.
diff --git a/css/style.css b/css/style.css
@@ -8,7 +8,8 @@ body { background-color: #39acc9; color: #3e3e3e;
 	padding-bottom: 0px;
 	font-size: 34px;
 }
-.header .sitename {
+.sitename, .results-list .btn, .new-search, footer {
+	text-shadow: 0px 0px 1px #375a63;
 	text-shadow: 0px 0px 1px rgb(55, 90, 99);
 }
 .org-logo img {
@@ -60,9 +61,8 @@ a:hover .fa-circle {
 	color: #f7f6f6;
 }
 a:hover .fa-stack-1x {
-	color: #39ACC9;
-	font-size: 1.1em; // make the icons pop out a bit
-	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
+	color: #375a63; /* use same as circle's text shadow for increased contrast */
+	text-shadow: none;
 }
 
 #map-container {
@@ -140,14 +140,33 @@ a:hover .fa-stack-1x {
 }
 
 .school-info-intro {
-	color: rgb(132, 132, 132);
+	color: rgb(112, 112, 112);
+	color: #707070;
 	margin-top: 0.25em;
 }
 .school-info .field-label {
 	color: rgb(189, 239, 252); /* based on background blue but lighter for readability */
 }
 .expandable-text .body { display:none; }
 
+a.readmore {
+	font-weight: bold;
+	color: inherit;
+	text-decoration: none;
+}
+.readmore:before {
+	content: " \2192 "; /* &rarr; is → is \2192 */
+	margin-left: 2px;
+}
+.readmore span {
+    border-bottom: 1px dotted;
+    margin-left: 2px;
+    color: #717171;
+}
+.readmore:hover span {
+    border-bottom-style: solid;
+}
+
 .school-description .field-label {
 	font-size: 25px;
 	color: #d72d6c;
@@ -156,7 +175,7 @@ a:hover .fa-stack-1x {
 
 ul.school-details {
 	list-style: none;
-	background: #7e7d7d;
+	background: #696767;
 	color: white;
 	margin-top: 35px;
 	padding: 1em;
@@ -200,7 +219,7 @@ ul.school-details {
 
 .school-details .fa {
 	margin-right: 0.5em;
-	color: #7e7d7d;
+	color: #696767;
 }
 .school-details .fa-inverse {
 	color: white;
@@ -393,8 +412,10 @@ input#nearby-girls {
 	margin-right: 1em;
 }
 
-.new-search-btn-column {
-	padding-right: 0;
+@media (min-width: 768px) {
+	.new-search-btn-column {
+		padding-right: 0;
+	}
 }
 
 .new-search.btn {
@@ -409,6 +430,12 @@ input#nearby-girls {
     background-color: transparent;
  	text-decoration: none;
 }
+.new-search span {
+	border-bottom: 1px dotted;
+}
+.new-search:hover span {
+	border-bottom-style: solid;
+}
 
 .jumbotron #or {
 	text-transform: uppercase;
@@ -425,9 +452,22 @@ input#nearby-girls {
 	margin-top: 1em;
 }
 .jumbotron .disclaimer {
-	margin-top: 1em;
+	margin-top: 24px;
 	margin-bottom: 0em;
-	color: rgb(153, 153, 153);
+}
+
+.jumbotron .lesser-text {
+	font-size: 16px;
+	color: #717171;
+}
+.lesser-text a {
+	color: inherit;
+	font-weight: bold;
+	text-decoration: none;
+	border-bottom: 1px dotted;
+}
+.lesser-text a:hover {
+	border-bottom-style: solid;
 }
 .school-name-search {
 	margin-right: 2em;

diff --git a/index.html b/index.html
@@ -65,24 +65,24 @@ <h1>Find a school</h1>
         <div class="row school-name-search">
           <div class="col-lg-12">
             <div class="input-group input-group-lg">
-              <input id="schoolname" type="text" class="form-control" placeholder="A school named...">
+              <input id="schoolname" aria-label="Enter a school name to search for" type="text" class="form-control" placeholder="A school named...">
               <span class="input-group-btn">
                 <button id="button-search-name" data-input="schoolname" class="btn search" type="button">Search</button>
               </span>
             </div><!-- /input-group -->
           </div>
         </div><!-- /.row -->
 
-        <p class="disclaimer">Information subject to change; by using this, you agree to our <a href="">terms of service</a>.</p>
+        <p class="disclaimer lesser-text">Information subject to change; by using this, you agree to our <a href="">terms of service</a>.</p>
       </div>
 
       <div class="jumbotron block-address">
         <h1>I live at:</h1>
         <p class="lead">Please provide your home location<sup>*</sup> to see nearby schools:</p>
         <p>
-          <input id="address" type="text" class="form-control" placeholder="Please enter your home address..." data-google-places=true/></p>
+          <input id="address" aria-label="Enter your home street address to find nearby schools" type="text" class="form-control" placeholder="Please enter your home address..." data-google-places=true/></p>
           <a id="button-search-address" data-input="address" class="btn search" href="#" role="button">Search</a>
-          <p class="disclaimer"> <sup>*</sup>We do not keep address information. For best results please supply your full address. </p>
+          <p class="disclaimer lesser-text"> <sup>*</sup>We do not keep address information. For best results please supply your full address. </p>
       </div>
 
       <!-- RESULT -->
@@ -93,7 +93,10 @@ <h1>I live at:</h1>
         <div class="new-search-btn-container row">
           <div class="col-sm-8"></div>
           <div class="col-sm-4 new-search-btn-column">
-            <a href="#search-start" class="btn secondary new-search" role="button"><i class="fa fa-search"></i>Start a new search</a>
+            <a href="#search-start" class="btn secondary new-search" role="button">
+              <i class="fa fa-search"></i>
+              <span>Start a new search</span>
+            </a>
           </div>
         </div>
       </div>
@@ -205,7 +208,7 @@ <h1>Results</h1>
             </li>
           {{/each}}
         </ul>
-        <p>Or, try a <a class="jump-to-start" href="#search-start">new search</a>.</p>
+        <p class="lesser-text">Or, try a <a class="jump-to-start" href="#search-start">new search</a>.</p>
       </div>
     </script>
 
@@ -221,7 +224,7 @@ <h1>Results</h1>
       <div id="school-info-{{school_code}}" class="school-info">
 
         <div class="school-name">
-          <img class="icon" src="https://api.tiles.mapbox.com/v3/marker/[email protected]">
+          <img alt="" class="icon" src="https://api.tiles.mapbox.com/v3/marker/[email protected]">
           {{school_name}}
         </div>
 

diff --git a/js/views/schoolview.js b/js/views/schoolview.js
@@ -63,7 +63,7 @@ app = app || {};
 
     var result;
     if (breakpoint < text.length) { // build a teaser and full text.
-      var continueReading = '<a href="#" class="readmore"> &rarr; Continue Reading </a>';
+      var continueReading = '<a href="#" class="readmore"><span>Continue Reading</span></a>';
 
       // regex looking for short_text worth of characters + whatever it takes to get to a whitespace
       // (we only want to break on whitespace, so we don't cut words in half)