mattpilott

<script>
	// This component allows a design to be overlaid on the page
	// This helps you to achieve a pixel perfect design implementation
	// It accepts 2 params for setting the desktop and mobile image paths
	// There are desktop and mobile css variables that can be used to set the design width
	// The --desktop and --mobile vars default to 1920 and 393 respectively
	// To show/hide the overlay press 1 - 9 on the keyboard. 0 = 100%, 00 = 0% opacity
	// You can shift the overlay up or down too; hold shift and press the left or right arrows
	// Additiionally for a smaller shift up or down hold ctrl alongside shift
	// Finally you can reset the overlay shift with shift + both the left & right arrows

mattpilott

$wrap: 1920px;

@function strip($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

mattpilott

$wrap: 1920;

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

mattpilott

$wrap: 1920;

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

mattpilott

$wrap: 1920;

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }

  @return $number;
}

mattpilott

$wrap: 1920;

@mixin clamp($prop, $min, $max, $multi: 100vw) {
    $multi: ($max / $wrap) * 100;
    
    #{$prop}: min(max(#{$min}, #{$multi}), #{$max});
    #{$prop}: clamp(#{$min}, #{$multi}, #{$max});
}

html {

mattpilott

@mixin clamp($prop, $min, $max, $multi: 100vw) {
    
    @supports ($prop: clamp(0, 0, 0)) {
        #{$prop}: clamp(#{$min}, #{$multi}, #{$max});
    }
    
    @supports not ($prop: clamp(0, 0, 0)) {
        #{$prop}: min(max(#{$min}, #{$multi}), #{$max});
    }
}

mattpilott

@mixin clamp($prop, $min, $max, $multi: 100vw) {
    @supports ($prop: clamp(0, 0, 0)) {
        #{$prop}: clamp(#{$min}, #{$multi}, #{$max});
    }
    
    @supports not ($prop: clamp(0, 0, 0)) {
        #{$prop}: $min;
    
        @media (min-width: 48em) {
            #{$prop}: $multi;

mattpilott

@mixin clamp($prop, $min, $max, $multi: 100vw) {
   @supports ($prop: clamp(0, 0, 0)) {
      #{$prop}: clamp(#{$min}, #{$multi}, #{$max});
   }

   @supports not ($prop: clamp(0, 0, 0)) {
      #{$prop}: $min;

      @media (min-width: 48em) {
         #{$prop}: $multi;

mattpilott

@mixin clamp($prop, $min, $max, $multi: 100vw) {
   @supports ($prop: clamp(0, 0, 0)) {
      #{$prop}: clamp(#{$min}, #{$multi}, #{$max});
   }

   @supports not ($prop: clamp(0, 0, 0)) {
      #{$prop}: $min;

      @media (min-width: 48em) {
         #{$prop}: $multi;