gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

attempt to make footer more accessible

Browse Source
This commit is contained in:
Michael Q Larson
2015-02-10 16:26:59 -08:00
parent dd0c202024
commit 5f4fe74b16
3 changed files with 67 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/css/main.less
View File

@ -685,6 +685,11 @@ iframe.iphone {
min-height: 650px;
}
// This is used to give icons text for screen readers to read out, without needing the text to actually appear.
.icon-lock{
font-size: 0px;
}
//uncomment this to see the dimensions of all elements outlined in red
//* {

27
seed_data/coursewares.json
View File

@ -530,6 +530,33 @@
],
"challengeType": 0
},
{
"_id" : "bad87fee1348bd8acde08812",
"name": "Center Text with Bootstrap",
"difficulty" : "0.133",
"description": [
"Add Bootstrap's <code>text-center</code> class to your h1 and h2 elements.",
"Now that we're using Bootstrap, we can center our heading elements (h1 and h2) to make them look better. All we need to do is add the class <code>text-center</code> to the h1 and h2 elements.",
"Note that you can add several classes to the same element by seperating each of them with a space, like this: <code>&#60h2 class=\"text-red text-center\"&#62your text&#60/h2&#62</code>."
],
"tests": [
"expect($('h1')).to.have.class('text-center');",
"expect($('h2')).to.have.class('text-center');"
],
"challengeSeed": [
"<style>",
" .red-text {",
" color: #ff0000;",
" }",
"",
"</style>",
"<h1>hello world</h1>",
"<h2 class=\"red-text\">cat photo app</h2>",
"<p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
"<img class=\"img-responsive\" src=\"http://bit.ly/cutegraycat\"/>"
],
"challengeType": 0
},
{
"_id" : "bad87fee1348bd9aedf08813",
"name": "Add Alt Text to an Image TEST",

52
views/partials/footer.jade
View File

@ -1,19 +1,37 @@
.fcc-footer
.col-xs-12
a.ion-speakerphone(title="Free Code Camp's Blog", href='http://blog.freecodecamp.com', target='_blank')
| &nbsp;
a.ion-social-twitch-outline(title="Free Code Camp Live Pair Programming on Twitch.TV", href="http://www.twitch.tv/freecodecamp", target='_blank')
| &nbsp;
a.ion-social-github(title="Free Code Camp on GitHub", href="http://github.com/freecodecamp", target='_blank')
| &nbsp;
a.ion-social-twitter(title="Free Code Camp on Twitter", href="http://twitter.com/freecodecamp", target='_blank')
| &nbsp;
a.ion-social-facebook(title="Free Code Camp on Facebook", href="http://facebook.com/freecodecamp", target='_blank')
| &nbsp;
a.ion-social-linkedin(title="Free Code Camp on LinkedIn", href="http://linkedin.com/company/4831032?free-code-camp", target='_blank')
| &nbsp;
a.ion-information-circled(title="About Free Code Camp", href="/learn-to-code")
| &nbsp;
a.ion-locked(title="Free Code Camp's Privacy Policy", href="/privacy")
| &nbsp;
a.ion-code-working(title="Bonfire Coding Playground", href="/playground")
span
a.ion-speakerphone(title="Free Code Camp's Blog", href='http://blog.freecodecamp.com', target='_blank')
span.icon-lock Free Code Camp's Blog
| &nbsp;
span
a.ion-social-twitch-outline(title="Free Code Camp Live Pair Programming on Twitch.TV", href="http://www.twitch.tv/freecodecamp", target='_blank')
span.icon-lock Free Code Camp Live Pair Programming on Twitch.TV
| &nbsp;
span
a.ion-social-github(title="Free Code Camp on GitHub", href="http://github.com/freecodecamp", target='_blank')
span.icon-lock Free Code Camp on GitHub
| &nbsp;
span
a.ion-social-twitter(title="Free Code Camp on Twitter", href="http://twitter.com/freecodecamp", target='_blank')
span.icon-lock Free Code Camp on Twitter
| &nbsp;
span
a.ion-social-facebook(title="Free Code Camp on Facebook", href="http://facebook.com/freecodecamp", target='_blank')
span.icon-lock Free Code Camp on Facebook
| &nbsp;
span
a.ion-social-linkedin(title="Free Code Camp on LinkedIn", href="http://linkedin.com/company/4831032?free-code-camp", target='_blank')
span.icon-lock Free Code Camp on LinkedIn
| &nbsp;
span
a.ion-information-circled(title="About Free Code Camp", href="/learn-to-code")
span.icon-lock About Free Code Camp
| &nbsp;
span
a.ion-locked(title="Free Code Camp's Privacy Policy", href="/privacy")
span.icon-lock Free Code Camp's Privacy Policy
| &nbsp;
span
a.ion-code-working(title="Code Editor Playground", href="/playground")
span.icon-lock Code Editor Playground