Merge branch 'release/3.4.0'

- Close #424

CHANGELOG.md

@@ -1,16 +1,42 @@
+## [3.4.0](https://github.com/mmistakes/minimal-mistakes/releases/tag/3.4.0)
+
+### Enhancements
+
+- Support static-based commenting via [Staticman](https://staticman.net/) for sites hosted with GitHub Pages. [#424](https://github.com/mmistakes/minimal-mistakes/issues/424)
+
+## [3.3.7](https://github.com/mmistakes/minimal-mistakes/releases/tag/3.3.7)
+
+### Bug Fixes
+
+- Re-enabled Jekyll plugins in `_config.yml` in case they aren't autoloaded in `Gemfile`. [#417](https://github.com/mmistakes/minimal-mistakes/issues/417)
+
+### Enhancements
+
+- Fallback to `site.github.url` for use in `{{ base_path }}` when `site.url` is `nil`.
+- Replace Sass and Autoprefixer `npm` build scripts with [Jekyll's built-in asset support](https://jekyllrb.com/docs/assets/). [#333](https://github.com/mmistakes/minimal-mistakes/issues/333)
+
+### Maintenance
+
+- Document `site.repository` and its role with [`github-metadata`](https://github.com/jekyll/github-metadata) gem.
+- Add sample [archive page with content](https://mmistakes.github.io/minimal-mistakes/archive-layout-with-content/) for testing styles on demo site.
+
+## [3.3.6](https://github.com/mmistakes/minimal-mistakes/releases/tag/3.3.6)
+
+### Bug Fixes
+
+- Fix blank `site.teaser` bug. [#412](https://github.com/mmistakes/minimal-mistakes/issues/412)
+
 ## [3.3.5](https://github.com/mmistakes/minimal-mistakes/releases/tag/3.3.5)
 
 ### Enhancements
 
-- Add English default text `site.locale` strings [#407](https://github.com/mmistakes/minimal-mistakes/issues/407)
+- Add English default text `site.locale` strings. [#407](https://github.com/mmistakes/minimal-mistakes/issues/407)
 - Add Portuguese localized UI text. [#411](https://github.com/mmistakes/minimal-mistakes/pull/411)
 - Add Italian localized UI text. [#409](https://github.com/mmistakes/minimal-mistakes/pull/409)
 
-### Bug Fixes
-
 ### Maintenance
 
-- Remove unused Google AdSense variables in `_config.yml` [#404](https://github.com/mmistakes/minimal-mistakes/issues/404)
+- Remove unused Google AdSense variables in `_config.yml`. [#404](https://github.com/mmistakes/minimal-mistakes/issues/404)
 - Update `Gemfile` instructions for using `github-pages` vs. native `jekyll` gems.
 - Disable `gems:` in `_config.yml` and enable plugins with Bundler instead.
 - Add `repository` to `_config.yml` to suppress GitHub Pages error `Liquid Exception: No repo name found.`

README.md

@@ -20,10 +20,11 @@ The theme includes responsive layouts (`single`, `archive`, and `splash` pages)
 ### Notable Features
 
 - Compatible with Jekyll 3.x and GitHub Pages
+- Support for Jekyll's built-in Sass/SCSS preprocessor
 - Several layout options (single, archive, splash pages)
 - SEO optimized with support for [Twitter Cards](https://dev.twitter.com/cards/overview) and [Open Graph](http://ogp.me/) data
 - Optional header images, sidebars, table of contents, galleries, related posts, breadcrumb links, and more.
-- Optional comments ([Disqus](https://disqus.com/), [Facebook](https://developers.facebook.com/docs/plugins/comments), Google+, [Discourse](https://www.discourse.org/), and custom).
+- Optional comments ([Disqus](https://disqus.com/), [Facebook](https://developers.facebook.com/docs/plugins/comments), Google+, [Discourse](https://www.discourse.org/), static-based via [Staticman](https://staticman.net/), and custom).
 - Optional analytics ([Google Analytics](https://www.google.com/analytics/) and custom).
 - UI localized text: English (default), Spanish, French, and Turkish.
 

_config.yml

@@ -18,7 +18,7 @@ teaser                   : # filename of teaser fallback teaser image placed in
 # breadcrumbs            : false # true, false (default)
 words_per_minute         : 200
 comments:
-  provider               : # false (default), "disqus", "discourse", "facebook", "google-plus", custom"
+  provider               : # false (default), "disqus", "discourse", "facebook", "google-plus", "staticman", "custom"
   disqus:
     shortname            : # https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-
   discourse:
@@ -28,6 +28,21 @@ comments:
     appid                :
     num_posts            : # 5 (default)
     colorscheme          : # "light" (default), "dark"
+staticman:
+  allowedFields          : ['name', 'email', 'url', 'message']
+  branch                 : # "master", "gh-pages"
+  commitMessage          : "New comment."
+  format                 : "yml"
+  moderation             : true
+  path                   : "_data/comments/{options.slug}"
+  requiredFields         : ['name', 'email', 'message']
+  transforms:
+    email                : "md5"
+  generatedFields:
+    date:
+      type               : "date"
+      options:
+        format           : "iso8601" # "iso8601" (default), "timestamp-seconds", "timestamp-milliseconds"
 atom_feed:
   path                   : # blank (default) uses feed.xml
 
@@ -145,6 +160,12 @@ kramdown:
   enable_coderay: false
 
 
+# Sass/SCSS
+sass:
+  sass_dir: _sass
+  style: compressed # http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
+
+
 # Outputting
 permalink: /:categories/:title/
 paginate: 5 # amount of posts to show
@@ -153,20 +174,20 @@ timezone: # http://en.wikipedia.org/wiki/List_of_tz_database_time_zones
 
 
 # Plugins
-# gems:
+gems:
-#   - jekyll-paginate
+  - jekyll-paginate
-#   - jekyll-sitemap
+  - jekyll-sitemap
-#   - jekyll-gist
+  - jekyll-gist
-#   - jekyll-feed
+  - jekyll-feed
-#   - jemoji
+  - jemoji
 
 # mimic GitHub Pages with --safe
-# whitelist:
+whitelist:
-#   - jekyll-paginate
+  - jekyll-paginate
-#   - jekyll-sitemap
+  - jekyll-sitemap
-#   - jekyll-gist
+  - jekyll-gist
-#   - jekyll-feed
+  - jekyll-feed
-#   - jemoji
+  - jemoji
 
 
 # Archives

_data/ui-text.yml

@@ -18,6 +18,7 @@ en: &DEFAULT_EN
   categories_label           : "Categories:"
   date_label                 : "Updated:"
   comments_label             : "Leave a Comment"
+  comments_title             : "Comments"
   more_label                 : "Learn More"
   related_label              : "You May Also Enjoy"
   follow_label               : "Follow:"
@@ -27,6 +28,20 @@ en: &DEFAULT_EN
   email_label                : "Email"
   recent_posts               : "Recent Posts"
   undefined_wpm              : "Undefined parameter words_per_minute at _config.yml"
+  comment_form_info          : "Your email address will not be published. Required fields are marked"
+  comment_form_comment_label : "Comment"
+  comment_form_md_info       : "Markdown is supported."
+  comment_form_name_label    : "Name"
+  comment_form_email_label   : "Email address"
+  comment_form_website_label : "Website (optional)"
+  comment_btn_submit         : "Submit Comment"
+  comment_btn_submitted      : "Submitted"
+  comment_success_title      : "Comment submitted"
+  comment_success_msg        : "Thanks for your comment! It will show on the site once it has been approved."
+  comment_error_title        : "Error"
+  comment_error_msg          : "Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again."
+  close_btn_label            : "close"
+  loading_label              : "Loading..."
 en-US:
   <<: *DEFAULT_EN
 en-CA:
@@ -54,6 +69,7 @@ es: &DEFAULT_ES
   categories_label           : "Categorías:"
   date_label                 : "Actualizado:"
   comments_label             : "Comentar"
+  comments_title             :
   more_label                 : "Ver más"
   related_label              : "Podrías ver también"
   follow_label               : "Seguir:"
@@ -63,6 +79,20 @@ es: &DEFAULT_ES
   email_label                : "Email"
   recent_posts               : "Entradas recientes"
   undefined_wpm              : "Parametro words_per_minute (Palabras por minuto) no definido en _config.yml"
+  comment_form_info          :
+  comment_form_comment_label :
+  comment_form_md_info       :
+  comment_form_name_label    :
+  comment_form_email_label   :
+  comment_form_website_label :
+  comment_btn_submit         :
+  comment_btn_submitted      :
+  comment_success_title      :
+  comment_success_msg        :
+  comment_error_title        :
+  comment_error_msg          :
+  close_btn_label            :
+  loading_label              :
 es-ES:
   <<: *DEFAULT_ES
 es-CO:
@@ -86,6 +116,7 @@ fr: &DEFAULT_FR
   categories_label           : "Catégories :"
   date_label                 : "Mis à jour :"
   comments_label             : "Laisser un commentaire"
+  comments_title             :
   more_label                 : "Lire plus"
   related_label              : "Vous pourriez aimer"
   follow_label               : "Suivez moi"
@@ -95,6 +126,20 @@ fr: &DEFAULT_FR
   email_label                : "Email"
   recent_posts               : "Posts récents"
   undefined_wpm              : "Le paramètre words_per_minute n'est pas défini dans _config.yml"
+  comment_form_info          :
+  comment_form_comment_label :
+  comment_form_md_info       :
+  comment_form_name_label    :
+  comment_form_email_label   :
+  comment_form_website_label :
+  comment_btn_submit         :
+  comment_btn_submitted      :
+  comment_success_title      :
+  comment_success_msg        :
+  comment_error_title        :
+  comment_error_msg          :
+  close_btn_label            :
+  loading_label              :
 fr-FR:
   <<: *DEFAULT_FR
 fr-BE:
@@ -120,6 +165,7 @@ tr: &DEFAULT_TR
   categories_label           : "Kategoriler:"
   date_label                 : "Güncelleme tarihi:"
   comments_label             : "Yorum yapın"
+  comments_title             :
   more_label                 : "Daha fazlasını öğrenin"
   related_label              : "Bunlar ilginizi çekebilir:"
   follow_label               : "Takip et:"
@@ -129,6 +175,20 @@ tr: &DEFAULT_TR
   email_label                : "E-posta"
   recent_posts               : "Son yazılar"
   undefined_wpm              : "_config.yml dosyasında tanımlanmamış words_per_minute parametresi"
+  comment_form_info          :
+  comment_form_comment_label :
+  comment_form_md_info       :
+  comment_form_name_label    :
+  comment_form_email_label   :
+  comment_form_website_label :
+  comment_btn_submit         :
+  comment_btn_submitted      :
+  comment_success_title      :
+  comment_success_msg        :
+  comment_error_title        :
+  comment_error_msg          :
+  close_btn_label            :
+  loading_label              :
 tr-TR:
   <<: *DEFAULT_TR
 
@@ -150,6 +210,7 @@ pt: &DEFAULT_PT
   categories_label           : "Categorias:"
   date_label                 : "Atualizado em:"
   comments_label             : "Deixe um comentário"
+  comments_title             :
   more_label                 : "Aprenda Mais"
   related_label              : "Você Talvez Goste Também"
   follow_label               : "Acompanhe em"
@@ -159,6 +220,20 @@ pt: &DEFAULT_PT
   email_label                : "Email"
   recent_posts               : "Postagens recentes"
   undefined_wpm              : "Parâmetro indefinido em word_per_minute no _config.yml"
+  comment_form_info          :
+  comment_form_comment_label :
+  comment_form_md_info       :
+  comment_form_name_label    :
+  comment_form_email_label   :
+  comment_form_website_label :
+  comment_btn_submit         :
+  comment_btn_submitted      :
+  comment_success_title      :
+  comment_success_msg        :
+  comment_error_title        :
+  comment_error_msg          :
+  close_btn_label            :
+  loading_label              :
 pt-BR:
   <<: *DEFAULT_PT
 pt-PT:
@@ -182,6 +257,7 @@ it: &DEFAULT_IT
   categories_label           : "Categorie:"
   date_label                 : "Aggiornato:"
   comments_label             : "Scrivi un commento"
+  comments_title             :
   more_label                 : "Scopri di più"
   related_label              : "Potrebbe Piacerti Anche"
   follow_label               : "Segui:"
@@ -191,6 +267,20 @@ it: &DEFAULT_IT
   email_label                : "Email"
   recent_posts               : "Articoli Recenti"
   undefined_wpm              : "Parametro words_per_minute non definito in _config.yml"
+  comment_form_info          :
+  comment_form_comment_label :
+  comment_form_md_info       :
+  comment_form_name_label    :
+  comment_form_email_label   :
+  comment_form_website_label :
+  comment_btn_submit         :
+  comment_btn_submitted      :
+  comment_success_title      :
+  comment_success_msg        :
+  comment_error_title        :
+  comment_error_msg          :
+  close_btn_label            :
+  loading_label              :
 it-IT:
   <<: *DEFAULT_IT
 

_includes/archive-single.html

@@ -3,7 +3,7 @@
 {% if post.header.teaser %}
   {% capture teaser %}{{ post.header.teaser }}{% endcapture %}
 {% else %}
-  {% capture teaser %}{{ site.teaser }}{% endcapture %}
+  {% assign teaser = site.teaser %}
 {% endif %}
 
 {% if post.id %}
@@ -14,7 +14,7 @@
 
 <div class="{{ include.type | default: "list" }}__item">
   <article class="archive__item" itemscope itemtype="http://schema.org/CreativeWork">
-    {% if include.type == "grid" and teaser != blank %}
+    {% if include.type == "grid" and teaser %}
       <div class="archive__item-teaser">
         <img src=
           {% if teaser contains "://" %}

_includes/base_path

@@ -1 +1,5 @@
-{% capture base_path %}{{ site.url }}{{ site.baseurl }}{% endcapture %}
+{% if site.url %}
+  {% assign base_path = site.url | append: site.baseurl %}
+{% else %}
+  {% assign base_path = site.github.url %}
+{% endif %}

_includes/comment.html

@@ -0,0 +1,22 @@
+<article id="comment{{ include.index }}" class="js-comment comment">
+  <div class="comment__avatar-wrapper">
+    <img class="comment__avatar" src="https://www.gravatar.com/avatar/{{ include.email }}?d=mm&s=80">
+  </div>
+  <div class="comment__content-wrapper">
+    <h3 class="comment__author">
+      {% if (include.url) and (include.url != '@url') %}
+        <a rel="nofollow" href="{{ include.url }}">{{ include.name }}</a>
+      {% else %}
+        {{ include.name }}
+      {% endif %}
+    </h3>
+    <p class="comment__date">
+      {% if include.date %}
+        {% if include.index %}<a href="#comment{{ include.index }}">{% endif %}
+        <time datetime="{{ include.date | date_to_xmlschema }}">{{ include.date | date: "%B %d, %Y at %I:%M %p" }}</time>
+        {% if include.index %}</a>{% endif %}
+      {% endif %}
+    </p>
+    {{ include.message | markdownify }}
+  </div>
+</article>

_includes/comments-providers/scripts.html

@@ -9,6 +9,8 @@
   {% include /comments-providers/facebook.html %}
 {% when "google-plus" %}
   {% include /comments-providers/google-plus.html %}
+{% when "staticman" %}
+  {% include /comments-providers/staticman.html %}
 {% when "custom" %}
   {% include /comments-providers/custom.html %}
 {% endcase %}

_includes/comments-providers/staticman.html

@@ -0,0 +1,53 @@
+{% if site.repository and site.staticman.branch %}
+  <!-- Start comment form modal -->
+  <article class="modal">
+    <h2 class="modal__title js-modal-title"></h2>
+    <div class="modal__supporting-text js-modal-text"></div>
+    <div class="modal__actions">
+      <button class="btn btn--danger js-close-modal">{{ site.data.ui-text[site.locale].close_btn_label | default: "close" }}</button>
+    </div>
+  </article>
+  <!-- End comment form modal -->
+
+  <script>
+    (function ($) {
+    var $comments = $('.js-comments');
+
+    $('.js-form').submit(function () {
+      var form = this;
+
+      $(form).addClass('form--loading');
+
+      $.ajax({
+        type: $(this).attr('method'),
+        url: $(this).attr('action'),
+        data: $(this).serialize(),
+        contentType: 'application/x-www-form-urlencoded',
+        success: function (data) {
+          showModal('{{ site.data.ui-text[site.locale].comment_success_title | default: "Comment submitted" }}', '{{ site.data.ui-text[site.locale].comment_success_msg | default: "Thanks for your comment! It will show on the site once it has been approved." }}');
+          $(form).removeClass('form--loading');
+          $('#comment-form-submit').addClass('btn--disabled').html('{{ site.data.ui-text[site.locale].comment_btn_submitted | default: "Submitted" }}');
+        },
+        error: function (err) {
+          console.log(err);
+          showModal('{{ site.data.ui-text[site.locale].comment_error_title | default: "Error" }}', '{{ site.data.ui-text[site.locale].comment_error_msg | default: "Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again." }}');
+          $(form).removeClass('form--loading');
+        }
+      });
+
+      return false;
+    });
+
+    $('.js-close-modal').click(function () {
+      $('body').removeClass('show-modal');
+    });
+
+    function showModal(title, message) {
+      $('.js-modal-title').text(title);
+      $('.js-modal-text').html(message);
+
+      $('body').addClass('show-modal');
+    }
+  })(jQuery);
+  </script>
+{% endif %}

_includes/comments.html

@@ -1,14 +1,75 @@
 {% include base_path %}
 
 <div class="page__comments">
-  <h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label | default: "Leave a Comment" }}</h4>
+  {% capture comments_label %}{{ site.data.ui-text[site.locale].comments_label | default: "Comments" }}{% endcapture %}
   {% case site.comments.provider %}
   {% when "disqus" %}
+    <h4 class="page__comments-title">{{ comments_label }}</h4>
     <section id="disqus_thread"></section>
   {% when "facebook" %}
+    <h4 class="page__comments-title">{{ comments_label }}</h4>
     <section class="fb-comments" data-href="{{ base_path }}{{ page.url }}" data-mobile="true" data-num-posts="{{ site.comments.facebook.num_posts | default: 5 }}" data-width="100%" data-colorscheme="{{ site.comments.facebook.colorscheme | default: 'light' }}"></section>
   {% when "google-plus" %}
+    <h4 class="page__comments-title">{{ comments_label }}</h4>
     <section class="g-comments" data-href="{{ base_path }}{{ page.url }}" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD">Loading Google+ Comments ...</section>
+  {% when "staticman" %}
+    <section id="comments">
+      {% if site.repository and site.staticman.branch %}
+        <!-- Start static comments -->
+        <div class="js-comments">
+          {% if site.data.comments[page.slug] %}
+            <h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_title | default: "Comments" }}</h4>
+            {% assign comments = site.data.comments[page.slug] | sort %}
+
+            {% for comment in comments %}
+              {% 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 email=email name=name url=url date=date message=message %}
+            {% endfor %}
+          {% endif %}
+        </div>
+        <!-- End static comments -->
+
+        <!-- Start new comment form -->
+        <h4 class="page__comments-title">{{ site.data.ui-text[site.locale].comments_label | default: "Leave a Comment" }}</h4>
+        <p class="small help-block">{{ site.data.ui-text[site.locale].comment_form_info | default: "Your email address will not be published. Required fields are marked" }} <span class="required">*</span></p>
+        <form id="new_comment" class="page__comments-form js-form form" method="post" action="https://api.staticman.net/v1/entry/{{ site.repository }}/{{ site.staticman.branch }}">
+          <div class="form__spinner">
+            <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
+            <span class="sr-only">{{ site.data.ui-text[site.locale].loading_label | default: "Loading..." }}</span>
+          </div>
+
+          <fieldset>
+            <label for="comment-form-message">{{ site.data.ui-text[site.locale].comment_form_comment_label | default: "Comment" }} <small class="required">*</small></label>
+            <textarea type="text" rows="3" id="comment-form-message" name="fields[message]" tabindex="1"></textarea>
+            <div class="small help-block"><a href="https://daringfireball.net/projects/markdown/">{{ site.data.ui-text[site.locale].comment_form_md_info | default: "Markdown is supported." }}</a></div>
+          </fieldset>
+          <fieldset>
+            <label for="comment-form-name">{{ site.data.ui-text[site.locale].comment_form_name_label | default: "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">{{ site.data.ui-text[site.locale].comment_form_email_label | default: "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">{{ site.data.ui-text[site.locale].comment_form_website_label | default: "Website (optional)" }}</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>
+          <fieldset>
+            <button type="submit" id="comment-form-submit" tabindex="5" class="btn btn--large">{{ site.data.ui-text[site.locale].comment_btn_submit | default: "Submit Comment" }}</button>
+          </fieldset>
+        </form>
+        <!-- End new comment form -->
+      {% endif %}
+    </section>
   {% when "custom" %}
     <section id="comments"></section>
   {% endcase %}

_sass/_animations.scss

@@ -2,6 +2,15 @@
    ANIMATIONS
    ========================================================================== */
 
+@-webkit-keyframes intro {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 @keyframes intro {
   0% {
     opacity: 0;

_sass/_archive.scss

@@ -41,7 +41,7 @@
   }
 }
 
-// remove border
+/* remove border*/
 .page__content {
 
   .archive__item-title {
@@ -129,8 +129,8 @@
   }
 
   @include breakpoint($medium) {
-    margin-left: 0; // reset before mixin does its thing
+    margin-left: 0; /* reset before mixin does its thing*/
-    margin-right: 0; // reset before mixin does its thing
+    margin-right: 0; /* reset before mixin does its thing*/
     @include gallery(2.5 of 10);
 
     .archive__item-teaser {

_sass/_base.scss

@@ -129,7 +129,7 @@ tt, code, kbd, samp, pre {
 }
 
 pre {
-  overflow-x: auto; // add scrollbars to wide code blocks
+  overflow-x: auto; /* add scrollbars to wide code blocks*/
 }
 
 p > code,
@@ -147,7 +147,7 @@ td > code {
 
   &:before, &:after {
     letter-spacing: -0.2em;
-    content: "\00a0"; // non-breaking space
+    content: "\00a0"; /* non-breaking space*/
   }
 }
 
@@ -179,8 +179,11 @@ li ol {
 /* Figures and images */
 
 figure {
+  display: -webkit-box;
   display: flex;
+  -webkit-box-pack: justify;
           justify-content: space-between;
+  -webkit-box-align: start;
           align-items: flex-start;
   flex-wrap: wrap;
   margin: 2em 0;
@@ -194,6 +197,7 @@ figure {
   img {
     width: 100%;
     border-radius: $border-radius;
+    -webkit-transition: $global-transition;
     transition: $global-transition;
   }
 
@@ -240,6 +244,7 @@ figcaption {
     color: inherit;
     text-decoration: none;
     border-bottom: 1px solid $light-gray;
+    -webkit-transition: $global-transition;
     transition: $global-transition;
 
     &:hover {
@@ -305,5 +310,6 @@ nav {
    ========================================================================== */
 
 b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, tr, td, form button, input[type="submit"], .btn, .highlight, .archive__item-teaser {
+  -webkit-transition: $global-transition;
   transition: $global-transition;
 }

_sass/_buttons.scss

@@ -31,7 +31,7 @@
   }
 
   .icon + .hidden {
-    margin-left: -0.5em; // override for hidden text
+    margin-left: -0.5em; /* override for hidden text*/
   }
 
   /* fills width of parent container */
@@ -49,7 +49,7 @@
 
   &--inverse {
     color: $gray !important;
-    border: 1px solid $light-gray !important; // override
+    border: 1px solid $light-gray !important; /* override*/
     background-color: #fff;
 
     &:hover {
@@ -61,7 +61,7 @@
   /* light outline */
 
   &--light-outline {
-    border: 1px solid #fff !important; // override
+    border: 1px solid #fff !important; /* override*/
     background-color: transparent;
   }
 
@@ -111,7 +111,6 @@
     pointer-events: none;
     cursor: not-allowed;
     filter: alpha(opacity=65);
-    -webkit-box-shadow: none;
     box-shadow: none;
     opacity: 0.65;
   }

_sass/_footer.scss

@@ -14,7 +14,9 @@
   /* sticky footer fix end */
   margin-top: 3em;
   color: mix(#fff, $gray, 25%);
+  -webkit-animation: intro 0.3s both;
           animation: intro 0.3s both;
+  -webkit-animation-delay: 0.45s;
           animation-delay: 0.45s;
   background-color: $lighter-gray;
   border-top: 1px solid $light-gray;

_sass/_forms.scss

@@ -2,7 +2,7 @@
    Forms
    ========================================================================== */
 
-btnform {
+form {
   margin: 0 0 5px 0;
 
   fieldset {
@@ -51,17 +51,20 @@ input,
 button,
 select,
 textarea {
-  font-family: $sans-serif;
   box-sizing: border-box;
+  font-family: $sans-serif;
 }
 
 label {
   display: block;
-  margin-bottom: 10px / 8;
+  margin-bottom: 0.25em;
-  font-weight: bold;
   color: $text-color;
   cursor: pointer;
 
+  small {
+    font-size: $type-size-6;
+  }
+
   input,
   textarea,
   select {
@@ -74,11 +77,13 @@ textarea,
 select {
   display: inline-block;
   width: 100%;
-  padding: 4px;
+  padding: 0.25em;
-  margin-bottom: 5px / 4;
+  margin-bottom: 0.5em;
+  color: $text-color;
   background-color: #fff;
   border: 1px solid mix(#fff, #000, 80%);
-  color: $text-color;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
 
   &:hover {
     border-color: mix(#fff, $primary-color, 50%);
@@ -165,6 +170,10 @@ input[type="hidden"] {
   display: none;
 }
 
+.form {
+  position: relative;
+}
+
 .radio,
 .checkbox {
   padding-left: 18px;
@@ -315,6 +324,38 @@ select:focus {
 }
 
 
+/*
+   .form--loading
+   ========================================================================== */
+
+.form--loading:before {
+  content: '';
+}
+
+.form--loading .form__spinner {
+  display: block;
+}
+
+.form:before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.7);
+  z-index: 10;
+}
+
+.form__spinner {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 11;
+}
+
+
+
 /*
    Google search form
    ========================================================================== */

_sass/_masthead.scss

@@ -5,7 +5,9 @@
 .masthead {
   position: relative;
   border-bottom: 1px solid $border-color;
+  -webkit-animation: intro 0.3s both;
           animation: intro 0.3s both;
+  -webkit-animation-delay: 0.15s;
           animation-delay: 0.15s;
   z-index: 20;
 

_sass/_mixins.scss

@@ -3,9 +3,9 @@
    ========================================================================== */
 
 %tab-focus {
-  // Default
+  /* Default*/
   outline: thin dotted $warning-color;
-  // Webkit
+  /* Webkit*/
   outline: 5px auto $warning-color;
   outline-offset: -2px;
 }
@@ -23,21 +23,24 @@
    Bourbon clearfix
    ========================================================================== */
 
-// Provides an easy way to include a clearfix for containing floats.
+/*
-//
+  * Provides an easy way to include a clearfix for containing floats.
-// @link http://cssmojo.com/latest_new_clearfix_so_far/
+  * link http://cssmojo.com/latest_new_clearfix_so_far/
-//
+  *
-// @example scss - Usage
+  * example scss - Usage
-//   .element {
+  *
-//     @include clearfix;
+  * .element {
-//   }
+  *   @include clearfix;
-//
+  * }
-// @example css - CSS Output
+  *
-//   .element::after {
+  * example css - CSS Output
-//     clear: both;
+  *
-//     content: "";
+  * .element::after {
-//     display: table;
+  *   clear: both;
-//   }
+  *   content: "";
+  *   display: table;
+  * }
+*/
 
 @mixin clearfix {
   clear: both;

_sass/_navigation.scss

@@ -14,7 +14,9 @@
   padding-left: 2em;
   padding-right: 2em;
   font-family: $sans-serif;
+  -webkit-animation: intro 0.3s both;
           animation: intro 0.3s both;
+  -webkit-animation-delay: 0.30s;
           animation-delay: 0.30s;
 
   @include breakpoint($large) {
@@ -232,12 +234,17 @@
         height: 4px;
         background: mix(#fff, $primary-color, 50%);
         width: 100%;
+        -webkit-transition: $global-transition;
         transition: $global-transition;
-        transform: scaleX(0); // hide
+        -webkit-transform: scaleX(0);
+            -ms-transform: scaleX(0);
+                transform: scaleX(0); /* hide*/
       }
 
       &:hover:before {
-        transform: scaleX(1); // reveal
+        -webkit-transform: scaleX(1);
+            -ms-transform: scaleX(1);
+                transform: scaleX(1); /* reveal*/
       }
     }
   }
@@ -414,7 +421,7 @@
     font-weight: normal;
   }
 
-  // hide sub sub links on small screens
+  /* hide sub sub links on small screens*/
   li > ul li {
     display: none;
 

_sass/_notices.scss

@@ -11,34 +11,34 @@
  */
 
 @mixin notice($notice-color) {
-  margin: 2em 0 !important;  // override
+  margin: 2em 0 !important;  /* override*/
   padding: 1em;
   font-family: $global-font-family;
   font-size: $type-size-6 !important;
-  text-indent: initial; // override
+  text-indent: initial; /* override*/
   background-color: mix(#fff, $notice-color, 90%);
   border-radius: $border-radius;
   box-shadow: 0 1px 1px rgba($notice-color, 0.25);
 
   h4 {
-    margin-top: 0 !important; // override
+    margin-top: 0 !important; /* override*/
     margin-bottom: 0.75em;
   }
 
   @at-root .page__content #{&} h4 {
-    // using at-root to override .page-content h4 font size
+    /* using at-root to override .page-content h4 font size*/
     margin-bottom: 0;
     font-size: 1em;
   }
 
   p {
     &:last-child {
-      margin-bottom: 0 !important; // override
+      margin-bottom: 0 !important; /* override*/
     }
   }
 
   h4 + p {
-    // remove space above paragraphs that appear directly after notice headline
+    /* remove space above paragraphs that appear directly after notice headline*/
     margin-top: 0;
     padding-top: 0;
   }
@@ -57,7 +57,7 @@
 
   ul {
     &:last-child {
-      margin-bottom: 0; // override
+      margin-bottom: 0; /* override*/
     }
   }
 }

_sass/_page.scss

@@ -8,7 +8,9 @@
   margin-top: 2em;
   padding-left: 1em;
   padding-right: 1em;
+  -webkit-animation: intro 0.3s both;
           animation: intro 0.3s both;
+  -webkit-animation-delay: 0.35s;
           animation-delay: 0.35s;
 
   @include breakpoint($x-large) {
@@ -63,7 +65,7 @@
   p {
     margin: 0 0 $indent-var;
 
-    // sibling indentation
+    /* sibling indentation*/
     @if $paragraph-indent == true {
       & + p {
         text-indent: $indent-var;
@@ -111,7 +113,9 @@
   position: relative;
   margin-bottom: 2em;
   @include clearfix;
+  -webkit-animation: intro 0.3s both;
           animation: intro 0.3s both;
+  -webkit-animation-delay: 0.25s;
           animation-delay: 0.25s;
 
   &--overlay {
@@ -122,7 +126,9 @@
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
+    -webkit-animation: intro 0.3s both;
             animation: intro 0.3s both;
+    -webkit-animation-delay: 0.25s;
             animation-delay: 0.25s;
 
     a {
@@ -294,6 +300,66 @@
   text-transform: uppercase;
 }
 
+.page__comments-form {
+  padding: 1em;
+  background: $lighter-gray;
+}
+
+.comment {
+  margin: 2em 0;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid $border-color;
+  }
+}
+
+.comment__avatar-wrapper {
+  display: table-cell;
+  vertical-align: top;
+  width: 60px;
+  height: 60px;
+
+  @include breakpoint($large) {
+    width: 100px;
+    height: 100px;
+  }
+}
+
+.comment__avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+
+  @include breakpoint($large) {
+    width: 80px;
+    height: 80px;
+    padding: 5px;
+    border: 1px solid $border-color;
+  }
+}
+
+.comment__content-wrapper {
+  display: table-cell;
+  vertical-align: top;
+}
+
+.comment__author {
+  margin: 0;
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.comment__date {
+  @extend .page__meta;
+  margin: 0;
+
+  a {
+    text-decoration: none;
+  }
+}
+
 
 /*
    Related

_sass/_reset.scss

@@ -24,6 +24,11 @@ body { margin: 0; }
 
 /* Selected elements */
 
+::-moz-selection {
+  color: #fff;
+  background: #000;
+}
+
 ::selection {
   color: #fff;
   background: #000;
@@ -100,9 +105,9 @@ sub {
 
 img {
   /* Responsive images (ensure images don't scale beyond their parents) */
-  max-width: 100%; // part 1: Set a maximum relative to the parent
+  max-width: 100%; /* part 1: Set a maximum relative to the parent*/
-  width: auto\9; // IE7-8 need help adjusting responsive images
+  width: auto\9; /* IE7-8 need help adjusting responsive images*/
-  height: auto; // part 2: Scale the height according to the width, otherwise you get stretching
+  height: auto; /* part 2: Scale the height according to the width, otherwise you get stretching*/
 
   vertical-align: middle;
   border: 0;
@@ -129,12 +134,12 @@ textarea {
 
 button,
 input {
-  *overflow: visible; // inner spacing ie IE6/7
+  *overflow: visible; /* inner spacing ie IE6/7*/
-  line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
+  line-height: normal; /* FF3/4 have !important on line-height in UA stylesheet*/
 }
 
 button::-moz-focus-inner,
-input::-moz-focus-inner { // inner padding and border oddities in FF3/4
+input::-moz-focus-inner { /* inner padding and border oddities in FF3/4*/
   padding: 0;
   border: 0;
 }
@@ -143,8 +148,8 @@ button,
 html input[type="button"], // avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls
 input[type="reset"],
 input[type="submit"] {
-    -webkit-appearance: button; // corrects inability to style clickable `input` types in iOS
+    -webkit-appearance: button; /* corrects inability to style clickable `input` types in iOS*/
-    cursor: pointer; // improves usability and consistency of cursor style between image-type `input` and others
+    cursor: pointer; /* improves usability and consistency of cursor style between image-type `input` and others*/
 }
 
 label,
@@ -155,20 +160,20 @@ input[type="reset"],
 input[type="submit"],
 input[type="radio"],
 input[type="checkbox"] {
-    cursor: pointer; // improves usability and consistency of cursor style between image-type `input` and others
+    cursor: pointer; /* improves usability and consistency of cursor style between image-type `input` and others*/
 }
 
-input[type="search"] { // Appearance in Safari/Chrome
+input[type="search"] { /* Appearance in Safari/Chrome*/
   box-sizing: content-box;
   -webkit-appearance: textfield;
 }
 
 input[type="search"]::-webkit-search-decoration,
 input[type="search"]::-webkit-search-cancel-button {
-  -webkit-appearance: none; // inner-padding issues in Chrome OSX, Safari 5
+  -webkit-appearance: none; /* inner-padding issues in Chrome OSX, Safari 5*/
 }
 
 textarea {
-  overflow: auto; // remove vertical scrollbar in IE6-9
+  overflow: auto; /* remove vertical scrollbar in IE6-9*/
-  vertical-align: top; // readability and alignment cross-browser
+  vertical-align: top; /* readability and alignment cross-browser*/
 }

_sass/_sidebar.scss

@@ -13,6 +13,7 @@
   @include breakpoint($large) {
     @include span(2 of 12);
     opacity: 0.75;
+    -webkit-transition: opacity 0.2s ease-in-out;
     transition: opacity 0.2s ease-in-out;
 
     &:hover {

_sass/_utilities.scss

@@ -179,7 +179,7 @@ body:hover .visually-hidden button {
   vertical-align: middle;
 }
 
-// social icons
+/* social icons*/
 
 .social-icons {
   .fa {
@@ -295,6 +295,7 @@ body:hover .visually-hidden button {
   height: $navicon-height;
   background: #fff;
   margin: auto;
+  -webkit-transition: 0.3s;
   transition: 0.3s;
 
   &:before,
@@ -305,6 +306,7 @@ body:hover .visually-hidden button {
     width: $navicon-width;
     height: $navicon-height;
     background: #fff;
+    -webkit-transition: 0.3s;
     transition: 0.3s;
   }
 
@@ -318,21 +320,25 @@ body:hover .visually-hidden button {
 }
 
 .close .navicon {
-  // hide the middle line
+  /* hide the middle line*/
   background: transparent;
 
-  // overlay the lines by setting both their top values to 0
+  /* overlay the lines by setting both their top values to 0*/
   &:before, &:after{
+    -webkit-transform-origin: 50% 50%;
+        -ms-transform-origin: 50% 50%;
             transform-origin: 50% 50%;
     top: 0;
     width: $navicon-width;
   }
 
-  // rotate the lines to form the x shape
+  /* rotate the lines to form the x shape*/
   &:before{
+    -webkit-transform: rotate3d(0,0,1,45deg);
             transform: rotate3d(0,0,1,45deg);
   }
   &:after{
+    -webkit-transform: rotate3d(0,0,1,-45deg);
             transform: rotate3d(0,0,1,-45deg);
   }
 }
@@ -371,6 +377,61 @@ body:hover .visually-hidden button {
 }
 
 
+/*
+   Modals
+   ========================================================================== */
+
+.show-modal {
+  overflow: hidden;
+  position: relative;
+
+  &:before {
+    position: absolute;
+    content: "";
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    background-color: rgba(255, 255, 255, 0.85);
+  }
+
+  .modal {
+    display: block;
+  }
+}
+
+.modal {
+  display: none;
+  position: fixed;
+  width: 300px;
+  top: 50%;
+  left: 50%;
+  margin-left: -150px;
+  margin-top: -150px;
+  min-height: 0;
+  z-index: 9999;
+  background: #fff;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+
+  &__title {
+    margin: 0;
+    padding: 0.5em 1em;
+  }
+
+  &__supporting-text {
+    padding: 0 1em 0.5em 1em;
+  }
+
+  &__actions {
+    padding: 0.5em 1em;
+    border-top: 1px solid $border-color;
+  }
+}
+
+
 /*
    Footnotes
    ========================================================================== */
@@ -397,3 +458,13 @@ a.reversefootnote {
     text-decoration: underline;
   }
 }
+
+
+/*
+   Required
+   ========================================================================== */
+
+.required {
+  color: $danger-color;
+  font-weight: bold;
+}