Skip to content

Commit

Permalink
refactor scss to mobile-first (jekyll#130)
Browse files Browse the repository at this point in the history 
* refactor SCSS to mobile-first

Styles meant for small screens is moved from media queries to become the
default styles, and styles affecting larger screens are moved into media
queries.

* Remove all uses of desktop-first media-query mixin
* set new variables to value of old variables
* add comment as deprecation warning for media query mixin
  • Loading branch information
@Strangehill @DirtyF
Strangehill authored and DirtyF committed Oct 29, 2018
1 parent 6147346 commit f44089e
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 74 deletions.
5 changes: 5 additions & 0 deletions _sass/minima.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,18 @@ $content-width: 800px !default;
$on-palm: 600px !default;
$on-laptop: 800px !default;

$on-medium: $on-palm !default;
$on-large: $on-laptop !default;

// Use media queries like this:
// @include media-query($on-palm) {
// .wrapper {
// padding-right: $spacing-unit / 2;
// padding-left: $spacing-unit / 2;
// }
// }
// Notice the following mixin uses max-width, in a deprecated, desktop-first
// approach, whereas media queries used elsewhere now use min-width.
@mixin media-query($device) {
@media screen and (max-width: $device) {
@content;
Expand Down
18 changes: 9 additions & 9 deletions _sass/minima/_base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,19 +175,19 @@ pre {
* Wrapper
*/
.wrapper {
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
max-width: calc(#{$content-width} - (#{$spacing-unit}));
margin-right: auto;
margin-left: auto;
padding-right: $spacing-unit;
padding-left: $spacing-unit;
padding-right: $spacing-unit / 2;
padding-left: $spacing-unit / 2;
@extend %clearfix;

@include media-query($on-laptop) {
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
max-width: calc(#{$content-width} - (#{$spacing-unit}));
padding-right: $spacing-unit / 2;
padding-left: $spacing-unit / 2;
@media screen and (min-width: $on-large) {
max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
padding-right: $spacing-unit;
padding-left: $spacing-unit;
}
}

Expand Down
146 changes: 81 additions & 65 deletions _sass/minima/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,77 +29,94 @@
}

.site-nav {
float: right;
position: absolute;
top: 9px;
right: $spacing-unit / 2;
background-color: $background-color;
border: 1px solid $grey-color-light;
border-radius: 5px;
text-align: right;
line-height: $base-line-height * $base-font-size * 2.25;

.nav-trigger {
display: none;
}

.menu-icon {
float: right;
width: 36px;
height: 26px;
line-height: 0;
padding-top: 10px;
text-align: center;

> svg path {
fill: $grey-color-dark;
}
}

label[for="nav-trigger"] {
display: block;
float: right;
width: 36px;
height: 36px;
z-index: 2;
cursor: pointer;
}

input ~ .trigger {
clear: both;
display: none;
}

input:checked ~ .trigger {
display: block;
padding-bottom: 5px;
}

.page-link {
color: $text-color;
line-height: $base-line-height;
display: block;
padding: 5px 10px;

// Gaps between nav items, but not on the last one
&:not(:last-child) {
margin-right: 20px;
margin-right: 0;
}
margin-left: 20px;
}

@include media-query($on-palm) {
position: absolute;
top: 9px;
right: $spacing-unit / 2;
background-color: $background-color;
border: 1px solid $grey-color-light;
border-radius: 5px;
text-align: right;
@media screen and (min-width: $on-medium) {
position: static;
float: right;
border: none;
background-color: inherit;

label[for="nav-trigger"] {
display: block;
float: right;
width: 36px;
height: 36px;
z-index: 2;
cursor: pointer;
display: none;
}

.menu-icon {
display: block;
float: right;
width: 36px;
height: 26px;
line-height: 0;
padding-top: 10px;
text-align: center;

> svg {
fill: $grey-color-dark;
}
display: none;
}

input ~ .trigger {
clear: both;
display: none;
}

input:checked ~ .trigger {
input ~ .trigger {
display: block;
padding-bottom: 5px;
}

.page-link {
display: block;
padding: 5px 10px;
display: inline;
padding: 0;

&:not(:last-child) {
margin-right: 0;
margin-right: 20px;
}
margin-left: 20px;
margin-left: auto;
}
}
}
Expand Down Expand Up @@ -133,44 +150,43 @@
}

.footer-col {
float: left;
width: -webkit-calc(100% - (#{$spacing-unit} / 2));
width: calc(100% - (#{$spacing-unit} / 2));
margin-bottom: $spacing-unit / 2;
padding-left: $spacing-unit / 2;
}

.footer-col-1 {
width: -webkit-calc(35% - (#{$spacing-unit} / 2));
width: calc(35% - (#{$spacing-unit} / 2));
}

.footer-col-1,
.footer-col-2 {
width: -webkit-calc(20% - (#{$spacing-unit} / 2));
width: calc(20% - (#{$spacing-unit} / 2));
width: -webkit-calc(50% - (#{$spacing-unit} / 2));
width: calc(50% - (#{$spacing-unit} / 2));
}

.footer-col-3 {
width: -webkit-calc(45% - (#{$spacing-unit} / 2));
width: calc(45% - (#{$spacing-unit} / 2));
width: -webkit-calc(100% - (#{$spacing-unit} / 2));
width: calc(100% - (#{$spacing-unit} / 2));
}

@include media-query($on-laptop) {
.footer-col-1,
@media screen and (min-width: $on-large) {
.footer-col-1 {
width: -webkit-calc(35% - (#{$spacing-unit} / 2));
width: calc(35% - (#{$spacing-unit} / 2));
}

.footer-col-2 {
width: -webkit-calc(50% - (#{$spacing-unit} / 2));
width: calc(50% - (#{$spacing-unit} / 2));
width: -webkit-calc(20% - (#{$spacing-unit} / 2));
width: calc(20% - (#{$spacing-unit} / 2));
}

.footer-col-3 {
width: -webkit-calc(100% - (#{$spacing-unit} / 2));
width: calc(100% - (#{$spacing-unit} / 2));
width: -webkit-calc(45% - (#{$spacing-unit} / 2));
width: calc(45% - (#{$spacing-unit} / 2));
}
}

@include media-query($on-palm) {
@media screen and (min-width: $on-medium) {
.footer-col {
float: none;
width: -webkit-calc(100% - (#{$spacing-unit} / 2));
width: calc(100% - (#{$spacing-unit} / 2));
float: left;
}
}

Expand Down Expand Up @@ -226,35 +242,35 @@
letter-spacing: -1px;
line-height: 1;

@include media-query($on-laptop) {
@include relative-font-size(2.25);
@media screen and (min-width: $on-large) {
@include relative-font-size(2.625);
}
}

.post-content {
margin-bottom: $spacing-unit;

h2 {
@include relative-font-size(2);
@include relative-font-size(1.75);

@include media-query($on-laptop) {
@include relative-font-size(1.75);
@media screen and (min-width: $on-large) {
@include relative-font-size(2);
}
}

h3 {
@include relative-font-size(1.625);
@include relative-font-size(1.375);

@include media-query($on-laptop) {
@include relative-font-size(1.375);
@media screen and (min-width: $on-large) {
@include relative-font-size(1.625);
}
}

h4 {
@include relative-font-size(1.25);
@include relative-font-size(1.125);

@include media-query($on-laptop) {
@include relative-font-size(1.125);
@media screen and (min-width: $on-large) {
@include relative-font-size(1.25);
}
}
}

0 comments on commit f44089e

Please sign in to comment.