Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix some accessibility issues. #17

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Fix some accessibility issues. #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
375286e
Fix some accessibility issues.
unused Nov 26, 2016
8313321
Merge branch 'master' of https://github.com/jgthms/css-reference
unused Nov 28, 2016
2f39a46
Adapt search input and update assets
unused Nov 28, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,15 @@

[![CSS Reference screenshot](https://raw.github.com/jgthms/css-reference/master/images/css-reference-share.png)](http://cssreference.io)

# Development

```shell
$ npm install && npm start # Install JavaScript dependencies and run watcher.
$ gem install jekyll && jekyll s -w # Install jekyll and generate static local site.
```

# License

The content of this project itself is licensed under the [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/).

The underlying source code used to format and display that content is licensed under the [MIT license](http://opensource.org/licenses/mit-license.php).
The underlying source code used to format and display that content is licensed under the [MIT license](http://opensource.org/licenses/mit-license.php).
9 changes: 6 additions & 3 deletions _includes/menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,9 @@
<li><a class="menu-collection-link{% if page.collection_name == 'Typography' %} menu-collection-link--active{% endif %}" href="{{site.url}}/typography/">Typography</a></li>
</ul>
</nav>
<nav id="menu-nav" class="menu-nav">
<div class="menu-search">
<nav id="menu-nav" class="menu-nav" role="menu">
<div class="menu-search" role="search">
<label for="menu-search-input">Use search input to filter Menu items list:</label>
<input id="menu-search-input" type="search" autocomplete="off" placeholder="Search for a property">
<i class="icon is-search"></i>
</div>
Expand Down Expand Up @@ -83,7 +84,7 @@

<footer class="footer">
<p class="footer-title">
<strong>{{site.description}}</strong> <small>Created by <a href="https://twitter.com/jgthms">@jgthms</a></small>
<strong>{{site.description}}</strong> <small>Created by <a href="https://twitter.com/jgthms" aria-label="Visit Twitter profile of jgthms">@jgthms</a></small>
</p>
<div class="footer-facebook">
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fcssreference%2F&width=100&layout=button_count&action=like&size=small&show_faces=false&share=false&height=20&appId=1212191075486670" width="100" height="20" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
Expand All @@ -100,6 +101,7 @@
<p class="footer-share footer-share--social">
<strong class="footer-share-label">Share</strong>
<a class="footer-share-button is-twitter"
aria-label="Share via Twitter"
data-social-network="Twitter"
data-social-action="tweet"
data-social-target="{{site.url}}{{page.url}}"
Expand All @@ -109,6 +111,7 @@
{% include svg/twitter.html %}
</a>
<a class="footer-share-button is-facebook"
aria-label="Share via Facebook"
href="http://www.facebook.com/sharer.php?u={{site.url | url_encode}}"
rel="external nofollow"
target="_blank">
Expand Down
1,351 changes: 1,350 additions & 1 deletion css/website.css
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,9 @@
{% include favicons.html %}
</head>
<body>
<a href="#main">skip to main content</a>
{% include menu.html %}
<main class="main">
<main class="main" role="main">
<header class="header">
<div class="header-container">
<h1 class="header-figure">
Expand Down
13 changes: 7 additions & 6 deletions sass/base.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,6 @@ body
font-size: 1rem
line-height: 1.6

a,
button,
input,
textarea
outline: none

a
color: $link
cursor: pointer
Expand Down Expand Up @@ -64,3 +58,10 @@ html.is-index
html
font-size: 18px
padding-left: $menu-width

[href="#main"]
position: absolute;
top: 0;
right: 100%;
&:focus
right: auto;
8 changes: 8 additions & 0 deletions sass/menu.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,14 @@
justify-content: flex-start
overflow: hidden


.menu-search
flex-grow: 0
flex-shrink: 0
position: relative
label
position: absolute
left: -100vw
input
-moz-appearance: none
-webkit-appearance: none
Expand Down Expand Up @@ -100,6 +104,10 @@
&.is-selected
background: $alpha
color: $alpha-invert
&:focus
outline: none
background: $alpha
color: $alpha-invert
&.is-searching
a
display: none
Expand Down