steffen/website
1
0
Fork 0
Code Actions Packages Releases Activity

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

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

Fixes #1114
This commit is contained in:
Michael Rose
2017-07-21 16:08:29 -04:00
parent 52a791f40b
commit 387f8149d6
156 changed files with 5354 additions and 8254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
_sass/minimal-mistakes/_archive.scss
View File

@ -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,29 +164,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 +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,7 +225,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 +237,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 +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 {