mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 07:38:07 -05:00
138 lines
3.5 KiB
SCSS
138 lines
3.5 KiB
SCSS
/*
|
|
Frameless <http://framelessgrid.com/>
|
|
by Joni Korpi <http://jonikorpi.com/>
|
|
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
|
|
*/
|
|
|
|
|
|
//
|
|
// Configuration
|
|
//
|
|
|
|
$font-size: 16px; // Your base font-size in pixels
|
|
$em: $font-size / 1em; // Shorthand for outputting ems
|
|
|
|
$column: 60px; // The column-width of your grid in pixels
|
|
$gutter: 20px; // The gutter-width of your grid in pixels
|
|
|
|
|
|
|
|
//
|
|
// Column-widths in variables, in ems
|
|
//
|
|
|
|
$cols1: ( 1 * ($column + $gutter) - $gutter) / $em;
|
|
$cols2: ( 2 * ($column + $gutter) - $gutter) / $em;
|
|
$cols3: ( 3 * ($column + $gutter) - $gutter) / $em;
|
|
$cols4: ( 4 * ($column + $gutter) - $gutter) / $em;
|
|
$cols5: ( 5 * ($column + $gutter) - $gutter) / $em;
|
|
$cols6: ( 6 * ($column + $gutter) - $gutter) / $em;
|
|
$cols7: ( 7 * ($column + $gutter) - $gutter) / $em;
|
|
$cols8: ( 8 * ($column + $gutter) - $gutter) / $em;
|
|
$cols9: ( 9 * ($column + $gutter) - $gutter) / $em;
|
|
$cols10: (10 * ($column + $gutter) - $gutter) / $em;
|
|
$cols11: (11 * ($column + $gutter) - $gutter) / $em;
|
|
$cols12: (12 * ($column + $gutter) - $gutter) / $em;
|
|
|
|
$desktop: 942px;
|
|
$mobileIntermediate: 640px;
|
|
$tabletPortrait: 768px;
|
|
$mobile: 480px;
|
|
|
|
/* Media Queries */
|
|
|
|
/* Width */
|
|
/*
|
|
* ... small | medium | intermediate | big ...
|
|
* ... medium-and-smaller |
|
|
* ... intermediate-and-smaller |
|
|
*/
|
|
|
|
$small: "only screen and (max-width : #{$mobile}-1)";
|
|
$medium: "only screen and (min-width : #{$mobile}) and (max-width : #{$tabletPortrait}-1)";
|
|
$intermediate: "only screen and (min-width : #{$tabletPortrait}) and (max-width : #{$desktop}-1)";
|
|
$big: "only screen and (min-width : #{$desktop})";
|
|
|
|
$medium-and-smaller: "only screen and (max-width : #{$tabletPortrait}-1)";
|
|
$intermediate-and-smaller: "only screen and (max-width : #{$desktop}-1)";
|
|
|
|
$medium-and-intermediate: "only screen and (min-width : #{$mobile}) and (max-width : #{$desktop}-1)";
|
|
|
|
/* Height */
|
|
|
|
$small-height: "only screen and (max-height : #{$mobile} - 1)";
|
|
$medium-height: "only screen and (min-height : #{$mobile}) and (max-height : #{$tabletPortrait} - 1)";
|
|
|
|
|
|
//
|
|
// Column-widths in a function, in ems
|
|
//
|
|
|
|
@mixin width ($cols: 1) {
|
|
width: ($cols * ($column + $gutter) - $gutter) / $em;
|
|
}
|
|
|
|
//4 columns
|
|
@mixin submobile ($parent-selector, $child-selector) {
|
|
@media #{$small} {
|
|
#{$parent-selector} {
|
|
text-align: center;
|
|
}
|
|
|
|
#{$child-selector} {
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
@content;
|
|
}
|
|
}
|
|
|
|
//6 columns
|
|
@mixin mobile ($parent-selector, $child-selector) {
|
|
@media #{$medium} {
|
|
#{$parent-selector} {
|
|
text-align: center;
|
|
}
|
|
|
|
#{$child-selector} {
|
|
margin: 0 auto;
|
|
width: $mobile;
|
|
}
|
|
|
|
@content;
|
|
}
|
|
}
|
|
|
|
//8 columns
|
|
@mixin tablet ($parent-selector, $child-selector) {
|
|
@media #{$intermediate} {
|
|
#{$parent-selector} {
|
|
text-align: center;
|
|
}
|
|
|
|
#{$child-selector} {
|
|
margin: 0 auto;
|
|
width: $tabletPortrait;
|
|
}
|
|
}
|
|
}
|
|
|
|
//12 columns
|
|
@mixin desktop ($parent-selector, $child-selector) {
|
|
@media #{$big} {
|
|
#{$child-selector} {
|
|
margin: 0 auto;
|
|
width: $desktop;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin responsive-layout ($parent-selector, $child-selector) {
|
|
@include submobile($parent-selector, $child-selector);
|
|
@include mobile($parent-selector, $child-selector);
|
|
@include tablet($parent-selector, $child-selector);
|
|
@include desktop($parent-selector, $child-selector);
|
|
}
|
|
|
|
@include responsive-layout("#view", ".inner");
|