mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-30 10:58:23 -05:00
ccedbacb7d
hsl and hsla now require a % for the saturation and lightness values division is now handled with the function math.div() rather than a slash This removes many deprecation warnings
140 lines
3.6 KiB
SCSS
140 lines
3.6 KiB
SCSS
/*
|
|
Frameless <http://framelessgrid.com/>
|
|
by Joni Korpi <http://jonikorpi.com/>
|
|
licensed under CC0 <http://creativecommons.org/publicdomain/zero/1.0/>
|
|
*/
|
|
|
|
|
|
//
|
|
// Configuration
|
|
//
|
|
|
|
@use "sass:math";
|
|
|
|
$font-size: 16px; // Your base font-size in pixels
|
|
$em: math.div($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: math.div( 1 * ($column + $gutter) - $gutter, $em);
|
|
$cols2: math.div( 2 * ($column + $gutter) - $gutter, $em);
|
|
$cols3: math.div( 3 * ($column + $gutter) - $gutter, $em);
|
|
$cols4: math.div( 4 * ($column + $gutter) - $gutter, $em);
|
|
$cols5: math.div( 5 * ($column + $gutter) - $gutter, $em);
|
|
$cols6: math.div( 6 * ($column + $gutter) - $gutter, $em);
|
|
$cols7: math.div( 7 * ($column + $gutter) - $gutter, $em);
|
|
$cols8: math.div( 8 * ($column + $gutter) - $gutter, $em);
|
|
$cols9: math.div( 9 * ($column + $gutter) - $gutter, $em);
|
|
$cols10: math.div(10 * ($column + $gutter) - $gutter, $em);
|
|
$cols11: math.div(11 * ($column + $gutter) - $gutter, $em);
|
|
$cols12: math.div(12 * ($column + $gutter) - $gutter, $em);
|
|
|
|
$desktop: 942px;
|
|
$tabletPortrait: 768px;
|
|
$mobileIntermediate: 640px;
|
|
$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: math.div($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");
|