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

@@ -3,30 +3,45 @@
 # English (default)
 # -----------------
 en: &DEFAULT_EN
-  page                  : "Page"
+  page                       : "Page"
-  pagination_previous   : "Previous"
+  pagination_previous        : "Previous"
-  pagination_next       : "Next"
+  pagination_next            : "Next"
-  breadcrumb_home_label : "Home"
+  breadcrumb_home_label      : "Home"
-  breadcrumb_separator  : "/"
+  breadcrumb_separator       : "/"
-  toc_label             : "On This Page"
+  toc_label                  : "On This Page"
-  ext_link_label        : "Direct Link"
+  ext_link_label             : "Direct Link"
-  less_than             : "less than"
+  less_than                  : "less than"
-  minute_read           : "minute read"
+  minute_read                : "minute read"
-  share_on_label        : "Share on"
+  share_on_label             : "Share on"
-  meta_label            :
+  meta_label                 :
-  tags_label            : "Tags:"
+  tags_label                 : "Tags:"
-  categories_label      : "Categories:"
+  categories_label           : "Categories:"
-  date_label            : "Updated:"
+  date_label                 : "Updated:"
-  comments_label        : "Leave a Comment"
+  comments_label             : "Leave a Comment"
-  more_label            : "Learn More"
+  comments_title             : "Comments"
-  related_label         : "You May Also Enjoy"
+  more_label                 : "Learn More"
-  follow_label          : "Follow:"
+  related_label              : "You May Also Enjoy"
-  feed_label            : "Feed"
+  follow_label               : "Follow:"
-  powered_by            : "Powered by"
+  feed_label                 : "Feed"
-  website_label         : "Website"
+  powered_by                 : "Powered by"
-  email_label           : "Email"
+  website_label              : "Website"
-  recent_posts          : "Recent Posts"
+  email_label                : "Email"
-  undefined_wpm         : "Undefined parameter words_per_minute at _config.yml"
+  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:
@@ -39,30 +54,45 @@ en-AU:
 # Spanish
 # --------------
 es: &DEFAULT_ES
-  page                  : "Página"
+  page                       : "Página"
-  pagination_previous   : "Anterior"
+  pagination_previous        : "Anterior"
-  pagination_next       : "Siguiente"
+  pagination_next            : "Siguiente"
-  breadcrumb_home_label : "Inicio"
+  breadcrumb_home_label      : "Inicio"
-  breadcrumb_separator  : "/"
+  breadcrumb_separator       : "/"
-  toc_label             : "Contenidos"
+  toc_label                  : "Contenidos"
-  ext_link_label        : "Enlace"
+  ext_link_label             : "Enlace"
-  less_than             : "menos de"
+  less_than                  : "menos de"
-  minute_read           : "minuto de lectura"
+  minute_read                : "minuto de lectura"
-  share_on_label        : "Compartir"
+  share_on_label             : "Compartir"
-  meta_label            :
+  meta_label                 :
-  tags_label            : "Etiquetas:"
+  tags_label                 : "Etiquetas:"
-  categories_label      : "Categorías:"
+  categories_label           : "Categorías:"
-  date_label            : "Actualizado:"
+  date_label                 : "Actualizado:"
-  comments_label        : "Comentar"
+  comments_label             : "Comentar"
-  more_label            : "Ver más"
+  comments_title             :
-  related_label         : "Podrías ver también"
+  more_label                 : "Ver más"
-  follow_label          : "Seguir:"
+  related_label              : "Podrías ver también"
-  feed_label            : "Feed"
+  follow_label               : "Seguir:"
-  powered_by            : "Powered by"
+  feed_label                 : "Feed"
-  website_label         : "Sitio web"
+  powered_by                 : "Powered by"
-  email_label           : "Email"
+  website_label              : "Sitio web"
-  recent_posts          : "Entradas recientes"
+  email_label                : "Email"
-  undefined_wpm         : "Parametro words_per_minute (Palabras por minuto) no definido en _config.yml"
+  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:
@@ -71,30 +101,45 @@ es-CO:
 # French
 # -----------------
 fr: &DEFAULT_FR
