mirror of https://github.com/lukechilds/docs.git
moxiegirl
6 years ago
43 changed files with 998 additions and 248 deletions
@ -0,0 +1,51 @@ |
|||||
|
{% unless page.comments_locked == true %} |
||||
|
<!-- Start new comment form --> |
||||
|
<div id="respond"> |
||||
|
<header class="section-title"> |
||||
|
<h3>Leave a Comment <small><a rel="nofollow" id="cancel-comment-reply-link" href="{{ page.url | relative_url }}#respond" style="display:none;">Cancel reply</a></small></h3> |
||||
|
</header> |
||||
|
<form id="comment-form" class="page__form js-form form" method="post" action="https://api.staticman.net/v2/entry/{{ site.repository }}/{{ site.staticman.branch }}/comments"> |
||||
|
<div class="form-group"> |
||||
|
<label class="sr-only" for="comment-form-name"><strong>Name</strong></label> |
||||
|
<input type="text" id="comment-form-name" name="fields[name]" required spellcheck="false" placeholder="Name"> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label class="sr-only" for="comment-form-email"><strong>Email address</strong> <small>(used for <a href="http://gravatar.com">Gravatar</a> image and reply notifications)</small></label> |
||||
|
<input type="email" id="comment-form-email" name="fields[email]" required spellcheck="false" placeholder="Email address (used for Gravatar image)"> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label class="sr-only" for="comment-form-url"><strong>Website</strong> <small>(optional)</small></label> |
||||
|
<input type="url" id="comment-form-url" name="fields[url]" placeholder="Website (optional)"> |
||||
|
</div> |
||||
|
<div class="form-group"> |
||||
|
<label class="sr-only" for="comment-form-message"><strong>Comment</strong> <small>(<a href="https://kramdown.gettalong.org/quickref.html">Markdown</a> is allowed)</small></label> |
||||
|
<textarea type="text" rows="6" id="comment-form-message" name="fields[message]" required spellcheck="true" placeholder="Comment (Markdown is allowed)"></textarea> |
||||
|
</div> |
||||
|
<div class="form-group hidden" style="display: none;"> |
||||
|
<input type="hidden" name="options[origin]" value="{{ page.url | relative_url }}"> |
||||
|
<input type="hidden" name="options[parent]" value="{{ page.url | relative_url }}"> |
||||
|
<input type="hidden" id="comment-replying-to" name="fields[replying_to]" value=""> |
||||
|
<input type="hidden" id="comment-post-id" name="options[slug]" value="{{ page.slug }}"> |
||||
|
<input type="hidden" name="options[reCaptcha][siteKey]" value="{{ site.reCaptcha.siteKey }}"> |
||||
|
<input type="hidden" name="options[reCaptcha][secret]" value="{{ site.reCaptcha.secret }}"> |
||||
|
</div> |
||||
|
<!-- Start comment form alert messaging --> |
||||
|
<p class="hidden js-notice"> |
||||
|
<span class="js-notice-text"></span> |
||||
|
</p> |
||||
|
<!-- End comment form alert messaging --> |
||||
|
<div class="form-group"> |
||||
|
<div class="g-recaptcha" data-sitekey="{{ site.reCaptcha.siteKey }}"></div> |
||||
|
<label class="comment-reply-notifications" for="comment-form-reply"> |
||||
|
<input type="checkbox" id="comment-form-reply" name="options[subscribe]" value="email"> |
||||
|
Notify me of replies by email. |
||||
|
</label> |
||||
|
<button type="submit" id="comment-form-submit" class="btn">Send Comment</button> |
||||
|
</div> |
||||
|
</form> |
||||
|
</div> |
||||
|
<!-- End new comment form --> |
||||
|
<script async src="https://www.google.com/recaptcha/api.js"></script> |
||||
|
{% else %} |
||||
|
<p><em>Comments are closed. If you have a question concerning the content of this page, please feel free to <a href="/contact/">contact me</a>.</em></p> |
||||
|
{% endunless %} |
||||
@ -1,29 +1,56 @@ |
|||||
<form id="comment-form" method="post" action="https://api.staticman.net/v1/entry/{{ site.repository }}/{{ site.staticman.branch }}/comments"> |
{% if page.comments == true %} |
||||
<fieldset> |
<section class="post__comments"> |
||||
<label for="comment-form-message">Comment</label> |
{% if site.repository and site.staticman.branch %} |
||||
<textarea type="text" rows="3" id="comment-form-message" name="fields[message]" tabindex="1"></textarea> |
{% if site.data.comments[page.slug] %} |
||||
</fieldset> |
<!-- Start static comments --> |
||||
<fieldset> |
<div id="comments" class="js-comments"> |
||||
<label for="comment-form-name">Name</label> |
<h3 class="tile__header">Comments</h3> |
||||
<input type="text" id="comment-form-name" name="fields[name]" tabindex="2" /> |
{% assign comments = site.data.comments[page.slug] | sort %} |
||||
</fieldset> |
{% for comment in comments %} |
||||
<fieldset> |
{% assign avatar = comment[1].avatar %} |
||||
<label for="comment-form-email">Email address</label> |
{% assign email = comment[1].email %} |
||||
<input type="email" id="comment-form-email" name="fields[email]" tabindex="3" /> |
{% assign name = comment[1].name %} |
||||
</fieldset> |
{% assign url = comment[1].url %} |
||||
<fieldset> |
{% assign date = comment[1].date %} |
||||
<label for="comment-form-url">Website</label> |
{% assign message = comment[1].message %} |
||||
<input type="url" id="comment-form-url" name="fields[url]" tabindex="4"/> |
{% include comment.html index=forloop.index avatar=avatar email=email name=name url=url date=date message=message %} |
||||
</fieldset> |
{% endfor %} |
||||
<fieldset class="hidden" style="display:none;"> |
</div> |
||||
<!-- used by Staticman to generate filenames for each comment --> |
<!-- End static comments --> |
||||
<input type="hidden" name="options[slug]" value="{{ page.slug }}"> |
{% endif %} |
||||
<!-- honey pot field used to filter out spam --> |
|
||||
<label for="comment-form-location">Not used. Leave blank if you are a human.</label> |
<!-- Start new comment form --> |
||||
<input type="text" id="comment-form-location" name="fields[hidden]" autocomplete="off"/> |
<h3 class="tile__header">Leave a Comment</h3> |
||||
</fieldset> |
<p class="instruct">Your email address will not be published. Required fields are marked <span class="required">*</span></p> |
||||
<fieldset> |
<form id="comment-form" class="post__comments-form js-form form" method="post" action="https://api.staticman.net/v2/entry/{{site.repository}}/{{site.staticman.branch}}"> |
||||
<button type="submit" id="comment-form-submit" tabindex="5">Submit Comment</button> |
<fieldset> |
||||
</fieldset> |
<label for="comment-form-message">Comment<small class="required">*</small> <small>(<a href="https://daringfireball.net/projects/markdown/">Markdown</a> is supported)</small></label> |
||||
</form> |
<textarea type="text" rows="3" id="comment-form-message" name="fields[message]" tabindex="1"></textarea> |
||||
<!-- End new comment form --> |
<label for="comment-form-name">Name<small class="required">*</small></label> |
||||
|
<input type="text" id="comment-form-name" name="fields[name]" tabindex="2" /> |
||||
|
</fieldset> |
||||
|
<fieldset> |
||||
|
<label for="comment-form-email">Email address<small class="required">*</small></label> |
||||
|
<input type="email" id="comment-form-email" name="fields[email]" tabindex="3" /> |
||||
|
</fieldset> |
||||
|
<fieldset> |
||||
|
<label for="comment-form-url">Website <small>(optional)</small></label> |
||||
|
<input type="url" id="comment-form-url" name="fields[url]" tabindex="4"/> |
||||
|
</fieldset> |
||||
|
<fieldset class="hidden"> |
||||
|
<input type="hidden" name="options[slug]" value="{{ page.slug }}"> |
||||
|
<input type="hidden" name="fields[hidden]"/> |
||||
|
</fieldset> |
||||
|
<!-- Start comment form alert messaging --> |
||||
|
<p class="hidden js-notice"> |
||||
|
<span class="js-notice-text"></span> |
||||
|
</p> |
||||
|
<!-- End comment form alert messaging --> |
||||
|
<fieldset> |
||||
|
<button type="submit" id="comment-form-submit" tabindex="5" class="btn btn--large">Submit Comment</button> |
||||
|
</fieldset> |
||||
|
</form> |
||||
|
<!-- End new comment form --> |
||||
|
{% endif %} |
||||
|
</section> |
||||
|
{% endif %} |
||||
|
|||||
@ -0,0 +1,27 @@ |
|||||
|
<div class="entry-comments"> |
||||
|
{% if site.repository and site.staticman.branch %} |
||||
|
{% if site.data.comments[page.slug] %} |
||||
|
<!-- Start static comments --> |
||||
|
<div id="comments" class="js-comments"> |
||||
|
<header class="section-title"> |
||||
|
<h3>{% if site.data.comments[page.slug].size > 1 %}{{ site.data.comments[page.slug] | size | append: ' ' }}{% endif %}Comments</h3> |
||||
|
</header> |
||||
|
{% assign comments = site.data.comments[page.slug] | sort | where_exp: 'comment', 'comment[1].replying_to == blank' %} |
||||
|
{% for comment in comments %} |
||||
|
{% assign index = forloop.index %} |
||||
|
{% assign replying_to = comment[1].replying_to | to_integer %} |
||||
|
{% assign avatar = comment[1].avatar %} |
||||
|
{% assign email = comment[1].email %} |
||||
|
{% assign name = comment[1].name %} |
||||
|
{% assign url = comment[1].url %} |
||||
|
{% assign date = comment[1].date %} |
||||
|
{% assign message = comment[1].message %} |
||||
|
{% include comment.html index=index replying_to=replying_to avatar=avatar email=email name=name url=url date=date message=message %} |
||||
|
{% endfor %} |
||||
|
</div> |
||||
|
<!-- End static comments --> |
||||
|
{% endif %} |
||||
|
|
||||
|
{% include comment-form.html %} |
||||
|
{% endif %} |
||||
|
</div> |
||||
@ -0,0 +1,126 @@ |
|||||
|
/* ========================================================================== |
||||
|
Comments |
||||
|
========================================================================== */ |
||||
|
|
||||
|
.comment { |
||||
|
font-size: 0.8em; |
||||
|
margin-bottom: 4em; |
||||
|
padding-left: 4.5em; |
||||
|
position: relative; |
||||
|
|
||||
|
// comment replies |
||||
|
&.child { |
||||
|
margin-left: 4.5em; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.comment-timestamp { |
||||
|
font-size: 0.8em; |
||||
|
|
||||
|
a { |
||||
|
color: inherit; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.comment-content { |
||||
|
margin-top: 1em; |
||||
|
|
||||
|
> p, |
||||
|
> ul, |
||||
|
> ol, |
||||
|
> figure, |
||||
|
> table { |
||||
|
margin-bottom: 1.5em; |
||||
|
} |
||||
|
|
||||
|
ul { |
||||
|
list-style-type: square; |
||||
|
} |
||||
|
|
||||
|
li { |
||||
|
margin-bottom: 0.5em; |
||||
|
} |
||||
|
|
||||
|
li > ul, |
||||
|
li > ol { |
||||
|
margin-top: 0.5em; |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
|
||||
|
.highlighter-rouge { |
||||
|
.highlight { |
||||
|
margin-left: 0; |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
|
||||
|
.highlight code { |
||||
|
font-size: 0.8em; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.comment-avatar { |
||||
|
height: 3.25em; |
||||
|
left: 0; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
width: 3.25em; |
||||
|
|
||||
|
&::after { |
||||
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='stripe-svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M-1,1 l2,-2 M0,10 l10,-10 M9,11 l2,-2' stroke='%23333' stroke-width='1' /%3E%3C/svg%3E"); |
||||
|
background-size: 5px 5px; |
||||
|
bottom: 0.5em; |
||||
|
content: ""; |
||||
|
height: 3.25em; |
||||
|
position: absolute; |
||||
|
right: 0.5em; |
||||
|
width: 3.25em; |
||||
|
z-index: -1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.comment-author-name { |
||||
|
display: inline-block; |
||||
|
font-size: 1.25em; |
||||
|
line-height: 1; |
||||
|
margin: 0 0 0.25em; |
||||
|
|
||||
|
a { |
||||
|
color: inherit; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.comment-reply { |
||||
|
|
||||
|
a { |
||||
|
text-decoration: none; |
||||
|
|
||||
|
&:hover { |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.comment-reply-notifications { |
||||
|
margin: 1rem 0; |
||||
|
} |
||||
|
|
||||
|
#cancel-comment-reply-link { |
||||
|
margin-left: 1em; |
||||
|
} |
||||
|
|
||||
|
#comment-form { |
||||
|
margin-bottom: 3em; |
||||
|
} |
||||
|
|
||||
|
/* Site author specific */ |
||||
|
.admin { |
||||
|
.comment-author-name { |
||||
|
box-shadow: inset 0 -0.25em 0 rgba($label-warning-color, 0.5); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,113 @@ |
|||||
|
/* ========================================================================== |
||||
|
Forms |
||||
|
========================================================================== */ |
||||
|
|
||||
|
input, |
||||
|
label, |
||||
|
select { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
label { |
||||
|
font-family: $base-code-font-family; |
||||
|
font-size: 0.8em; |
||||
|
margin-bottom: 0.5em; |
||||
|
|
||||
|
&.required::after { |
||||
|
content: "*"; |
||||
|
} |
||||
|
|
||||
|
abbr { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
input, |
||||
|
textarea, |
||||
|
select, |
||||
|
select[multiple="multiple"] { |
||||
|
background-color: #fff; |
||||
|
border-color: #d7d8da; |
||||
|
border-radius: .25em; |
||||
|
border-style: solid; |
||||
|
border-width: 1px 1px 4px 1px; |
||||
|
box-shadow: inset 0 1px 3px rgba(0,0,0,.06); |
||||
|
box-sizing: border-box; |
||||
|
font-family: Roboto,sans-serif; |
||||
|
font-size: 16px; |
||||
|
margin-bottom: 0.25em; |
||||
|
padding: 0.75em; |
||||
|
transition: border-color; |
||||
|
width: 100%; |
||||
|
|
||||
|
&:hover { |
||||
|
border-color: $form-border-color-hover; |
||||
|
} |
||||
|
|
||||
|
&:focus { |
||||
|
border-color: $form-border-color-focus; |
||||
|
box-shadow: $form-box-shadow-focus; |
||||
|
outline: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
textarea { |
||||
|
resize: vertical; |
||||
|
} |
||||
|
|
||||
|
input[type="search"] { |
||||
|
appearance: none; |
||||
|
} |
||||
|
|
||||
|
input[type="checkbox"], |
||||
|
input[type="radio"] { |
||||
|
display: inline-block; |
||||
|
margin-right: 0.5em; |
||||
|
width: initial; |
||||
|
} |
||||
|
|
||||
|
input[type="file"] { |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
select { |
||||
|
max-width: 100%; |
||||
|
width: auto; |
||||
|
} |
||||
|
|
||||
|
form button, |
||||
|
form .btn, |
||||
|
input[type="submit"] { |
||||
|
appearance: none; |
||||
|
cursor: pointer; |
||||
|
margin: 1em 0; |
||||
|
user-select: none; |
||||
|
vertical-align: middle; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
form { |
||||
|
ul, |
||||
|
ol, |
||||
|
li { |
||||
|
list-style-type: none; |
||||
|
padding-left: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.form-group { |
||||
|
margin-bottom: 0.5rem; |
||||
|
} |
||||
|
|
||||
|
/* required */ |
||||
|
.req, |
||||
|
.required { |
||||
|
color: $alert-primary-color !important; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
/* instructions */ |
||||
|
.instruct { |
||||
|
font-size: 0.8em; |
||||
|
font-style: italic; |
||||
|
} |
||||
@ -0,0 +1,169 @@ |
|||||
|
/* Forms |
||||
|
========================================================================== */ |
||||
|
|
||||
|
/** |
||||
|
* 1. Change the font styles in all browsers (opinionated). |
||||
|
* 2. Remove the margin in Firefox and Safari. |
||||
|
*/ |
||||
|
|
||||
|
button, |
||||
|
input, |
||||
|
optgroup, |
||||
|
select, |
||||
|
textarea { |
||||
|
margin: 0; /* 2 */ |
||||
|
font-family: $base-font-family; /* 1 */ |
||||
|
font-size: 100%; /* 1 */ |
||||
|
line-height: 1.15; /* 1 */ |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Show the overflow in IE. |
||||
|
* 1. Show the overflow in Edge. |
||||
|
*/ |
||||
|
|
||||
|
button, |
||||
|
input { |
||||
|
/* 1 */ |
||||
|
overflow: visible; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Remove the inheritance of text transform in Edge, Firefox, and IE. |
||||
|
* 1. Remove the inheritance of text transform in Firefox. |
||||
|
*/ |
||||
|
|
||||
|
button, |
||||
|
select { |
||||
|
/* 1 */ |
||||
|
text-transform: none; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` |
||||
|
* controls in Android 4. |
||||
|
* 2. Correct the inability to style clickable types in iOS and Safari. |
||||
|
*/ |
||||
|
|
||||
|
button, |
||||
|
html [type="button"], |
||||
|
/* 1 */ [type="reset"], |
||||
|
[type="submit"] { |
||||
|
-webkit-appearance: button; /* 2 */ |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Remove the inner border and padding in Firefox. |
||||
|
*/ |
||||
|
|
||||
|
button::-moz-focus-inner, |
||||
|
[type="button"]::-moz-focus-inner, |
||||
|
[type="reset"]::-moz-focus-inner, |
||||
|
[type="submit"]::-moz-focus-inner { |
||||
|
padding: 0; |
||||
|
border-style: none; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Restore the focus styles unset by the previous rule. |
||||
|
*/ |
||||
|
|
||||
|
button:-moz-focusring, |
||||
|
[type="button"]:-moz-focusring, |
||||
|
[type="reset"]:-moz-focusring, |
||||
|
[type="submit"]:-moz-focusring { |
||||
|
outline: 1px dotted ButtonText; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Change the border, margin, and padding in all browsers (opinionated). |
||||
|
*/ |
||||
|
|
||||
|
fieldset { |
||||
|
margin: 0 2px; |
||||
|
padding: 0.35em 0.625em 0.75em; |
||||
|
border: 1px solid #c0c0c0; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 1. Correct the text wrapping in Edge and IE. |
||||
|
* 2. Correct the color inheritance from `fieldset` elements in IE. |
||||
|
* 3. Remove the padding so developers are not caught out when they zero out |
||||
|
* `fieldset` elements in all browsers. |
||||
|
*/ |
||||
|
|
||||
|
legend { |
||||
|
display: table; /* 1 */ |
||||
|
max-width: 100%; /* 1 */ |
||||
|
padding: 0; /* 3 */ |
||||
|
color: inherit; /* 2 */ |
||||
|
white-space: normal; /* 1 */ |
||||
|
box-sizing: border-box; /* 1 */ |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 1. Add the correct display in IE 9-. |
||||
|
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. |
||||
|
*/ |
||||
|
|
||||
|
progress { |
||||
|
display: inline-block; /* 1 */ |
||||
|
vertical-align: baseline; /* 2 */ |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Remove the default vertical scrollbar in IE. |
||||
|
*/ |
||||
|
|
||||
|
textarea { |
||||
|
overflow: auto; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 1. Add the correct box sizing in IE 10-. |
||||
|
* 2. Remove the padding in IE 10-. |
||||
|
*/ |
||||
|
|
||||
|
[type="checkbox"], |
||||
|
[type="radio"] { |
||||
|
padding: 0; /* 2 */ |
||||
|
box-sizing: border-box; /* 1 */ |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Correct the cursor style of increment and decrement buttons in Chrome. |
||||
|
*/ |
||||
|
|
||||
|
[type="number"]::-webkit-inner-spin-button, |
||||
|
[type="number"]::-webkit-outer-spin-button { |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 1. Correct the odd appearance in Chrome and Safari. |
||||
|
* 2. Correct the outline style in Safari. |
||||
|
*/ |
||||
|
|
||||
|
[type="search"] { |
||||
|
outline-offset: -2px; /* 2 */ |
||||
|
-webkit-appearance: textfield; /* 1 */ |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. |
||||
|
*/ |
||||
|
|
||||
|
[type="search"]::-webkit-search-cancel-button, |
||||
|
[type="search"]::-webkit-search-decoration { |
||||
|
-webkit-appearance: none; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 1. Correct the inability to style clickable types in iOS and Safari. |
||||
|
* 2. Change font properties to `inherit` in Safari. |
||||
|
*/ |
||||
|
|
||||
|
::-webkit-file-upload-button { |
||||
|
font: inherit; /* 2 */ |
||||
|
-webkit-appearance: button; /* 1 */ |
||||
|
} |
||||
@ -0,0 +1,33 @@ |
|||||
|
// Only display content to screen readers |
||||
|
// |
||||
|
// See: http://a11yproject.com/posts/how-to-hide-content/ |
||||
|
// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/ |
||||
|
|
||||
|
@mixin sr-only { |
||||
|
position: absolute; |
||||
|
width: 1px; |
||||
|
height: 1px; |
||||
|
padding: 0; |
||||
|
overflow: hidden; |
||||
|
clip: rect(0, 0, 0, 0); |
||||
|
white-space: nowrap; |
||||
|
border: 0; |
||||
|
} |
||||
|
|
||||
|
// Use in conjunction with .sr-only to only display content when it's focused. |
||||
|
// |
||||
|
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 |
||||
|
// |
||||
|
// Credit: HTML5 Boilerplate |
||||
|
|
||||
|
@mixin sr-only-focusable { |
||||
|
&:active, |
||||
|
&:focus { |
||||
|
position: static; |
||||
|
width: auto; |
||||
|
height: auto; |
||||
|
overflow: visible; |
||||
|
clip: auto; |
||||
|
white-space: normal; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,51 @@ |
|||||
|
/* ========================================================================== |
||||
|
Visibility |
||||
|
========================================================================== */ |
||||
|
|
||||
|
/* http://www.456bereastreet.com/archive/200711/screen_readers_sometimes_ignore_displaynone/ */ |
||||
|
|
||||
|
.is--hidden, |
||||
|
.hidden { |
||||
|
display: none !important; |
||||
|
visibility: hidden !important; |
||||
|
} |
||||
|
|
||||
|
.is--visible { |
||||
|
display: block !important; |
||||
|
visibility: visible !important; |
||||
|
} |
||||
|
|
||||
|
/* https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html */ |
||||
|
|
||||
|
.visually-hidden { |
||||
|
position: absolute !important; |
||||
|
clip: rect(1px, 1px, 1px, 1px); |
||||
|
height: 1px !important; |
||||
|
width: 1px !important; |
||||
|
border: 0 !important; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
body:hover .visually-hidden a, |
||||
|
body:hover .visually-hidden input, |
||||
|
body:hover .visually-hidden button { |
||||
|
display: none !important; |
||||
|
} |
||||
|
|
||||
|
/* for preloading images */ |
||||
|
.load { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.transparent { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
/* for screen-readers */ |
||||
|
.sr-only { |
||||
|
@include sr-only(); |
||||
|
} |
||||
|
|
||||
|
.sr-only-focusable { |
||||
|
@include sr-only-focusable(); |
||||
|
} |
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue