Bump 💎 to 4.5.1

Add table of contents
Add note about setting Discourse server as a scheme-less URL
2017-08-18 15:19:24 -04:00 · 2017-08-18 15:08:23 -04:00 · 2017-08-18 15:07:10 -04:00 · 2017-08-18 12:41:53 -04:00 · 2017-08-18 12:40:41 -04:00 · 2017-08-18 12:38:58 -04:00
367 changed files with 8743 additions and 9627 deletions
@@ -8,4 +8,8 @@ This goes for author sidebar links and "share button" additions -- I have no int

 ## Pull Requests

-To help me out try to avoid creating pull requests on `master` and instead branch off of `develop`. It's much easier for me to test, merge, and roll them into new releases this way.
+When submitting a pull request:
+
+1. Clone the repo.
+2. Create a branch off of `master` and give it a meaningful name (e.g. `my-awesome-new-feature`) and describe the feature or fix.
+3. Open a pull request on GitHub.
@@ -6,10 +6,10 @@
 -->

 - [ ] This is a question about using the theme.
- [ ] I believe this to be a bug with the theme --- not Jekyll, GitHub Pages or one of the bundled plugins.
 - [ ] This is a feature request.
 - [ ] I have updated all gems with `bundle update`.
 - [ ] I have tested locally with `bundle exec jekyll build`.
+- [ ] I believe this to be a bug with the theme --- not Jekyll, GitHub Pages or one of the bundled plugins.

 ---