-  page                  : "Page"
+  page                       : "Page"
-  pagination_previous   : "Précédent"
+  pagination_previous        : "Précédent"
-  pagination_next       : "Suivant"
+  pagination_next            : "Suivant"
-  breadcrumb_home_label : "Accueil"
+  breadcrumb_home_label      : "Accueil"
-  breadcrumb_separator  : "/"
+  breadcrumb_separator       : "/"
-  toc_label             : "Sur cette page"
+  toc_label                  : "Sur cette page"
-  ext_link_label        : "Lien direct"
+  ext_link_label             : "Lien direct"
-  less_than             : "plus petit que"
+  less_than                  : "plus petit que"
-  minute_read           : "minute de lecture"
+  minute_read                : "minute de lecture"
-  share_on_label        : "Partager sur"
+  share_on_label             : "Partager sur"
-  meta_label            :
+  meta_label                 :
-  tags_label            : "Tags :"
+  tags_label                 : "Tags :"
-  categories_label      : "Catégories :"
+  categories_label           : "Catégories :"
-  date_label            : "Mis à jour :"
+  date_label                 : "Mis à jour :"
-  comments_label        : "Laisser un commentaire"
+  comments_label             : "Laisser un commentaire"
-  more_label            : "Lire plus"
+  comments_title             :
-  related_label         : "Vous pourriez aimer"
+  more_label                 : "Lire plus"
-  follow_label          : "Suivez moi"
+  related_label              : "Vous pourriez aimer"
-  feed_label            : "Flux"
+  follow_label               : "Suivez moi"
-  powered_by            : "Propulsé par"
+  feed_label                 : "Flux"
-  website_label         : "Site"
+  powered_by                 : "Propulsé par"
-  email_label           : "Email"
+  website_label              : "Site"
-  recent_posts          : "Posts récents"
+  email_label                : "Email"
-  undefined_wpm         : "Le paramètre words_per_minute n'est pas défini dans _config.yml"
+  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:
@@ -105,60 +150,90 @@ fr-CH:
 # Turkish
 # -----------------
 tr: &DEFAULT_TR
-  page                  : "Sayfa"
+  page                       : "Sayfa"
-  pagination_previous   : "Önceki"
+  pagination_previous        : "Önceki"
-  pagination_next       : "Sonraki"
+  pagination_next            : "Sonraki"
-  breadcrumb_home_label : "Ana Sayfa"
+  breadcrumb_home_label      : "Ana Sayfa"
-  breadcrumb_separator  : "/"
+  breadcrumb_separator       : "/"
-  toc_label             : "İçindekiler"
+  toc_label                  : "İçindekiler"
-  ext_link_label        : "Doğrudan Bağlantı"
+  ext_link_label             : "Doğrudan Bağlantı"
-  less_than             : "Şu süreden az: "
+  less_than                  : "Şu süreden az: "
-  minute_read           : "dakika tahmini okuma süresi"
+  minute_read                : "dakika tahmini okuma süresi"
-  share_on_label        : "Paylaş"
+  share_on_label             : "Paylaş"
-  meta_label            :
+  meta_label                 :
-  tags_label            : "Etiketler:"
+  tags_label                 : "Etiketler:"
-  categories_label      : "Kategoriler:"
+  categories_label           : "Kategoriler:"
-  date_label            : "Güncelleme tarihi:"
+  date_label                 : "Güncelleme tarihi:"
-  comments_label        : "Yorum yapın"
+  comments_label             : "Yorum yapın"
-  more_label            : "Daha fazlasını öğrenin"
+  comments_title             :
-  related_label         : "Bunlar ilginizi çekebilir:"
+  more_label                 : "Daha fazlasını öğrenin"
-  follow_label          : "Takip et:"
+  related_label              : "Bunlar ilginizi çekebilir:"
-  feed_label            : "RSS"
+  follow_label               : "Takip et:"
-  powered_by            : "Emeği geçenler: "
+  feed_label                 : "RSS"
-  website_label         : "Web sayfası"
+  powered_by                 : "Emeği geçenler: "
-  email_label           : "E-posta"
+  website_label              : "Web sayfası"
-  recent_posts          : "Son yazılar"
+  email_label                : "E-posta"
-  undefined_wpm         : "_config.yml dosyasında tanımlanmamış words_per_minute parametresi"
+  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
 
 # Brazilian Portguese
 # -----------------
 pt: &DEFAULT_PT
