cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: additional formatting w/prettier

Browse source
This commit is contained in:
Cory Dransfeldt 2023-03-25 14:09:26 -07:00
parent ea75e585e1
commit ee77555c32
No known key found for this signature in database
39 changed files with 1544 additions and 1584 deletions
Download patch file Download diff file Expand all files Collapse all files

94
src/posts/2016/generating-responsive-css-grid-neat.md
View file

@ -9,61 +9,61 @@ I use a responsive grid system for this site (and a number of other projects) th
```scss
.grid {
&-main-container {
@include outer-container;
&-main-container {
@include outer-container;
}
&-row {
@include row;
@include pad(0 10%);
@media only screen and (max-width: 640px) {
@include pad(0 10%);
}
&-row {
@include row;
@include pad(0 10%);
@media only screen and (max-width: 640px) {
@include pad(0 10%);
}
&.collapse {
@media only screen and (max-width: 640px) {
@include pad(0);
}
}
.grid-row {
// collapse nested grid rows
@include pad(0);
}
&.collapse {
@media only screen and (max-width: 640px) {
@include pad(0);
}
}
$grid-columns: 12;
@for $i from 0 through $grid-columns {
&-columns-#{$i} {
@include span-columns($i);
}
&-columns-small-#{$i} {
@include span-columns($i);
@media only screen and (max-width: 640px) {
@include span-columns(12);
}
}
.grid-row {
// collapse nested grid rows
@include pad(0);
}
@for $i from 0 through $grid-columns {
&-shift-left-#{$i} {
@include shift(-$i);
}
}
&-shift-right-#{$i} {
@include shift($i);
}
$grid-columns: 12;
@media only screen and (max-width: 640px) {
&-shift-left-#{$i},
&-shift-right-#{$i} {
@include shift(0);
}
}
@for $i from 0 through $grid-columns {
&-columns-#{$i} {
@include span-columns($i);
}
&-columns-small-#{$i} {
@include span-columns($i);
@media only screen and (max-width: 640px) {
@include span-columns(12);
}
}
}
@for $i from 0 through $grid-columns {
&-shift-left-#{$i} {
@include shift(-$i);
}
&-shift-right-#{$i} {
@include shift($i);
}
@media only screen and (max-width: 640px) {
&-shift-left-#{$i},
&-shift-right-#{$i} {
@include shift(0);
}
}
}
}
```