@@ -1,3 +1,150 @@
+## [4.5.1](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.5.1)
+
+### Enhancements
+
+- Add Greek and Danish localized UI text strings. [#1159](https://github.com/mmistakes/minimal-mistakes/pull/1159) [#1188](https://github.com/mmistakes/minimal-mistakes/pull/1188)
+- Remove blank YAML Front Matter from JavaScript banner. [#1158](https://github.com/mmistakes/minimal-mistakes/issues/1158)
+- Improve `page` and `archive` layouts to visually center main content and harmonize sidebar widths and placement. [#1166](https://github.com/mmistakes/minimal-mistakes/pull/1166)
+- Increase font-size of code blocks.
+- Reduce indent of nested "table of contents" links.
+- Extend [archive grid view](https://mmistakes.github.io/minimal-mistakes/docs/layouts/) to the right to better fill the page.
+- URL encode title and page URL in social share links. [#1177](https://github.com/mmistakes/minimal-mistakes/pull/1177)
+- Replace old Disqus script with new Universal Embed Code. [#1179](https://github.com/mmistakes/minimal-mistakes/pull/1179)
+
+## Bug Fixes
+
+- Fix positioning of sidebar table of contents when using `layout: splash`. [#1169](https://github.com/mmistakes/minimal-mistakes/issues/1169)
+- Fix "follow" links `z-index` order to avoid overlapping issues. [#1167](https://github.com/mmistakes/minimal-mistakes/issues/1167)
+
+### Maintenance
+
+- Fix typo `words_per_minute` typo in documentation. [#1164](https://github.com/mmistakes/minimal-mistakes/pull/1164)
+- Remove outside and right borders in `table`s.
+- Adjust width of `.sidebar` to match `.sidebar__right`.
+- Add sample documents to ["portfolio" collection](https://mmistakes.github.io/minimal-mistakes/portfolio/) for testing grid view.
+- Fix typo in stylesheets documentation. [#1170](https://github.com/mmistakes/minimal-mistakes/pull/1170)
+- Add note about setting Discourse `server` as a scheme-less URL (eg. `meta.discourse.com` and not `http://meta.discourse.com`) in `_config.yml`. [#1182](https://github.com/mmistakes/minimal-mistakes/issues/1182)
+
+## [4.5.0](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.5.0)
+
+### Enhancements
+
+- Add scrollbar to sidebars with overflowing content that extends outside the viewport's height. [#706](https://github.com/mmistakes/minimal-mistakes/issues/706)
+- Add missing Spanish UI text strings. [#1118](https://github.com/mmistakes/minimal-mistakes/pull/1118)
+- Update Susy to version 3 and rewrite grid CSS to be more readable.
+- Refactor intro animations into a separate Sass variable `$intro-transition` to allow for customizing. [#1147](https://github.com/mmistakes/minimal-mistakes/pull/1147)
+- Add [**jekyll-data**](https://github.com/ashmaroli/jekyll-data) as a dependency to read data files from theme-gem. [#1131](https://github.com/mmistakes/minimal-mistakes/pull/1131)
+- Add support for customizing header image alternative text through YAML Front Matter. [#1138](https://github.com/mmistakes/minimal-mistakes/pull/1138)
+
+### Bug Fixes
+
+- Fix Sass `DEPRECATION WARNING: Passing a string to call()` by [upgrading Susy to version 3](https://github.com/mmistakes/minimal-mistakes/commit/387f8149d6270b876f224a57a07062ffb0647938). [#1114](https://github.com/mmistakes/minimal-mistakes/issues/1114)
+- Fix disappearing author profile links due to tapping the "Follow" button and changing a browser's viewport width to > `$lg`. [#1136](https://github.com/mmistakes/minimal-mistakes/issues/1136)
+
+### Maintenance
+
+- Replace reference to "Basically Basic theme" with **Minimal Mistakes**. [#1149](https://github.com/mmistakes/minimal-mistakes/pull/1149)
+- Add documentation for disabling CSS3 animations. [#1150](https://github.com/mmistakes/minimal-mistakes/pull/1150)
+- Update quickstart, installation, and overriding defaults documentation. [#1151](https://github.com/mmistakes/minimal-mistakes/pull/1151)
+
+## [4.4.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.4.2)
+
+### Enhancements
+
+- Add Swedish, Dutch, and Indonesian localized UI text strings. [#996](https://github.com/mmistakes/minimal-mistakes/pull/996) [#1081](https://github.com/mmistakes/minimal-mistakes/pull/1081) [#1101](https://github.com/mmistakes/minimal-mistakes/pull/1101)
+- Add Bitbucket social icon color. [#1009](https://github.com/mmistakes/minimal-mistakes/pull/1009)
+- Add GitLab to author sidebar. [#1050](https://github.com/mmistakes/minimal-mistakes/pull/1050)
+- Add Sass variable for navicon link hover color. [#1089](https://github.com/mmistakes/minimal-mistakes/pull/1089) [#1088](https://github.com/mmistakes/minimal-mistakes/pull/1088)
+
+### Bug Fixes
+
+- Toggle close button on `mouseleave`. [#975](https://github.com/mmistakes/minimal-mistakes/issues/975)
+- Remove extraneous `</a>` and `</li>` tags from `paginator.html` include. [#1038](https://github.com/mmistakes/minimal-mistakes/pull/1038)
+- Fix Google+ comments provider includes. [#1092](https://github.com/mmistakes/minimal-mistakes/issues/1092)
+- Replace category variable used in `_includes/breadcrumbs.html` to `site.category_archive` to avoid conflicts with `site.categories`. [#1063](https://github.com/mmistakes/minimal-mistakes/pull/1063) [#329](https://github.com/mmistakes/minimal-mistakes/issues/329)
+
+### Maintenance
+
+- Add mention of Greek localized UI text strings to theme documentation. [#972](https://github.com/mmistakes/minimal-mistakes/pull/972)
+- Update Greek localized UI text strings. [#1054](https://github.com/mmistakes/minimal-mistakes/pull/1054)
+- Add documentation for adding teaser images in grid view using `header.teaser`.
+
+## [4.4.1](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.4.1)
+
+### Enhancements
+
+- Add Greek localized UI text strings. [#958](https://github.com/mmistakes/minimal-mistakes/pull/958)
+
+### Bug Fixes
+
+- Fix `video` helper to load Vimeo videos over https. [#945](https://github.com/mmistakes/minimal-mistakes/pull/945)
+- Fix close menu button that was removed when updating Greedy navigation script. [#969](https://github.com/mmistakes/minimal-mistakes/issues/969)
+
+## [4.4.0](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.4.0)
+
+### Enhancements
+
+- Move SCSS partials to `/_sass/minimal-mistakes` for easier CSS customization. 
+- Replace `modified` with `last_modified_at` to leverage various Jekyll plugins that utilize this variable. [#930](https://github.com/mmistakes/minimal-mistakes/pull/930)
+- Add Lithuanian localized UI text. [#924](https://github.com/mmistakes/minimal-mistakes/pull/924)
+- Improve print stylesheet by increasing text contrast, removing elements that don't need to be printed, expanding URLs, and reducing amount of blank pages. [#909](https://github.com/mmistakes/minimal-mistakes/issues/909)
+
+### Maintenance
+
+- Remove extra word in comment. [#911](https://github.com/mmistakes/minimal-mistakes/pull/911)
+- Fix typo in Utility Class docs. [#915](https://github.com/mmistakes/minimal-mistakes/pull/915)
+
+## [4.3.1](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.3.1)
+
+### Bug Fixes
+
+- Fix `.masthead` and `.page__footer` overlapping full screen video elements. [#933](https://github.com/mmistakes/minimal-mistakes/issues/933)
+- Correctly show Related Posts heading when UI Text data file is omitted and `related: true` in YAML Front Matter. [#901](https://github.com/mmistakes/minimal-mistakes/pull/901)
+
+## [4.3.0](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.3.0)
+
+### Enhancements
+
+- Add workaround to allow theme gem's `/assets/js/main.min.js` file to be overridden by a local version. Simply add the following YAML Front Matter to the file:
+  
+  ```
+  ---
+  layout: 
+  ---
+  ```
+
+  Any local customizations you make to `/assets/js/main.min.js` should now replace the theme gem's version.
+
+## [4.2.2](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.2.2)
+
+### Enhancements
+
+- Update [Greedy Navigation](https://github.com/lukejacksonn/GreedyNav) to flexbox version to make it more flexible when dealing with long site titles (`site.title`). [#836](https://github.com/mmistakes/minimal-mistakes/issues/836)
+- Adjust `box-shadow` in navigation and author sidebar. [#576](https://github.com/mmistakes/minimal-mistakes/pull/576)
+- Add Russian, Korean, and zh-TW localized UI text. [#815](https://github.com/mmistakes/minimal-mistakes/issues/815) [#834](https://github.com/mmistakes/minimal-mistakes/pull/834) [#838](https://github.com/mmistakes/minimal-mistakes/pull/838)
+
+### Bug Fixes
+
+- Fix Discourse embedded comments bug. [#823](https://github.com/mmistakes/minimal-mistakes/issues/823)
+- Fix `seo_author` default value in `seo.html` and add `author` meta. [#858](https://github.com/mmistakes/minimal-mistakes/pull/858)
+
+### Maintenance
+
+- Add theme meta info to `_layouts/default.html` and `main.css`.
+- Update README.
+- Improve the pagination and taxonomy archive documentation. [#826](https://github.com/mmistakes/minimal-mistakes/pull/826)
+- Add comments to `/docs/_config.yml` to clarify use of YAML references. [#847](https://github.com/mmistakes/minimal-mistakes/pull/847)
+
+## [4.2.1](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.2.1)
+
+### Enhancements
+
+- Improve `paginator.html` to support paginated pages that live inside of a subfolder. See [documentation](https://mmistakes.github.io/minimal-mistakes/docs/layouts/#home-page) for more details. [#764](https://github.com/mmistakes/minimal-mistakes/pull/764/)
+
+### Maintenance
+
+- Add `https` protocol to Google Universal Analytics embed. [#772](https://github.com/mmistakes/minimal-mistakes/pull/772)
+
 ## [4.2.0](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.2.0)

 ### Enhancements
@@ -1,6 +1,6 @@
 The MIT License (MIT)

-Copyright (c) 2016 Michael Rose
+Copyright (c) 2017 Michael Rose

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -25,7 +25,7 @@ See what's new in the [CHANGELOG](CHANGELOG.md).
 - Optional [header images](https://mmistakes.github.io/minimal-mistakes/docs/layouts/#headers), [custom sidebars](https://mmistakes.github.io/minimal-mistakes/docs/layouts/#sidebars), [table of contents](https://mmistakes.github.io/minimal-mistakes/docs/helpers/#table-of-contents), [galleries](https://mmistakes.github.io/minimal-mistakes/docs/helpers/#gallery), related posts, [breadcrumb links](https://mmistakes.github.io/minimal-mistakes/docs/configuration/#breadcrumb-navigation-beta), [navigation lists](https://mmistakes.github.io/minimal-mistakes/docs/helpers/#navigation-list), and more.
 - Commenting support (powered by [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).
 - [Google Analytics](https://www.google.com/analytics/) support.
- UI localized text in English (default), Brazilian Portuguese, Chinese, French, German, Italian, Nepali (Nepalese), Spanish, and Turkish
+- UI localized text in English (default), Brazilian Portuguese, Chinese, French, German, Italian, Korean, Nepali (Nepalese), Russian, Spanish, and Turkish

 ## Demo Pages

@@ -90,7 +90,11 @@ This goes for author sidebar links and "share button" additions -- I have no int

 ### Pull Requests

-To help me out try to avoid creating pull requests on `master` and instead branch off of `develop`. It's much easier for me to test, merge, and roll them into new releases this way.
+When submitting a pull request:
+
+1. Clone the repo.
+2. Create a branch off of `master` and give it a meaningful name (e.g. `my-awesome-new-feature`) and describe the feature or fix.
+3. Open a pull request on GitHub.

 Theme documentation and demo pages can be found in the [`/docs`](docs) if submitting improvements, typo corrections, etc.

@@ -98,7 +102,7 @@ Theme documentation and demo pages can be found in the [`/docs`](docs) if submit

 To set up your environment to develop this theme, run `bundle install`.

-To test the theme, run `bundle exec rake preview` and open your browser at `http://localhost:4000/test/`. This starts a Jekyll server using your theme and the contents of the `test/` directory. As you make modifications to your theme and to the example site, your site will regenerate and you should see the changes in the browser after a refresh.
+To test the theme, run `bundle exec rake preview` and open your browser at `http://localhost:4000/test/`. This starts a Jekyll server using content in the `test/` directory. As modifications are made to the theme and test site, it will regenerate and you should see the changes in the browser after a refresh.

 ---

@@ -135,7 +139,7 @@ To test the theme, run `bundle exec rake preview` and open your browser at `http

 The MIT License (MIT)

-Copyright (c) 2016 Michael Rose
+Copyright (c) 2017 Michael Rose

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -44,6 +44,7 @@ task :preview do

  ENV["LISTEN_GEM_DEBUGGING"] = "1"
  listener = Listen.to(
+    base.join("_data"),
    base.join("_includes"),
    base.join("_layouts"),
    base.join("_sass"),
@@ -90,6 +90,7 @@ author:
  facebook         :
  foursquare       :
  github           :
+  gitlab           :
  google_plus      :
  keybase          :
  instagram        :
@@ -78,17 +78,17 @@ 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_msg        :
-  comment_error_msg          :
-  loading_label              :
+  comment_form_info          : "Su dirección de correo no será publicada. Se han resaltado los campos requeridos"
+  comment_form_comment_label : "Comentario"
+  comment_form_md_info       : "Markdown está soportado."
+  comment_form_name_label    : "Nombre"
+  comment_form_email_label   : "Dirección de E-mail"
+  comment_form_website_label : "Sitio web (opcional)"
+  comment_btn_submit         : "Enviar Commentario"
+  comment_btn_submitted      : "Enviado"
+  comment_success_msg        : "Gracias por su comentario!, Este se visualizará en el sitio una vez haya sido aprobado"
+  comment_error_msg          : "Lo sentimos, ha ocurrido un error al enviar su comentario. Por favor asegurese que todos los campos han sido diligenciados e intente de nuevo"
+  loading_label              : "Cargando..."
 es-ES:
  <<: *DEFAULT_ES
 es-CO:
@@ -356,8 +356,45 @@ zh-HK:
  <<: *DEFAULT_ZH
 zh-SG:
  <<: *DEFAULT_ZH
+# Taiwan (Traditional Chinese)
 zh-TW:
-  <<: *DEFAULT_ZH
+  page                       : "頁面"
+  pagination_previous        : "較舊"
+  pagination_next            : "較新"
+  breadcrumb_home_label      : "首頁"
+  breadcrumb_separator       : "/"
+  menu_label                 : "切換選單"
+  toc_label                  : "本頁"
+  ext_link_label             : "外部連結"
+  less_than                  : "少於"
+  minute_read                : "分鐘閱讀"
+  share_on_label             : "分享到"
+  meta_label                 :
+  tags_label                 : "標籤:"
+  categories_label           : "分類:"
+  date_label                 : "更新時間:"
+  comments_label             : "留言"
+  comments_title             : "留言內容"
+  more_label                 : "了解更多"
+  related_label              : "猜您有與趣"
+  follow_label               : "追蹤:"
+  feed_label                 : "RSS Feed"
+  powered_by                 : "Powered by"
+  website_label              : "網站"
+  email_label                : "電子信箱"
+  recent_posts               : "最新文章"
+  undefined_wpm              : "_config.yml 中未定義 words_per_minute"
+  comment_form_info          : "您的電子信箱不會被公開. 必填部份已標記"
+  comment_form_comment_label : "留言內容"
+  comment_form_md_info       : "支援Markdown語法。"
+  comment_form_name_label    : "名字"
+  comment_form_email_label   : "電子信箱帳號"
+  comment_form_website_label : "網頁 (可選填)"
+  comment_btn_submit         : "送出留言"
+  comment_btn_submitted      : "已送出"
+  comment_success_msg        : "感謝您的留言！ 審核後將會顯示在站上。"
+  comment_error_msg          : "抱歉，部份資料輸入有問題。請確認資料填寫正確後再試一次。"
+  loading_label              : "載入中..."

 # German / Deutsch
 # -----------------
@@ -411,6 +448,7 @@ de-LI:
  <<: *DEFAULT_DE
 de-LU:
  <<: *DEFAULT_DE
+
 # Nepali (Nepal)
 # -----------------
 ne: &DEFAULT_NE
@@ -453,5 +491,398 @@ ne: &DEFAULT_NE
  loading_label              : "लोड हुँदैछ ..."
 ne-NP:
  <<: *DEFAULT_NE
+
+# Korean
+# --------------
+ko: &DEFAULT_KO
+  page                       : "페이지"
+  pagination_previous        : "이전"
+  pagination_next            : "다음"
+  breadcrumb_home_label      : "Home"
+  breadcrumb_separator       : "/"
+  menu_label                 : "토글 메뉴"
+  toc_label                  : "On This Page"
+  ext_link_label             : "직접 링크"
+  less_than                  : "최대"
+  minute_read                : "분 소요"
+  share_on_label             : "공유하기"
+  meta_label                 :
+  tags_label                 : "태그:"
+  categories_label           : "카테고리:"
+  date_label                 : "업데이트:"
+  comments_label             : "댓글남기기"
+  comments_title             : "댓글"
+  more_label                 : "더 보기"
+  related_label              : "참고"
+  follow_label               : "팔로우:"
+  feed_label                 : "피드"
+  powered_by                 : "Powered by"
+  website_label              : "웹사이트"
+  email_label                : "이메일"
+  recent_posts               : "최근 포스트"
+  undefined_wpm              : "Undefined parameter words_per_minute at _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_msg        : "감사합니다! 댓글이 머지된 후 확인하실 수 있습니다."
+  comment_error_msg          : "댓글 등록에 문제가 있습니다. 필요 필드를 작성했는지 확인하고 다시 시도하세요."
+  loading_label              : "로딩중..."
+ko-KR:
+  <<: *DEFAULT_KO
+
+# Russian / Русский
+# -----------------
+ru: &DEFAULT_RU
+  page                       : "Страница"
+  pagination_previous        : "Предыдущая"
+  pagination_next            : "Следующая"
+  breadcrumb_home_label      : "Главная"
+  breadcrumb_separator       : "/"
+  menu_label                 : "Выпадающее меню"
+  toc_label                  : "Содержание"
+  ext_link_label             : "Прямая ссылка"
+  less_than                  : "менее"
+  minute_read                : "мин на чтение"
+  share_on_label             : "Поделиться"
+  meta_label                 :
+  tags_label                 : "Метки:"
+  categories_label           : "Разделы:"
+  date_label                 : "Дата изменения:"
+  comments_label             : "Оставить комментарий"
+  comments_title             : "Комментарии"
+  more_label                 : "Читать далее"
+  related_label              : "Вам также может понравиться"
+  follow_label               : "Связаться со мной:"
+  feed_label                 : "RSS-лента"
+  powered_by                 : "Сайт работает на"
+  website_label              : "Сайт"
+  email_label                : "Электронная почта"
+  recent_posts               : "Свежие записи"
+  undefined_wpm              : "Не определён параметр words_per_minute в _config.yml"
+  comment_form_info          : "Ваш адрес электронной почты не будет опубликован. Обязательные поля помечены"
+  comment_form_comment_label : "Комментарий"
+  comment_form_md_info       : "Поддерживается синтаксис Markdown."
+  comment_form_name_label    : "Имя"
+  comment_form_email_label   : "Электронная почта"
+  comment_form_website_label : "Ссылка на сайт (необязательно)"
+  comment_btn_submit         : "Оставить комментарий"
+  comment_btn_submitted      : "Отправлено"
+  comment_success_msg        : "Спасибо за Ваш комментарий! Он будет опубликован на сайте после проверки."
+  comment_error_msg          : "К сожалению, произошла ошибка с отправкой комментария. Пожалуйста, убедитесь, что все обязательные поля заполнены и попытайтесь снова."
+  loading_label              : "Отправка..."
+ru-RU:
+  <<: *DEFAULT_RU
+
+# Lithuanian / Lietuviškai
+# -----------------
+lt: &DEFAULT_LT
+  page                       : "Puslapis"
+  pagination_previous        : "Ankstesnis"
+  pagination_next            : "Sekantis"
+  breadcrumb_home_label      : "Pagrindinis"
+  breadcrumb_separator       : "/"
+  menu_label                 : "Meniu rodymas"
+  toc_label                  : "Turinys"
+  ext_link_label             : "Tiesioginė nuoroda"
+  less_than                  : "mažiau nei"
+  minute_read                : "min. skaitymo"
+  share_on_label             : "Pasidalinti"
+  meta_label                 :
+  tags_label                 : "Žymės:"
+  categories_label           : "Kategorijos:"
+  date_label                 : "Atnaujinta:"
+  comments_label             : "Palikti komentarą"
+  comments_title             : "Komentaras"
+  more_label                 : "Skaityti daugiau"
+  related_label              : "Taip pat turėtų patikti"
+  follow_label               : "Sekti:"
+  feed_label                 : "Šaltinis"
+  powered_by                 : "Sukurta su"
+  website_label              : "Tinklapis"
+  email_label                : "El. paštas"
+  recent_posts               : "Naujausi įrašai"
+  undefined_wpm              : "Nedeklaruotas parametras words_per_minute faile _config.yml"
+  comment_form_info          : "El. pašto adresas nebus viešinamas. Būtini laukai pažymėti."
+  comment_form_comment_label : "Komentaras"
+  comment_form_md_info       : "Markdown palaikomas."
+  comment_form_name_label    : "Vardas"
+  comment_form_email_label   : "El. paštas"
+  comment_form_website_label : "Tinklapis (nebūtina)"
+  comment_btn_submit         : "Komentuoti"
+  comment_btn_submitted      : "Įrašytas"
+  comment_success_msg        : "Ačiū už komentarą! Jis bus parodytas kai bus patvirtintas."
+  comment_error_msg          : "Atleiskite, įvyko netikėta klaida įrašant komentarą. Pasitikrinkite ar užpildėte visus būtinus laukus ir pamėginkite dar kartą."
+  loading_label              : "Kraunama..."
+lt-LT:
+  <<: *DEFAULT_LT
+
+# Greek
+# --------------
+gr: &DEFAULT_GR
+  page                       : "Σελίδα"
+  pagination_previous        : "Προηγούμενo"
+  pagination_next            : "Επόμενo"
+  breadcrumb_home_label      : "Αρχική"
+  breadcrumb_separator       : "/"
+  menu_label                 : "Μενού"
+  toc_label                  : "Περιεχόμενα"
+  ext_link_label             : "Εξωτερικός Σύνδεσμος"
+  less_than                  : "Λιγότερο από"
+  minute_read                : "λεπτά ανάγνωσης"
+  share_on_label             : "Μοιραστείτε το"
+  meta_label                 :
+  tags_label                 : "Ετικέτες:"
+  categories_label           : "Κατηγορίες:"
+  date_label                 : "Ενημερώθηκε:"
+  comments_label             : "Αφήστε ένα σχόλιο"
+  comments_title             : "Σχόλια"
+  more_label                 : "Διάβαστε περισσότερα"
+  related_label              : "Σχετικές αναρτήσεις"
+  follow_label               : "Ακολουθήστε:"
+  feed_label                 : "RSS Feed"
+  powered_by                 : "Δημιουργήθηκε με"
+  website_label              : "Ιστοσελίδα"
+  email_label                : "Email"
+  recent_posts               : "Τελευταίες αναρτήσεις"
+  undefined_wpm              : "Δεν έχει οριστεί η παράμετρος words_per_minute στο αρχείο _config.yml"
+  comment_form_info          : "Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα απαιτούμενα πεδία εμφανίζονται με αστερίσκο"
+  comment_form_comment_label : "Σχόλιο"
+  comment_form_md_info       : "Το πεδίο υποστηρίζει Markdown."
+  comment_form_name_label    : "Όνομα"
+  comment_form_email_label   : "Διεύθυνση email"
+  comment_form_website_label : "Ιστοσελίδα (προαιρετικό)"
+  comment_btn_submit         : "Υπόβαλε ένα σχόλιο"
+  comment_btn_submitted      : "Έχει υποβληθεί"
+  comment_success_msg        : "Ευχαριστούμε για το σχόλιό σας! Θα εμφανιστεί στην ιστοσελίδα αφού εγκριθεί."
+  comment_error_msg          : "Λυπούμαστε, παρουσιάστηκε σφάλμα με την υποβολή σας. Παρακαλούμε βεβαιωθείτε ότι έχετε όλα τα απαιτούμενα πεδία συμπληρωμένα και δοκιμάστε ξανά."
+  loading_label              : "Φόρτωση..."
+gr-GR:
+  <<: *DEFAULT_GR
+
+# Swedish
+# -----------------
+sv: &DEFAULT_SV
+  page                       : "Sidan"
+  pagination_previous        : "Föregående"
+  pagination_next            : "Nästa"
+  breadcrumb_home_label      : "Hem"
+  breadcrumb_separator       : "/"
+  menu_label                 : "Meny ridå"
+  toc_label                  : "På denna sida"
+  ext_link_label             : "Direkt länk"
+  less_than                  : "mindre än"
+  minute_read                : "minut läsning"
+  share_on_label             : "Dela på"
+  meta_label                 :
+  tags_label                 : "Taggar:"
+  categories_label           : "Kategorier:"
+  date_label                 : "Uppdaterades:"
+  comments_label             : "Lämna en kommentar"
+  comments_title             : "Kommentarer"
+  more_label                 : "Lär dig mer"
+  related_label              : "Du kanske vill även läsa:"
+  follow_label               : "Följ:"
+  feed_label                 : "Flöde"
+  powered_by                 : "Framställd med"
+  website_label              : "Webbsida"
+  email_label                : "E-post"
+  recent_posts               : "Senaste inlägg"
+  undefined_wpm              : "Odefinerade parametrar words_per_minute i _config.yml"
+  comment_form_info          : "Din e-post adress kommer inte att publiceras. Obligatoriska fält är markerade."
+  comment_form_comment_label : "Kommentar"
+  comment_form_md_info       : "Använd Markdown för text-formateringen."
+  comment_form_name_label    : "Namn"
+  comment_form_email_label   : "E-post adress"
+  comment_form_website_label : "Webdsida (valfritt)"
+  comment_btn_submit         : "Skicka en kommentar"
+  comment_btn_submitted      : "Kommentaren har tagits emot"
+  comment_success_msg        : "Tack för din kommentar! Den kommer att visas på sidan så fort den har godkännts."
+  comment_error_msg          : "Tyvärr det har blivit något fel i en av fälten, se till att du fyller i alla rutor och försök igen."
+  loading_label              : "Laddar..."
+sv-SE:
+  <<: *DEFAULT_SV
+sv-FI:
+  <<: *DEFAULT_SV
+
+# Dutch
+# -----------------
+nl: &DEFAULT_NL
+  page                       : "Pagina"
+  pagination_previous        : "Vorige"
+  pagination_next            : "Volgende"
+  breadcrumb_home_label      : "Home"
+  breadcrumb_separator       : "/"
+  menu_label                 : "Wissel Menu"
+  toc_label                  : "Op deze pagina"
+  ext_link_label             : "Directe Link"
+  less_than                  : "minder dan"
+  minute_read                : "minuut gelezen"
+  share_on_label             : "Deel op"
+  meta_label                 :
+  tags_label                 : "Labels:"
+  categories_label           : "Categorieën:"
+  date_label                 : "Bijgewerkt:"
+  comments_label             : "Laat een reactie achter"
+  comments_title             : "Commentaren"
+  more_label                 : "Meer informatie"
+  related_label              : "Bekijk ook eens"
+  follow_label               : "Volg:"
+  feed_label                 : "Feed"
+  powered_by                 : "Aangedreven door"
+  website_label              : "Website"
+  email_label                : "Email"
+  recent_posts               : "Recente berichten"
+  undefined_wpm              : "Niet gedefinieerde parameter words_per_minute bij _config.yml"
+  comment_form_info          : "Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd"
+  comment_form_comment_label : "Commentaar"
+  comment_form_md_info       : "Markdown wordt ondersteund."
+  comment_form_name_label    : "Naam"
+  comment_form_email_label   : "E-mailadres"
+  comment_form_website_label : "Website (optioneel)"
+  comment_btn_submit         : "Commentaar toevoegen"
+  comment_btn_submitted      : "Toegevoegd"
+  comment_success_msg        : "Bedankt voor uw reactie! Het zal op de site worden weergegeven zodra het is goedgekeurd."
+  comment_error_msg          : "Sorry, er is een fout opgetreden bij uw inzending. Zorg ervoor dat alle vereiste velden zijn voltooid en probeer het opnieuw."
+  loading_label              : "Laden..."
+nl-BE:
+  <<: *DEFAULT_NL
+nl-NL:
+  <<: *DEFAULT_NL
+
+# Indonesian
+# -----------------
+id: &DEFAULT_ID
+  page                       : "Halaman"
+  pagination_previous        : "Kembali"
+  pagination_next            : "Maju"
+  breadcrumb_home_label      : "Home"
+  breadcrumb_separator       : "/"
+  menu_label                 : "Menu Toggle"
+  toc_label                  : "Pada Halaman Ini"
+  ext_link_label             : "Link langsung"
+  less_than                  : "Kurang dari"
+  minute_read                : "Waktu baca"
+  share_on_label             : "Berbagi di"
+  meta_label                 :
+  tags_label                 : "Golongan:"
+  categories_label           : "Kategori:"
+  date_label                 : "Diupdate:"
+  comments_label             : "Tinggalkan komentar"
+  comments_title             : "Komentar"
+  more_label                 : "Pelajari lagi"
+  related_label              : "Anda juga akan suka"
+  follow_label               : "Ikuti:"
+  feed_label                 : "Feed"
+  powered_by                 : "Didukung oleh"
+  website_label              : "Website"
+  email_label                : "Email"
+  recent_posts               : "Posting terbaru"
+  undefined_wpm              : "Parameter terdeskripsi words_per_minute di _config.yml"
+  comment_form_info          : "Email Anda tidak akan dipublish. Kolom yang diperlukan ditandai"
+  comment_form_comment_label : "Komentar"
+  comment_form_md_info       : "Markdown disupport."
+  comment_form_name_label    : "Nama"
+  comment_form_email_label   : "Alamat email"
+  comment_form_website_label : "Website (opsional)"
+  comment_btn_submit         : "Submit Komentar"
+  comment_btn_submitted      : "Telah disubmit"
+  comment_success_msg        : "Terimakasih atas komentar Anda! Komentar ini akan tampil setelah disetujui."
+  comment_error_msg          : "Maaf, ada kesalahan pada submisi Anda. Pastikan seluruh kolom sudah dilengkapi dan coba kembali."
+  loading_label              : "Sedang meload..."
+id-ID:
+  <<: *DEFAULT_ID
+
+# Vietnamese
+# -----------------
+vi: &DEFAULT_VI
+  page                       : "Trang"
+  pagination_previous        : "Trước"
+  pagination_next            : "Sau"
+  breadcrumb_home_label      : "Trang chủ"
+  breadcrumb_separator       : "/"
+  menu_label                 : "Menu"
+  toc_label                  : "Tại trang này"
+  ext_link_label             : "Đường dẫn trực tiếp"
+  less_than                  : "nhỏ hơn"
+  minute_read                : "phút đọc"
+  share_on_label             : "Chia sẻ tại"
+  meta_label                 :
+  tags_label                 : "Nhãn:"
+  categories_label           : "Chủ đề:"
+  date_label                 : "Cập nhật:"
+  comments_label             : "Để lại bình luận"
+  comments_title             : "Bình luận"
+  more_label                 : "Mở rộng"
+  related_label              : "Có thể bạn cũng thích"
+  follow_label               : "Theo dõi:"
+  feed_label                 : "Feed"
+  powered_by                 : "Được hỗ trợ bởi"
+  website_label              : "Website"
+  email_label                : "Email"
+  recent_posts               : "Bài viết mới"
+  undefined_wpm              : "Chưa định nghĩa thông số words_per_minute tại _config.yml"
+  comment_form_info          : "Email của bạn sẽ được giữ bí mật. Các phần bắt buộc được đánh dấu."
+  comment_form_comment_label : "Bình luận"
+  comment_form_md_info       : "Hỗ trợ Markdown."
+  comment_form_name_label    : "Tên"
+  comment_form_email_label   : "Địa chỉ email"
+  comment_form_website_label : "Website (không bắt buộc)"
+  comment_btn_submit         : "Gửi bình luận"
+  comment_btn_submitted      : "Đã được gửi"
+  comment_success_msg        : "Cảm ơn bạn đã bình luận! Bình luận sẽ xuất hiện sau khi được duyệt."
+  comment_error_msg          : "Rất tiếc, có lỗi trong việc gửi bình luận. Hãy đảm bảo toàn bộ các phần bắt buộc đã được điền đầy đủ và thử lại."
+  loading_label              : "Đang tải..."
+vi-VN:
+  <<: *DEFAULT_VI
+
+# Danish
+# ------
+da: &DEFAULT_DA
+  page                       : "Side"
+  pagination_previous        : "Forrige"
+  pagination_next            : "Næste"
+  breadcrumb_home_label      : "Home"
+  breadcrumb_separator       : "/"
+  menu_label                 : "Vis/skjul menu"
+  toc_label                  : "På denne side"
+  ext_link_label             : "Direkte link"
+  less_than                  : "mindre end"
+  minute_read                : "minutters læsning"
+  share_on_label             : "Del på"
+  meta_label                 :
+  tags_label                 : "Nøgleord:"
+  categories_label           : "Kategorier:"
+  date_label                 : "Opdateret:"
+  comments_label             : "Skriv en kommentar"
+  comments_title             : "Kommentarer"
+  more_label                 : "Lær mere"
+  related_label              : "Måske kan du også lide"
+  follow_label               : "Følg:"
+  feed_label                 : "Feed"
+  powered_by                 : "Drives af"
+  website_label              : "Website"
+  email_label                : "E-mail"
+  recent_posts               : "Seneste indlæg"
+  undefined_wpm              : "Parameteren words_per_minute er ikke defineret i _config.yml"
+  comment_form_info          : "Din e-mail bliver ikke offentliggjort. Obligatoriske felter er markeret"
+  comment_form_comment_label : "Kommentar"
+  comment_form_md_info       : "Markdown er understøttet."
+  comment_form_name_label    : "Navn"
+  comment_form_email_label   : "E-mail"
+  comment_form_website_label : "Website (frivillig)"
+  comment_btn_submit         : "Send kommentar"
+  comment_btn_submitted      : "Sendt"
+  comment_success_msg        : "Tak for din kommentar! Den bliver vist på siden, så snart den er godkendt."
+  comment_error_msg          : "Desværre skete der en fejl. Prøv igen, mens du sørger for at alle obligatoriske felter er udfyldt."
+  loading_label              : "Indlæser..."
+da-DK:
+  <<: *DEFAULT_DA
+
 # Another locale
 # --------------
+#
@@ -2,7 +2,7 @@
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', '{{ site.analytics.google.tracking_id }}', 'auto');
  ga('send', 'pageview');
@@ -131,6 +131,14 @@
        </li>
      {% endif %}

+      {% if author.gitlab %}
+        <li>
+          <a href="https://gitlab.com/{{ author.gitlab }}" itemprop="sameAs">
+            <i class="fa fa-fw fa-gitlab" aria-hidden="true"></i> Gitlab
+          </a>
+        </li>
+      {% endif %}
+
      {% if author.stackoverflow %}
        <li>
          <a href="https://www.stackoverflow.com/users/{{ author.stackoverflow }}" itemprop="sameAs">
@@ -1,4 +1,4 @@
-{% case site.categories.type %}
+{% case site.category_archive.type %}
  {% when "liquid" %}
    {% assign path_type = "#" %}
  {% when "jekyll-archives" %}
@@ -9,7 +9,7 @@
  {% assign path_type = nil %}
  {% assign crumb_path = '/' %}
 {% else %}
-  {% assign crumb_path = site.categories.path %}
+  {% assign crumb_path = site.category_archive.path %}
 {% endif %}

 <nav class="breadcrumbs">
@@ -1,22 +1,16 @@
 {% if site.comments.disqus.shortname %}
-  <script type="text/javascript">
-  	/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
-  	var disqus_shortname = '{{ site.comments.disqus.shortname }}';
-
-  	/* * * DON'T EDIT BELOW THIS LINE * * */
-  	(function() {
-  		var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-  		dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
-  		(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-  	})();
-
-  	/* * * DON'T EDIT BELOW THIS LINE * * */
-  	(function () {
-  		var s = document.createElement('script'); s.async = true;
-  		s.type = 'text/javascript';
-  		s.src = '//' + disqus_shortname + '.disqus.com/count.js';
-  		(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
-  	}());
+  <div id="disqus_thread"></div>
+  <script>
+    var disqus_config = function () {
+      this.page.url = "{{ page.url | absolute_url }}";  // Replace PAGE_URL with your page's canonical URL variable
+      this.page.identifier = "{{ page.id }}"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
+    };
+    (function() { // DON'T EDIT BELOW THIS LINE
+      var d = document, s = d.createElement('script');
+      s.src = 'https://{{ site.comments.disqus.shortname }}.disqus.com/embed.js';
+      s.setAttribute('data-timestamp', +new Date());
+      (d.head || d.body).appendChild(s);
+    })();
  </script>
-  <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
 {% endif %}
@@ -1,18 +1,16 @@
 {% if site.comments.provider and page.comments %}
-
-{% case site.comments.provider %}
-{% when "disqus" %}
-  {% include /comments-providers/disqus.html %}
-{% when "discourse" %}
-  {% include /comments-providers/discourse.html %}
-{% when "facebook" %}
-  {% 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 %}
-
+  {% case site.comments.provider %}
+    {% when "disqus" %}
+      {% include /comments-providers/disqus.html %}
+    {% when "discourse" %}
+      {% include /comments-providers/discourse.html %}
+    {% when "facebook" %}
+      {% 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 %}
 {% endif %}
@@ -1,80 +1,95 @@
 <div class="page__comments">
  {% 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="{{ page.url | absolute_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="{{ page.url | absolute_url }}" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD">Loading Google+ Comments ...</section>
-  {% when "staticman" %}
-    <section id="static-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 %}
+    {% case site.comments.provider %}
+      {% when "discourse" %}
+        <h4 class="page__comments-title">{{ comments_label }}</h4>
+        <section id="discourse-comments"></section>
+      {% 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="{{ page.url | absolute_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 id="g-comments" class="g-comments">Loading Google+ Comments ...</section>
+        <script>
+          function initComment() {
+            gapi.comments.render("g-comments", {
+              href: "{{ page.url | absolute_url }}",
+              width: "624",
+              first_party_property: "BLOGGER",
+              view_type: "FILTERED_POSTMOD"
+            })
+          }
+        </script>
+        <script async type="text/javascript" src="https://apis.google.com/js/plusone.js" onload="initComment()" />
+        <noscript>Please enable JavaScript to view the <a href="https://plus.google.com/">comments powered by Google+.</a></noscript>-->
+      {% when "staticman" %}
+        <section id="static-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 %}
+                {% 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">{{ 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" style="display: none;">
+                <input type="hidden" name="options[slug]" value="{{ page.slug }}">
+                <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>
+            </form>
+            <!-- End new comment form -->
          {% 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">{{ 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" style="display: none;">
-            <input type="hidden" name="options[slug]" value="{{ page.slug }}">
-            <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>
-        </form>
-        <!-- End new comment form -->
-      {% endif %}
-    </section>
-  {% when "custom" %}
-    <section id="custom-comments"></section>
+        </section>
+      {% when "custom" %}
+        <section id="custom-comments"></section>
  {% endcase %}
 </div>
@@ -12,6 +12,9 @@
    {% if site.author.github %}
      <li><a href="http://github.com/{{ site.author.github }}"><i class="fa fa-fw fa-github" aria-hidden="true"></i> GitHub</a></li>
    {% endif %}
+    {% if site.author.gitlab %}
+      <li><a href="http://gitlab.com/{{ site.author.gitlab }}"><i class="fa fa-fw fa-gitlab" aria-hidden="true"></i> Gitlab</a></li>
+    {% endif %}
    {% if site.author.bitbucket %}
      <li><a href="http://bitbucket.org/{{ site.author.bitbucket }}"><i class="fa fa-fw fa-bitbucket" aria-hidden="true"></i> Bitbucket</a></li>
    {% endif %}
@@ -16,4 +16,19 @@
 <!-- For all browsers -->
 <link rel="stylesheet" href="{{ '/assets/css/main.css' | absolute_url }}">

+<!--[if lte IE 9]>
+  <style>
+    /* old IE unsupported flexbox fixes */
+    .greedy-nav .site-title {
+      padding-right: 3em;
+    }
+    .greedy-nav button {
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+    }
+  </style>
+<![endif]-->
+
 <meta http-equiv="cleartype" content="on">
@@ -2,9 +2,8 @@
  <div class="masthead__inner-wrap">
    <div class="masthead__menu">
      <nav id="site-nav" class="greedy-nav">
-        <button><div class="navicon"></div></button>
+        <a class="site-title" href="{{ '/' | absolute_url }}">{{ site.title }}</a>
        <ul class="visible-links">
-          <li class="masthead__menu-item masthead__menu-item--lg"><a href="{{ '/' | absolute_url }}">{{ site.title }}</a></li>
          {% for link in site.data.navigation.main %}
            {% if link.url contains 'http' %}
              {% assign domain = '' %}
@@ -14,6 +13,7 @@
            <li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}">{{ link.title }}</a></li>
          {% endfor %}
        </ul>
+        <button><div class="navicon"></div></button>
        <ul class="hidden-links hidden"></ul>
      </nav>
    </div>
@@ -22,13 +22,21 @@
  {% capture overlay_filter %}rgba(0, 0, 0, {{ page.header.overlay_filter }}){% endcapture %}
 {% endif %}

+{% if page.header.image_description %}
+  {% assign image_description = page.header.image_description %}
+{% else %}
+  {% assign image_description = page.title %}
+{% endif %}
+
+{% assign image_description = image_description | markdownify | strip_html | strip_newlines | escape_once %}
+
 <div class="page__hero{% if page.header.overlay_color or page.header.overlay_image %}--overlay{% endif %}"
  style="{% if page.header.overlay_color %}background-color: {{ page.header.overlay_color | default: 'transparent' }};{% endif %} {% if overlay_img_path %}background-image: {% if overlay_filter %}linear-gradient({{ overlay_filter }}, {{ overlay_filter }}), {% endif %}url('{{ overlay_img_path }}');{% endif %}"
 >
  {% if page.header.overlay_color or page.header.overlay_image %}
    <div class="wrapper">
      <h1 class="page__title" itemprop="headline">
-        {% if paginator %}
+        {% if paginator and site.paginate_show_page_num %}
          {{ site.title }}{% unless paginator.page == 1 %} {{ site.data.ui-text[site.locale].page | default: "Page" }} {{ paginator.page }}{% endunless %}
        {% else %}
          {{ page.title | default: site.title | markdownify | remove: "<p>" | remove: "</p>" }}
@@ -45,7 +53,7 @@
      {% endif %}
    </div>
  {% else %}
-    <img src="{{ img_path }}" alt="{{ page.title }}" class="page__hero-image">
+    <img src="{{ img_path }}" alt="{{ image_description }}" class="page__hero-image">
  {% endif %}
  {% if page.header.caption %}
    <span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
@@ -1,22 +1,23 @@
 {% if paginator.total_pages > 1 %}
 <nav class="pagination">
+  {% assign first_page_path = site.paginate_path | replace: 'page:num', '' | replace: '//', '/' | absolute_url %}
  <ul>
    {% comment %} Link for previous page {% endcomment %}
    {% if paginator.previous_page %}
      {% if paginator.previous_page == 1 %}
-        <li><a href="{{ '/' | absolute_url }}">{{ site.data.ui-text[site.locale].pagination_previous | default: "Previous" }}</a></li>
+        <li><a href="{{ first_page_path }}">{{ site.data.ui-text[site.locale].pagination_previous | default: "Previous" }}</a></li>
      {% else %}
-        <li><a href="{{ '/page' | absolute_url }}{{ paginator.previous_page | append: '/' }}">{{ site.data.ui-text[site.locale].pagination_previous | default: "Previous" }}</a></li>
+        <li><a href="{{ site.paginate_path | replace: ':num', paginator.previous_page | replace: '//', '/' | absolute_url }}">{{ site.data.ui-text[site.locale].pagination_previous | default: "Previous" }}</a></li>
      {% endif %}
    {% else %}
-      <li><a href="#" class="disabled"><span aria-hidden="true">{{ site.data.ui-text[site.locale].pagination_previous | default: "Previous" }}</span></a></li>
+    <li><a href="#" class="disabled"><span aria-hidden="true">{{ site.data.ui-text[site.locale].pagination_previous | default: "Previous" }}</span></a></li>
    {% endif %}

    {% comment %} First page {% endcomment %}
    {% if paginator.page == 1 %}
      <li><a href="#" class="disabled current">1</a></li>
    {% else %}
-      <li><a href="{{ '/' | absolute_url }}">1</a></li>
+      <li><a href="{{ first_page_path }}">1</a></li>
    {% endif %}

    {% assign page_start = 2 %}
@@ -34,7 +35,7 @@

    {% for index in (page_start..page_end) %}
      {% if index == paginator.page %}
-        <li><a href="{{ '/page' | absolute_url }}{{ index | append: '/' }}" class="disabled current">{{ index }}</a></li>
+        <li><a href="{{ site.paginate_path | replace: ':num', index | replace: '//', '/' | absolute_url }}" class="disabled current">{{ index }}</a></li>
      {% else %}
        {% comment %} Distance from current page and this link {% endcomment %}
        {% assign dist = paginator.page | minus: index %}
@@ -42,7 +43,7 @@
          {% comment %} Distance must be a positive value {% endcomment %}
          {% assign dist = 0 | minus: dist %}
        {% endif %}
-        <li><a href="{{ '/page' | absolute_url }}{{ index | append: '/' }}">{{ index }}</a></li>
+        <li><a href="{{ site.paginate_path | replace: ':num', index | absolute_url }}">{{ index }}</a></li>
      {% endif %}
    {% endfor %}

@@ -54,12 +55,12 @@
    {% if paginator.page == paginator.total_pages %}
      <li><a href="#" class="disabled current">{{ paginator.page }}</a></li>
    {% else %}
-      <li><a href="{{ '/page' | absolute_url }}{{ paginator.total_pages }}/">{{ paginator.total_pages }}</a></li>
+      <li><a href="{{ site.paginate_path | replace: ':num', paginator.total_pages | replace: '//', '/' | absolute_url }}">{{ paginator.total_pages }}</a></li>
    {% endif %}

    {% comment %} Link next page {% endcomment %}
    {% if paginator.next_page %}
-      <li><a href="{{ '/page' | absolute_url }}{{ paginator.next_page }}/">{{ site.data.ui-text[site.locale].pagination_next | default: "Next" }}</a></li>
+      <li><a href="{{ site.paginate_path | replace: ':num', paginator.next_page | replace: '//', '/' | absolute_url }}">{{ site.data.ui-text[site.locale].pagination_next | default: "Next" }}</a></li>
    {% else %}
      <li><a href="#" class="disabled"><span aria-hidden="true">{{ site.data.ui-text[site.locale].pagination_next | default: "Next" }}</span></a></li>
    {% endif %}
@@ -25,7 +25,7 @@

 <meta name="description" content="{{ seo_description }}">

-{% assign seo_author = page.author | default: page.author[0] | default: site.author[0] %}
+{% assign seo_author = page.author | default: page.author[0] | default: site.author.name %}
 {% if seo_author %}
  {% if seo_author.twitter %}
    {% assign seo_author_twitter = seo_author.twitter %}
@@ -39,7 +39,9 @@
  {% assign seo_author_twitter = seo_author_twitter | replace: "@", "" %}
 {% endif %}

-<meta property="og:locale" content="{{ site.locale | replace: "-", "_" | default: "en" }}">
+<meta name="author" content="{{ seo_author }}">
+
+<meta property="og:locale" content="{{ site.locale | replace: "-", "_" | default: "en_US" }}">
 <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 }}">

@@ -3,11 +3,11 @@
    <h4 class="page__share-title">{{ site.data.ui-text[site.locale].share_on_label | default: "Share on" }}</h4>
  {% endif %}

-  <a href="https://twitter.com/intent/tweet?{% if site.twitter.username %}via={{ site.twitter.username }}&{% endif %}text={{ page.title }} {{ page.url | absolute_url }}" class="btn btn--twitter" title="{{ site.data.ui-text[site.locale].share_on_label | default: 'Share on' }} Twitter"><i class="fa fa-fw fa-twitter" aria-hidden="true"></i><span> Twitter</span></a>
+  <a href="https://twitter.com/intent/tweet?{% if site.twitter.username %}via={{ site.twitter.username | url_encode }}&{% endif %}text={{ page.title | url_encode }}%20{{ page.url | absolute_url | url_encode }}" class="btn btn--twitter" title="{{ site.data.ui-text[site.locale].share_on_label | default: 'Share on' }} Twitter"><i class="fa fa-fw fa-twitter" aria-hidden="true"></i><span> Twitter</span></a>

-  <a href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | absolute_url }}" class="btn btn--facebook" title="{{ site.data.ui-text[site.locale].share_on_label | default: 'Share on' }} Facebook"><i class="fa fa-fw fa-facebook" aria-hidden="true"></i><span> Facebook</span></a>
+  <a href="https://www.facebook.com/sharer/sharer.php?u={{ page.url | absolute_url | url_encode }}" class="btn btn--facebook" title="{{ site.data.ui-text[site.locale].share_on_label | default: 'Share on' }} Facebook"><i class="fa fa-fw fa-facebook" aria-hidden="true"></i><span> Facebook</span></a>

-  <a href="https://plus.google.com/share?url={{ page.url | absolute_url }}" class="btn btn--google-plus" title="{{ site.data.ui-text[site.locale].share_on_label | default: 'Share on' }} Google Plus"><i class="fa fa-fw fa-google-plus" aria-hidden="true"></i><span> Google+</span></a>
+  <a href="https://plus.google.com/share?url={{ page.url | absolute_url | url_encode }}" class="btn btn--google-plus" title="{{ site.data.ui-text[site.locale].share_on_label | default: 'Share on' }} Google Plus"><i class="fa fa-fw fa-google-plus" aria-hidden="true"></i><span> Google+</span></a>

-  <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ page.url | absolute_url }}" class="btn btn--linkedin" title="{{ site.data.ui-text[site.locale].share_on_label | default: 'Share on' }} LinkedIn"><i class="fa fa-fw fa-linkedin" aria-hidden="true"></i><span> LinkedIn</span></a>
+  <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ page.url | absolute_url | url_encode }}" class="btn btn--linkedin" title="{{ site.data.ui-text[site.locale].share_on_label | default: 'Share on' }} LinkedIn"><i class="fa fa-fw fa-linkedin" aria-hidden="true"></i><span> LinkedIn</span></a>
 </section>
@@ -4,7 +4,7 @@
 <!-- Courtesy of embedresponsively.com //-->
 <div class="responsive-video-container">
 {% if video_provider == "vimeo" %}
-  <iframe src="http://player.vimeo.com/video/{{ video_id }}" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
+  <iframe src="https://player.vimeo.com/video/{{ video_id }}" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
 {% elsif video_provider == "youtube" %}
  <iframe src="https://www.youtube.com/embed/{{ video_id }}" frameborder="0" allowfullscreen></iframe>
 {% endif %}
@@ -2,6 +2,12 @@
 ---

 <!doctype html>
+<!--
+  Minimal Mistakes Jekyll Theme 4.5.1 by Michael Rose
+  Copyright 2017 Michael Rose - mademistakes.com | @mmistakes
+  Free for personal and commercial use under the MIT license
+  https://github.com/mmistakes/minimal-mistakes/blob/master/LICENSE.txt
+-->
 <html lang="{{ site.locale | slice: 0,2 | default: "en" }}" class="no-js">
  <head>
    {% include head.html %}
@@ -21,7 +21,7 @@ layout: default
    {% if page.title %}<meta itemprop="headline" content="{{ page.title | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
    {% if page.excerpt %}<meta itemprop="description" content="{{ page.excerpt | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
    {% if page.date %}<meta itemprop="datePublished" content="{{ page.date | date: "%B %d, %Y" }}">{% endif %}
-    {% if page.modified %}<meta itemprop="dateModified" content="{{ page.modified | date: "%B %d, %Y" }}">{% endif %}
+    {% if page.last_modified_at %}<meta itemprop="dateModified" content="{{ page.last_modified_at | date: "%B %d, %Y" }}">{% endif %}

    <div class="page__inner-wrap">
      {% unless page.header.overlay_color or page.header.overlay_image %}
@@ -43,8 +43,8 @@ layout: default
          <h4 class="page__meta-title">{{ site.data.ui-text[site.locale].meta_label }}</h4>
        {% endif %}
        {% include page__taxonomy.html %}
-        {% if page.modified %}
-          <p class="page__date"><strong><i class="fa fa-fw fa-calendar" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].date_label | default: "Updated:" }}</strong> <time datetime="{{ page.modified | date: "%Y-%m-%d" }}">{{ page.modified | date: "%B %d, %Y" }}</time></p>
+        {% if page.last_modified_at %}
+          <p class="page__date"><strong><i class="fa fa-fw fa-calendar" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].date_label | default: "Updated:" }}</strong> <time datetime="{{ page.last_modified_at | date: "%Y-%m-%d" }}">{{ page.last_modified_at | date: "%B %d, %Y" }}</time></p>
        {% elsif page.date %}
          <p class="page__date"><strong><i class="fa fa-fw fa-calendar" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].date_label | default: "Updated:" }}</strong> <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %d, %Y" }}</time></p>
        {% endif %}
@@ -63,9 +63,7 @@ layout: default
  {% comment %}<!-- only show related on a post page when not disabled -->{% endcomment %}
  {% if page.id and page.related and site.related_posts.size > 0 %}
    <div class="page__related">
-      {% if site.data.ui-text[site.locale].related_label %}
-        <h4 class="page__related-title">{{ site.data.ui-text[site.locale].related_label | default: "You May Also Enjoy" }}</h4>
-      {% endif %}
+      <h4 class="page__related-title">{{ site.data.ui-text[site.locale].related_label | default: "You May Also Enjoy" }}</h4>
      <div class="grid__wrapper">
        {% for post in site.related_posts limit:4 %}
          {% include archive-single.html type="grid" %}
@@ -13,7 +13,7 @@ layout: default
    {% if page.title %}<meta itemprop="headline" content="{{ page.title | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
    {% if page.excerpt %}<meta itemprop="description" content="{{ page.excerpt | markdownify | strip_html | strip_newlines | escape_once }}">{% endif %}
    {% if page.date %}<meta itemprop="datePublished" content="{{ page.date | date: "%B %d, %Y" }}">{% endif %}
-    {% if page.modified %}<meta itemprop="dateModified" content="{{ page.modified | date: "%B %d, %Y" }}">{% endif %}
+    {% if page.last_modified_at %}<meta itemprop="dateModified" content="{{ page.last_modified_at | date: "%B %d, %Y" }}">{% endif %}

    <section class="page__content" itemprop="text">
      {{ content }}
@@ -1,18 +0,0 @@
-/* ==========================================================================
-   PRINT STYLES
-   ========================================================================== */
-
-/*
-   Hide the following elements on print
-   ========================================================================== */
-
-@media print {
-  .masthead,
-  .toc,
-  .page__share,
-  .page__related,
-  .ads,
-  .page__footer {
-    display: none;
-  }
-}
@@ -0,0 +1,40 @@
+/*!
+ * Minimal Mistakes Jekyll Theme 4.5.1 by Michael Rose
+ * Copyright 2017 Michael Rose - mademistakes.com | @mmistakes
+ * Licensed under MIT (https://github.com/mmistakes/minimal-mistakes/blob/master/LICENSE.txt)
+*/
+
+/* Variables */
+@import "minimal-mistakes/variables";
+
+/* Mixins and functions */
+@import "minimal-mistakes/vendor/breakpoint/breakpoint";
+@include breakpoint-set("to ems", true);
+@import "minimal-mistakes/vendor/font-awesome/font-awesome";
+@import "minimal-mistakes/vendor/magnific-popup/magnific-popup"; // Magnific Popup
+@import "minimal-mistakes/vendor/susy/susy";
+@import "minimal-mistakes/mixins";
+
+/* Core CSS */
+@import "minimal-mistakes/reset";
+@import "minimal-mistakes/base";
+@import "minimal-mistakes/forms";
+@import "minimal-mistakes/tables";
+@import "minimal-mistakes/animations";
+
+/* Components */
+@import "minimal-mistakes/buttons";
+@import "minimal-mistakes/notices";
+@import "minimal-mistakes/masthead";
+@import "minimal-mistakes/navigation";
+@import "minimal-mistakes/footer";
+@import "minimal-mistakes/syntax";
+
+/* Utility classes */
+@import "minimal-mistakes/utilities";
+
+/* Layout specific */
+@import "minimal-mistakes/page";
+@import "minimal-mistakes/archive";
+@import "minimal-mistakes/sidebar";
+@import "minimal-mistakes/print";
@@ -5,13 +5,15 @@
 .archive {
  margin-bottom: 2em;

-  @include breakpoint($medium) {
-    @include span(12 of 12);
+  @include breakpoint($large) {
+    float: right;
+    width: calc(100% - #{$right-sidebar-width-narrow});
+    padding-right: $right-sidebar-width-narrow;
  }

-  @include breakpoint($large) {
-    @include span(10 of 12 last);
-    @include prefix(0.5 of 12);
+  @include breakpoint($x-large) {
+    width: calc(100% - #{$right-sidebar-width});
+    padding-right: $right-sidebar-width;
  }

  a {
@@ -83,17 +85,6 @@
   ========================================================================== */

 .list__item {
-  @include breakpoint($medium) {
-    padding-right: $right-sidebar-width-narrow;
-  }
-
-  @include breakpoint($large) {
-    padding-right: $right-sidebar-width;
-  }
-
-  @include breakpoint($x-large) {
-    padding-right: $right-sidebar-width-wide;
-  }

  .page__meta {
    margin: 0 0 4px;
@@ -105,9 +96,68 @@
   Grid view
   ========================================================================== */

+.archive {
+
+  .grid__wrapper {
+    /* extend grid elements to the right */
+
+    @include breakpoint($large) {
+      margin-right: -1 * $right-sidebar-width-narrow;
+    }
+
+    @include breakpoint($x-large) {
+      margin-right: -1 * $right-sidebar-width;
+    }
+  }
+}
+
 .grid__item {
  margin-bottom: 2em;

+  @include breakpoint($small) {
+    float: left;
+    width: span(5 of 10);
+
+    &:nth-child(2n+1) {
+      clear: both;
+      margin-left: 0;
+    }
+
+    &:nth-child(2n+2) {
+      clear: none;
+      margin-left: gutter(of 10);
+    }
+  }
+
+  @include breakpoint($medium) {
+    margin-left: 0; /* override margin*/
+    margin-right: 0; /* override margin*/
+    width: span(3 of 12);
+
+    &:nth-child(2n+1) {
+      clear: none;
+    }
+
+    &:nth-child(4n+1) {
+      clear: both;
+    }
+
+    &:nth-child(4n+2) {
+      clear: none;
+      margin-left: gutter(1 of 12);
+    }
+
+    &:nth-child(4n+3) {
+      clear: none;
+      margin-left: gutter(1 of 12);
+    }
+
+    &:nth-child(4n+4) {
+      clear: none;
+      margin-left: gutter(1 of 12);
+    }
+  }
+
  .page__meta {
    margin: 0 0 4px;
  }
@@ -119,29 +169,23 @@

  .archive__item-excerpt {
    display: none;
-  }

-  @include breakpoint($small) {
-    @include gallery(5 of 10);
-    .archive__item-teaser {
-      max-height: 200px;
-    }
-  }
-
-  @include breakpoint($medium) {
-    margin-left: 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 {
-      max-height: 120px;
-    }
-
-    .archive__item-excerpt {
+    @include breakpoint($medium) {
      display: block;
      font-size: $type-size-6;
    }
  }
+
+  .archive__item-teaser {
+
+    @include breakpoint($small) {
+      max-height: 200px;
+    }
+
+    @include breakpoint($medium) {
+      max-height: 120px;
+    }
+  }
 }


@@ -160,8 +204,24 @@
  font-size: 1.25rem;

  @include breakpoint($small) {
+    float: left;
    margin-bottom: 0;
-    @include gallery(4 of 12);
+    width: span(4 of 12);
+
+    &:nth-child(3n+1) {
+      clear: both;
+      margin-left: 0;
+    }
+
+    &:nth-child(3n+2) {
+      clear: none;
+      margin-left: gutter(of 12);
+    }
+
+    &:nth-child(3n+3) {
+      clear: none;
+      margin-left: gutter(of 12);
+    }

    .feature__item-teaser {
      max-height: 200px;
@@ -170,7 +230,11 @@
  }

  &--left {
-    @include full();
+    float: left;
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+    clear: both;
    font-size: 1.25rem;

    .archive__item-teaser {
@@ -178,20 +242,27 @@
    }

    @include breakpoint($small) {
+
      .archive__item-teaser {
-        @include span(5 of 12);
+        float: left;
+        width: span(5 of 12);
      }

      .archive__item-body {
-        @include span(7 of 12 last);
-        @include prefix(0.5 of 12);
-        @include suffix(1 of 12);
+        float: right;
+        padding-left: gutter(0.5 of 12);
+        padding-right: gutter(1 of 12);
+        width: span(7 of 12);
      }
    }
  }

  &--right {
-    @include full();
+    float: left;
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+    clear: both;
    font-size: 1.25rem;

    .archive__item-teaser {
@@ -202,19 +273,25 @@
      text-align: right;

      .archive__item-teaser {
-        @include span(5 of 12 rtl);
+        float: right;
+        width: span(5 of 12);
      }

      .archive__item-body {
-        @include span(7 of 12 last rtl);
-        @include prefix(0.5 of 12);
-        @include suffix(1 of 12);
+        float: right;
+        width: span(7 of 12);
+        padding-left: gutter(0.5 of 12);
+        padding-right: gutter(1 of 12);
      }
    }
  }

  &--center {
-    @include full();
+    float: left;
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+    clear: both;
    font-size: 1.25rem;

    .archive__item-teaser {
@@ -3,28 +3,32 @@
   ========================================================================== */

 .page__footer {
-  @include full();
  @include clearfix;
+  float: left;
+  margin-left: 0;
+  margin-right: 0;
+  width: 100%;
+  clear: both;
  /* sticky footer fix start */
  position: absolute;
  bottom: 0;
-  width: 100%;
-  clear: both;
  height: auto;
  /* 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: $intro-transition;
+          animation: $intro-transition;
  -webkit-animation-delay: 0.45s;
          animation-delay: 0.45s;
  background-color: $lighter-gray;
  border-top: 1px solid $light-gray;

  footer {
-    @include container;
    @include clearfix;
+    margin-left: auto;
+    margin-right: auto;
    margin-top: 2em;
+    max-width: 100%;
    padding: 0 1em 2em;

    @include breakpoint($x-large) {
@@ -5,16 +5,22 @@
 .masthead {
  position: relative;
  border-bottom: 1px solid $border-color;
-  -webkit-animation: intro 0.3s both;
-          animation: intro 0.3s both;
+  -webkit-animation: $intro-transition;
+          animation: $intro-transition;
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
  z-index: 20;

  &__inner-wrap {
-    @include container;
    @include clearfix;
-    padding: 1em 1em 1em;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 1em;
+    max-width: 100%;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
    font-family: $sans-serif-narrow;

    @include breakpoint($x-large) {
@@ -31,7 +37,31 @@
  }
 }

+.site-title {
+  display: -webkit-box;
+  display: flex;
+  padding: 0.5rem 0;
+  align-self: stretch;
+  -webkit-box-align: center;
+        align-items: center;
+  font-weight: bold;
+  z-index: 20;
+}
+
 .masthead__menu {
+  float: left;
+  margin-left: 0;
+  margin-right: 0;
+  width: 100%;
+  clear: both;
+
+  .site-nav {
+    margin-left: 0;
+
+    @include breakpoint($small) {
+      float: right;
+    }
+  }

  ul {
    margin: 0;
@@ -7,15 +7,14 @@
   ========================================================================== */

 .breadcrumbs {
-  @include container;
  @include clearfix;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin: 0 auto;
+  max-width: 100%;
  padding-left: 2em;
  padding-right: 2em;
  font-family: $sans-serif;
-  -webkit-animation: intro 0.3s both;
-          animation: intro 0.3s both;
+  -webkit-animation: $intro-transition;
+          animation: $intro-transition;
  -webkit-animation-delay: 0.30s;
          animation-delay: 0.30s;

@@ -34,11 +33,12 @@
    font-size: $type-size-6;

    @include breakpoint($large) {
-      @include span(10 of 12 last);
+      float: right;
+      width: span(10 of 12);
    }

    @include breakpoint($x-large) {
-      @include prefix(0.5 of 12);
+      padding-left: gutter(0.5 of 12);
    }
  }

@@ -57,10 +57,11 @@
   ========================================================================== */

 .pagination {
-  @include full();
  @include clearfix();
+  float: left;
  margin-top: 1em;
  padding-top: 1em;
+  width: 100%;

  ul {
    margin: 0;
@@ -175,7 +176,10 @@

 .greedy-nav {
  position: relative;
-  min-width: 250px;
+  display: -webkit-box;
+  display: flex;
+  -webkit-box-align: center;
+        align-items: center;
  background: $background-color;

  a {
@@ -188,34 +192,35 @@
    &:hover {
      color: $masthead-link-color-hover;
    }
+
+    &.site-title {
+      margin-left: 0;
+    }
  }

  button {
-    position: absolute;
-    height: 100%;
-    right: 0;
    padding: 0 0.5rem;
+    align-self: stretch;
    border: 0;
    outline: none;
-    background-color: $primary-color;
    color: #fff;
+    background-color: $primary-color;
    cursor: pointer;
  }

  .visible-links {
-    display: table;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-pack: end;
+     justify-content: flex-end;
+    -webkit-box-flex: 1;
+                flex: 1;
+    padding-right: 2rem;
+    overflow: hidden;

    li {
-      display: table-cell;
-      vertical-align: middle;
-
-      &:first-child {
-        font-weight: bold;
-
-        a {
-          margin-left: 0;
-        }
-      }
+      -webkit-box-flex: 0;
+                  flex: none;

      &:last-child {
        a {
@@ -238,14 +243,13 @@
        -webkit-transition: $global-transition;
        transition: $global-transition;
        -webkit-transform: scaleX(0) translate3d(0, 0 , 0);
-            -ms-transform: scaleX(0) translate3d(0, 0 , 0);
                transform: scaleX(0) translate3d(0, 0 , 0); /* hide*/
      }

      &:hover:before {
        -webkit-transform: scaleX(1);
-            -ms-transform: scaleX(1);
-                transform: scaleX(1); /* reveal*/
+                -ms-transform: scaleX(1);
+            transform: scaleX(1); /* reveal*/
      }
    }
  }
@@ -259,7 +263,11 @@
    border: 1px solid $border-color;
    border-radius: $border-radius;
    background: #fff;
-    box-shadow: 0 0 10px rgba(#000, 0.25);
+    box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
+
+    &.hidden {
+      display: none;
+    }

    a {
      margin: 0;
@@ -268,7 +276,7 @@

      &:hover {
        color: $masthead-link-color-hover;
-        background: mix(#fff, $primary-color, 75%);
+        background: $navicon-link-color-hover;
      }
    }

@@ -348,11 +356,14 @@
        height: 0.125em;
        line-height: 1;
        background-color: $gray;
+        -webkit-transition: 0.2s ease-out;
        transition: 0.2s ease-out;
      }

      &:after {
-        transform: rotate(90deg);
+        -webkit-transform: rotate(90deg);
+                -ms-transform: rotate(90deg);
+            transform: rotate(90deg);
      }

      &:hover {
@@ -378,13 +389,17 @@
      }
    }

-    // on hover show expand
+    /* on hover show expand*/
    label:hover:after {
-      transform: rotate(90deg);
+      -webkit-transform: rotate(90deg);
+              -ms-transform: rotate(90deg);
+          transform: rotate(90deg);
    }

    input:checked + label:hover:after {
-      transform: rotate(0);
+      -webkit-transform: rotate(0);
+              -ms-transform: rotate(0);
+          transform: rotate(0);
    }

    ul {
@@ -419,14 +434,7 @@
    margin-left: -0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
-    color: #fff;
    font-weight: bold;
-    background: $primary-color;
-    border-radius: $border-radius;
-
-    &:hover {
-      color: #fff;
-    }
  }

  @include breakpoint(max-width ($large - 1px)) {
@@ -438,8 +446,8 @@
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    -webkit-transform: translate(0, 10%);
-        -ms-transform: translate(0, 10%);
-            transform: translate(0, 10%);
+            -ms-transform: translate(0, 10%);
+        transform: translate(0, 10%);
  }
 }

@@ -447,13 +455,13 @@
  .nav__list input:checked ~ .nav__items {
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
-    max-height: 9999px; // exaggerate max-height to accommodate tall lists
+    max-height: 9999px; /* exaggerate max-height to accommodate tall lists*/
    overflow: visible;
    opacity: 1;
    margin-top: 1em;
    -webkit-transform: translate(0, 0);
-        -ms-transform: translate(0, 0);
-            transform: translate(0, 0);
+            -ms-transform: translate(0, 0);
+        transform: translate(0, 0);
  }
 }

@@ -529,7 +537,7 @@
  }

  li ul > li a {
-    padding-left: 2rem;
+    padding-left: 1.75rem;
    font-weight: normal;
  }

@@ -3,13 +3,17 @@
   ========================================================================== */

 #main {
-  @include container;
  @include clearfix;
+  margin-left: auto;
  margin-top: 2em;
+  margin-right: auto;
  padding-left: 1em;
  padding-right: 1em;
-  animation: intro 0.3s both;
-  animation-delay: 0.35s;
+  -webkit-animation: $intro-transition;
+          animation: $intro-transition;
+  max-width: 100%;
+  -webkit-animation-delay: 0.35s;
+          animation-delay: 0.35s;

  @include breakpoint($x-large) {
    max-width: $x-large;
@@ -17,19 +21,34 @@
 }

 .page {
+
  @include breakpoint($large) {
-    @include span(10 of 12 last);
-    @include prefix(0.5 of 12);
-    @include suffix(2 of 12);
+    float: right;
+    width: calc(100% - #{$right-sidebar-width-narrow});
+    padding-right: $right-sidebar-width-narrow;
+  }
+
+  @include breakpoint($x-large) {
+    width: calc(100% - #{$right-sidebar-width});
+    padding-right: $right-sidebar-width;
  }

  .page__inner-wrap {
-    @include full();
+    float: left;
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+    clear: both;

    .page__content,
    .page__meta,
    .page__share {
-      @include full();
+      position: relative;
+      float: left;
+      margin-left: 0;
+      margin-right: 0;
+      width: 100%;
+      clear: both;
    }
  }
 }
@@ -111,8 +130,10 @@
  position: relative;
  margin-bottom: 2em;
  @include clearfix;
-  animation: intro 0.3s both;
-  animation-delay: 0.25s;
+  -webkit-animation: $intro-transition;
+          animation: $intro-transition;
+  -webkit-animation-delay: 0.25s;
+          animation-delay: 0.25s;

  &--overlay {
    position: relative;
@@ -122,8 +143,10 @@
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
-    animation: intro 0.3s both;
-    animation-delay: 0.25s;
+    -webkit-animation: $intro-transition;
+            animation: $intro-transition;
+    -webkit-animation-delay: 0.25s;
+            animation-delay: 0.25s;

    a {
      color: #fff;
@@ -179,7 +202,7 @@
  text-align: right;
  z-index: 5;
  opacity: 0.5;
-  border-radius: $border-radius 0 $border-radius 0;
+  border-radius: $border-radius 0 0 0;

  @include breakpoint($large) {
    padding: 5px 10px;
@@ -282,7 +305,11 @@
   ========================================================================== */

 .page__comments {
-  @include full();
+  float: left;
+  margin-left: 0;
+  margin-right: 0;
+  width: 100%;
+  clear: both;
 }

 .page__comments-title {
@@ -297,6 +324,7 @@
 .page__comments-form {
  padding: 1em;
  background: $lighter-gray;
+  -webkit-transition: $global-transition;
  transition: $global-transition;

  &.disabled {
@@ -378,14 +406,19 @@
   ========================================================================== */

 .page__related {
+  @include clearfix();
+  float: left;
  margin-top: 2em;
  padding-top: 1em;
  border-top: 1px solid $border-color;
-  @include clearfix();
-  float: left;

  @include breakpoint($large) {
-    @include pre(2.5 of 12);
+    float: right;
+    width: calc(100% - #{$right-sidebar-width-narrow});
+  }
+
+  @include breakpoint($x-large) {
+    width: calc(100% - #{$right-sidebar-width});
  }

  a {
@@ -0,0 +1,238 @@
+/* ==========================================================================
+   PRINT STYLES
+   ========================================================================== */
+
+@media print {
+
+  [hidden] {
+    display: none;
+  }
+
+  * {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+
+  html {
+    font-size: 16px;
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    background: #fff !important;
+    color: #000 !important;
+    font-size: 1rem;
+    line-height: 1.5;
+    margin: 0 auto;
+    text-rendering: optimizeLegibility;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: #000;
+    line-height: 1.2;
+    margin-bottom: 0.75rem;
+    margin-top: 0;
+  }
+
+  h1 {
+    font-size: 2.5rem;
+  }
+
+  h2 {
+    font-size: 2rem;
+  }
+
+  h3 {
+    font-size: 1.75rem;
+  }
+
+  h4 {
+    font-size: 1.5rem;
+  }
+
+  h5 {
+    font-size: 1.25rem;
+  }
+
+  h6 {
+    font-size: 1rem;
+  }
+
+  a,
+  a:visited {
+    color: #000;
+    text-decoration: underline;
+    word-wrap: break-word;
+  }
+
+  table {
+    border-collapse: collapse;
+  }
+
+  thead {
+    display: table-header-group;
+  }
+
+  table,
+  th,
+  td {
+    border-bottom: 1px solid #000;
+  }
+
+  td,
+  th {
+    padding: 8px 16px;
+  }
+
+  img {
+    border: 0;
+    display: block;
+    max-width: 100% !important;
+    vertical-align: middle;
+  }
+
+  hr {
+    border: 0;
+    border-bottom: 2px solid #bbb;
+    height: 0;
+    margin: 2.25rem 0;
+    padding: 0;
+  }
+
+  dt {
+    font-weight: bold;
+  }
+
+  dd {
+    margin: 0;
+    margin-bottom: 0.75rem;
+  }
+
+  abbr[title],
+  acronym[title] {
+    border: 0;
+    text-decoration: none;
+  }
+
+  table,
+  blockquote,
+  pre,
+  code,
+  figure,
+  li,
+  hr,
+  ul,
+  ol,
+  a,
+  tr {
+    page-break-inside: avoid;
+  }
+
+  h2,
+  h3,
+  h4,
+  p,
+  a {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    page-break-after: avoid;
+    page-break-inside: avoid;
+  }
+
+  h1 + p,
+  h2 + p,
+  h3 + p {
+    page-break-before: avoid;
+  }
+
+  img {
+    page-break-after: auto;
+    page-break-before: auto;
+    page-break-inside: avoid;
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+    word-wrap: break-word;
+  }
+
+  a[href^='http://']:after,
+  a[href^='https://']:after,
+  a[href^='ftp://']:after {
+    content: " (" attr(href) ")";
+    font-size: 80%;
+  }
+
+  abbr[title]:after,
+  acronym[title]:after {
+    content: " (" attr(title) ")";
+  }
+
+  .page-break,
+  .page-break-before {
+    page-break-before: always;
+  }
+
+  .page-break-after {
+    page-break-after: always;
+  }
+
+  .no-print {
+    display: none;
+  }
+
+  a.no-reformat:after {
+    content: '';
+  }
+
+  abbr[title].no-reformat:after,
+  acronym[title].no-reformat:after {
+    content: '';
+  }
+
+  .page__hero-caption {
+    color: #000 !important;
+    background: #fff !important;
+    opacity: 1;
+
+    a {
+      color: #000 !important;
+    }
+  }
+
+/*
+   Hide the following elements on print
+   ========================================================================== */
+
+  .masthead,
+  .toc,
+  .page__share,
+  .page__related,
+  .pagination,
+  .ads,
+  .page__footer,
+  .author__avatar,
+  .author__content,
+  .author__urls-wrapper,
+  .nav__list,
+  .adsbygoogle {
+    display: none !important;
+  }
+}
@@ -2,7 +2,7 @@
   STYLE RESETS
   ========================================================================== */

-@include border-box-sizing;
+* { box-sizing: border-box; }

 html {
  /* apply a natural box layout model to all elements */
@@ -7,14 +7,20 @@
   ========================================================================== */

 .sidebar {
+  @include clearfix();
+  margin-bottom: 1em;
  -webkit-transform: translate3d(0, 0 , 0);
          transform: translate3d(0, 0 , 0);

-  @include clearfix();
-  margin-bottom: 1em;
+  @include breakpoint(max-width $large) {
+    /* fix z-index order of follow links */
+    position: relative;
+    z-index: 10;
+  }

  @include breakpoint($large) {
-    @include span(2 of 12);
+    float: left;
+    width: calc(#{$right-sidebar-width-narrow} - 1em);
    opacity: 0.75;
    -webkit-transition: opacity 0.2s ease-in-out;
            transition: opacity 0.2s ease-in-out;
@@ -22,10 +28,16 @@
    &:hover {
      opacity: 1;
    }
+
+    &.sticky {
+      overflow-y: auto;
+      /* calculate height of nav list */
+      height: calc(100vh - 90px - 2em); // viewport height - approx. masthead height - main content top margin
+    }
  }

  @include breakpoint($x-large) {
-    padding-right: 0;
+    width: calc(#{$right-sidebar-width} - 1em);
  }

  h2, h3, h4, h5, h6 {
@@ -48,15 +60,31 @@
  margin-bottom: 1em;

  @include breakpoint($large) {
-    position: relative;
-    float: right;
+    position: absolute;
+    top: 0;
+    right: 0;
    width: $right-sidebar-width-narrow;
-    margin-left: span(0.5 of 12);
+    margin-right: -1 * $right-sidebar-width-narrow;
+    padding-left: 1em;
    z-index: 10;
  }

  @include breakpoint($x-large) {
    width: $right-sidebar-width;
+    margin-right: -1 * $right-sidebar-width;
+  }
+}
+
+.splash .sidebar__right {
+
+  @include breakpoint($large) {
+    position: relative;
+    float: right;
+    margin-right: 0;
+  }
+
+  @include breakpoint($x-large) {
+    margin-right: 0;
  }
 }

@@ -163,9 +191,13 @@
  border-radius: $border-radius;
  background: #fff;
  z-index: -1;
-  box-shadow: 0 0 10px rgba(#000, 0.25);
+  box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
  cursor: default;

+  &.is--visible {
+    display: block;
+  }
+
  @include breakpoint($large) {
    display: block;
    position: relative;
@@ -7,7 +7,7 @@ figure.highlight {
  position: relative;
  margin-bottom: 1em;
  font-family: $monospace;
-  font-size: $type-size-7;
+  font-size: $type-size-6;
  line-height: 1.8;
  border: 1px solid $border-color;
  border-radius: $border-radius;
@@ -46,7 +46,7 @@ figure.highlight {
    padding: 5px;
    border: 0;

-    // line numbers
+    /* line numbers*/
    &.gutter {
      padding-right: 1em;
      color: $light-gray;
@@ -8,7 +8,6 @@ table {
  font-family: $global-font-family;
  font-size: $type-size-6;
  border-collapse: collapse;
-  border: 1px solid $light-gray;

  & + table {
    margin-top: 1em;
@@ -17,22 +16,22 @@ table {

 thead {
  background-color: $lighter-gray;
-  border-bottom: 1px solid $light-gray;
+  border-bottom: 2px solid $light-gray;
 }

 th {
  padding: 0.5em;
  font-weight: bold;
  text-align: left;
-  border-right: 1px solid $light-gray;
 }

 td {
  padding: 0.5em;
  border-bottom: 1px solid $light-gray;
-  border-right: 1px solid $light-gray;
 }

-tr, td, th {
+tr,
+td,
+th {
  vertical-align: middle;
 }
@@ -114,7 +114,9 @@ body:hover .visually-hidden button {
 .cf { clear: both; }

 .wrapper {
-  @include container();
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
 }


@@ -191,6 +193,11 @@ body:hover .visually-hidden button {
    color: $behance-color;
  }

+  .fa-bitbucket,
+  .fa-bitbucket-square {
+    color: $bitbucket-color;
+  }
+
  .fa-dribbble {
    color: $dribbble-color;
  }
@@ -483,7 +490,7 @@ a.reversefootnote {

 /*
   Responsive Video Embed
-      ========================================================================== */
+   ========================================================================== */

 .responsive-video-container {
  position: relative;
@@ -504,3 +511,10 @@ a.reversefootnote {
  }
 }

+// full screen video fixes
+:-webkit-full-screen-ancestor {
+   .masthead,
+   .page__footer {
+    position: static;
+  }
+}
@@ -68,6 +68,7 @@ $info-color                 : #52adc8 !default;

 /* brands */
 $behance-color              : #1769FF !default;
+$bitbucket-color            : #205081 !default;
 $dribbble-color             : #ea4c89 !default;
 $facebook-color             : #3b5998 !default;
 $flickr-color               : #ff0084 !default;
@@ -95,7 +96,7 @@ $link-color-hover           : mix(#000, $link-color, 25%) !default;
 $link-color-visited         : mix(#fff, $link-color, 25%) !default;
 $masthead-link-color        : $primary-color !default;
 $masthead-link-color-hover  : mix(#000, $primary-color, 25%) !default;
-
+$navicon-link-color-hover   : mix(#fff, $primary-color, 75%) !default;

 /*
   Breakpoints
@@ -123,6 +124,7 @@ $right-sidebar-width-wide   : 400px !default;

 $border-radius              : 4px !default;
 $box-shadow                 : 0 1px 1px rgba(0, 0, 0, 0.125) !default;
-$navicon-width              : 28px !default;
-$navicon-height             : 4px !default;
+$navicon-width              : 1.5rem !default;
+$navicon-height             : 0.25rem !default;
 $global-transition          : all 0.2s ease-in-out !default;
+$intro-transition           : intro 0.3s both !default;
@@ -0,0 +1,13 @@
+// Susy (Prefixed)
+// ===============
+
+$susy-version: 3;
+
+@import 'susy/utilities';
+@import 'susy/su-validate';
+@import 'susy/su-math';
+@import 'susy/settings';
+@import 'susy/normalize';
+@import 'susy/parse';
+@import 'susy/syntax-helpers';
+@import 'susy/api';
@@ -0,0 +1,5 @@
+// Susy (Un-Prefixed)
+// ==================
+
+@import 'susy-prefix';
+@import 'susy/unprefix';
@@ -0,0 +1,5 @@
+// SVG Grid Background
+// ===================
+
+@import 'svg-grid/prefix';
+@import 'svg-grid/svg-unprefix';
@@ -0,0 +1,7 @@
+// Prefixed SVG Plugin
+// ===================
+
+@import 'svg-settings';
+@import 'svg-utilities';
+@import 'svg-grid-math';
+@import 'svg-api';
@@ -0,0 +1,114 @@
+/// Plugin: SVG Grid Image
+/// ======================
+/// @group plugin_svg-grid
+/// @see susy-svg-grid
+
+
+
+/// ## Overview
+/// If you want to generate svg-backgrounds
+/// for help visualizing and debugging your grids,
+/// import the SVG Grid Plugin.
+///
+/// The plugin adds `svg-grid-colors` setting
+/// to your global defaults,
+/// which you can override in `$susy`.
+/// It also provides you with a new function,
+/// `susy-svg-grid()`,
+/// which will return inline svg for use in
+/// backgrounds or generated content.
+///
+/// This function come with an unprefixed alias by default,
+/// using the `svg-grid` import.
+/// If you only only want prefixed versions of the API,
+/// import the `svg-grid/prefix` partial instead.
+///
+/// @group plugin_svg-grid
+///
+/// @example scss - importing the plugin
+///   // The full path to import Susy will depend on your setup…
+///
+///   // unprefixed
+///   @import 'plugins/svg-grid';
+///
+///   // prefixed
+///   @import 'plugins/svg-grid/prefix';
+///
+/// @example scss - generating background grids
+///   .grid {
+///     background: susy-svg-grid() no-repeat scroll;
+///   }
+
+
+
+// SVG Grid
+// --------
+/// Return inline svg-data in  to display the grid.
+///
+/// @group plugin_svg-grid
+///
+/// @param {Map | List} $grid [$susy] -
+///   Map or shorthand defining the current grid
+/// @param {Color | List | null} $colors [null] -
+///   Column color, or list of colors for column-gradient,
+///   used to override the global `svg-grid-colors` setting
+/// @param {Length | null} $offset [null] -
+///   Manually override the default grid-image offset,
+///   to account for grid edges
+///
+/// @return {String} -
+///   CSS inline-data SVG string, in `url(<svg>)` format,
+///   for use in image or content properties
+/// @example scss
+///   .grid {
+///     background: susy-svg-grid() no-repeat scroll;
+///   }
+@function susy-svg-grid(
+  $grid: $susy,
+  $colors: null,
+  $offset: null
+) {
+  // Grid parsing & normalizing
+  $grid: susy-compile($grid, $context-only: true);
+
+  // Color and gradient handling
+  $gradient: '';
+
+  @if (not $colors) {
+    $colors: susy-get('svg-grid-colors');
+  }
+
+  @if length($colors) > 1 {
+    $gradient: _susy-svg-gradient($colors);
+    $colors: 'url(%23susy-svg-gradient)';
+  } @else {
+    $colors: _susy-svg-color($colors);
+  }
+
+  // Get a default image-width
+  $span: (
+    'span': map-get($grid, 'columns'),
+    'spread': map-get($grid, 'container-spread'),
+  );
+  $span: map-merge($grid, $span);
+  $image-width: su-call('su-span', $span);
+  $image-width: if((type-of($image-width) == 'number'), $image-width, 100%);
+
+  // SVG construction
+  $columns: map-get($grid, 'columns');
+  $offset: $offset or _susy-svg-offset($grid);
+
+  $attrs: 'fill="#{$colors}" width="#{$image-width}"';
+  $svg: 'data:image/svg+xml,';
+  $svg: $svg + '%3Csvg xmlns="http://www.w3.org/2000/svg" #{$attrs} %3E';
+  $svg: $svg + $gradient;
+
+  @for $column from 1 through length($columns) {
+    $width: susy-span(1 narrow at $column, $grid);
+    $x: _susy-svg-column-position($column, $grid);
+
+    $svg: $svg + _susy-svg-rect($x, $width, $offset);
+  }
+
+  @return url('#{$svg}%3C/svg%3E');
+}
@@ -0,0 +1,67 @@
+// SVG Grid Math
+// =============
+
+
+
+// SVG Column Position
+// -------------------
+/// Determine the proper horizontal position
+/// for a column rectangle
+///
+/// @access private
+///
+/// @param {Integer} $column -
+///   1-indexed column location on the grid
+/// @param {Map} $grid -
+///   Normalized settings map representing the current grid
+///
+/// @return {Length} -
+///   Horizontal position of svg column rectangle,
+///   as distance from the grid edge
+@function _susy-svg-column-position(
+  $column,
+  $grid
+) {
+  $x: $column - 1;
+
+  @if ($x > 0) {
+    $x: susy-span(first $x wide, $grid);
+  }
+
+  @return $x;
+}
+
+
+
+// SVG Offset
+// ----------
+/// Determine if a grid image needs to be offset,
+/// to account for edge gutters.
+///
+/// @access private
+///
+/// @param {Map} $grid -
+///   Normalized settings map representing the current grid
+///
+/// @return {Length | null} -
+///   Expected distance from container edge to first column,
+///   based on spread values and gutter-widths
+@function _susy-svg-offset(
+  $grid
+) {
+  $columns: su-valid-columns(map-get($grid, 'columns'));
+  $gutters: su-valid-gutters(map-get($grid, 'gutters'));
+  $container: su-valid-spread(map-get($grid, 'container-spread')) + 1;
+
+  @if ($container == 0) {
+    @return null;
+  }
+
+  $gutter: su-call('su-gutter', $grid);
+
+  @if (type-of($gutter) == 'string') {
+    @return 'calc(#{$container} * #{$gutter} / 2)';
+  }
+
+  @return $container * $gutter / 2;
+}
@@ -0,0 +1,14 @@
+// SVG Settings
+// ============
+
+
+// Susy SVG Defaults
+// =================
+/// This plugin adds the `svg-grid-colors` property
+/// and default value to `$_susy-defaults` —
+/// you can override that value in `$susy`
+/// or any other grid settings map.
+/// @group plugin_svg-grid
+$_susy-defaults: map-merge((
+    'svg-grid-colors': hsla(120, 50%, 50%, 0.5) hsla(120, 50%, 75%, 0.5),
+  ), $_susy-defaults);
@@ -0,0 +1,18 @@
+// Unprefix Susy SVG Grid
+// ======================
+
+
+
+// SVG Grid
+// --------
+/// Un-prefixed alias for `susy-svg-grid`
+///
+/// @group plugin_svg-grid
+/// @alias susy-svg-grid
+@function svg-grid(
+  $grid: $susy,
+  $colors: susy-get('svg-grid-colors'),
+  $offset: null
+) {
+  @return susy-svg-grid($grid, $colors, $offset);
+}
@@ -0,0 +1,133 @@
+// SVG Utilities
+// =============
+
+
+
+// SVG Validate Units
+// ------------------
+/// Make sure a length is supported in svg
+///
+/// @access private
+///
+/// @param {Length} $length -
+///   The length to validate
+/// @param {String} $name [null] -
+///   Optional name of length origin,
+///   for error reporting
+///
+/// @return {Length} -
+///   An svg-validated length, or comparable valid length
+@function _susy-svg-validate-units(
+  $length,
+  $name: null
+) {
+  $_svg-units: ('em', 'ex', 'px', 'pt', 'pc', 'cm', 'mm', 'in', '%');
+  $string: type-of($length) == 'string';
+
+  @if ($length == 0) or ($string) or index($_svg-units, unit($length)) {
+    @return $length;
+  }
+
+  @return _susy-error(
+    '`#{unit($length)}` #{$name} units are not supported in SVG',
+    '_susy-svg-validate-units');
+}
+
+
+
+// SVG Rect
+// --------
+/// Build a single svg rectangle
+///
+/// @access private
+///
+/// @param {Length} $x -
+///   Horizontal position for the rectangle
+/// @param {Length} $width -
+///   Width of the rectangle
+/// @param {Length} $offset [null] -
+///   Offset the rectangle, to account for edge gutters
+///
+/// @return {String} -
+///   Escaped string representing one svg rectangle
+@function _susy-svg-rect(
+  $x,
+  $width,
+  $offset: null
+) {
+  $x: _susy-svg-validate-units($x);
+  $width: _susy-svg-validate-units($width);
+  $offset: if($offset == 0, null, $offset);
+
+  @if (type-of($offset) == 'number') and (type-of($x) == 'number') {
+    @if comparable($x, $offset) {
+      $x: $x + $offset;
+    } @else {
+      $x: 'calc(#{$x} + #{$offset})';
+    }
+  } @else if $offset and ($x != 0) {
+    $x: 'calc(#{$x} + #{$offset})';
+  } @else if $offset {
+    $x: $offset;
+  }
+
+  @return '%3Crect x="#{$x}" width="#{$width}" height="100%"/%3E';
+}
+
+
+
+// SVG Color
+// ---------
+/// Stringify colors, and escape hex symbol
+///
+/// @access private
+///
+/// @param {Color} $color -
+///   Color to stringify and escape
+///
+/// @return {String} -
+///   Escaped string value of color
+@function _susy-svg-color(
+  $color
+) {
+  $color: inspect($color); // convert to string
+
+  @if (str-index($color, '#') == 1) {
+    $color: '%23' + str-slice($color, 2);
+  }
+
+  @return $color;
+}
+
+
+
+// SVG Gradient
+// ------------
+/// Create a multi-color svg gradient
+///
+/// @access private
+///
+/// @param {List} $colors -
+///   List of colors to be equally spaced from `0%` to `100%`
+///   in each column rectangle
+///
+/// @return {String} -
+///   Escaped string representing one svg gradient
+///   (`id="susy-svg-gradient"`)
+@function _susy-svg-gradient(
+  $colors
+) {
+  $gradient: '%3Cdefs%3E%3ClinearGradient spreadMethod="pad"';
+  $gradient: '#{$gradient} id="susy-svg-gradient"';
+  $gradient: '#{$gradient} x1="0%" y1="0%" x2="100%" y2="0%"%3E';
+
+  @for $i from 1 through length($colors) {
+    $color: _susy-svg-color(nth($colors, $i));
+    $offset: percentage(($i - 1) / (length($colors) - 1));
+    $stop: '%3Cstop offset="#{$offset}" style="stop-color:#{$color};" /%3E';
+
+    $gradient: $gradient + $stop;
+  }
+
+  @return $gradient + '%3C/linearGradient%3E%3C/defs%3E';
+}
@@ -0,0 +1,318 @@
+/// Susy3 API Functions
+/// ===================
+/// These three functions form the core of Susy's
+/// layout-building grid API.
+///
+/// - Use `span()` and `gutter()` to return any grid-width,
+///   and apply the results wherever you need them:
+///   CSS `width`, `margin`, `padding`, `flex-basis`, `transform`, etc.
+/// - For asymmetrical-fluid grids,
+///   `slice()` can help manage your nesting context.
+///
+/// All three functions come with an unprefixed alias by default,
+/// using the `susy` import.
+/// Import the `susy-prefix` partial instead,
+/// if you only only want prefixed versions of the API.
+///
+/// This is a thin syntax-sugar shell around
+/// the "Su" core-math functions: `su-span`, `su-gutter`, and `su-slice`.
+/// If you prefer the more constrained syntax of the math engine,
+/// you are welcome to use those functions instead.
+///
+/// @group b-api
+/// @see susy-span
+/// @see susy-gutter
+/// @see susy-slice
+/// @see su-span
+/// @see su-gutter
+/// @see su-slice
+
+
+
+/// ## Shorthand
+///
+/// All functions draw on the same shorthand syntax in two parts,
+/// seperated by the word `of`.
+///
+/// ### Span Syntax: `<width>` [`<location>` `<spread>`]
+/// The first part describes the
+/// **span** width, location, and spread in any order.
+/// Only the width is required:
+///
+/// - `span(2)` will return the width of 2 columns.
+/// - `span(3 wide)` will return 3-columns, with an additional gutter.
+/// - location is only needed with asymmetrical grids,
+///   where `span(3 at 2)` will return the width of
+///   specific columns on the grid.
+///   Since these are functions, they will not handle placement for you.
+///
+/// ### Context Syntax: `[of <columns> <container-spread> <gutters>]`
+/// The second half of Susy's shorthand
+/// describes the grid-**context** –
+/// available columns, container-spread, and optional gutter override –
+/// in any order.
+/// All of these settings have globally-defined defaults:
+///
+/// - `span(2 of 6)` will set the context to
+///   a slice of 6 columns from the global grid.
+///   More details below.
+/// - `span(2 of 12 wide)` changes the container-spread
+///   as well as the column-context.
+/// - `span(2 of 12 set-gutters 0.5em)`
+///   will override the global gutters setting
+///   for this one calculation.
+///
+/// A single unitless number for `columns`
+/// will be treated as a slice of the parent grid.
+/// On a grid with `columns: susy-repeat(12, 120px)`,
+/// the shorthand `of 4` will use the parent `120px` column-width.
+/// You can also be more explicit,
+/// and say `of susy-repeat(4, 100px)`.
+/// If you are using asymmetrical grids,
+/// like `columns: (1 1 2 3 5 8)`,
+/// Susy can't slice it for you without knowing which columns you want.
+/// The `slice` function accepts exactly the same syntax as `span`,
+/// but returns a list of columns rather than a width.
+/// Use it in your context like `of slice(first 3)`.
+///
+/// @group b-api
+
+
+
+// Susy Span
+// ---------
+/// This is the primary function in Susy —
+/// used to return the width of a span across one or more columns,
+/// and any relevant gutters along the way.
+/// With the default settings,
+/// `span(3)` will return the width of 3 columns,
+/// and the 2 intermediate gutters.
+/// This can be used to set the `width` property of grid elements,
+/// or `margin` and `padding`
+/// to push, pull, and pad your elements.
+///
+/// - This is a thin syntax-sugar shell around
+///   the core-math `su-span()` function.
+/// - The un-prefixed alias `span()` is available by default.
+///
+/// @group b-api
+/// @see su-span
+/// @see $susy
+///
+/// @param {list} $span -
+///   Shorthand expression to define the width of the span,
+///   optionally containing:
+///   - a count, length, or column-list span.
+///   - `at $n`, `first`, or `last` location on asymmetrical grids,
+///     where `at 1 == first`,
+///     and `last` will calculate the proper location
+///     based on columns and span.
+///   - `narrow`, `wide`, or `wider` for optionally spreading
+///     across adjacent gutters.
+///   - `of $n <spread>` for available grid columns
+///     and spread of the container.
+///     Span counts like `of 6` are valid
+///     in the context of symmetrical grids,
+///     where Susy can safely infer a slice of the parent columns.
+///   - and `set-gutters $n` to override global gutter settings.
+///
+/// @param {map} $config [()] -
+///   Optional map of Susy grid configuration settings.
+///   See `$susy` documentation for details.
+///
+/// @return {length} -
+///   Calculated length value, using the units given,
+///   or converting to `%` for fraction-based grids,
+///   or a full `calc` function when units/fractions
+///   are not comparable outside the browser.
+///
+/// @example scss - span half the grid
+///   .foo {
+///     // the result is a bit under 50% to account for gutters
+///     width: susy-span(6 of 12);
+///   }
+///
+/// @example scss - span a specific segment of asymmetrical grid
+///   .foo {
+///     width: susy-span(3 at 3 of (1 2 3 5 8));
+///   }
+@function susy-span(
+  $span,
+  $config: ()
+) {
+  $output: susy-compile($span, $config);
+
+  @if map-get($output, 'span') {
+    @return su-call('su-span', $output);
+  }
+
+  $actual: '[#{type-of($span)}] `#{inspect($span)}`';
+  @return _susy-error(
+    'Unable to determine span value from #{$actual}.',
+    'susy-span');
+}
+
+
+
+// Susy Gutter
+// -----------
+/// The gutter function returns
+/// the width of a single gutter on your grid,
+/// to be applied where you see fit –
+/// on `margins`, `padding`, `transform`, or element `width`.
+///
+/// - This is a thin syntax-sugar shell around
+///   the core-math `su-gutter()` function.
+/// - The un-prefixed alias `gutter()` is available by default.
+///
+/// @group b-api
+/// @see su-gutter
+/// @see $susy
+///
+/// @param {list | number} $context [null] -
+///   Optional context for nested gutters,
+///   including shorthand for
+///   `columns`, `gutters`, and `container-spread`
+///   (additional shorthand will be ignored)
+///
+/// @param {map} $config [()] -
+///   Optional map of Susy grid configuration settings.
+///   See `$susy` documentation for details.
+///
+/// @return {length} -
+///   Width of a gutter as `%` of current context,
+///   or in the units defined by `column-width` when available
+///
+/// @example scss - add gutters before or after an element
+///   .floats {
+///     float: left;
+///     width: span(3 of 6);
+///     margin-left: gutter(of 6);
+///   }
+///
+/// @example scss - add gutters to padding
+///   .flexbox {
+///     flex: 1 1 span(3 wide of 6 wide);
+///     padding: gutter(of 6) / 2;
+///   }
+///
+@function susy-gutter(
+  $context: susy-get('columns'),
+  $config: ()
+) {
+  $context: susy-compile($context, $config, 'context-only');
+
+  @return su-call('su-gutter', $context);
+}
+
+
+
+// Susy Slice
+// ----------
+/// Working with asymmetrical grids (un-equal column widths)
+/// can be challenging – 
+/// expecially when they involve fluid/fractional elements.
+/// Describing a context `of (15em 6em 6em 6em 15em)` is a lot
+/// to put inside the span or gutter function shorthand.
+/// This slice function returns a sub-slice of asymmetrical columns to use
+/// for a nested context.
+/// `slice(3 at 2)` will give you a subset of the global grid,
+/// spanning 3 columns, starting with the second.
+///
+/// - This is a thin syntax-sugar shell around
+///   the core-math `su-slice()` function.
+/// - The un-prefixed alias `slice()` is available by default.
+///
+/// @group b-api
+/// @see su-slice
+/// @see $susy
+///
+/// @param {list} $span -
+///   Shorthand expression to define the subset span, optionally containing:
+///   - `at $n`, `first`, or `last` location on asymmetrical grids;
+///   - `of $n <spread>` for available grid columns
+///     and spread of the container
+///     - Span-counts like `of 6` are only valid
+///       in the context of symmetrical grids
+///     - Valid spreads include `narrow`, `wide`, or `wider`
+///
+/// @param {map} $config [()] -
+///   Optional map of Susy grid configuration settings.
+///   See `$susy` documentation for details.
+///
+/// @return {list} -
+///   Subset list of columns for use for a nested context
+///
+/// @example scss - Return a nested segment of asymmetrical grid
+///   $context: susy-slice(3 at 3 of (1 2 3 5 8));
+///   /* $context: #{$context}; */
+@function susy-slice(
+  $span,
+  $config: ()
+) {
+  $span: susy-compile($span, $config);
+
+  @return su-call('su-slice', $span);
+}
+
+
+
+/// ## Building Grids
+/// The web has come a long way
+/// since the days of double-margin-hacks
+/// and inconsistent subpixel rounding.
+/// In addition to floats and tables,
+/// we can now use much more powerful tools,
+/// like flexbox and CSS grid,
+/// to build more interesting and responsive layouts.
+///
+/// With Susy3, we hope you'll start moving in that direction.
+/// You can still build classic 12-column Grid Systems,
+/// and we'll help you get there,
+/// but Susy3 is primarily designed for a grid-math-on-demand
+/// approach to layout:
+/// applying our functions only where you really need grid math.
+/// Read the [intro article by OddBird][welcome] for more details.
+///
+/// [welcome]: http://oddbird.net/2017/06/28/susy3/
+///
+/// @group b-api
+/// @link http://oddbird.net/2017/06/28/susy3/ Article: Welcome to Susy3
+///
+/// @example scss - floats
+///   .float {
+///     width: span(3);
+///     margin-right: gutter();
+///   }
+///
+/// @example scss - flexbox
+///   .flexbox {
+///     flex: 1 1 span(3);
+///     // half a gutter on either side…
+///     padding: 0 gutter() / 2;
+///   }
+///
+/// @example scss - pushing and pulling
+///   .push-3 {
+///     margin-left: span(3 wide);
+///   }
+///
+///   .pull-3 {
+///     margin-left: 0 - span(3 wide);
+///   }
+///
+/// @example scss - building an attribute system
+///   // markup example: <div data-span="last 3"></div>
+///   [data-span] {
+///     float: left;
+///
+///     &:not([data-span*='last']) {
+///       margin-right: gutter();
+///     }
+///   }
+///
+///   @for $span from 1 through length(susy-get('columns')) {
+///     [data-span*='#{$span}'] {
+///       width: span($span);
+///     }
+///   }
@@ -0,0 +1,261 @@
+/// Syntax Normalization
+/// ====================
+/// Susy is divided into two layers:
+/// "Su" provides the core math functions with a stripped-down syntax,
+/// while "Susy" adds global settings, shorthand syntax,
+/// and other helpers.
+/// Each setting (e.g. span, location, columns, spread, etc.)
+/// has a single canonical syntax in Su.
+///
+/// This normalization module helps translate between those layers,
+/// transforming parsed Susy input into
+/// values that Su will understand.
+///
+/// @group x-normal
+///
+/// @see susy-normalize
+/// @see susy-normalize-span
+/// @see susy-normalize-columns
+/// @see susy-normalize-spread
+/// @see susy-normalize-location
+
+
+
+// Susy Normalize
+// --------------
+/// Normalize the values in a configuration map.
+/// In addition to the global `$susy` properties,
+/// this map can include local span-related imformation,
+/// like `span` and `location`.
+///
+/// Normalization does not check that values are valid,
+/// which will happen in the Su math layer.
+/// These functions merely look for known Susy syntax –
+/// returning a map with those shorthand values
+/// converted into low-level data for Su.
+/// For example `span: all` and `location: first`
+/// will be converted into specific numbers.
+///
+/// @group x-normal
+/// @see $susy
+/// @see susy-parse
+///
+/// @param {map} $config -
+///   Map of Susy configuration settings to normalize.
+///   See `$susy` and `susy-parse()` documentation for details.
+/// @param {map | null} $context [null] -
+///   Map of Susy configuration settings to use as global reference,
+///   or `null` to use global settings.
+///
+/// @return {map} -
+///   Map of Susy configuration settings,
+///   with all values normalized for Su math functions.
+@function susy-normalize(
+  $config,
+  $context: null
+) {
+  // Spread
+  @each $setting in ('spread', 'container-spread') {
+    $value: map-get($config, $setting);
+
+    @if $value {
+      $value: susy-normalize-spread($value);
+      $config: map-merge($config, ($setting: $value));
+    }
+  }
+
+  // Columns
+  $columns: map-get($config, 'columns');
+
+  @if $columns {
+    $columns: susy-normalize-columns($columns, $context);
+    $config: map-merge($config, ('columns': $columns));
+  }
+
+  @if not $columns {
+    $map: type-of($context) == 'map';
+    $columns: if($map, map-get($context, 'columns'), null);
+    $columns: $columns or susy-get('columns');
+  }
+
+  // Span
+  $span: map-get($config, 'span');
+
+  @if $span {
+    $span: susy-normalize-span($span, $columns);
+    $config: map-merge($config, ('span': $span));
+  }
+
+  // Location
+  $location: map-get($config, 'location');
+
+  @if $location {
+    $location: susy-normalize-location($span, $location, $columns);
+    $config: map-merge($config, ('location': $location));
+  }
+
+  @return $config;
+}
+
+
+
+// Normalize Span
+// --------------
+/// Normalize `span` shorthand for Su.
+/// Su span syntax allows an explicit length (e.g. `3em`),
+/// unitless column-span number (e.g. `3` columns),
+/// or an explicit list of columns (e.g. `(3 5 8)`).
+///
+/// Susy span syntax also allows the `all` keyword,
+/// which will be converted to a slice of the context
+/// in normalization.
+///
+/// @group x-normal
+///
+/// @param {number | list | 'all'} $span -
+///   Span value to normalize.
+/// @param {list} $columns -
+///   Normalized list of columns in the grid
+///
+/// @return {number | list} -
+///   Number or list value for `$span`
+@function susy-normalize-span(
+  $span,
+  $columns: susy-get('columns')
+) {
+  @if ($span == 'all') {
+    @return length($columns);
+  }
+
+  @return $span;
+}
+
+
+
+// Normalize Columns
+// -----------------
+/// Normalize `column` shorthand for Su.
+/// Su column syntax only allows column lists (e.g. `120px 1 1 1 120px`).
+///
+/// Susy span syntax also allows a unitless `slice` number (e.g `of 5`),
+/// which will be converted to a slice of the context
+/// in normalization.
+///
+/// @group x-normal
+///
+/// @param {list | integer} $columns -
+///   List of available columns,
+///   or unitless integer representing a slice of
+///   the available context.
+/// @param {map | null} $context [null] -
+///   Map of Susy configuration settings to use as global reference,
+///   or `null` to access global settings.
+///
+/// @return {list} -
+///   Columns list value, normalized for Su input.
+///
+/// @throws
+///   when attempting to access a slice of asymmetrical context
+@function susy-normalize-columns(
+  $columns,
+  $context: null
+) {
+  $context: $context or susy-settings();
+
+  @if type-of($columns) == 'list' {
+    @return _susy-flatten($columns);
+  }
+
+  @if (type-of($columns) == 'number') and (unitless($columns)) {
+    $span: $columns;
+    $context: map-get($context, 'columns');
+    $symmetrical: susy-repeat(length($context), nth($context, 1));
+
+    @if ($context == $symmetrical) {
+      @return susy-repeat($span, nth($context, 1));
+    } @else {
+      $actual: 'of `#{$span}`';
+      $columns: 'grid-columns `#{$context}`';
+      @return _susy-error(
+        'context-slice #{$actual} can not be determined based on #{$columns}.',
+        'susy-normalize-columns');
+    }
+  }
+
+  @return $columns;
+}
+
+
+
+// Normalize Spread
+// ----------------
+/// Normalize `spread` shorthand for Su.
+/// Su spread syntax only allows the numbers `-1`, `0`, or `1` –
+/// representing the number of gutters covered
+/// in relation to columns spanned.
+///
+/// Susy spread syntax also allows keywords for each value –
+/// `narrow` for `-1`, `wide` for `0`, or `wider` for `1` –
+/// which will be converted to their respective integers
+/// in normalization.
+///
+/// @group x-normal
+///
+/// @param {0 | 1 | -1 | 'narrow' | 'wide' | 'wider'} $spread -
+///   Spread across adjacent gutters, relative to a column-count —
+///   either `narrow` (-1), `wide` (0), or `wider` (1)
+///
+/// @return {number} -
+///   Numeric value for `$spread`
+@function susy-normalize-spread(
+  $spread
+) {
+  $normal-spread: (
+    'narrow': -1,
+    'wide': 0,
+    'wider': 1,
+  );
+
+  @return map-get($normal-spread, $spread) or $spread;
+}
+
+
+
+// Normalize Location
+// ------------------
+/// Normalize `location` shorthand for Su.
+/// Su location syntax requires the (1-indexed) number for a column.
+///
+/// Susy also allows the `first` and `last` keywords,
+/// where `first` is always `1`,
+/// and `last` is calculated based on span and column values.
+/// Both keywords are normalized into an integer index
+/// in normalization.
+///
+/// @group x-normal
+///
+/// @param {number} $span -
+///   Number of grid-columns to be spanned
+/// @param {integer | 'first' | 'last'} $location -
+///   Starting (1-indexed) column position of a span,
+///   or a named location keyword.
+/// @param {list} $columns -
+///   Already-normalized list of columns in the grid.
+///
+/// @return {integer} -
+///   Numeric value for `$location`
+@function susy-normalize-location(
+  $span,
+  $location,
+  $columns
+) {
+  $count: length($columns);
+  $normal-locations: (
+    'first': 1,
+    'alpha': 1,
+    'last': $count - $span + 1,
+    'omega': $count - $span + 1,
+  );
+
+  @return map-get($normal-locations, $location) or $location;
+}
@@ -0,0 +1,163 @@
+/// Shorthand Syntax Parser
+/// =======================
+/// The syntax parser converts [shorthand syntax][short]
+/// into a map of settings that can be compared/merged with
+/// other config maps and global setting.
+///
+/// [short]: b-api.html
+///
+/// @group x-parser
+
+
+
+// Parse
+// -----
+/// The `parse` function provides all the syntax-sugar in Susy,
+/// converting user shorthand
+/// into a usable map of keys and values
+/// that can be normalized and passed to Su.
+///
+/// @group x-parser
+/// @see $susy
+///
+/// @param {list} $shorthand -
+///   Shorthand expression to define the width of the span,
+///   optionally containing:
+///   - a count, length, or column-list span;
+///   - `at $n`, `first`, or `last` location on asymmetrical grids;
+///   - `narrow`, `wide`, or `wider` for optionally spreading
+///     across adjacent gutters;
+///   - `of $n <spread>` for available grid columns
+///     and spread of the container
+///     (span counts like `of 6` are only valid
+///     in the context of symmetrical grids);
+///   - and `set-gutters $n` to override global gutter settings
+/// @param {bool} $context-only [false] -
+///   Allow the parser to ignore span and span-spread values,
+///   only parsing context and container-spread.
+///   This makes it possible to accept spanless values,
+///   like the `gutters()` syntax.
+///   When parsing context-only,
+///   the `of` indicator is optional.
+///
+/// @return {map} -
+///   Map of span and grid settings
+///   parsed from shorthand input –
+///   including all the properties available globally –
+///   `columns`, `gutters`, `spread`, `container-spread` –
+///   along with the span-specific properties
+///   `span`, and `location`.
+///
+/// @throw
+///   when a shorthand value is not recognized
+@function susy-parse(
+  $shorthand,
+  $context-only: false
+) {
+  $parse-error: 'Unknown shorthand property:';
+  $options: (
+    'first': 'location',
+    'last': 'location',
+    'alpha': 'location',
+    'omega': 'location',
+    'narrow': 'spread',
+    'wide': 'spread',
+    'wider': 'spread',
+  );
+
+  $return: ();
+  $span: null;
+  $columns: null;
+
+  $of: null;
+  $next: false;
+
+  // Allow context-only shorthand, without span
+  @if ($context-only) and (not index($shorthand, 'of')) {
+    @if su-valid-columns($shorthand, 'fail-silent') {
+      $shorthand: 'of' $shorthand;
+    } @else {
+      $shorthand: join('of', $shorthand);
+    }
+  }
+
+  // loop through the shorthand list
+  @for $i from 1 through length($shorthand) {
+    $item: nth($shorthand, $i);
+    $type: type-of($item);
+    $error: false;
+    $details: '[#{$type}] `#{$item}`';
+
+    // if we know what's supposed to be coming next…
+    @if $next {
+
+      // Add to the return map
+      $return: map-merge($return, ($next: $item));
+
+      // Reset next to `false`
+      $next: false;
+
+    } @else { // If we don't know what's supposed to be coming…
+
+      // Keywords…
+      @if ($type == 'string') {
+        // Check the map for keywords…
+        @if map-has-key($options, $item) {
+          $setting: map-get($options, $item);
+
+          // Spread could be on the span or the container…
+          @if ($setting == 'spread') and ($of) {
+            $return: map-merge($return, ('container-spread': $item));
+          } @else {
+            $return: map-merge($return, ($setting: $item));
+          }
+
+        } @else if ($item == 'all') {
+          // `All` is a span shortcut
+          $span: 'all';
+        } @else if ($item == 'at') {
+          // Some keywords setup what's next…
+          $next: 'location';
+        } @else if ($item == 'set-gutters') {
+          $next: 'gutters';
+        } @else if ($item == 'of') {
+          $of: true;
+        } @else {
+          $error: true;
+        }
+
+      } @else if ($type == 'number') or ($type == 'list') { // Numbers & lists…
+
+        @if not ($span or $of) {
+          // We don't have a span, and we're not expecting context…
+          $span: $item;
+        } @else if ($of) and (not $columns) {
+          // We are expecting context…
+          $columns: $item;
+        } @else {
+          $error: true;
+        }
+
+      } @else {
+        $error: true;
+      }
+    }
+
+    @if $error {
+      @return _susy-error('#{$parse-error} #{$details}', 'susy-parse');
+    }
+  }
+
+  // If we have span, merge it in
+  @if $span {
+    $return: map-merge($return, ('span': $span));
+  }
+
+  // If we have columns, merge them in
+  @if $columns {
+    $return: map-merge($return, ('columns': $columns));
+  }
+
+  // Return the map of settings…
+  @return $return;
+}
@@ -0,0 +1,329 @@
+/// Susy3 Configuration
+/// ===================
+/// Susy3 has 4 core settings, in a single settings map.
+/// You'll notice a few differences from Susy2:
+///
+/// **Columns** no longer accept a single number, like `12`,
+/// but use a syntax more similar to the new
+/// CSS [grid-template-columns][columns] –
+/// a list of relative sizes for each column on the grid.
+/// Unitless numbers in Susy act very similar to `fr` units in CSS,
+/// and the `susy-repeat()` function (similar to the css `repeat()`)
+/// helps quickly establish equal-width columns.
+///
+/// [columns]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
+///
+/// - `susy-repeat(12)` will create 12 fluid, equal-width columns
+/// - `susy-repeat(6, 120px)` will create 6 equal `120px`-wide columns
+/// - `120px susy-repeat(4) 120px` will create 6 columns,
+///   the first and last are `120px`,
+///   while the middle 4 are equal fractions of the remainder.
+///   Susy will output `calc()` values in order to achieve this.
+///
+/// **Gutters** haven't changed –
+/// a single fraction or explicit width –
+/// but the `calc()` output feature
+/// means you can now use any combination of units and fractions
+/// to create static-gutters on a fluid grid, etc.
+///
+/// **Spread** existed in the Susy2 API as a span option,
+/// and was otherwise handled behind the scenes.
+/// Now we're giving you full control over all spread issues.
+/// You can find a more [detailed explanation of spread on the blog][spread].
+///
+/// [spread]: http://oddbird.net/2017/06/13/susy-spread/
+///
+/// You can access your global settings at any time
+/// with the `susy-settings()` function,
+/// or grab a single setting from the global scope
+/// with `susy-get('columns')`, `susy-get('gutters')` etc.
+///
+/// @group a-config
+/// @link http://oddbird.net/2017/06/13/susy-spread/
+///   Article: Understanding Spread in Susy3
+///
+/// @see $susy
+/// @see susy-settings
+/// @see susy-get
+
+
+
+// Susy
+// ----
+/// The grid is defined in a single map variable,
+/// with four initial properties:
+/// `columns`, `gutters`, `spread` and `container-spread`.
+/// Anything you put in the root `$susy` variable map
+/// will be treated as a global project default.
+/// You can create similar configuration maps
+/// under different variable names,
+/// to override the defaults as-needed.
+///
+/// @group a-config
+/// @type Map
+///
+/// @see $_susy-defaults
+/// @see {function} susy-repeat
+/// @link
+///   https://codepen.io/mirisuzanne/pen/EgmJJp?editors=1100
+///   Spread examples on CodePen
+///
+/// @prop {list} columns -
+///   Columns are described by a list of numbers,
+///   representing the relative width of each column.
+///   The syntax is a simplified version of CSS native
+///   `grid-template-columns`,
+///   expecting a list of grid-column widths.
+///   Unitless numbers create fractional fluid columns
+///   (similar to the CSS-native `fr` unit),
+///   while length values (united numbers)
+///   are used to define static columns.
+///   You can mix-and match units and fractions,
+///   to create a mixed grid.
+///   Susy will generate `calc()` values when necessary,
+///   to make all your units work together.
+///
+///   Use the `susy-repeat($count, $value)` function
+///   to more easily repetative columns,
+///   similar to the CSS-native `repeat()`.
+///
+///   - `susy-repeat(8)`:
+///     an 8-column, symmetrical, fluid grid.
+///     <br />Identical to `(1 1 1 1 1 1 1 1)`.
+///   - `susy-repeat(6, 8em)`:
+///     a 6-column, symmetrical, em-based grid.
+///     <br />Identical to `(8em 8em 8em 8em 8em 8em)`.
+///   - `(300px susy-repeat(4) 300px)`:
+///     a 6-column, asymmetrical, mixed fluid/static grid
+///     using `calc()` output.
+///     <br />Identical to `(300px 1 1 1 1 300px)`.
+///
+///   **NOTE** that `12` is no longer a valid 12-column grid definition,
+///   and you must list all the columns individually
+///   (or by using the `susy-repeat()` function).
+///
+/// @prop {number} gutters -
+///   Gutters are defined as a single width,
+///   or fluid ratio, similar to the native-CSS
+///   `grid-column-gap` syntax.
+///   Similar to columns,
+///   gutters can use any valid CSS length unit,
+///   or unitless numbers to define a relative fraction.
+///
+///   - `0.5`:
+///     a fluid gutter, half the size of a single-fraction column.
+///   - `1em`:
+///     a static gutter, `1em` wide.
+///
+///   Mix static gutters with fluid columns, or vice versa,
+///   and Susy will generate the required `calc()` to make it work.
+///
+/// @prop {string} spread [narrow] -
+///   Spread of an element across adjacent gutters:
+///   either `narrow` (none), `wide` (one), or `wider` (two)
+///
+///   - Both spread settings default to `narrow`,
+///     the most common use-case.
+///     A `narrow` spread only has gutters *between* columns
+///     (one less gutter than columns).
+///     This is how all css-native grids work,
+///     and most margin-based grid systems.
+///   - A `wide` spread includes the same number of gutters as columns,
+///     spanning across a single side-gutter.
+///     This is how most padding-based grid systems often work,
+///     and is also useful for pushing and pulling elements into place.
+///   - The rare `wider` spread includes gutters
+///     on both sides of the column-span
+///     (one more gutters than columns).
+///
+/// @prop {string} container-spread [narrow] -
+///   Spread of a container around adjacent gutters:
+///   either `narrow` (none), `wide` (one), or `wider` (two).
+///   See `spread` property for details.
+///
+/// @since 3.0.0-beta.1 -
+///   `columns` setting no longer accepts numbers
+///   (e.g. `12`) for symmetrical fluid grids,
+///   or the initial `12 x 120px` syntax for
+///   symmetrical fixed-unit grids.
+///   Use `susy-repeat(12)` or `susy-repeat(12, 120px)` instead.
+///
+/// @example scss - default values
+///   // 4 symmetrical, fluid columns
+///   // gutters are 1/4 the size of a column
+///   // elements span 1 less gutter than columns
+///   // containers span 1 less gutter as well
+///   $susy: (
+///     'columns': susy-repeat(4),
+///     'gutters': 0.25,
+///     'spread': 'narrow',
+///     'container-spread': 'narrow',
+///   );
+///
+/// @example scss - inside-static gutters
+///   // 6 symmetrical, fluid columns…
+///   // gutters are static, triggering calc()…
+///   // elements span equal columns & gutters…
+///   // containers span equal columns & gutters…
+///   $susy: (
+///     'columns': susy-repeat(6),
+///     'gutters': 0.5em,
+///     'spread': 'wide',
+///     'container-spread': 'wide',
+///   );
+$susy: () !default;
+
+
+
+// Susy Repeat
+// -----------
+/// Similar to the `repeat(<count>, <value>)` function
+/// that is available in native CSS Grid templates,
+/// the `susy-repeat()` function helps generate repetative layouts
+/// by repeating any value a given number of times.
+/// Where Susy previously allowed `8` as a column definition
+/// for 8 equal columns, you should now use `susy-repeat(8)`.
+///
+/// @group a-config
+///
+/// @param {integer} $count -
+///   The number of repetitions, e.g. `12` for a 12-column grid.
+/// @param {*} $value [1] -
+///   The value to be repeated.
+///   Technically any value can be repeated here,
+///   but the function exists to repeat column-width descriptions:
+///   e.g. the default `1` for single-fraction fluid columns,
+///   `5em` for a static column,
+///   or even `5em 120px` if you are alternating column widths.
+///
+/// @return {list} -
+///   List of repeated values
+///
+/// @example scss
+///   // 12 column grid, with 5em columns
+///   $susy: (
+///     columns: susy-repeat(12, 5em),
+///   );
+///
+/// @example scss
+///   // asymmetrical 5-column grid
+///   $susy: (
+///     columns: 20px susy-repeat(3, 100px) 20px,
+///   );
+///
+///   /* result: #{susy-get('columns')} */
+@function susy-repeat(
+  $count,
+  $value: 1
+) {
+  $return: ();
+
+  @for $i from 1 through $count {
+    $return: join($return, $value);
+  }
+
+  @return $return;
+}
+
+
+
+// Susy Defaults
+// -------------
+/// Configuration map of Susy factory defaults.
+/// Do not override this map directly –
+/// use `$susy` for user and project setting overrides.
+///
+/// @access private
+/// @type Map
+///
+/// @see $susy
+///
+/// @prop {number | list} columns [susy-repeat(4)]
+/// @prop {number} gutters [0.25]
+/// @prop {string} spread ['narrow']
+/// @prop {string} container-spread ['narrow']
+$_susy-defaults: (
+  'columns': susy-repeat(4),
+  'gutters': 0.25,
+  'spread': 'narrow',
+  'container-spread': 'narrow',
+);
+
+
+
+// Susy Settings
+// -------------
+/// Return a combined map of Susy settings,
+/// based on the factory defaults (`$_susy-defaults`),
+/// user-defined project configuration (`$susy`),
+/// and any local overrides required –
+/// such as a configuration map passed into a function.
+///
+/// @group a-config
+///
+/// @param {maps} $overrides… -
+///   Optional map override of global configuration settings.
+///   See `$susy` above for properties.
+///
+/// @return {map} -
+///   Combined map of Susy configuration settings,
+///   in order of specificity:
+///   any `$overrides...`,
+///   then `$susy` project settings,
+///   and finally the `$_susy-defaults`
+///
+/// @example scss - global settings
+///   @each $key, $value in susy-settings() {
+///     /* #{$key}: #{$value} */
+///   }
+///
+/// @example scss - local settings
+///   $local: ('columns': 1 2 3 5 8);
+///
+///   @each $key, $value in susy-settings($local) {
+///     /* #{$key}: #{$value} */
+///   }
+@function susy-settings(
+  $overrides...
+) {
+  $settings: map-merge($_susy-defaults, $susy);
+
+  @each $config in $overrides {
+    $settings: map-merge($settings, $config);
+  }
+
+  @return $settings;
+}
+
+
+
+// Susy Get
+// --------
+/// Return the current global value of any Susy setting
+///
+/// @group a-config
+///
+/// @param {string} $key -
+///   Setting to retrieve from the configuration.
+///
+/// @return {*} -
+///   Value mapped to `$key` in the configuration maps,
+///   in order of specificity:
+///   `$susy`, then `$_susy-defaults`
+///
+/// @example scss -
+///   /* columns: #{susy-get('columns')} */
+///   /* gutters: #{susy-get('gutters')} */
+@function susy-get(
+  $key
+) {
+  $settings: susy-settings();
+
+  @if not map-has-key($settings, $key) {
+    @return _susy-error(
+      'There is no Susy setting called `#{$key}`',
+      'susy-get');
+  }
+
+  @return map-get($settings, $key);
+}
@@ -0,0 +1,441 @@
+/// Grid Math Engine
+/// ================
+/// The `su` functions give you direct access to the math layer,
+/// without any syntax-sugar like shorthand parsing, and normalization.
+/// If you prefer named arguments, and stripped-down syntax,
+/// you can use these functions directly in your code –
+/// replacing `span`, `gutter`, and `slice`.
+///
+/// These functions are also useful
+/// for building mixins or other extensions to Susy.
+/// Apply the Susy syntax to new mixins and functions,
+/// using our "Plugin Helpers",
+/// or write your own syntax and pass the normalized results along
+/// to `su` for compilation.
+///
+/// @group su-math
+///
+/// @see su-span
+/// @see su-gutter
+/// @see su-slice
+/// @ignore _su-sum
+/// @ignore _su-calc-span
+/// @ignore _su-calc-sum
+/// @ignore _su-needs-calc-output
+
+
+
+// Su Span
+// -------
+/// Calculates and returns a CSS-ready span width,
+/// based on normalized span and context data –
+/// a low-level version of `susy-span`,
+/// with all of the logic and none of the syntax sugar.
+///
+/// - Grids defined with unitless numbers will return `%` values.
+/// - Grids defined with comparable units
+///   will return a value in the units provided.
+/// - Grids defined with a mix of units,
+///   or a combination of untiless numbers and unit-lengths,
+///   will return a `calc()` string.
+///
+/// @group su-math
+/// @see susy-span
+///
+/// @param {number | list} $span -
+///   Number or list of grid columns to span
+/// @param {list} $columns -
+///   List of columns available
+/// @param {number} $gutters -
+///   Width of a gutter in column-comparable units
+/// @param {0 | 1 | -1} $spread -
+///   Number of gutters spanned,
+///   relative to `span` count
+/// @param {0 | 1 | -1} $container-spread [$spread] -
+///   Number of gutters spanned,
+///   relative to `columns` count
+/// @param {integer} $location [1] -
+///   Optional position of sub-span among full set of columns
+///
+/// @return {length} -
+///   Relative or static length of a span on the grid
+@function su-span(
+  $span,
+  $columns,
+  $gutters,
+  $spread,
+  $container-spread: $spread,
+  $location: 1
+) {
+  $span: su-valid-span($span);
+  $columns: su-valid-columns($columns);
+  $gutters: su-valid-gutters($gutters);
+  $spread: su-valid-spread($spread);
+
+  @if (type-of($span) == 'number') {
+    @if (not unitless($span)) {
+      @return $span;
+    }
+
+    $location: su-valid-location($span, $location, $columns);
+    $span: su-slice($span, $columns, $location, $validate: false);
+  }
+
+  @if _su-needs-calc-output($span, $columns, $gutters, $spread, not 'validate') {
+    @return _su-calc-span($span, $columns, $gutters, $spread, $container-spread, not 'validate');
+  }
+
+  $span-width: _su-sum($span, $gutters, $spread, $validate: false);
+
+  @if unitless($span-width) {
+    $container-spread: su-valid-spread($container-spread);
+    $container: _su-sum($columns, $gutters, $container-spread, $validate: false);
+    @return percentage($span-width / $container);
+  }
+
+  @return $span-width;
+}
+
+
+
+// Su Gutter
+// ---------
+/// Calculates and returns a CSS-ready gutter width,
+/// based on normalized grid data –
+/// a low-level version of `susy-gutter`,
+/// with all of the logic and none of the syntax sugar.
+///
+/// - Grids defined with unitless numbers will return `%` values.
+/// - Grids defined with comparable units
+///   will return a value in the units provided.
+/// - Grids defined with a mix of units,
+///   or a combination of untiless numbers and unit-lengths,
+///   will return a `calc()` string.
+///
+/// @group su-math
+/// @see susy-gutter
+///
+/// @param {list} $columns -
+///   List of columns in the grid
+/// @param {number} $gutters -
+///   Width of a gutter in column-comparable units
+/// @param {0 | 1 | -1} $container-spread -
+///   Number of gutters spanned,
+///   relative to `columns` count
+///
+/// @return {length} -
+///   Relative or static length of one gutter in a grid
+@function su-gutter(
+  $columns,
+  $gutters,
+  $container-spread
+) {
+  @if (type-of($gutters) == 'number') {
+    @if ($gutters == 0) or (not unitless($gutters)) {
+      @return $gutters;
+    }
+  }
+
+  @if _su-needs-calc-output($gutters, $columns, $gutters, -1, not 'validate') {
+    @return _su-calc-span($gutters, $columns, $gutters, -1, $container-spread, not 'validate');
+  }
+
+  $container: _su-sum($columns, $gutters, $container-spread);
+  @return percentage($gutters / $container);
+}
+
+
+
+// Su Slice
+// --------
+/// Returns a list of columns
+/// based on a given span/location slice of the grid –
+/// a low-level version of `susy-slice`,
+/// with all of the logic and none of the syntax sugar.
+///
+/// @group su-math
+/// @see susy-slice
+///
+/// @param {number} $span -
+///   Number of grid columns to span
+/// @param {list} $columns -
+///   List of columns in the grid
+/// @param {number} $location [1] -
+///   Starting index of a span in the list of columns
+/// @param {bool} $validate [true] -
+///   Check that arguments are valid before proceeding
+///
+/// @return {list} -
+///   Subset list of grid columns, based on span and location
+@function su-slice(
+  $span,
+  $columns,
+  $location: 1,
+  $validate: true
+) {
+  @if $validate {
+    $columns: su-valid-columns($columns);
+    $location: su-valid-location($span, $location, $columns);
+  }
+
+  $floor: floor($span);
+  $sub-columns: ();
+
+  @for $i from $location to ($location + $floor) {
+    $sub-columns: append($sub-columns, nth($columns, $i));
+  }
+
+  @if $floor != $span {
+    $remainder: $span - $floor;
+    $column: $location + $floor;
+    $sub-columns: append($sub-columns, nth($columns, $column) * $remainder);
+  }
+
+  @return $sub-columns;
+}
+
+
+
+// Su Sum
+// ------
+/// Get the total sum of column-units in a layout.
+///
+/// @group su-math
+/// @access private
+///
+/// @param {list} $columns -
+///   List of columns in the grid
+/// @param {number} $gutters -
+///   Width of a gutter in column-comparable units
+/// @param {0 | 1 | -1} $spread -
+///   Number of gutters spanned,
+///   relative to `columns` count
+/// @param {bool} $validate [true] -
+///   Check that arguments are valid before proceeding
+///
+/// @return {number} -
+///   Total sum of column-units in a grid
+@function _su-sum(
+  $columns,
+  $gutters,
+  $spread,
+  $validate: true
+) {
+  @if $validate {
+    $columns: su-valid-span($columns);
+    $gutters: su-valid-gutters($gutters);
+    $spread: su-valid-spread($spread);
+  }
+
+  // Calculate column-sum
+  $column-sum: 0;
+  @each $column in $columns {
+    $column-sum: $column-sum + $column;
+  }
+
+  $gutter-sum: (ceil(length($columns)) + $spread) * $gutters;
+  $total: if(($gutter-sum > 0), $column-sum + $gutter-sum, $column-sum);
+
+  @return $total;
+}
+
+
+
+// Su Calc
+// -------
+/// Return a usable span width as a `calc()` function,
+/// in order to create mixed-unit grids.
+///
+/// @group su-math
+/// @access private
+///
+/// @param {number | list} $span -
+///   Pre-sliced list of grid columns to span
+/// @param {list} $columns -
+///   List of columns available
+/// @param {number} $gutters -
+///   Width of a gutter in column-comparable units
+/// @param {0 | 1 | -1} $spread -
+///   Number of gutters spanned,
+///   relative to `span` count
+/// @param {0 | 1 | -1} $container-spread [$spread] -
+///   Number of gutters spanned,
+///   relative to `columns` count
+/// @param {bool} $validate [true] -
+///   Check that arguments are valid before proceeding
+///
+/// @return {length} -
+///   Relative or static length of a span on the grid
+@function _su-calc-span(
+  $span,
+  $columns,
+  $gutters,
+  $spread,
+  $container-spread: $spread,
+  $validate: true
+) {
+  @if $validate {
+    $span: su-valid-span($span);
+    $columns: su-valid-columns($columns);
+    $gutters: su-valid-gutters($gutters);
+    $spread: su-valid-spread($spread);
+    $container-spread: su-valid-spread($container-spread);
+  }
+
+  // Span and context
+  $span: _su-calc-sum($span, $gutters, $spread, not 'validate');
+  $context: _su-calc-sum($columns, $gutters, $container-spread, not 'validate');
+
+  // Fixed and fluid
+  $fixed-span: map-get($span, 'fixed');
+  $fluid-span: map-get($span, 'fluid');
+  $fixed-context: map-get($context, 'fixed');
+  $fluid-context: map-get($context, 'fluid');
+
+  $calc: '#{$fixed-span}';
+  $fluid-calc: '(100% - #{$fixed-context})';
+
+  // Fluid-values
+  @if (not $fluid-span) {
+    $fluid-calc: null;
+  } @else if ($fluid-span != $fluid-context) {
+    $fluid-span: '* #{$fluid-span}';
+    $fluid-context: if($fluid-context, '/ #{$fluid-context}', '');
+    $fluid-calc: '(#{$fluid-calc $fluid-context $fluid-span})';
+  }
+
+  @if $fluid-calc {
+    $calc: if(($calc != ''), '#{$calc} + ', '');
+    $calc: '#{$calc + $fluid-calc}';
+  }
+
+  @return calc(#{unquote($calc)});
+}
+
+
+
+// Su Calc-Sum
+// -----------
+/// Get the total sum of fixed and fluid column-units
+/// for creating a mixed-unit layout with `calc()` values.
+///
+/// @group su-math
+/// @access private
+///
+/// @param {list} $columns -
+///   List of columns available
+/// @param {number} $gutters -
+///   Width of a gutter in column-comparable units
+/// @param {0 | 1 | -1} $spread -
+///   Number of gutters spanned,
+///   relative to `span` count
+/// @param {bool} $validate [true] -
+///   Check that arguments are valid before proceeding
+///
+/// @return {map} -
+///   Map with `fixed` and `fluid` keys
+///   containing the proper math as strings
+@function _su-calc-sum(
+  $columns,
+  $gutters,
+  $spread,
+  $validate: true
+) {
+  @if $validate {
+    $columns: su-valid-span($columns);
+    $gutters: su-valid-gutters($gutters);
+    $spread: su-valid-spread($spread);
+  }
+
+  $fluid: 0;
+  $fixed: ();
+  $calc: null;
+
+  // Gutters
+  $gutters:  $gutters * (length($columns) + $spread);
+
+  // Columns
+  @each $col in append($columns, $gutters) {
+    @if unitless($col) {
+      $fluid: $fluid + $col;
+    } @else {
+      $fixed: _su-map-add-units($fixed, $col);
+    }
+  }
+
+  // Compile Fixed Units
+  @each $unit, $total in $fixed {
+    @if ($total != (0 * $total)) {
+      $calc: if($calc, '#{$calc} + #{$total}', '#{$total}');
+    }
+  }
+
+  // Calc null or string
+  @if $calc {
+    $calc: if(str-index($calc, '+'), '(#{$calc})', '#{$calc}');
+  }
+
+  // Fluid 0 => null
+  $fluid: if(($fluid == 0), null, $fluid);
+
+
+  // Return map
+  $return: (
+    'fixed': $calc,
+    'fluid': $fluid,
+  );
+
+  @return $return;
+}
+
+
+
+// Needs Calc
+// ----------
+/// Check if `calc()` will be needed in defining a span,
+/// if the necessary units in a grid are not comparable.
+///
+/// @group su-math
+/// @access private
+///
+/// @param {list} $span -
+///   Slice of columns to span
+/// @param {list} $columns -
+///   List of available columns in the grid
+/// @param {number} $gutters -
+///   Width of a gutter
+/// @param {0 | 1 | -1} $spread -
+///   Number of gutters spanned,
+///   relative to `span` count
+/// @param {bool} $validate [true] -
+///   Check that arguments are valid before proceeding
+///
+/// @return {bool} -
+///   `True` when units do not match, and `calc()` will be required
+@function _su-needs-calc-output(
+  $span,
+  $columns,
+  $gutters,
+  $spread,
+  $validate: true
+) {
+  @if $validate {
+    $span: su-valid-span($span);
+    $columns: su-valid-columns($columns);
+    $gutters: su-valid-gutters($gutters);
+  }
+
+  $has-gutter: if((length($span) > 1) or ($spread >= 0), true, false);
+  $check: if($has-gutter, append($span, $gutters), $span);
+  $safe-span: _su-is-comparable($check...);
+
+  @if ($safe-span == 'static') {
+    @return false;
+  } @else if (not $safe-span) {
+    @return true;
+  }
+
+  $safe-fluid: _su-is-comparable($gutters, $columns...);
+
+  @return not $safe-fluid;
+}
@@ -0,0 +1,213 @@
+/// Validation
+/// ==========
+/// Each argument to Su has a single canonical syntax.
+/// These validation functions check to ensure
+/// that each argument is valid,
+/// in order to provide useful errors
+/// before attempting to calculate the results/
+///
+/// @group x-validation
+///
+/// @see su-valid-columns
+/// @see su-valid-gutters
+/// @see su-valid-spread
+/// @see su-valid-location
+
+
+
+// Valid Span
+// ----------
+/// Check that the `span` argument
+/// is a number, length, or column-list
+///
+/// @group x-validation
+///
+/// @param {number | list} $span -
+///   Number of columns, or length of span
+///
+/// @return {number | list} -
+///   Validated `$span` number, length, or columns list
+///
+/// @throw
+///   when span value is not a number, or valid column list
+@function su-valid-span(
+  $span
+) {
+  $type: type-of($span);
+  @if ($type == 'number') {
+    @return $span;
+  } @else if ($type == 'list') and su-valid-columns($span, 'silent-failure') {
+    @return $span;
+  }
+
+  $actual: '[#{type-of($span)}] `#{inspect($span)}`';
+  @return _susy-error(
+    '#{$actual} is not a valid number, length, or column-list for $span.',
+    'su-valid-span');
+}
+
+
+
+// Valid Columns
+// -------------
+/// Check that the `columns` argument is a valid
+/// list of column-lengths
+///
+/// @group x-validation
+///
+/// @param {list} $columns -
+///   List of column-lengths
+/// @param {bool} $silent-failure [true] -
+///   Set false to return null on failure
+///
+/// @return {list} -
+///   Validated `$columns` list
+///
+/// @throw
+///   when column value is not a valid list of numbers
+@function su-valid-columns(
+  $columns,
+  $silent-failure: false
+) {
+  @if (type-of($columns) == 'list') {
+    $fail: false;
+
+    @each $col in $columns {
+      @if (type-of($col) != 'number') {
+        $fail: true;
+      }
+    }
+
+    @if not $fail {
+      @return $columns;
+    }
+  }
+
+  // Silent Failure
+  @if $silent-failure {
+    @return null;
+  }
+
+  // Error Message
+  $actual: '[#{type-of($columns)}] `#{inspect($columns)}`';
+
+  @return _susy-error(
+    '#{$actual} is not a valid list of numbers for $columns.',
+    'su-valid-columns');
+}
+
+
+
+// Valid Gutters
+// -------------
+/// Check that the `gutters` argument is a valid number
+///
+/// @group x-validation
+///
+/// @param {number} $gutters -
+///   Width of a gutter
+///
+/// @return {number} -
+///   Validated `$gutters` number
+///
+/// @throw
+///   when gutter value is not a number
+@function su-valid-gutters(
+  $gutters
+) {
+  $type: type-of($gutters);
+
+  @if ($type == 'number') {
+    @return $gutters;
+  }
+
+  $actual: '[#{$type}] `#{inspect($gutters)}`';
+  @return _susy-error(
+    '#{$actual} is not a number or length for $gutters.',
+    'su-valid-gutters');
+}
+
+
+
+// Valid Spread
+// ------------
+/// Check that the `spread` argument is a valid
+/// intiger between `-1` and `1`
+///
+/// @group x-validation
+///
+/// @param {0 | 1 | -1} $spread -
+///   Number of gutters to include in a span,
+///   relative to the number columns
+///
+/// @return {0 | 1 | -1} -
+///   Validated `$spread` number
+///
+/// @throw
+///   when spread value is not a valid spread
+@function su-valid-spread(
+  $spread
+) {
+  @if index(0 1 -1, $spread) {
+    @return $spread;
+  }
+
+  $actual: '[#{type-of($spread)}] `#{inspect($spread)}`';
+  @return _susy-error(
+    '#{$actual} is not a normalized [0 | 1 | -1] value for `$spread`.',
+    'su-valid-spread');
+}
+
+
+
+// Valid Location
+// --------------
+/// Check that the `location` argument is a valid number,
+/// within the scope of available columns
+///
+/// @group x-validation
+///
+/// @param {number} $span -
+///   Number of grid-columns to be spanned
+/// @param {integer | string} $location -
+///   Starting (1-indexed) column-position of that span
+/// @param {list} $columns -
+///   List of available columns in the grid
+///
+/// @return {integer} -
+///   Validated `$location` intiger
+///
+/// @throw
+///   when location value is not a valid index,
+///   given the context and span.
+@function su-valid-location(
+  $span,
+  $location,
+  $columns
+) {
+  $count: length($columns);
+
+  @if $location {
+    @if (type-of($location) != 'number') or (not unitless($location)) {
+      $actual: '[#{type-of($location)}] `#{$location}`';
+      @return _susy-error(
+        '#{$actual} is not a unitless number for $location.',
+        'su-valid-location');
+    } @else if (round($location) != $location) {
+      @return _susy-error(
+        'Location (`#{$location}`) must be a 1-indexed intiger position.',
+        'su-valid-location');
+    } @else if ($location > $count) or ($location < 1) {
+      @return _susy-error(
+        'Position `#{$location}` does not exist in grid `#{$columns}`.',
+        'su-valid-location');
+    } @else if ($location + $span - 1 > $count) {
+      $details: 'grid `#{$columns}` for span `#{$span}` at `#{$location}`';
+      @return _susy-error(
+        'There are not enough columns in #{$details}.',
+        'su-valid-location');
+    }
+  }
+
+  @return $location;
+}
@@ -0,0 +1,191 @@
+/// Syntax Utilities for Extending Susy
+/// ===================================
+/// There are many steps involved
+/// when translating between the Susy syntax layer,
+/// and the Su core math.
+/// That entire process can be condensed with these two functions.
+/// For anyone that wants to access the full power of Susy,
+/// and build their own plugins, functions, or mixins –
+/// this is the primary API for compiling user input,
+/// and accessing the core math.
+///
+/// This is the same technique we use internally,
+/// to keep our API layer simple and light-weight.
+/// Every function accepts two arguments,
+/// a "shorthand" description of the span or context,
+/// and an optional settings-map to override global defaults.
+///
+/// - Use `susy-compile()` to parse, merge, and normalize
+///   all the user settings into a single map.
+/// - Then use `su-call()` to call one of the core math functions,
+///   with whatever data is needed for that function.
+///
+/// @group plugin-utils
+/// @see susy-compile
+/// @see su-call
+///
+/// @example scss - Susy API `gutter` function
+///   @function susy-gutter(
+///     $context: susy-get('columns'),
+///     $config: ()
+///   ) {
+///     // compile and normalize all user arguments and global settings
+///     $context: susy-compile($context, $config, 'context-only');
+///     // call `su-gutter` with the appropriate data
+///     @return su-call('su-gutter', $context);
+///   }
+///
+/// @example scss - Sample `span` mixin for floated grids
+///   @mixin span(
+///     $span,
+///     $config: ()
+///   ) {
+///     $context: susy-compile($span, $config);
+///     width: su-call('su-span', $context);
+///
+///     @if index($span, 'last') {
+///       float: right;
+///     } @else {
+///       float: left;
+///       margin-right: su-call('su-gutter', $context);
+///     }
+///   }
+
+
+
+// Compile
+// -------
+/// Susy's syntax layer has various moving parts,
+/// with syntax-parsing for the grid/span shorthand,
+/// and normalization for each of the resulting values.
+/// The compile function rolls this all together
+/// in a single call –
+/// for quick access from our internal API functions,
+/// or any additional functions and mixins you add to your project.
+/// Pass user input and configuration maps to the compiler,
+/// and it will hand back a map of values ready for Su.
+/// Combine this with the `su-call` function
+/// to quickly parse, normalize, and process grid calculations.
+///
+/// @group plugin-utils
+/// @see su-call
+///
+/// @param {list | map} $shorthand -
+///   Shorthand expression to define the width of the span,
+///   optionally containing:
+///   - a count, length, or column-list span;
+///   - `at $n`, `first`, or `last` location on asymmetrical grids;
+///   - `narrow`, `wide`, or `wider` for optionally spreading
+///     across adjacent gutters;
+///   - `of $n <spread>` for available grid columns
+///     and spread of the container
+///     (span counts like `of 6` are only valid
+///     in the context of symmetrical grids);
+///   - and `set-gutters $n` to override global gutter settings
+/// @param {map} $config [null] -
+///   Optional map of Susy grid configuration settings
+/// @param {bool} $context-only [false] -
+///   Allow the parser to ignore span and span-spread values,
+///   only parsing context and container-spread
+///
+/// @return {map} -
+///   Parsed and normalized map of settings,
+///   based on global and local configuration,
+///   alongwith shorthad adjustments.
+///
+/// @example scss -
+///   $user-input: 3 wide of susy-repeat(6, 120px) set-gutters 10px;
+///   $grid-data: susy-compile($user-input, $susy);
+///
+///   @each $key, $value in $grid-data {
+///     /* #{$key}: #{$value}, */
+///   }
+@function susy-compile(
+  $short,
+  $config: null,
+  $context-only: false
+) {
+  // Get and normalize config
+  $config: if($config, susy-settings($config), susy-settings());
+  $normal-config: susy-normalize($config);
+
+  // Parse and normalize shorthand
+  @if (type-of($short) != 'map') and (length($short) > 0) {
+    $short: susy-parse($short, $context-only);
+  }
+
+  $normal-short: susy-normalize($short, $normal-config);
+
+  // Merge and return
+  @return map-merge($normal-config, $normal-short);
+}
+
+
+
+// Call
+// ----
+/// The Susy parsing and normalization process
+/// results in a map of configuration settings,
+/// much like the global `$susy` settings map.
+/// In order to pass that information along to Su math functions,
+/// the proper values have to be picked out,
+/// and converted to arguments.
+///
+/// The `su-call` function streamlines that process,
+/// weeding out the unnecessary data,
+/// and passing the rest along to Su in the proper format.
+/// Combine this with `susy-compile` to quickly parse,
+/// normalize, and process grid calculations.
+///
+/// @group plugin-utils
+///
+/// @require su-span
+/// @require su-gutter
+/// @require su-slice
+/// @see susy-compile
+///
+/// @param {'su-span' | 'su-gutter' | 'su-slice'} $name -
+///   Name of the Su math function to call.
+/// @param {map} $config -
+///   Parsed and normalized map of Susy configuration settings
+///   to use for math-function arguments.
+///
+/// @return {*} -
+///   Results of the function being called.
+///
+/// @example scss -
+///   $user-input: 3 wide of susy-repeat(6, 120px) set-gutters 10px;
+///   $grid-data: susy-compile($user-input, $susy);
+///
+///   .su-span {
+///     width: su-call('su-span', $grid-data);
+///   }
+@function su-call(
+  $name,
+  $config
+) {
+  $grid-function-args: (
+    'su-span': ('span', 'columns', 'gutters', 'spread', 'container-spread', 'location'),
+    'su-gutter': ('columns', 'gutters', 'container-spread'),
+    'su-slice': ('span', 'columns', 'location'),
+  );
+
+  $args: map-get($grid-function-args, $name);
+
+  @if not $args {
+    $options: 'Try one of these: #{map-keys($grid-function-args)}';
+    @return _susy-error(
+      '#{$name} is not a public Su function. #{$options}',
+      'su-call');
+  }
+
+  $call: if(function-exists('get-function'), get-function($name), $name);
+  $output: ();
+
+  @each $arg in $args {
+    $value: map-get($config, $arg);
+    $output: if($value, map-merge($output, ($arg: $value)), $output);
+  }
+
+  @return call($call, $output...);
+}
@@ -0,0 +1,56 @@
+// Unprefix Susy
+// =============
+
+
+// Span
+// ----
+/// Un-prefixed alias for `susy-span`
+/// (available by default)
+///
+/// @group api
+/// @alias susy-span
+///
+/// @param {list} $span
+/// @param {map} $config [()]
+@function span(
+  $span,
+  $config: ()
+) {
+  @return susy-span($span, $config);
+}
+
+
+// Gutter
+// ------
+/// Un-prefixed alias for `susy-gutter`
+/// (available by default)
+///
+/// @group api
+/// @alias susy-gutter
+///
+/// @param {integer | list} $context [null] -
+/// @param {map} $config [()]
+@function gutter(
+  $context: susy-get('columns'),
+  $config: ()
+) {
+  @return susy-gutter($context, $config);
+}
+
+
+// Slice
+// -----
+/// Un-prefixed alias for `susy-slice`
+/// (available by default)
+///
+/// @group api
+/// @alias susy-slice
+///
+/// @param {list} $span
+/// @param {map} $config [()]
+@function slice(
+  $span,
+  $config: ()
+) {
+  @return susy-slice($span, $config);
+}
@@ -0,0 +1,167 @@
+// Sass Utilities
+// ==============
+// - Susy Error Output Override [variable]
+// - Susy Error [function]
+
+
+
+// Susy Error Output Override
+// --------------------------
+/// Turn off error output for testing
+/// @group x-utility
+/// @access private
+$_susy-error-output-override: false !default;
+
+
+
+// Susy Error
+// ----------
+/// Optionally return error messages without failing,
+/// as a way to test error cases
+///
+/// @group x-utility
+/// @access private
+///
+/// @param {string} $message -
+///   A useful error message, explaining the problem
+/// @param {string} $source -
+///   The original source of the error for debugging
+/// @param {bool} $override [$_susy-error-output-override] -
+///   Optionally return the error rather than failing
+/// @return {string} -
+///   Combined error with source and message
+/// @throws When `$override == true`
+@function _susy-error(
+  $message,
+  $source,
+  $override: $_susy-error-output-override
+) {
+  @if $override {
+    @return 'ERROR [#{$source}] #{$message}';
+  }
+
+  @error '[#{$source}] #{$message}';
+}
+
+
+// Su Is Comparable
+// ----------------
+/// Check that the units in a grid are comparable
+///
+/// @group x-validation
+/// @access private
+///
+/// @param {numbers} $lengths… -
+///   Arglist of all the number values to compare
+///   (columns, gutters, span, etc)
+///
+/// @return {'fluid' | 'static' | false} -
+///   The type of span (fluid or static) when units match,
+///   or `false` for mismatched units
+@function _su-is-comparable(
+  $lengths...
+) {
+  $first: nth($lengths, 1);
+
+  @if (length($lengths) == 1) {
+    @return if(unitless($first), 'fluid', 'static');
+  }
+
+  @for $i from 2 through length($lengths) {
+    $comp: nth($lengths, $i);
+
+    $fail: not comparable($first, $comp);
+    $fail: $fail or (unitless($first) and not unitless($comp));
+    $fail: $fail or (unitless($comp) and not unitless($first));
+
+    @if $fail {
+      @return false;
+    }
+  }
+
+  @return if(unitless($first), 'fluid', 'static');
+}
+
+
+// Su Map Add Units
+// ----------------
+/// The calc features use a map of units and values
+/// to compile the proper algorythm.
+/// This function adds a new value to any comparable existing unit/value,
+/// or adds a new unit/value pair to the map
+///
+/// @group x-utility
+/// @access private
+///
+/// @param {map} $map -
+///   A map of unit/value pairs, e.g. ('px': 120px)
+/// @param {length} $value -
+///   A new length to be added to the map
+/// @return {map} -
+///   The updated map, with new value added
+///
+/// @example scss -
+///   $map: (0px: 120px);
+///   $map: _su-map-add-units($map, 1in); // add a comparable unit
+///   $map: _su-map-add-units($map, 3vw); // add a new unit
+///
+///   @each $units, $value in $map {
+///     /* #{$units}: #{$value} */
+///   }
+@function _su-map-add-units(
+  $map,
+  $value
+) {
+  $unit: $value * 0;
+  $has: map-get($map, $unit) or 0;
+
+  @if ($has == 0) {
+    @each $try, $could in $map {
+      $match: comparable($try, $value);
+      $unit: if($match, $try, $unit);
+      $has: if($match, $could, $has);
+    }
+  }
+
+  @return map-merge($map, ($unit: $has + $value));
+}
+
+
+// Susy Flatten
+// ------------
+/// Flatten a multidimensional list
+///
+/// @group x-utility
+/// @access private
+///
+/// @param {list} $list -
+///   The list to be flattened
+/// @return {list} -
+///   The flattened list
+///
+/// @example scss -
+///   $list: 120px (30em 30em) 120px;
+///   /* #{_susy-flatten($list)} */
+@function _susy-flatten(
+  $list
+) {
+  $flat: ();
+
+  // Don't iterate over maps
+  @if (type-of($list) == 'map') {
+    @return $list;
+  }
+
+  // Iterate over lists (or single items)
+  @each $item in $list {
+    @if (type-of($item) == 'list') {
+      $item: _susy-flatten($item);
+      $flat: join($flat, $item);
+    } @else {
+      $flat: append($flat, $item);
+    }
+  }
+
+  // Return flattened list
+  @return $flat;
+}
@@ -1,4 +0,0 @@
-// Susy
-// ====
-
-@import 'susy/language/susy';
--- a/Show More
+++ b/Show More