-  page                  : "Página"
+  page                       : "Página"
-  pagination_previous   : "Anterior"
+  pagination_previous        : "Anterior"
-  pagination_next       : "Próxima"
+  pagination_next            : "Próxima"
-  breadcrumb_home_label : "Home"
+  breadcrumb_home_label      : "Home"
-  breadcrumb_separator  : "/"
+  breadcrumb_separator       : "/"
-  toc_label             : "Nesta página"
+  toc_label                  : "Nesta página"
-  ext_link_label        : "Link direto"
+  ext_link_label             : "Link direto"
-  less_than             : "meno que"
+  less_than                  : "meno que"
-  minute_read           : "minutos de leitura"
+  minute_read                : "minutos de leitura"
-  share_on_label        : "Compartilhe em"
+  share_on_label             : "Compartilhe em"
-  meta_label            :
+  meta_label                 :
-  tags_label            : "Tags:"
+  tags_label                 : "Tags:"
-  categories_label      : "Categorias:"
+  categories_label           : "Categorias:"
-  date_label            : "Atualizado em:"
+  date_label                 : "Atualizado em:"
-  comments_label        : "Deixe um comentário"
+  comments_label             : "Deixe um comentário"
-  more_label            : "Aprenda Mais"
+  comments_title             :
-  related_label         : "Você Talvez Goste Também"
+  more_label                 : "Aprenda Mais"
-  follow_label          : "Acompanhe em"
+  related_label              : "Você Talvez Goste Também"
-  feed_label            : "Feed"
+  follow_label               : "Acompanhe em"
-  powered_by            : "Feito com"
+  feed_label                 : "Feed"
-  website_label         : "Site"
+  powered_by                 : "Feito com"
-  email_label           : "Email"
+  website_label              : "Site"
-  recent_posts          : "Postagens recentes"
+  email_label                : "Email"
-  undefined_wpm         : "Parâmetro indefinido em word_per_minute no _config.yml"
+  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:
@@ -167,30 +242,45 @@ pt-PT:
 # Italian
 # -----------------
 it: &DEFAULT_IT
