djpbessems/ContainerImage.Pinniped
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tweak website styles for accessibility.

Browse Source 
Makes most of the fonts a bit bigger, increases contrast, fixes some nits about the spacing in numbered/bulletted lists, and adds some image alt texts.

Overall this improves our Lighthouse accessibility score from 71 to 95 and I think it's subjectively more readable.

Signed-off-by: Matt Moyer <moyerm@vmware.com>
This commit is contained in:
Matt Moyer 2021-02-17 17:08:34 -06:00
parent 93d4581721
commit 25f841d063
No known key found for this signature in database
GPG Key ID: EAE88AD172C5AE2D
5 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
site/resources/_gen/assets/scss/scss/site.scss_8967e03afb92eb0cac064520bf021ba2.content
View File

File diff suppressed because one or more lines are too long

9
site/themes/pinniped/assets/scss/_base.scss
View File

@ -58,16 +58,17 @@ li {
list-style-type: none; list-style-type: none;
display: inline; display: inline;
padding-right: 25px; padding-right: 25px;
font-size: 12px; font-size: 14px;
line-height: 1.7em;
&:last-of-type { &:last-of-type {
padding-right: 0px; padding-right: 0px;
} }
} }
p { p {
line-height: 1.5em; line-height: 1.7em;
font-weight: 300; font-weight: 300;
font-size: 14px; font-size: 16px;
color: $grey; color: $darkgrey;
} }
a { a {
font-size: 16px; font-size: 16px;

37
site/themes/pinniped/assets/scss/_components.scss
View File

@ -68,7 +68,7 @@
margin: 0px; margin: 0px;
font-size: 16px; font-size: 16px;
&.strong { &.strong {
color: $black; color: $darkgrey;
} }
} }
} }
@ -261,33 +261,39 @@
font-weight: 600; font-weight: 600;
} }
a { a {
font-size: 14px; font-size: 16px;
} }
ul { ul {
list-style-type: disc; list-style-type: disc;
padding-left: 20px; padding-left: 20px;
li:first-child {
margin-top: 10px;
}
li { li {
list-style-type: unset; list-style-type: unset;
display: list-item; display: list-item;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 14px; font-size: 14px;
color: $grey; color: $darkgrey;
line-height: 1.6em; line-height: 1.6em;
list-style-image: url(/img/arrow.svg); list-style-image: url(/img/arrow.svg);
} }
} }
ol { ol {
li:first-child {
margin-top: 10px;
}
li { li {
list-style-type: decimal; list-style-type: decimal;
display: list-item; display: list-item;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 14px; font-size: 16px;
color: $grey; color: $darkgrey;
} }
} }
code { code {
background-color: $white; background-color: $white;
color: $grey; color: $darkgrey;
border: 2px solid #EFEFEF; border: 2px solid #EFEFEF;
padding: 2px 8px; padding: 2px 8px;
.c1 { .c1 {
@ -314,6 +320,9 @@
img { img {
max-width: 100%; max-width: 100%;
} }
strong {
font-family: $metropolis-medium;
}
} }
} }
@ -428,28 +437,34 @@
ul { ul {
list-style-type: disc; list-style-type: disc;
padding-left: 20px; padding-left: 20px;
li:first-child {
margin-top: 10px;
}
li { li {
list-style-type: unset; list-style-type: unset;
display: list-item; display: list-item;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 14px; font-size: 16px;
color: $grey; color: $darkgrey;
line-height: 1.6em; line-height: 1.6em;
list-style-image: url(/img/arrow.svg); list-style-image: url(/img/arrow.svg);
} }
} }
ol { ol {
li:first-child {
margin-top: 10px;
}
li { li {
list-style-type: decimal; list-style-type: decimal;
display: list-item; display: list-item;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 14px; font-size: 16px;
color: $grey; color: $darkgrey;
} }
} }
code { code {
background-color: $white; background-color: $white;
color: $grey; color: $darkgrey;
border: 2px solid #EFEFEF; border: 2px solid #EFEFEF;
padding: 2px 8px; padding: 2px 8px;
.c1 { .c1 {

2
site/themes/pinniped/assets/scss/_variables.scss
View File

@ -1,7 +1,7 @@
$white: #ffffff; $white: #ffffff;
$blue: #0095D3; $blue: #0095D3;
$darkgrey: #333333; $darkgrey: #333333;
$grey: #777777; $grey: #333333;
$lightgrey: #F2F2F2; $lightgrey: #F2F2F2;
$darkblue: #002538; $darkblue: #002538;
$purple: #7F35B2; $purple: #7F35B2;

8
site/themes/pinniped/layouts/partials/footer.html
View File

@ -1,12 +1,12 @@
<footer> <footer>
<div class="wrapper footer-links clearfix"> <div class="wrapper footer-links clearfix">
<ul class="left-links"> <ul class="left-links">
<li><a href="{{ .Site.Params.twitter_url }}"><img src="/img/twitter.png" />Twitter</a></li> <li><a href="{{ .Site.Params.twitter_url }}"><img src="/img/twitter.png" alt="Twitter logo"/>Twitter</a></li>
<li><a href="{{ .Site.Params.github_url }}"><img src="/img/github.svg" />Github</a></li> <li><a href="{{ .Site.Params.github_url }}"><img src="/img/github.svg" alt="GitHub logo" />GitHub</a></li>
<li><a href="{{ .Site.Params.slack_url }}"><img src="/img/slack.png" />Slack</a></li> <li><a href="{{ .Site.Params.slack_url }}"><img src="/img/slack.png" alt="Slack logo" />Slack</a></li>
</ul> </ul>
<div class="right-links"> <div class="right-links">
<p><span class="copywrite">&copy; {{ now.Year }} Pinniped Authors, A <a href="http://vmware.github.io/">VMware-backed project</a>.</span> <a class="image" href="/"> <img src="/img/logo.svg" /></a></p> <p><span class="copywrite">&copy; {{ now.Year }} Pinniped Authors, A <a href="http://vmware.github.io/">VMware-backed project</a>.</span> <a class="image" href="/"> <img src="/img/logo.svg" alt="Pinniped logo" /></a></p>
</div> </div>
</div> </div>
</footer> </footer>