_breakpoints.scss

/*
    This file defines all the breakpoints used for widths to accomodate for
    different mobile devices.
    The basic breakpoint policy orients itself on 
    https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/
    
    NOTE: smallest display encountered so far was 220x176 px (Sony SmartWatch 2)
*/

/* $bp-min-phone:      0px; /* implicit */
$bp-max-phone:       599px;
$bp-min-tablet:      600px;
$bp-max-tablet:     1199px;
$bp-min-desktop:    1200px;
$bp-max-desktop:    1799px;
$bp-min-disp_2k:    1800px;
$bp-max-disp_2k:    2399px;


@mixin medium-is-phone { 
    @media  (max-width: #{$bp-max-phone})
        { @content; } 
}

@mixin medium-is-tablet { 
    @media  (min-width: #{$bp-min-tablet}) and 
            (max-width: #{$bp-max-tablet})
        { @content; } 
}

@mixin medium-is-tablet-minus {
    @media  (max-width: #{$bp-max-tablet})
        { @content; }
}

@mixin medium-is-tablet-plus {
    @media  (min-width: #{$bp-min-tablet})
        { @content; }
}

@mixin medium-is-desktop-plus {
    @media  (min-width: #{$bp-min-desktop})
        { @content; }
}

@mixin medium-is-widescreen {
    @media  (min-width: #{$bp-min-disp_2k})
        { @content; }
}