-  page                  : "Pagina"
+  page                       : "Pagina"
-  pagination_previous   : "Precedente"
+  pagination_previous        : "Precedente"
-  pagination_next       : "Prossima"
+  pagination_next            : "Prossima"
-  breadcrumb_home_label : "Home"
+  breadcrumb_home_label      : "Home"
-  breadcrumb_separator  : "/"
+  breadcrumb_separator       : "/"
-  toc_label             : "Indice della pagina"
+  toc_label                  : "Indice della pagina"
-  ext_link_label        : "Link"
+  ext_link_label             : "Link"
-  less_than             : "meno di"
+  less_than                  : "meno di"
-  minute_read           : "minuto/i di lettura"
+  minute_read                : "minuto/i di lettura"
-  share_on_label        : "Condividi"
+  share_on_label             : "Condividi"
-  meta_label            :
+  meta_label                 :
-  tags_label            : "Tags:"
+  tags_label                 : "Tags:"
-  categories_label      : "Categorie:"
+  categories_label           : "Categorie:"
-  date_label            : "Aggiornato:"
+  date_label                 : "Aggiornato:"
-  comments_label        : "Scrivi un commento"
+  comments_label             : "Scrivi un commento"
-  more_label            : "Scopri di più"
+  comments_title             :
-  related_label         : "Potrebbe Piacerti Anche"
+  more_label                 : "Scopri di più"
-  follow_label          : "Segui:"
+  related_label              : "Potrebbe Piacerti Anche"
-  feed_label            : "Feed"
+  follow_label               : "Segui:"
-  powered_by            : "Powered by"
+  feed_label                 : "Feed"
-  website_label         : "Website"
+  powered_by                 : "Powered by"
-  email_label           : "Email"
+  website_label              : "Website"
-  recent_posts          : "Articoli Recenti"
+  email_label                : "Email"
-  undefined_wpm         : "Parametro words_per_minute non definito in _config.yml"
+  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,9 +179,12 @@ li ol {
 /* Figures and images */
 
 figure {
+  display: -webkit-box;
   display: flex;
-  justify-content: space-between;
+  -webkit-box-pack: justify;
-  align-items: flex-start;
+          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,8 +14,10 @@
   /* sticky footer fix end */
   margin-top: 3em;
   color: mix(#fff, $gray, 25%);
-  animation: intro 0.3s both;
+  -webkit-animation: intro 0.3s both;
-  animation-delay: 0.45s;
+          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,8 +5,10 @@
 .masthead {
   position: relative;
   border-bottom: 1px solid $border-color;
-  animation: intro 0.3s both;
+  -webkit-animation: intro 0.3s both;
-  animation-delay: 0.15s;
+          animation: intro 0.3s both;
+  -webkit-animation-delay: 0.15s;
+          animation-delay: 0.15s;
   z-index: 20;
 
   &__inner-wrap {

_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,8 +14,10 @@
   padding-left: 2em;
   padding-right: 2em;
   font-family: $sans-serif;
-  animation: intro 0.3s both;
+  -webkit-animation: intro 0.3s both;
-  animation-delay: 0.30s;
+          animation: intro 0.3s both;
+  -webkit-animation-delay: 0.30s;
+          animation-delay: 0.30s;
 
   @include breakpoint($large) {
     padding-left: 1em;
@@ -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,8 +8,10 @@
   margin-top: 2em;
   padding-left: 1em;
   padding-right: 1em;
-  animation: intro 0.3s both;
+  -webkit-animation: intro 0.3s both;
-  animation-delay: 0.35s;
+          animation: intro 0.3s both;
+  -webkit-animation-delay: 0.35s;
+          animation-delay: 0.35s;
 
   @include breakpoint($x-large) {
     max-width: $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,8 +113,10 @@
   position: relative;
   margin-bottom: 2em;
   @include clearfix;
-  animation: intro 0.3s both;
+  -webkit-animation: intro 0.3s both;
-  animation-delay: 0.25s;
+          animation: intro 0.3s both;
+  -webkit-animation-delay: 0.25s;
+          animation-delay: 0.25s;
 
   &--overlay {
     position: relative;
@@ -122,8 +126,10 @@
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
-    animation: intro 0.3s both;
+    -webkit-animation: intro 0.3s both;
-    animation-delay: 0.25s;
+            animation: intro 0.3s both;
+    -webkit-animation-delay: 0.25s;
+            animation-delay: 0.25s;
 
     a {
       color: #fff;
@@ -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,22 +320,26 @@ 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{
-    transform-origin: 50% 50%;
+    -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{
-    transform: rotate3d(0,0,1,45deg);
+    -webkit-transform: rotate3d(0,0,1,45deg);
+            transform: rotate3d(0,0,1,45deg);
   }
   &:after{
-    transform: rotate3d(0,0,1,-45deg);
+    -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
    ========================================================================== */
@@ -396,4 +457,14 @@ a.reversefootnote {
   &:hover {
     text-decoration: underline;
   }
-}
+}
+
+
+/*
+   Required
+   ========================================================================== */
+
+.required {
+  color: $danger-color;
+  font-weight: bold;
+}