Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes contrast #200

Merged
merged 9 commits into from
Sep 23, 2016
Merged

Fixes contrast #200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
01dbded
Make .new-search button a bit more visible
techieshark Sep 11, 2016
2f79d43
fix new search button layout on narrow screens
techieshark Sep 11, 2016
7e3eb35
WCAG: use text-shadow for contrast
techieshark Sep 11, 2016
2885db7
WCAG: fix contrast on disclaimers + results list 2ndary action
techieshark Sep 11, 2016
96acc7f
WCAG: aria-label address, school name inputs
techieshark Sep 11, 2016
817149c
WCAG: fix contrast in school details section
techieshark Sep 11, 2016
1de7a83
WCAG: fix contrast on 'this school serves your location' text
techieshark Sep 11, 2016
4bc4652
.readmore style changes
techieshark Sep 11, 2016
2ee89da
WCAG: add alt="" on school non-content icon
techieshark Sep 11, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 51 additions & 11 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 "; /* → 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;
Expand All @@ -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;
Expand Down Expand Up @@ -200,7 +219,7 @@ ul.school-details {

.school-details .fa {
margin-right: 0.5em;
color: #7e7d7d;
color: #696767;
}
.school-details .fa-inverse {
color: white;
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
Expand Down
17 changes: 10 additions & 7 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand All @@ -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>
Expand Down Expand Up @@ -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>

Expand All @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion js/views/schoolview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down