Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----
@function grid-calc($colNumber, $totalColumns) {
@return percentage(($colNumber / $totalColumns));
}
.stream-image-right {
float: right;
margin-left: 1em;
width: grid-calc(3, 12);
}
// Media Query Ranges row-width is 94em
$small-range: (0em, 43em);
$medium-range: (43.063em, 60em);
$large-range: (60.063em, 77em);
$xlarge-range: (77.063em, 94em);
$xxlarge-range: (94.063em);
//
// @functions
//
@function lower-bound($range){
@if length($range) <= 0 {
@return 0;
}
@return nth($range,1);
}
@function upper-bound($range) {
@if length($range) < 2 {
@return 999999999999;
}
@return nth($range, 2);
}
$screen: "only screen";
$landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";
$small-up: $screen;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";
$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";
$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
%font-size-2x-larger {
font-size: rem-calc(22);
@media #{$medium-up} {
font-size: rem-calc(25);
}
@media #{$large-up} {
font-size: rem-calc(26);
}
}
%font-size-1x-larger {
font-size: rem-calc(21);
}
%font-size-larger {
font-size: rem-calc(18);
}
.full-width-image {
background-size: cover;
background-position: 50% 50%;
height: 10em;
@media #{$medium-up} {
height: 20em;
}
@media #{$large-up} {
height: 30em;
}
@media #{$xlarge-up} {
height: 40em;
}
}
.stream-image-right {
float: right;
margin-left: 1em;
width: 25%;
}
.full-width-image {
background-size: cover;
background-position: 50% 50%;
height: 10em;
}
@media only screen and (min-width: 43.063em) {
.full-width-image {
height: 20em;
}
}
@media only screen and (min-width: 60.063em) {
.full-width-image {
height: 30em;
}
}
@media only screen and (min-width: 77.063em) {
.full-width-image {
height: 40em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.