dan
/
jekyll
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding and using media-query mixin

This commit is contained in:
kleinfreund 2014-08-03 23:07:47 +02:00
parent 7d865269fd
commit e4029426de
5 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/site_template/_sass/_base.scss
View File

@ -84,7 +84,7 @@ li {
padding-left: $spacing-unit;
@extend %clearfix;
@media screen and (max-width: 800px) {
@include media-query($on-laptop) {
padding-right: $spacing-unit / 2;
padding-left: $spacing-unit / 2;
}

8
lib/site_template/_sass/_posts.scss
View File

@ -10,7 +10,7 @@
letter-spacing: -1px;
line-height: 1;
@media screen and (max-width: 800px) {
@include media-query($on-laptop) {
font-size: 36px;
}
}
@ -21,7 +21,7 @@
h2 {
font-size: 32px;
@media screen and (max-width: 800px) {
@include media-query($on-laptop) {
font-size: 28px;
}
}
@ -29,7 +29,7 @@
h3 {
font-size: 26px;
@media screen and (max-width: 800px) {
@include media-query($on-laptop) {
font-size: 22px;
}
}
@ -37,7 +37,7 @@
h4 {
font-size: 20px;
@media screen and (max-width: 800px) {
@include media-query($on-laptop) {
font-size: 18px;
}
}

4
lib/site_template/_sass/_site-footer.scss
View File

@ -42,7 +42,7 @@
width: 45%;
}
@media screen and (max-width: 800px) {
@include media-query($on-laptop) {
.footer-col-1,
.footer-col-2 {
width: 50%;
@ -53,7 +53,7 @@
}
}
@media screen and (max-width: 600px) {
@include media-query($on-palm) {
.footer-col {
float: none;
width: 100%;

2
lib/site_template/_sass/_site-header.scss
View File

@ -41,7 +41,7 @@
}
}
@media screen and (max-width: 600px) {
@include media-query($on-palm) {
position: absolute;
top: 9px;
right: 30px;

20
lib/site_template/css/main.scss
View File

@ -1,5 +1,5 @@
---
# The main Sass file needs front matter (the dashes are enough)
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "utf-8";
@ -21,6 +21,24 @@ $grey-color: #828282;
$grey-color-light: lighten($grey-color, 40%);
$grey-color-dark: darken($grey-color, 25%);
$on-palm: 600px;
$on-laptop: 800px;
// Using media queries with like this:
// @include media-query($palm) {
// .wrapper {
// padding-right: $spacing-unit / 2;
// padding-left: $spacing-unit / 2;
// }
// }
@mixin media-query($device) {
@media screen and (max-width: $device) {
@content;
}
}
// Import partials from `sass_dir` (defaults to `_sass`)