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

Tweak website styles for accessibility. 

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;
display: inline;
padding-right: 25px;
font-size: 12px;
font-size: 14px;
line-height: 1.7em;
&:last-of-type {
padding-right: 0px;
}
}
p {
line-height: 1.5em;
line-height: 1.7em;
font-weight: 300;
font-size: 14px;
color: $grey;
font-size: 16px;
color: $darkgrey;
}
a {
font-size: 16px;

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

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

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

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

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

@ -1,12 +1,12 @@
<footer>
<div class="wrapper footer-links clearfix">
<ul class="left-links">
<li><a href="{{ .Site.Params.twitter_url }}"><img src="/img/twitter.png" />Twitter</a></li>
<li><a href="{{ .Site.Params.github_url }}"><img src="/img/github.svg" />Github</a></li>
<li><a href="{{ .Site.Params.slack_url }}"><img src="/img/slack.png" />Slack</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" alt="GitHub logo" />GitHub</a></li>
<li><a href="{{ .Site.Params.slack_url }}"><img src="/img/slack.png" alt="Slack logo" />Slack</a></li>
</ul>
<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>
</footer>