Skip to content

Commit a547477

Browse files
mmistakesbobwhitelock
authored andcommittedJul 23, 2017
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 mmistakes#1114
1 parent 822fa4d commit a547477

File tree

156 files changed

+5346
-8246
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

156 files changed

+5346
-8246
lines changed
 

‎_sass/minimal-mistakes/_archive.scss

+101-29
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@
66
margin-bottom: 2em;
77

88
@include breakpoint($medium) {
9-
@include span(12 of 12);
9+
width: span(12 of 12);
1010
}
1111

1212
@include breakpoint($large) {
13-
@include span(10 of 12 last);
14-
@include prefix(0.5 of 12);
13+
float: right;
14+
padding-left: gutter(0.5 of 12);
15+
width: span(10 of 12);
1516
}
1617

1718
a {
@@ -108,6 +109,50 @@
108109
.grid__item {
109110
margin-bottom: 2em;
110111

112+
@include breakpoint($small) {
113+
float: left;
114+
width: span(5 of 10);
115+
116+
&:nth-child(2n+1) {
117+
clear: both;
118+
margin-left: 0;
119+
}
120+
121+
&:nth-child(2n+2) {
122+
clear: none;
123+
margin-left: gutter(of 10);
124+
}
125+
}
126+
127+
@include breakpoint($medium) {
128+
margin-left: 0; /* override margin*/
129+
margin-right: 0; /* override margin*/
130+
width: span(3 of 12);
131+
132+
&:nth-child(2n+1) {
133+
clear: none;
134+
}
135+
136+
&:nth-child(4n+1) {
137+
clear: both;
138+
}
139+
140+
&:nth-child(4n+2) {
141+
clear: none;
142+
margin-left: gutter(1 of 12);
143+
}
144+
145+
&:nth-child(4n+3) {
146+
clear: none;
147+
margin-left: gutter(1 of 12);
148+
}
149+
150+
&:nth-child(4n+4) {
151+
clear: none;
152+
margin-left: gutter(1 of 12);
153+
}
154+
}
155+
111156
.page__meta {
112157
margin: 0 0 4px;
113158
}
@@ -119,27 +164,21 @@
119164

120165
.archive__item-excerpt {
121166
display: none;
122-
}
123167

124-
@include breakpoint($small) {
125-
@include gallery(5 of 10);
126-
.archive__item-teaser {
127-
max-height: 200px;
168+
@include breakpoint($medium) {
169+
display: block;
170+
font-size: $type-size-6;
128171
}
129172
}
130173

131-
@include breakpoint($medium) {
132-
margin-left: 0; /* reset before mixin does its thing*/
133-
margin-right: 0; /* reset before mixin does its thing*/
134-
@include gallery(2.5 of 10);
174+
.archive__item-teaser {
135175

136-
.archive__item-teaser {
137-
max-height: 120px;
176+
@include breakpoint($small) {
177+
max-height: 200px;
138178
}
139179

140-
.archive__item-excerpt {
141-
display: block;
142-
font-size: $type-size-6;
180+
@include breakpoint($medium) {
181+
max-height: 120px;
143182
}
144183
}
145184
}
@@ -160,8 +199,24 @@
160199
font-size: 1.25rem;
161200

162201
@include breakpoint($small) {
202+
float: left;
163203
margin-bottom: 0;
164-
@include gallery(4 of 12);
204+
width: span(4 of 12);
205+
206+
&:nth-child(3n+1) {
207+
clear: both;
208+
margin-left: 0;
209+
}
210+
211+
&:nth-child(3n+2) {
212+
clear: none;
213+
margin-left: gutter(of 12);
214+
}
215+
216+
&:nth-child(3n+3) {
217+
clear: none;
218+
margin-left: gutter(of 12);
219+
}
165220

166221
.feature__item-teaser {
167222
max-height: 200px;
@@ -170,28 +225,39 @@
170225
}
171226

172227
&--left {
173-
@include full();
228+
float: left;
229+
margin-left: 0;
230+
margin-right: 0;
231+
width: 100%;
232+
clear: both;
174233
font-size: 1.25rem;
175234

176235
.archive__item-teaser {
177236
margin-bottom: 2em;
178237
}
179238

180239
@include breakpoint($small) {
240+
181241
.archive__item-teaser {
182-
@include span(5 of 12);
242+
float: left;
243+
width: span(5 of 12);
183244
}
184245

185246
.archive__item-body {
186-
@include span(7 of 12 last);
187-
@include prefix(0.5 of 12);
188-
@include suffix(1 of 12);
247+
float: right;
248+
padding-left: gutter(0.5 of 12);
249+
padding-right: gutter(1 of 12);
250+
width: span(7 of 12);
189251
}
190252
}
191253
}
192254

193255
&--right {
194-
@include full();
256+
float: left;
257+
margin-left: 0;
258+
margin-right: 0;
259+
width: 100%;
260+
clear: both;
195261
font-size: 1.25rem;
196262

197263
.archive__item-teaser {
@@ -202,19 +268,25 @@
202268
text-align: right;
203269

204270
.archive__item-teaser {
205-
@include span(5 of 12 rtl);
271+
float: right;
272+
width: span(5 of 12);
206273
}
207274

208275
.archive__item-body {
209-
@include span(7 of 12 last rtl);
210-
@include prefix(0.5 of 12);
211-
@include suffix(1 of 12);
276+
float: right;
277+
width: span(7 of 12);
278+
padding-left: gutter(0.5 of 12);
279+
padding-right: gutter(1 of 12);
212280
}
213281
}
214282
}
215283

216284
&--center {
217-
@include full();
285+
float: left;
286+
margin-left: 0;
287+
margin-right: 0;
288+
width: 100%;
289+
clear: both;
218290
font-size: 1.25rem;
219291

220292
.archive__item-teaser {

‎_sass/minimal-mistakes/_footer.scss

+8-4
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@
33
========================================================================== */
44

55
.page__footer {
6-
@include full();
76
@include clearfix;
7+
float: left;
8+
margin-left: 0;
9+
margin-right: 0;
10+
width: 100%;
11+
clear: both;
812
/* sticky footer fix start */
913
position: absolute;
1014
bottom: 0;
11-
width: 100%;
12-
clear: both;
1315
height: auto;
1416
/* sticky footer fix end */
1517
margin-top: 3em;
@@ -22,9 +24,11 @@
2224
border-top: 1px solid $light-gray;
2325

2426
footer {
25-
@include container;
2627
@include clearfix;
28+
margin-left: auto;
29+
margin-right: auto;
2730
margin-top: 2em;
31+
max-width: 100%;
2832
padding: 0 1em 2em;
2933

3034
@include breakpoint($x-large) {

0 commit comments

Comments
 (0)
Please sign in to comment.