Upgrade to Susy 3 and replace grid mixins with new span and `gutter…

…` functions

Most of Susy's mixins have been deprecated, `@include container()`, `@include full()`, `@include span()`, `@include prefix()`, `@include suffix()`, `@include gallery()`, etc.

Fixes #1114

_sass/minimal-mistakes/_archive.scss

@@ -6,12 +6,13 @@
  margin-bottom: 2em;
 
  @include breakpoint($medium) {
- @include span(12 of 12);
+ width: span(12 of 12);
  }
 
  @include breakpoint($large) {
- @include span(10 of 12 last);
- @include prefix(0.5 of 12);
+ float: right;
+ padding-left: gutter(0.5 of 12);
+ width: span(10 of 12);
  }
 
  a {
@@ -108,6 +109,50 @@
 .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,27 +164,21 @@
 
  .archive__item-excerpt {
  display: none;
- }
 
- @include breakpoint($small) {
- @include gallery(5 of 10);
- .archive__item-teaser {
- max-height: 200px;
+ @include breakpoint($medium) {
+ display: block;
+ font-size: $type-size-6;
  }
  }
 
- @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 {
 
- .archive__item-teaser {
- max-height: 120px;
+ @include breakpoint($small) {
+ max-height: 200px;
  }
 
- .archive__item-excerpt {
- display: block;
- font-size: $type-size-6;
+ @include breakpoint($medium) {
+ max-height: 120px;
  }
  }
 }
@@ -160,8 +199,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,28 +225,39 @@
  }
 
  &--left {
- @include full();
+ float: left;
+ margin-left: 0;
+ margin-right: 0;
+ width: 100%;
+ clear: both;
  font-size: 1.25rem;
 
  .archive__item-teaser {
  margin-bottom: 2em;
  }
 
  @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 +268,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 {

_sass/minimal-mistakes/_footer.scss

@@ -3,13 +3,15 @@
  ========================================================================== */
 
 .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;
@@ -22,9 +24,11 @@
  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) {

_sass/minimal-mistakes/_masthead.scss

@@ -12,13 +12,15 @@
  z-index: 20;
 
  &__inner-wrap {
- @include container;
  @include clearfix;
+ margin-left: auto;
+ margin-right: auto;
+ padding: 1em;
+ max-width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
- justify-content: space-between;
- padding: 1em 1em 1em;
+ justify-content: space-between;
  font-family: $sans-serif-narrow;
 
  @include breakpoint($x-large) {
@@ -47,7 +49,11 @@
 }
 
 .masthead__menu {
+ float: left;
+ margin-left: 0;
+ margin-right: 0;
  width: 100%;
+ clear: both;
 
  .site-nav {
  margin-left: 0;

_sass/minimal-mistakes/_navigation.scss

@@ -7,10 +7,9 @@
  ========================================================================== */
 
 .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;
@@ -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,10 @@
  ========================================================================== */
 
 .pagination {
- @include full();
  @include clearfix();
  margin-top: 1em;
  padding-top: 1em;
+ width: 100%;
 
  ul {
  margin: 0;

_sass/minimal-mistakes/_page.scss

@@ -3,11 +3,13 @@
  ========================================================================== */
 
 #main {
- @include container;
  @include clearfix;
+ margin-left: auto;
  margin-top: 2em;
+ margin-right: auto;
  padding-left: 1em;
  padding-right: 1em;
+ max-width: 100%;
  -webkit-animation: intro 0.3s both;
  animation: intro 0.3s both;
  -webkit-animation-delay: 0.35s;
@@ -19,19 +21,29 @@
 }
 
 .page {
+
  @include breakpoint($large) {
- @include span(10 of 12 last);
- @include prefix(0.5 of 12);
- @include suffix(2 of 12);
+ float: right;
+ width: span(10 of 12);
+ padding-left: gutter(0.5 of 12);
+ padding-right: gutter(2 of 12);
  }
 
  .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();
+ float: left;
+ margin-left: 0;
+ margin-right: 0;
+ width: 100%;
+ clear: both;
  }
  }
 }
@@ -288,7 +300,11 @@
  ========================================================================== */
 
 .page__comments {
- @include full();
+ float: left;
+ margin-left: 0;
+ margin-right: 0;
+ width: 100%;
+ clear: both;
 }
 
 .page__comments-title {
@@ -385,14 +401,17 @@
  ========================================================================== */
 
 .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: span(10 of 12);
+ padding-left: gutter(0.5 of 12);
+ padding-right: gutter(2 of 12);
  }
 
  a {