Skip to content

Commit

Permalink
Upgrade to Susy 3 and replace grid mixins with new span and `gutter…
Browse files Browse the repository at this point in the history 
…` functions

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

Fixes mmistakes#1114
  • Loading branch information
@mmistakes
mmistakes committed Jul 21, 2017
1 parent a53c5a4 commit d88bd7b
Show file tree
Hide file tree
Showing 156 changed files with 5,346 additions and 8,246 deletions.
130 changes: 101 additions & 29 deletions _sass/minimal-mistakes/_archive.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
}
}
}
Expand All @@ -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;
Expand All @@ -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 {
Expand All @@ -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 {
Expand Down
12 changes: 8 additions & 4 deletions _sass/minimal-mistakes/_footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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) {
Expand Down
12 changes: 9 additions & 3 deletions _sass/minimal-mistakes/_masthead.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -47,7 +49,11 @@
}

.masthead__menu {
float: left;
margin-left: 0;
margin-right: 0;
width: 100%;
clear: both;

.site-nav {
margin-left: 0;
Expand Down
12 changes: 6 additions & 6 deletions _sass/minimal-mistakes/_navigation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
}
}

Expand All @@ -57,10 +57,10 @@
========================================================================== */

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

ul {
margin: 0;
Expand Down
39 changes: 29 additions & 10 deletions _sass/minimal-mistakes/_page.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
}
}
Expand Down Expand Up @@ -288,7 +300,11 @@
========================================================================== */

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

.page__comments-title {
Expand Down Expand Up @@ -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 {
Expand Down
Loading

0 comments on commit d88bd7b

Please sign in to comment.