Merge branch 'release/3.4.6'

- Due to several issues related to content and JavaScript HTML compression has been disabled.
- To enable add `layout: compress` to _layout/default.html YAML Front Matter

CHANGELOG.md

@@ -1,3 +1,79 @@
+## [3.4.6](https://github.com/mmistakes/minimal-mistakes/releases/tag/3.4.6)
+
+### Enhancements
+
+- Add Italian "comments" related localized UI text. [#514](https://github.com/mmistakes/minimal-mistakes/pull/514)
+
+### Bug Fixes
+
+- Disable `compress` HTML layout by default. To enable add `layout: compress` to `_layouts/default.html`.
+
+## [3.4.5](https://github.com/mmistakes/minimal-mistakes/releases/tag/3.4.5)
+
+### Enhancements
+
+- Improve line numbered code block styling when using `{% highlight linenos %}` tag. [#513](https://github.com/mmistakes/minimal-mistakes/issues/513)
+- Add English fallback to "Follow" button label. [#496](https://github.com/mmistakes/minimal-mistakes/pull/496)
+
+### Bug Fixes
+
+- Fix Firefox alignment issues with code blocks generated with the `{% highlight %}` tag. [#512](https://github.com/mmistakes/minimal-mistakes/issues/512)
+
+### Maintenance
+
+- Clarified comment for `author.stackoverflow` value used in author sidebar links. [#487](https://github.com/mmistakes/minimal-mistakes/pull/487)
+- Add list of localized text strings. [#488](https://github.com/mmistakes/minimal-mistakes/pull/488)
+- Add `{% highlight %}` code block examples to demo site.
+- Add documentation for using custom sidebar navigation menus. [#476](https://github.com/mmistakes/minimal-mistakes/issues/476)
+
+## [3.4.4](https://github.com/mmistakes/minimal-mistakes/releases/tag/3.4.4)
+
+### Enhancements
+
+- Add French "comments" related localized UI text. [#472](https://github.com/mmistakes/minimal-mistakes/pull/472)
+
+### Bug Fixes
+
+- Exclude `vendor` in Jekyll config file.
+- Fix Liquid syntax error for offending parenthesis. [#479](https://github.com/mmistakes/minimal-mistakes/issues/479)
+
+### Maintenance
+
+- Update gems: `colorator` (1.1.0), `forwardable-extended` (2.6.0), `github-pages` (93), `jekyll` (= 3.2.1), `minima` (= 1.0.1).
+
+## [3.4.3](https://github.com/mmistakes/minimal-mistakes/releases/tag/3.4.3)
+
+### Enhancements
+
+- Make ["honeypot" `input`](https://github.com/mmistakes/minimal-mistakes/commit/06a8249a69a37dddda7e2a5bfbe32056c1a9a607) in Staticman comment form less obvious to spam bots
+- Add padding to `.highlight` code blocks to better [align `overflow` scrollbar](https://github.com/mmistakes/minimal-mistakes/commit/e4abec0a6f7f8cff72505ca0754615df294fd5b3) to the bottom.
+- Add additional image options for Twitter card social sharing meta tags. [#466](https://github.com/mmistakes/minimal-mistakes/pull/466)
+- Add structured data markup for Staticman comments. [#458](https://github.com/mmistakes/minimal-mistakes/issues/458)
+
+### Bug Fixes
+
+- Format `og:locale` tag with `_` instead of `-`. [#462](https://github.com/mmistakes/minimal-mistakes/issues/462)
+
+### Maintenance
+
+- Add note to docs about using `url: http://localhost:4000` when working locally.
+
+## [3.4.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/3.4.2)
+
+### Enhancements
+
+- Improve UX of static comment forms. [#448](https://github.com/mmistakes/minimal-mistakes/issues/448)
+
+## [3.4.1](https://github.com/mmistakes/minimal-mistakes/releases/tag/3.4.1)
+
+### Enhancements
+
+- Add `staticman.filename` configuration with UNIX timestamp for sorting data files. example ~> `comment-1470943149`.
+
+### Bug Fixes
+
+- Don't add `<a>` to author name if URL is blank.
+
 ## [3.4.0](https://github.com/mmistakes/minimal-mistakes/releases/tag/3.4.0)
 
 ### Enhancements

Gemfile.lock

@@ -12,7 +12,7 @@ GEM
       coffee-script-source
       execjs
     coffee-script-source (1.10.0)
-    colorator (0.1)
+    colorator (1.1.0)
     ethon (0.9.0)
       ffi (>= 1.3.0)
     execjs (2.7.0)
@@ -20,11 +20,12 @@ GEM
       multipart-post (>= 1.2, < 3)
     ffi (1.9.14)
     ffi (1.9.14-x64-mingw32)
+    forwardable-extended (2.6.0)
     gemoji (2.1.0)
-    github-pages (89)
+    github-pages (93)
       activesupport (= 4.2.7)
-      github-pages-health-check (= 1.1.0)
-      jekyll (= 3.1.6)
+      github-pages-health-check (= 1.2.0)
+      jekyll (= 3.2.1)
       jekyll-coffeescript (= 1.0.1)
       jekyll-feed (= 0.5.1)
       jekyll-gist (= 1.4.0)
@@ -40,9 +41,10 @@ GEM
       liquid (= 3.0.6)
       listen (= 3.0.6)
       mercenary (~> 0.3)
+      minima (= 1.0.1)
       rouge (= 1.11.1)
       terminal-table (~> 1.4)
-    github-pages-health-check (1.1.0)
+    github-pages-health-check (1.2.0)
       addressable (~> 2.3)
       net-dns (~> 0.8)
       octokit (~> 4.0)
@@ -52,13 +54,14 @@ GEM
       activesupport (>= 2)
       nokogiri (>= 1.4)
     i18n (0.7.0)
-    jekyll (3.1.6)
-      colorator (~> 0.1)
+    jekyll (3.2.1)
+      colorator (~> 1.0)
       jekyll-sass-converter (~> 1.0)
       jekyll-watch (~> 1.1)
       kramdown (~> 1.3)
       liquid (~> 3.0)
       mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
       rouge (~> 1.7)
       safe_yaml (~> 1.0)
     jekyll-coffeescript (1.0.1)
@@ -95,6 +98,7 @@ GEM
       rb-inotify (>= 0.9.7)
     mercenary (0.3.6)
     mini_portile2 (2.1.0)
+    minima (1.0.1)
     minitest (5.9.0)
     multipart-post (2.0.0)
     net-dns (0.8.0)
@@ -106,6 +110,8 @@ GEM
       pkg-config (~> 1.1.7)
     octokit (4.3.0)
       sawyer (~> 0.7.0, >= 0.5.3)
+    pathutil (0.14.0)
+      forwardable-extended (~> 2.6)
     pkg-config (1.1.7)
     public_suffix (1.5.3)
     rb-fsevent (0.9.7)

_config.yml

@@ -32,6 +32,7 @@ staticman:
   allowedFields          : ['name', 'email', 'url', 'message']
   branch                 : # "master", "gh-pages"
   commitMessage          : "New comment."
+  filename               : comment-{@timestamp}
   format                 : "yml"
   moderation             : true
   path                   : "_data/comments/{options.slug}"
@@ -96,7 +97,7 @@ author:
   linkedin         :
   pinterest        :
   soundcloud       :
-  stackoverflow    : # http://stackoverflow.com/users/123456/username
+  stackoverflow    : # "123456/username" (the last part of your profile url, e.g. http://stackoverflow.com/users/123456/username)
   steam            :
   tumblr           :
   twitter          :
@@ -113,6 +114,7 @@ include:
 exclude:
   - "*.sublime-project"
   - "*.sublime-workspace"
+  - vendor
   - .asset-cache
   - .bundle
   - .jekyll-assets-cache

_data/ui-text.yml

@@ -36,11 +36,8 @@ en: &DEFAULT_EN
   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
@@ -87,11 +84,8 @@ es: &DEFAULT_ES
   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
@@ -126,20 +120,18 @@ 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              :
+  comments_title             : "Commentaires"
+  comment_form_info          : "Votre adresse email ne sera pas visible. Les champs obligatoires sont marqués"
+  comment_form_comment_label : "Commentaire"
+  comment_form_md_info       : "Markdown est supporté."
+  comment_form_name_label    : "Nom"
+  comment_form_email_label   : "Adresse mail"
+  comment_form_website_label : "Site web (optionnel)"
+  comment_btn_submit         : "Envoyer"
+  comment_btn_submitted      : "Envoyé"
+  comment_success_msg        : "Merci pour votre comentaire, il sera visible sur le site une fois approuvé."
+  comment_error_msg          : "Désolé, une erreur est survenue lors de la soumission. Vérifiez que les champs obligatoires ont été remplis et réessayez."
+  loading_label              : "Chargement..."
 fr-FR:
   <<: *DEFAULT_FR
 fr-BE:
@@ -183,11 +175,8 @@ tr: &DEFAULT_TR
   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
@@ -228,11 +217,8 @@ pt: &DEFAULT_PT
   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
@@ -267,20 +253,17 @@ 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              :
+  comment_form_info          : "Il tuo indirizzo email non sarà pubblicato. Sono segnati i campi obbligatori"
+  comment_form_comment_label : "Commenta"
+  comment_form_md_info       : "Il linguaggio Markdown è supportato"
+  comment_form_name_label    : "Nome"
+  comment_form_email_label   : "Indirizzo email"
+  comment_form_website_label : "Sito Web (opzionale)"
+  comment_btn_submit         : "Invia commento"
+  comment_btn_submitted      : "Inviato"
+  comment_success_msg        : "Grazie per il tuo commento! Verrà visualizzato nel sito una volta che sarà approvato."
+  comment_error_msg          : "C'è stato un errore con il tuo invio. Assicurati che tutti i campi richiesti siano stati completati e riprova."
+  loading_label              : "Caricamento..."
 it-IT:
   <<: *DEFAULT_IT
 

_includes/author-profile.html

@@ -20,7 +20,7 @@
   </div>
 
   <div class="author__urls-wrapper">
-    <button class="btn btn--inverse">Follow</button>
+    <button class="btn btn--inverse">{{ site.data.ui-text[site.locale].follow_label | remove: ":" | default: "Follow" }}</button>
     <ul class="author__urls social-icons">
       {% if author.location %}
         <li><i class="fa fa-fw fa-map-marker" aria-hidden="true"></i> {{ author.location }}</li>

_includes/comment.html

@@ -1,22 +1,22 @@
-<article id="comment{{ include.index }}" class="js-comment comment">
+<article id="comment{{ include.index }}" class="js-comment comment" itemprop="comment" itemscope itemtype="http://schema.org/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>
+    <h3 class="comment__author" itemprop="author" itemscope itemtype="http://schema.org/Person">
+      {% unless include.url == blank %}
+        <span itemprop="name"><a rel="external nofollow" itemprop="url" href="{{ include.url }}">{{ include.name }}</a></span>
       {% else %}
-        {{ include.name }}
-      {% endif %}
+        <span itemprop="name">{{ include.name }}</span>
+      {% endunless %}
     </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 href="#comment{{ include.index }}" itemprop="url">{% endif %}
+        <time datetime="{{ include.date | date_to_xmlschema }}" itemprop="datePublished">{{ include.date | date: "%B %d, %Y at %I:%M %p" }}</time>
         {% if include.index %}</a>{% endif %}
       {% endif %}
     </p>
-    {{ include.message | markdownify }}
+    <div itemprop="text">{{ include.message | markdownify }}</div>
   </div>
 </article>

_includes/comments-providers/staticman.html

@@ -1,22 +1,13 @@
 {% 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 () {
+    $('#new_comment').submit(function () {
       var form = this;
 
-      $(form).addClass('form--loading');
+      $(form).addClass('disabled');
+      $('#comment-form-submit').html('<i class="fa fa-spinner fa-spin fa-fw"></i> {{ site.data.ui-text[site.locale].loading_label | default: "Loading..." }}');
 
       $.ajax({
         type: $(this).attr('method'),
@@ -24,29 +15,27 @@
         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" }}');
+          $('#comment-form-submit').html('{{ site.data.ui-text[site.locale].comment_btn_submitted | default: "Submitted" }}');
+          $('.page__comments-form .js-notice').removeClass('notice--danger');
+          $('.page__comments-form .js-notice').addClass('notice--success');
+          showAlert('{{ 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." }}');
         },
         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');
+          $('#comment-form-submit').html('{{ site.data.ui-text[site.locale].comment_btn_submit  | default: "Submit Comment" }}');
+          $('.page__comments-form .js-notice').removeClass('notice--success');
+          $('.page__comments-form .js-notice').addClass('notice--danger');
+          showAlert('{{ 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('disabled');
         }
       });
 
       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');
+    function showAlert(message) {
+      $('.page__comments-form .js-notice').removeClass('hidden');
+      $('.page__comments-form .js-notice-text').html(message);
     }
   })(jQuery);
   </script>

_includes/comments.html

@@ -35,7 +35,7 @@
 
         <!-- 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>
+        <p class="small">{{ 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>
@@ -59,10 +59,16 @@
             <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">
+          <fieldset class="hidden" style="display: none;">
             <input type="hidden" name="options[slug]" value="{{ page.slug }}">
-            <input type="hidden" name="fields[hidden]"/>
+            <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"/>
           </fieldset>
+          <!-- Start comment form alert messaging -->
+          <p class="hidden js-notice">
+            <strong class="js-notice-text"></strong>
+          </p>
+          <!-- End comment form alert messaging -->
           <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>

_includes/seo.html

@@ -39,7 +39,7 @@
   {% assign seo_author_twitter = seo_author_twitter | replace: "@", "" %}
 {% endif %}
 
-<meta property="og:locale" content="{{ site.locale | default: "en" }}">
+<meta property="og:locale" content="{{ site.locale | replace: "-", "_" | default: "en" }}">
 <meta property="og:site_name" content="{{ site.title }}">
 <meta property="og:title" content="{{ page.title | default: site.title | markdownify | strip_html | strip_newlines | escape_once }}">
 
@@ -63,7 +63,9 @@
     <meta name="twitter:image" content="{% if page.header.image contains "://" %}{{ page.header.image }}{% else %}{{ page.header.image | prepend: "/images/" | prepend: base_path }}{% endif %}">
   {% else %}
     <meta name="twitter:card" content="summary">
-    {% if site.og_image %}
+    {% if page.header.teaser %}
+      <meta name="twitter:image" content="{% if page.header.teaser contains "://" %}{{ page.header.teaser }}{% else %}{{ page.header.teaser | prepend: "/images/" | prepend: base_path }}{% endif %}">
+    {% elsif site.og_image %}
       <meta name="twitter:image" content="{{ site.og_image | prepend: "/images/" | prepend: base_path }}">
     {% endif %}
   {% endif %}
@@ -87,6 +89,10 @@
   <meta property="og:image" content="{% if page.header.image contains "://" %}{{ page.header.image }}{% else %}{{ page.header.image | prepend: "/images/" | prepend: base_path }}{% endif %}">
 {% elsif page.header.overlay_image %}
   <meta property="og:image" content="{% if page.header.overlay_image contains "://" %}{{ page.header.overlay_image }}{% else %}{{ page.header.overlay_image | prepend: "/images/" | prepend: base_path }}{% endif %}">
+{% elsif page.header.teaser %}
+  <meta property="og:image" content="{% if page.header.teaser contains "://" %}{{ page.header.teaser }}{% else %}{{ page.header.teaser | prepend: "/images/" | prepend: base_path }}{% endif %}">
+{% elsif site.og_image %}
+  <meta property="og:image" content="{% if site.og_image contains "://" %}{{ site.og_image }}{% else %}{{ site.og_image | prepend: "/images/" | prepend: base_path }}{% endif %}">
 {% endif %}
 
 {% if page.date %}

_layouts/archive.html

@@ -2,7 +2,7 @@
 layout: default
 ---
 
-{% if (page.header.overlay_color or page.header.overlay_image) or page.header.image %}
+{% if page.header.overlay_color or page.header.overlay_image or page.header.image %}
   {% include page__hero.html %}
 {% endif %}
 

_layouts/default.html

@@ -1,5 +1,4 @@
 ---
-layout: compress
 ---
 
 {% include base_path %}

_layouts/single.html

@@ -4,7 +4,7 @@ layout: default
 
 {% include base_path %}
 
-{% if (page.header.overlay_color or page.header.overlay_image) or page.header.image %}
+{% if page.header.overlay_color or page.header.overlay_image or page.header.image %}
   {% include page__hero.html %}
 {% endif %}
 

_layouts/splash.html

@@ -4,7 +4,7 @@ layout: default
 
 {% include base_path %}
 
-{% if (page.header.overlay_color or page.header.overlay_image) or page.header.image %}
+{% if page.header.overlay_color or page.header.overlay_image or page.header.image %}
   {% include page__hero.html %}
 {% endif %}
 

_sass/_navigation.scss

@@ -97,7 +97,7 @@
       }
 
       &.disabled {
-        color: $light-gray;
+        color: mix(#fff, $gray, 75%);
         pointer-events: none;
         cursor: not-allowed;
       }
@@ -131,7 +131,7 @@
     font-weight: bold;
     text-align: center;
     text-decoration: none;
-    color: mix(#fff, $gray, 25%);
+    color: mix(#fff, $gray, 50%);
     border: 1px solid $light-gray;
     border-radius: $border-radius;
 
@@ -151,7 +151,7 @@
     }
 
     &.disabled {
-      color: $light-gray;
+      color: mix(#fff, $gray, 75%);
       pointer-events: none;
       cursor: not-allowed;
     }

_sass/_page.scss

@@ -8,10 +8,8 @@
   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;
+  animation: intro 0.3s both;
+  animation-delay: 0.35s;
 
   @include breakpoint($x-large) {
     max-width: $x-large;
@@ -113,10 +111,8 @@
   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;
+  animation: intro 0.3s both;
+  animation-delay: 0.25s;
 
   &--overlay {
     position: relative;
@@ -126,10 +122,8 @@
     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;
+    animation: intro 0.3s both;
+    animation-delay: 0.25s;
 
     a {
       color: #fff;
@@ -303,10 +297,25 @@
 .page__comments-form {
   padding: 1em;
   background: $lighter-gray;
+  transition: $global-transition;
+
+  &.disabled {
+    input,
+    button,
+    textarea,
+    label {
+      pointer-events: none;
+      cursor: not-allowed;
+      filter: alpha(opacity=65);
+      box-shadow: none;
+      opacity: 0.65;
+    }
+  }
 }
 
 .comment {
-  margin: 2em 0;
+  @include clearfix();
+  margin: 1em 0;
 
   &:not(:last-child) {
     border-bottom: 1px solid $border-color;
@@ -314,8 +323,7 @@
 }
 
 .comment__avatar-wrapper {
-  display: table-cell;
-  vertical-align: top;
+  float: left;
   width: 60px;
   height: 60px;
 
@@ -339,8 +347,12 @@
 }
 
 .comment__content-wrapper {
-  display: table-cell;
-  vertical-align: top;
+  float: right;
+  width: calc(100% - 60px);
+
+  @include breakpoint($large) {
+    width: calc(100% - 100px);
+  }
 }
 
 .comment__author {

_sass/_syntax.scss

@@ -2,10 +2,13 @@
    Syntax highlighting
    ========================================================================== */
 
-div.highlighter-rouge, figure.highlight {
+div.highlighter-rouge,
+figure.highlight {
   position: relative;
   margin-bottom: 1em;
-  padding: 1em;
+  font-family: $monospace;
+  font-size: $type-size-7;
+  line-height: 1.8;
   border: 1px solid $border-color;
   border-radius: $border-radius;
   background-color: $code-background-color;
@@ -19,7 +22,6 @@ div.highlighter-rouge, figure.highlight {
     background-color: $lighter-gray;
     content: "\f121";
     font-family: "fontawesome" !important;
-    font-size: $type-size-6;
     line-height: 1;
     text-transform: none;
     speak: none;
@@ -27,15 +29,36 @@ div.highlighter-rouge, figure.highlight {
 
   .highlight {
     margin: 0;
-    font-family: $monospace;
-    font-size: $type-size-7;
-    line-height: 1.8;
+    padding: 1em;
   }
 }
 
-.highlight table td { padding: 5px; }
-.highlight table pre { margin: 0; }
+figure.highlight {
+  padding-left: 1em;
+  padding-right: 1em;
+}
 
+.highlight table {
+  font-size: 1em;
+  border: 0;
+
+  td {
+    padding: 5px;
+    border: 0;
+
+    // line numbers
+    &.gutter {
+      padding-right: 1em;
+      color: $light-gray;
+    }
+  }
+
+  pre {
+    margin: 0;
+  }
+}
+
+.highlight pre { width: 100%; }
 
 /*
    Solarized Light

package.json

@@ -1,6 +1,6 @@
 {
   "name": "minimal-mistakes",
-  "version": "3.4.0",
+  "version": "3.4.6",
   "description": "Minimal Mistakes Jekyll theme npm build scripts",
   "repository": {
     "type": "git",