_responsive.scss

/*
    This file provides scaling functionality for different media types.
    To achieve this, it provides default scaling factors for phones and tablets,
    as well as the "scale-to-medium" mixin.

    The mixin generates media queries for a $property with a given $base_value.
    If the optional $tablet_value or $phone_value is given as parameter,
    it will take the place of the value in the media query.
    Otherwise a value for the media query will be calculated by multiplying the
    base value with the appropriate scaling factor.
    
    Usage:
        @include respond-to-medium(width, 10rem);
    or
        @include respond-to-medium(color, red, blue, green);
        Will become red on desktops, blue on tablets and green on phones.
*/


/* --- Scaling factors for visual elements --- */
$tablet-scale:      0.8;
$phone-scale:       0.6;

@mixin respond-to-medium($property, $base_value, $tablet_value: null, $phone_value: null) {
    #{$property}: #{$base_value};

    @if $tablet_value {
        @include medium-is-tablet {
            #{$property}: #{$tablet_value};
        }
    }
    @else {
        @include medium-is-tablet {
            #{$property}: #{$base_value * $tablet-scale};
        }
    }

    @if $phone_value {
        @include medium-is-phone {
            #{$property}: #{$phone_value};
        }
    }
    @else {
        @include medium-is-phone {
            #{$property}: #{$base_value * $phone-scale};
        }
    }
}