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 %} |
|||
<section class="post__comments"> |
|||
{% if site.repository and site.staticman.branch %} |
|||
{% if site.data.comments[page.slug] %} |
|||
<!-- Start static comments --> |
|||
<div id="comments" class="js-comments"> |
|||
<h3 class="tile__header">Comments</h3> |
|||
{% assign comments = site.data.comments[page.slug] | sort %} |
|||
{% for comment in comments %} |
|||
{% 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=forloop.index avatar=avatar email=email name=name url=url date=date message=message %} |
|||
{% endfor %} |
|||
</div> |
|||
<!-- End static comments --> |
|||
{% endif %} |
|||
|
|||
<!-- Start new comment form --> |
|||
<h3 class="tile__header">Leave a Comment</h3> |
|||
<p class="instruct">Your email address will not be published. Required fields are marked <span class="required">*</span></p> |
|||
<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}}"> |
|||
<fieldset> |
|||
<label for="comment-form-message">Comment</label> |
|||
<label for="comment-form-message">Comment<small class="required">*</small> <small>(<a href="https://daringfireball.net/projects/markdown/">Markdown</a> is supported)</small></label> |
|||
<textarea type="text" rows="3" id="comment-form-message" name="fields[message]" tabindex="1"></textarea> |
|||
</fieldset> |
|||
<fieldset> |
|||
<label for="comment-form-name">Name</label> |
|||
<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</label> |
|||
<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</label> |
|||
<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" style="display:none;"> |
|||
<!-- used by Staticman to generate filenames for each comment --> |
|||
<fieldset class="hidden"> |
|||
<input type="hidden" name="options[slug]" value="{{ page.slug }}"> |
|||
<!-- honey pot field used to filter out spam --> |
|||
<label for="comment-form-location">Not used. Leave blank if you are a human.</label> |
|||
<input type="text" id="comment-form-location" name="fields[hidden]" autocomplete="off"/> |
|||
<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">Submit Comment</button> |
|||
<button type="submit" id="comment-form-submit" tabindex="5" class="btn btn--large">Submit Comment</button> |
|||
</fieldset> |
|||
</form> |
|||
<!-- End new comment form --> |
|||
</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