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
mmistakes · Jul 21, 2017 · 387f814 · 387f814
1 parent 52a791f
commit 387f814
Show file tree

Hide file tree

Showing 156 changed files with 5,346 additions and 8,246 deletions.
diff --git a/_sass/minimal-mistakes/_archive.scss b/_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 {

diff --git a/_sass/minimal-mistakes/_footer.scss b/_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) {

diff --git a/_sass/minimal-mistakes/_masthead.scss b/_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;

diff --git a/_sass/minimal-mistakes/_navigation.scss b/_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;

diff --git a/_sass/minimal-mistakes/_page.scss b/_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 {