Merge pull request #194 from jwcooper/accessibility
Accessibility Changes
This commit is contained in:
Scott Shawcroft
GitHub
commit
dc7498f39f
14 changed files with 284 additions and 312 deletions
1
Gemfile
1
Gemfile
|
|
@ -18,7 +18,6 @@ gem "jekyll", "~> 3.8.4"
|
|||
# If you have any plugins, put them here!
|
||||
group :jekyll_plugins do
|
||||
gem 'jekyll-sitemap'
|
||||
gem 'jekyll-feed'
|
||||
gem 'jekyll-seo-tag'
|
||||
gem 'jekyll-paginate'
|
||||
end
|
||||
|
|
|
|||
|
|
@ -27,8 +27,6 @@ GEM
|
|||
pathutil (~> 0.9)
|
||||
rouge (>= 1.7, < 4)
|
||||
safe_yaml (~> 1.0)
|
||||
jekyll-feed (0.11.0)
|
||||
jekyll (~> 3.3)
|
||||
jekyll-paginate (1.1.0)
|
||||
jekyll-sass-converter (1.5.2)
|
||||
sass (~> 3.4)
|
||||
|
|
@ -65,7 +63,6 @@ PLATFORMS
|
|||
|
||||
DEPENDENCIES
|
||||
jekyll (~> 3.8.4)
|
||||
jekyll-feed
|
||||
jekyll-paginate
|
||||
jekyll-seo-tag
|
||||
jekyll-sitemap
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
so much because they all happen underneath the adafruit_blinka layer.
|
||||
</p>
|
||||
<div>
|
||||
<a class="download-button" href="{{ page.download_instructions }}">INSTALLATION INSTRUCTIONS<i class="fas fa-arrow-circle-right"></i></a>
|
||||
<a class="download-button" href="{{ page.download_instructions }}">INSTALLATION INSTRUCTIONS<i class="fas fa-arrow-circle-right" aria-hidden="true"></i></a>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
</label>
|
||||
<div class="download-buttons">
|
||||
{% for file in version.files['en_US'] %}
|
||||
<a class="download-button {% if version.stable %}stable{% else %}unstable{% endif %} {{ file | slice: -3, 3 }}" href="{{ file }}">DOWNLOAD {{ file | slice: -4, 4 | upcase }} NOW <i class="fas fa-download"></i></a>
|
||||
<a class="download-button {% if version.stable %}stable{% else %}unstable{% endif %} {{ file | slice: -3, 3 }}" href="{{ file }}">DOWNLOAD {{ file | slice: -4, 4 | upcase }} NOW <i class="fas fa-download" aria-hidden="true"></i></a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
the absolute latest and are feeling risky.
|
||||
</p>
|
||||
<div>
|
||||
<a class="download-button-unrecommended" href="https://adafruit-circuit-python.s3.amazonaws.com/index.html?prefix=bin/{{ page.board_id }}/">BROWSE S3<i class="fas fa-arrow-circle-right"></i></a>
|
||||
<a class="download-button-unrecommended" href="https://adafruit-circuit-python.s3.amazonaws.com/index.html?prefix=bin/{{ page.board_id }}/">BROWSE S3<i class="fas fa-arrow-circle-right" aria-hidden="true"></i></a>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
the latest stable otherwise.
|
||||
</p>
|
||||
<div>
|
||||
<a class="download-button-unrecommended" href="https://github.com/adafruit/circuitpython/releases">BROWSE GITHUB<i class="fab fa-github"></i></a>
|
||||
<a class="download-button-unrecommended" href="https://github.com/adafruit/circuitpython/releases">BROWSE GITHUB<i class="fab fa-github" aria-hidden="true"></i></a>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
|
||||
{% include head.html %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
---
|
||||
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
|
||||
|
||||
<header class="post-header">
|
||||
<h1 class="post-title" itemprop="name headline">{{ page.title }}</h1>
|
||||
<p class="post-meta"><time datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">{{ page.date | date: "%b %-d, %Y" }}</time>{% if page.author %} • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name"><a href="https://github.com/{{page.author}}">@{{page.author}}</a></span></span>{% endif %}</p>
|
||||
</header>
|
||||
|
||||
<div class="post-content" itemprop="articleBody">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
<script type='text/javascript'>
|
||||
window.onload = function () {
|
||||
try {
|
||||
var headers = document.querySelectorAll('h2');
|
||||
headers.forEach(function (hdr) {
|
||||
var id = hdr.id,
|
||||
title = hdr.innerText,
|
||||
link = "<a href='#" + id + "' class='header-link'>link</a>";
|
||||
hdr.innerHTML = title + " " + link;
|
||||
});
|
||||
} catch (ex) {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -326,7 +326,7 @@ function shouldDisplayDownload(download, displayedManufacturers, displayedFeatur
|
|||
}
|
||||
|
||||
function appendFilterTag(type, name) {
|
||||
var tagHtml = "<span class='tag'><i class='fas fa-times tag-remove' ";
|
||||
var tagHtml = "<span class='tag'><i class='fas fa-times tag-remove' title='Remove Filtered Option'";
|
||||
tagHtml += "data-type='" + type + "' ";
|
||||
tagHtml += "data-name='" + name + "'></i>";
|
||||
tagHtml += name + "</span>";
|
||||
|
|
|
|||
|
|
@ -33,3 +33,12 @@ a.purple-button-link {
|
|||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
|
||||
legend {
|
||||
font-size: 1.5em;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,9 +10,10 @@
|
|||
}
|
||||
|
||||
.content {
|
||||
h1 {
|
||||
h2 {
|
||||
width: 75%;
|
||||
margin: 20px auto;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
|
|||
25
blinka.html
25
blinka.html
|
|
@ -9,34 +9,41 @@ permalink: /blinka
|
|||
<div class="downloads-inputs">
|
||||
<div class="downloads-search">
|
||||
<label class="search-wrapper">
|
||||
<input type="text" id="search" placeholder="Search for CircuitPython boards" />
|
||||
<input aria-label="Search for Blinka boards" type="text" id="search" placeholder="Search for Blinka boards" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="downloads-filter">
|
||||
<button class="filter"><i class="fas fa-sliders-h"></i></button>
|
||||
<button class="filter" title="Filter Boards"><i class="fas fa-sliders-h" aria-hidden="true"></i></button>
|
||||
</div>
|
||||
<div class="downloads-filter-tags">
|
||||
</div>
|
||||
</div>
|
||||
<div class="downloads-filter-content">
|
||||
<div class="filter-buttons">
|
||||
<button class="save-changes"><i class="fas fa-times"></i></button>
|
||||
<button class="save-changes" title="Close and Save Changes"><i class="fas fa-times" aria-hidden="true"></i></button>
|
||||
</div>
|
||||
<div>
|
||||
<div class="manufacturers">
|
||||
<h2>Manufacturers</h2>
|
||||
<fieldset>
|
||||
<legend>Manufacturers</legend>
|
||||
<ul class="content"></ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="features">
|
||||
<h2>Features</h2>
|
||||
<fieldset>
|
||||
<legend>Features</legend>
|
||||
<ul class="content"></ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="sort-by">
|
||||
<h2>Sort By</h2>
|
||||
<fieldset>
|
||||
<legend>Sort By</legend>
|
||||
<ul class="content">
|
||||
<li><input type="radio" name="sort-by" value="alpha-asc" checked> Board Name (A to Z)</li>
|
||||
<li><input type="radio" name="sort-by" value="alpha-desc"> Board Name (Z to A)</li>
|
||||
<li><input type="radio" name="sort-by" value="downloads" aria-label="Downloads" checked> Downloads</li>
|
||||
<li><input type="radio" name="sort-by" value="alpha-asc" aria-label="Board Name (A to Z)"> Board Name (A to Z)</li>
|
||||
<li><input type="radio" name="sort-by" value="alpha-desc" aria-label="Board Name (Z to A)"> Board Name (Z to A)</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -50,7 +57,7 @@ permalink: /blinka
|
|||
<a href="{{ board.url | relative_url }}">
|
||||
<div>
|
||||
<div class="img-responsive-4by3">
|
||||
<img src="{{ board.board_image | relative_url }}">
|
||||
<img src="{{ board.board_image | relative_url }}" alt="Image of Board">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h3>{{ board.name }}</h3>
|
||||
|
|
|
|||
|
|
@ -13,31 +13,37 @@ permalink: /downloads
|
|||
</label>
|
||||
</div>
|
||||
<div class="downloads-filter">
|
||||
<button class="filter"><i class="fas fa-sliders-h"></i></button>
|
||||
<button class="filter" title="Filter Boards"><i class="fas fa-sliders-h" aria-hidden="true"></i></button>
|
||||
</div>
|
||||
<div class="downloads-filter-tags">
|
||||
</div>
|
||||
</div>
|
||||
<div class="downloads-filter-content">
|
||||
<div class="filter-buttons">
|
||||
<button class="save-changes"><i class="fas fa-times"></i></button>
|
||||
<button class="save-changes" title="Close and Save Changes"><i class="fas fa-times" aria-hidden="true"></i></button>
|
||||
</div>
|
||||
<div>
|
||||
<div class="manufacturers">
|
||||
<h2>Manufacturers</h2>
|
||||
<fieldset>
|
||||
<legend>Manufacturers</legend>
|
||||
<ul class="content"></ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="features">
|
||||
<h2>Features</h2>
|
||||
<fieldset>
|
||||
<legend>Features</legend>
|
||||
<ul class="content"></ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="sort-by">
|
||||
<h2>Sort By</h2>
|
||||
<fieldset>
|
||||
<legend>Sort By</legend>
|
||||
<ul class="content">
|
||||
<li><input type="radio" name="sort-by" value="downloads" checked> Downloads</li>
|
||||
<li><input type="radio" name="sort-by" value="alpha-asc"> Board Name (A to Z)</li>
|
||||
<li><input type="radio" name="sort-by" value="alpha-desc"> Board Name (Z to A)</li>
|
||||
<li><input type="radio" name="sort-by" value="downloads" aria-label="Downloads" checked> Downloads</li>
|
||||
<li><input type="radio" name="sort-by" value="alpha-asc" aria-label="Board Name (A to Z)"> Board Name (A to Z)</li>
|
||||
<li><input type="radio" name="sort-by" value="alpha-desc" aria-label="Board Name (Z to A)"> Board Name (Z to A)</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -66,7 +72,7 @@ permalink: /downloads
|
|||
<a href="{{ info.url | relative_url }}">
|
||||
<div>
|
||||
<div class="img-responsive-4by3">
|
||||
<img src="{{ info.board_image | relative_url }}">
|
||||
<img src="{{ info.board_image | relative_url }}" alt="Image of Board">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h3>{{ info.name | default: board.id }}</h3>
|
||||
|
|
@ -92,7 +98,7 @@ permalink: /downloads
|
|||
<a href="{{ board.url | relative_url }}">
|
||||
<div>
|
||||
<div class="img-responsive-4by3">
|
||||
<img src="{{ board.board_image | relative_url }}">
|
||||
<img src="{{ board.board_image | relative_url }}" alt="Image of Board">
|
||||
</div>
|
||||
<div class="details">
|
||||
<h3>{{ board.name }}</h3>
|
||||
|
|
|
|||
30
feed.xml
30
feed.xml
|
|
@ -1,30 +0,0 @@
|
|||
---
|
||||
layout: null
|
||||
---
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
|
||||
<channel>
|
||||
<title>{{ site.title | xml_escape }}</title>
|
||||
<description>{{ site.description | xml_escape }}</description>
|
||||
<link>{{ site.url }}{{ site.baseurl }}/</link>
|
||||
<atom:link href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" rel="self" type="application/rss+xml"/>
|
||||
<pubDate>{{ site.time | date_to_rfc822 }}</pubDate>
|
||||
<lastBuildDate>{{ site.time | date_to_rfc822 }}</lastBuildDate>
|
||||
<generator>Jekyll v{{ jekyll.version }}</generator>
|
||||
{% for post in site.posts limit:10 %}
|
||||
<item>
|
||||
<title>{{ post.title | xml_escape }}</title>
|
||||
<description>{{ post.content | xml_escape }}</description>
|
||||
<pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
|
||||
<link>{{ post.url | prepend: site.baseurl | prepend: site.url }}</link>
|
||||
<guid isPermaLink="true">{{ post.url | prepend: site.baseurl | prepend: site.url }}</guid>
|
||||
{% for tag in post.tags %}
|
||||
<category>{{ tag | xml_escape }}</category>
|
||||
{% endfor %}
|
||||
{% for cat in post.categories %}
|
||||
<category>{{ cat | xml_escape }}</category>
|
||||
{% endfor %}
|
||||
</item>
|
||||
{% endfor %}
|
||||
</channel>
|
||||
</rss>
|
||||
22
index.html
22
index.html
|
|
@ -4,10 +4,11 @@ layout: home
|
|||
|
||||
<div id="home-page" class="common-layout">
|
||||
<div class="content">
|
||||
<section>
|
||||
<img class="responsive" src="{{ "/assets/images/blinka-computer.png" | relative_url }}" srcset="{{ "/assets/images/blinka-computer.png" | relative_url }} 1x,
|
||||
{{ "/assets/images/blinka-computer@2x.png" | relative_url }} 2x,
|
||||
{{ "/assets/images/blinka-computer@3x.png" | relative_url }} 3x" alt="Blinka at a computer">
|
||||
<h1>The easiest way to program microcontrollers</h1>
|
||||
<h2>The easiest way to program microcontrollers</h2>
|
||||
<p>
|
||||
CircuitPython is a programming language designed to simplify experimenting
|
||||
and learning to code on low-cost microcontroller boards. It makes getting
|
||||
|
|
@ -18,12 +19,14 @@ layout: home
|
|||
<p>
|
||||
<a href="https://learn.adafruit.com/welcome-to-circuitpython">Get started with CircuitPython ></a>
|
||||
</p>
|
||||
</section>
|
||||
<hr />
|
||||
<section>
|
||||
<img class="responsive" src="{{ "/assets/images/python.png" | relative_url }}"
|
||||
srcset="{{ "/assets/images/python.png" | relative_url }} 1x,
|
||||
{{ "/assets/images/python@2x.png" | relative_url }} 2x,
|
||||
{{ "/assets/images/python@3x.png" | relative_url }} 3x" alt="Python Logo">
|
||||
<h1>Learn Python with CircuitPython</h1>
|
||||
<h2>Learn Python with CircuitPython</h2>
|
||||
<p>
|
||||
<a href="https://www.python.org/">Python</a> is the fastest growing programming language.
|
||||
It's taught in schools and universities. It's a high-level programming language which
|
||||
|
|
@ -39,12 +42,14 @@ layout: home
|
|||
CircuitPython. If you have no previous experience, it's really simple to
|
||||
get started! Learning CircuitPython is learning Python.
|
||||
</p>
|
||||
</section>
|
||||
<hr />
|
||||
<section>
|
||||
<img class="responsive" src="{{ "/assets/images/microcontrollers.png" | relative_url }}"
|
||||
srcset="{{ "/assets/images/microcontrollers.png" | relative_url }} 1x,
|
||||
{{ "/assets/images/microcontrollers@2x.png" | relative_url }} 2x,
|
||||
{{ "/assets/images/microcontrollers@3x.png" | relative_url }} 3x" alt="Image of various microcontrollers">
|
||||
<h1>Supported by your favorite microcontroller</h1>
|
||||
<h2>Supported by your favorite microcontroller</h2>
|
||||
<p>
|
||||
CircuitPython is designed to run on microcontroller boards. A
|
||||
microcontroller board is a circuit board with a microcontroller chip that's
|
||||
|
|
@ -55,8 +60,10 @@ layout: home
|
|||
<p>
|
||||
<a href="/downloads">Search for a compatible board</a>
|
||||
</p>
|
||||
</section>
|
||||
<hr />
|
||||
<h1>More reasons to use CircuitPython</h1>
|
||||
<section>
|
||||
<h2>More reasons to use CircuitPython</h2>
|
||||
<div class="home-table">
|
||||
<div class="item">
|
||||
<h3>Quick and Easy</h3>
|
||||
|
|
@ -100,8 +107,10 @@ layout: home
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<hr />
|
||||
<h1>Just the beginning...</h1>
|
||||
<section>
|
||||
<h2>Just the beginning...</h2>
|
||||
<p>
|
||||
CircuitPython continues to evolve, and is constantly being updated. We
|
||||
welcome and encourage feedback from the community, and we incorporate this
|
||||
|
|
@ -112,7 +121,7 @@ layout: home
|
|||
<a href="https://learn.adafruit.com/welcome-to-circuitpython">Get started with CircuitPython ></a>
|
||||
</p>
|
||||
<hr />
|
||||
<h1>Thanks</h1>
|
||||
<h2>Thanks</h2>
|
||||
<p>
|
||||
CircuitPython wouldn't exist without the awesome work of <a href="https://micropython.org">Damien George and the MicroPython community</a>. They did the hard work to reimplement Python on microcontrollers and continue to push the boundaries of what is possible.
|
||||
</p>
|
||||
|
|
@ -123,5 +132,6 @@ layout: home
|
|||
<p>
|
||||
Lastly, thank you to the CircuitPython community members who have spent time testing, triaging, fixing and enhancing CircuitPython, its libraries and its documentation. Together we're all making something incredible.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ permalink: /libraries
|
|||
The full list of all the CircuitPython libraries contained in the following bundles
|
||||
can be found on the
|
||||
<a href="https://circuitpython.readthedocs.io/projects/bundle/en/latest/drivers.html" title="">libraries page</a>.
|
||||
<section>
|
||||
<h2>Download and Installation Instructions</h2>
|
||||
<p>
|
||||
The libraries in each release are compiled to .mpy for all recent major versions
|
||||
|
|
@ -75,6 +76,8 @@ permalink: /libraries
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Contributing</h2>
|
||||
<p>
|
||||
If you'd like to contribute to the CircuitPython project, the CircuitPython
|
||||
|
|
@ -123,6 +126,7 @@ permalink: /libraries
|
|||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue