Commit 36e51bb5 authored by Morgan Nichols's avatar Morgan Nichols Committed by Eugen Rochko

Fix accessibility issues, and a few content tweaks (#20)

* Fix accessibility issues, and a few content tweaks

Accessibility issues found via http://wave.webaim.org:

* Improved text contrast in several places
* Fixed some duplicate alt tags
* Fixed a heading hierarchy bug
* Labelled a form element

Other changes:

* Removed the color swatches, they were flagged for contrast and looked
  out of place to me. If these were supposed to be part of the press-
  kit stuff, we should either put them in those files, or add some text
  on the page explaining why they're there.
* Added a (temporary) link back to TheKinrar's instance wizard, to be
  removed once this one has feature parity (Since right now not having
  a link there looks like a regression of features from the user POV)

* Reinstate color swatches, move wizard button
parent 5b68dd00
......@@ -59,19 +59,19 @@ const App = () => (
<div className='hero'>
<div className='hero__floats'>
<img src={cloud2} className='float-1' alt='Cloud' />
<img src={cloud4} className='float-2' alt='Cloud' />
<img src={cloud3} className='float-3' alt='Cloud' />
<img src={cloud2} className='float-1' alt='Cloud 1' />
<img src={cloud4} className='float-2' alt='Cloud 2' />
<img src={cloud3} className='float-3' alt='Cloud 3' />
</div>
<img className='desktop' src={screenshotFull} alt='Screenshot of Mastodon on desktop'/>
<img className='mobile' src={screenshotMobile} alt='Screenshot of Mastodon on desktop'/>
<img className='mobile' src={screenshotMobile} alt='Screenshot of Mastodon on mobile'/>
</div>
</div>
<div className='as-seen-on'>
<div className='container'>
<h3>As seen on</h3>
<h2>As seen on</h2>
<div className='logo-grid'>
<div>
......
......@@ -12,15 +12,18 @@ const Credits = () => (
<div className='branding'>
<h3>Branding</h3>
<p>Download logos, icons, and elephants</p>
<a href='#' className='cta button alt'>Download press kit</a>
<a href='#' className='cta button alt'>Get press kit</a>
</div>
</div>
<div className='container row'>
<div className='color-scheme color-1'>#282c37</div>
<div className='color-scheme color-2'>#9baec8</div>
<div className='color-scheme color-3'>#d9e1e8</div>
<div className='color-scheme color-4'>#2b90d9</div>
<div className='container color-scheme'>
<h3>Mastodon color scheme</h3>
<div className='row'>
<div className='color-swatch color-1'>#282c37</div>
<div className='color-swatch color-2'>#9baec8</div>
<div className='color-swatch color-3'>#d9e1e8</div>
<div className='color-swatch color-4'>#2b90d9</div>
</div>
</div>
</div>
);
......
......@@ -23,9 +23,8 @@ export default class Wizard extends React.PureComponent {
return (
<div className='wizard-page' id='getting-started'>
<h2>Instance picker</h2>
<h2>Choose an instance picker</h2>
<p>Each instance is a separate, independently owned gateway into the fediverse. You can talk to your friends regardless of which one you choose, but they have different moderation policies and interest groups.</p>
<div className='wizard'>
<div className='wizard-header'>
<div className='wizard-column'>Server</div>
......@@ -42,8 +41,16 @@ export default class Wizard extends React.PureComponent {
</div>
<div className='wizard-controls'>
<div classname='external-wizard'>
<a className='cta button' target='_blank' href="https://instances.mastodon.xyz">
Help me choose
</a>
</div>
<div className='spacer'></div>
<div className='search'>
<label for='instance-search' className='accessibly-hidden'>Search for an instance</label>
<input
id='instance-search'
className='search__input'
type='text'
placeholder='Search'
......
......@@ -167,12 +167,12 @@ $phi: 1.6180339887498948482;
margin-bottom: 20px;
strong {
color: $vibrant;
color: $lightest;
}
}
p {
color: darken($lighter, 18%);
color: $lighter;
font-size: 18px;
margin-bottom: 26px;
}
......@@ -222,10 +222,10 @@ $phi: 1.6180339887498948482;
padding: 30px 0;
padding-bottom: 50px;
h3 {
h2 {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
color: lighten($darkest, 30%);
color: lighten($darkest, 40%);
text-align: center;
margin-bottom: 20px;
}
......@@ -331,7 +331,7 @@ $phi: 1.6180339887498948482;
strong {
font-weight: 500;
color: $lighter;
color: $lightest;
}
}
......@@ -348,7 +348,7 @@ $phi: 1.6180339887498948482;
font-family: 'Montserrat', sans-serif;
font-size: 21px;
margin-bottom: 20px;
color: $lighter;
color: $lightest;
}
}
......@@ -401,7 +401,7 @@ $phi: 1.6180339887498948482;
font-size: 16px;
line-height: 24px;
margin-bottom: 20px;
color: $lighter;
color: $lightest;
}
p {
......
......@@ -9,7 +9,7 @@
font-size: 16px;
line-height: 24px;
margin-bottom: 20px;
color: $lighter;
color: $lightest;
}
p {
......@@ -28,6 +28,9 @@
.color-scheme {
margin-top: 50px;
}
.color-swatch {
padding: 10px;
padding-top: 36px;
border-radius: 4px;
......
......@@ -7,7 +7,7 @@
font-family: 'Montserrat', sans-serif;
font-size: 21px;
margin-bottom: 20px;
color: $lighter;
color: $lightest;
}
h3 {
......@@ -15,7 +15,7 @@
font-size: 16px;
line-height: 24px;
margin-bottom: 20px;
color: $lighter;
color: $lightest;
}
p {
......
......@@ -9,7 +9,7 @@
font-family: 'Montserrat', sans-serif;
font-size: 21px;
margin-bottom: 20px;
color: $lighter;
color: $lightest;
}
p {
......@@ -142,7 +142,15 @@
.wizard-controls {
margin-bottom: 50px;
display: flex;
justify-content: flex-end;
.cta.button {
padding-top: 0;
padding-bottom: 0;
}
.spacer {
flex-grow: 1
}
}
.search__input {
......@@ -151,7 +159,7 @@
box-sizing: border-box;
border-radius: 4px;
display: block;
width: 100%;
min-width: 10em;
border: none;
padding: 10px;
padding-right: 30px;
......
......@@ -4,8 +4,22 @@ body {
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
background-color: $darkest;
color: $darker;
color: $lighter;
font-size: 13px;
line-height: 18px;
font-weight: 400;
}
label.accessibly-hidden {
float: left;
margin-left: -100000px;
}
a.inline, a.inline:visited {
color: $lightest;
text-decoration: none;
}
a.inline:hover {
text-decoration: underline;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment